🐛 Fix preview and viewer rendering.

frontend/src/uxbox/main/exports.cljs

@@ -52,23 +52,21 @@
   (let [children (mapv #(get objects %) (:shapes shape))]
     [:& group-shape {:shape shape :children children}]))
 
-(declare group-shape)
-(declare frame-shape)
-
 (mf/defc shape-wrapper
-  [{:keys [shape objects] :as props}]
+  [{:keys [frame shape objects] :as props}]
+  (prn "shape-wrapper" frame)
   (when (and shape (not (:hidden shape)))
-    (case (:type shape)
-      :frame [:& rect/rect-shape {:shape shape}]
-      :curve [:& path/path-shape {:shape shape}]
-      :text [:& text/text-shape {:shape shape}]
-      :icon [:& icon/icon-shape {:shape shape}]
-      :rect [:& rect/rect-shape {:shape shape}]
-      :path [:& path/path-shape {:shape shape}]
-      :image [:& image/image-shape {:shape shape}]
-      :circle [:& circle/circle-shape {:shape shape}]
-      :group [:& group-shape {:shape shape :objects objects}]
-      nil)))
+    (let [shape (geom/transform-shape frame shape)]
+      (case (:type shape)
+        :curve [:& path/path-shape {:shape shape}]
+        :text [:& text/text-shape {:shape shape}]
+        :icon [:& icon/icon-shape {:shape shape}]
+        :rect [:& rect/rect-shape {:shape shape}]
+        :path [:& path/path-shape {:shape shape}]
+        :image [:& image/image-shape {:shape shape}]
+        :circle [:& circle/circle-shape {:shape shape}]
+        :group [:& group-wrapper {:shape shape :objects objects}]
+        nil))))
 
 (def group-shape (group/group-shape shape-wrapper))
 (def frame-shape (frame/frame-shape shape-wrapper))
@@ -85,7 +83,7 @@
            :xmlnsXlink "http://www.w3.org/1999/xlink"
            :xmlns "http://www.w3.org/2000/svg"}
      [:& background]
-     (for [item (reverse shapes)]
+     (for [item shapes]
        (if (= (:type item) :frame)
          [:& frame-wrapper {:shape item
                             :key (:id item)

frontend/src/uxbox/main/geom.cljs

@@ -587,10 +587,13 @@
          (< ry1 sy2)
          (> ry2 sy1))))
 
-(defn transform-shape [frame shape]
+(defn transform-shape
+  [frame shape]
   (let [ds-modifier (:displacement-modifier shape)
-        rz-modifier (:resize-modifier shape)]
+        rz-modifier (:resize-modifier shape)
+        ds-modifier' (:displacement-modifier frame)]
     (cond-> shape
-      (gmt/matrix? rz-modifier) (transform rz-modifier)
-      frame (move (gpt/point (- (:x frame)) (- (:y frame))))
-      (gmt/matrix? ds-modifier) (transform ds-modifier))))
+      (gmt/matrix? ds-modifier') (transform ds-modifier')
+      (gmt/matrix? rz-modifier)  (transform rz-modifier)
+      frame                      (move (gpt/point (- (:x frame)) (- (:y frame))))
+      (gmt/matrix? ds-modifier)  (transform ds-modifier))))

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

@@ -53,7 +53,8 @@
                    false)))))))))
 
 
-(defn frame-wrapper [shape-wrapper]
+(defn frame-wrapper
+  [shape-wrapper]
   (mf/fnc frame-wrapper
     {::mf/wrap [wrap-memo-frame]}
     [{:keys [shape objects] :as props}]
@@ -97,28 +98,29 @@
            [:& (frame-shape shape-wrapper) {:shape shape
                                             :childs childs}]])))))
 
-(defn frame-shape [shape-wrapper]
- (mf/fnc frame-shape
-   [{:keys [shape childs] :as props}]
-   (let [rotation    (:rotation shape)
-         ds-modifier (:displacement-modifier shape)
-         rz-modifier (:resize-modifier shape)
-         shape (cond-> shape
-                 (gmt/matrix? rz-modifier) (geom/transform rz-modifier)
-                 (gmt/matrix? ds-modifier) (geom/transform ds-modifier))
+(defn frame-shape
+  [shape-wrapper]
+  (mf/fnc frame-shape
+    [{:keys [shape childs] :as props}]
+    (let [rotation    (:rotation shape)
+          ds-modifier (:displacement-modifier shape)
+          rz-modifier (:resize-modifier shape)
+          shape (cond-> shape
+                  (gmt/matrix? rz-modifier) (geom/transform rz-modifier)
+                  (gmt/matrix? ds-modifier) (geom/transform ds-modifier))
 
-         {:keys [id x y width height]} shape
+          {:keys [id x y width height]} shape
 
-         props (-> (attrs/extract-style-attrs shape)
-                   (itr/obj-assign!
-                    #js {:x 0
-                         :y 0
-                         :id (str "shape-" id)
-                         :width width
-                         :height height}))]
+          props (-> (attrs/extract-style-attrs shape)
+                    (itr/obj-assign!
+                     #js {:x 0
+                          :y 0
+                          :id (str "shape-" id)
+                          :width width
+                          :height height}))]
 
-     [:svg {:x x :y y :width width :height height}
-      [:> "rect" props]
-      (for [item childs]
-        [:& shape-wrapper {:frame shape :shape item :key (:id item)}])])))
+      [:svg {:x x :y y :width width :height height}
+       [:> "rect" props]
+       (for [item childs]
+         [:& shape-wrapper {:frame shape :shape item :key (:id item)}])])))
 

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

@@ -36,18 +36,18 @@
 (mf/defc shape-wrapper
   {::mf/wrap [wrap-memo-shape]}
   [{:keys [shape frame] :as props}]
-  (let [opts {:shape shape :frame frame}]
+  (let [opts #js {:shape shape :frame frame}]
     (when (and shape (not (:hidden shape)))
       (case (:type shape)
-        :group [:& group-wrapper opts]
-        :curve [:& path/path-wrapper opts]
-        :text [:& text/text-wrapper opts]
-        :icon [:& icon/icon-wrapper opts]
-        :rect [:& rect/rect-wrapper opts]
-        :path [:& path/path-wrapper opts]
-        :image [:& image/image-wrapper opts]
-        :circle [:& circle/circle-wrapper opts]
-        :frame [:& frame-wrapper opts]
+        :group [:> group-wrapper opts]
+        :curve [:> path/path-wrapper opts]
+        :text [:> text/text-wrapper opts]
+        :icon [:> icon/icon-wrapper opts]
+        :rect [:> rect/rect-wrapper opts]
+        :path [:> path/path-wrapper opts]
+        :image [:> image/image-wrapper opts]
+        :circle [:> circle/circle-wrapper opts]
+        :frame [:> frame-wrapper opts]
         nil))))
 
 (def group-wrapper (group/group-wrapper shape-wrapper))

frontend/src/uxbox/main/ui/viewer/thumbnails.cljs

@@ -80,22 +80,24 @@
 (mf/defc frame-svg
   {::mf/wrap [mf/memo]}
   [{:keys [objects frame zoom] :or {zoom 1} :as props}]
-  (let [childs (mapv #(get objects %) (:shapes frame))
-        modifier (-> (gpt/point (:x frame) (:y frame))
+  (let [modifier (-> (gpt/point (:x frame) (:y frame))
                      (gpt/negate)
                      (gmt/translate-matrix))
         frame (assoc frame :displacement-modifier modifier)
 
         width (* (:width frame) zoom)
-        height (* (:height frame) zoom)]
+        height (* (:height frame) zoom)
+        vbox (str "0 0 " (:width frame 0) " " (:height frame 0))]
 
-    [:svg {:view-box (str "0 0 " (:width frame 0) " " (:height frame 0))
+    [:svg {:view-box vbox
            :width width
            :height height
            :version "1.1"
            :xmlnsXlink "http://www.w3.org/1999/xlink"
-           :xmlns "http://www.w3.org/2000/svg"}
-     [:& exports/frame-shape {:shape frame :childs childs}]]))
+                  :xmlns "http://www.w3.org/2000/svg"}
+     [:& exports/frame-wrapper {:shape frame
+                                :objects objects
+                                :view-box vbox}]]))
 
 (mf/defc thumbnails-summary
   [{:keys [on-toggle-expand on-close total] :as props}]