🎉 Add svg export.

frontend/src/uxbox/main/data/workspace/texts.cljs

@@ -112,7 +112,7 @@
                                 ret)))]
         (js->clj result :keywordize-keys true)))))
 
-(defn- nodes-seq
+(defn nodes-seq
   [match? node]
   (->> (tree-seq map? :children node)
        (filter match?)))

frontend/src/uxbox/main/exports.cljs

@@ -66,6 +66,7 @@
       (let [childs (mapv #(get objects %) (:shapes shape))]
         [:& group-shape {:frame frame
                          :shape shape
+                         :is-child-selected? true
                          :childs childs}]))))
 
 (defn shape-wrapper-factory

frontend/src/uxbox/main/refs.cljs

@@ -108,10 +108,10 @@
 (defn is-child-selected?
   [id]
   (letfn [(selector [state]
-            (let [page-id (get-in state [:workspace-page :id])
-                  objects (get-in state [:workspace-data page-id :objects])
+            (let [page-id  (get-in state [:workspace-page :id])
+                  objects  (get-in state [:workspace-data page-id :objects])
                   selected (get-in state [:workspace-local :selected])
-                  shape (get objects id)
+                  shape    (get objects id)
                   children (cph/get-children id objects)]
               (some selected children)))]
     (l/derived selector st/state)))

frontend/src/uxbox/main/ui/shapes/frame.cljs

@@ -34,7 +34,9 @@
                           :id (str "shape-" id)
                           :width width
                           :height height}))]
-      [:svg {:x x :y y :width width :height height}
+      [:svg {:x x :y y :width width :height height
+             :xmlnsXlink "http://www.w3.org/1999/xlink"
+             :xmlns "http://www.w3.org/2000/svg"}
        [:> "rect" props]
        (for [[i item] (d/enumerate childs)]
          [:& shape-wrapper {:frame shape

frontend/src/uxbox/main/ui/shapes/group.cljs

@@ -30,7 +30,6 @@
          [:& shape-wrapper {:frame frame
                             :shape item
                             :key (:id item)}])
-
        (when (not is-child-selected?)
          [:rect {:transform transform
                  :x x

frontend/src/uxbox/main/ui/shapes/text.cljs

@@ -94,7 +94,11 @@
         (case type
           "root"
           (let [style (generate-root-styles (clj->js node))]
-            [:div.root.rich-text {:key index :style style} children])
+            [:div.root.rich-text
+             {:key index
+              :style style
+              :xmlns "http://www.w3.org/1999/xhtml"}
+             children])
 
           "paragraph-set"
           (let [style #js {:display "inline-block"
@@ -114,6 +118,13 @@
   (let [root (obj/get props "content")]
     (render-text-node root)))
 
+(defn- retrieve-colors
+  [shape]
+  (let [colors (into #{} (comp (map :fill)
+                               (filter string?))
+                     (tree-seq map? :children (:content shape)))]
+    (apply str (interpose "," colors))))
+
 (mf/defc text-shape
   {::mf/wrap-props false}
   [props]
@@ -122,6 +133,7 @@
         {:keys [id x y width height rotation content]} shape]
     [:foreignObject {:x x
                      :y y
+                     :data-colors (retrieve-colors shape)
                      :transform (geom/transform-matrix shape)
                      :id (str id)
                      :width width

frontend/src/uxbox/main/ui/workspace/shapes/group.cljs

@@ -39,18 +39,21 @@
       [props]
       (let [shape (unchecked-get props "shape")
             frame (unchecked-get props "frame")
-            on-mouse-down   (mf/use-callback (mf/deps shape)
-                                             #(common/on-mouse-down % shape))
-            on-context-menu (mf/use-callback (mf/deps shape)
-                                             #(common/on-context-menu % shape))
 
-            childs-ref   (mf/use-memo (mf/deps shape)
-                                      #(refs/objects-by-id (:shapes shape)))
+            on-mouse-down
+            (mf/use-callback (mf/deps shape) #(common/on-mouse-down % shape))
+
+            on-context-menu
+            (mf/use-callback (mf/deps shape) #(common/on-context-menu % shape))
+
+            childs-ref   (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
             childs       (mf/deref childs-ref)
 
-            is-child-selected-ref (mf/use-memo (mf/deps (:id shape))
-                                               #(refs/is-child-selected? (:id shape)))
-            is-child-selected?    (mf/deref is-child-selected-ref)
+            is-child-selected-ref
+            (mf/use-memo (mf/deps (:id shape)) #(refs/is-child-selected? (:id shape)))
+
+            is-child-selected?
+            (mf/deref is-child-selected-ref)
 
             on-double-click
             (mf/use-callback

frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs

@@ -25,7 +25,7 @@
 (defn- request-export
   [shape exports]
   (http/send! {:method :post
-               :uri "/export/bitmap"
+               :uri "/export"
                :response-type :blob
                :auth true
                :body {:page-id (:page-id shape)
@@ -140,7 +140,8 @@
            [:select.input-select {:value (name (:type export))
                                   :on-change (partial on-type-change index)}
             [:option {:value "png"} "PNG"]
-            [:option {:value "jpeg"} "JPEG"]]
+            [:option {:value "jpeg"} "JPEG"]
+            [:option {:value "svg"} "SVG"]]
            [:div.delete-icon {:on-click (partial delete-export index)}
             i/minus]])