🐛 Fix preview and viewer rendering.

frontend/src/uxbox/main/exports.cljs

@@ -52,14 +52,12 @@
   (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)))
+    (let [shape (geom/transform-shape frame 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}]
@@ -67,8 +65,8 @@
         :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}]
+        :group [:& group-wrapper {:shape shape :objects objects}]
-      nil)))
+        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? 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,7 +98,8 @@
            [:& (frame-shape shape-wrapper) {:shape shape
                                             :childs childs}]])))))
 
-(defn frame-shape [shape-wrapper]
+(defn frame-shape
+  [shape-wrapper]
   (mf/fnc frame-shape
     [{:keys [shape childs] :as props}]
     (let [rotation    (:rotation shape)

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]
+        :group [:> group-wrapper opts]
-        :curve [:& path/path-wrapper opts]
+        :curve [:> path/path-wrapper opts]
-        :text [:& text/text-wrapper opts]
+        :text [:> text/text-wrapper opts]
-        :icon [:& icon/icon-wrapper opts]
+        :icon [:> icon/icon-wrapper opts]
-        :rect [:& rect/rect-wrapper opts]
+        :rect [:> rect/rect-wrapper opts]
-        :path [:& path/path-wrapper opts]
+        :path [:> path/path-wrapper opts]
-        :image [:& image/image-wrapper opts]
+        :image [:> image/image-wrapper opts]
-        :circle [:& circle/circle-wrapper opts]
+        :circle [:> circle/circle-wrapper opts]
-        :frame [:& frame-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))
+  (let [modifier (-> (gpt/point (:x frame) (:y frame))
-        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}]]))
+     [:& exports/frame-wrapper {:shape frame
+                                :objects objects
+                                :view-box vbox}]]))
 
 (mf/defc thumbnails-summary
   [{:keys [on-toggle-expand on-close total] :as props}]