From a34fb729ea613b24699afa4532030eb74bd163dc Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 6 Apr 2020 14:30:46 +0200 Subject: [PATCH] :bug: Fix preview and viewer rendering. --- frontend/src/uxbox/main/exports.cljs | 30 ++++++------ frontend/src/uxbox/main/geom.cljs | 13 ++++-- frontend/src/uxbox/main/ui/shapes/frame.cljs | 46 ++++++++++--------- frontend/src/uxbox/main/ui/shapes/shape.cljs | 20 ++++---- .../src/uxbox/main/ui/viewer/thumbnails.cljs | 14 +++--- 5 files changed, 64 insertions(+), 59 deletions(-) diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index b5570b92f..0b169e310 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/geom.cljs b/frontend/src/uxbox/main/geom.cljs index c10a4a3db..43d33730b 100644 --- a/frontend/src/uxbox/main/geom.cljs +++ b/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)))) diff --git a/frontend/src/uxbox/main/ui/shapes/frame.cljs b/frontend/src/uxbox/main/ui/shapes/frame.cljs index f0b4b135e..c2a85b36b 100644 --- a/frontend/src/uxbox/main/ui/shapes/frame.cljs +++ b/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)}])]))) diff --git a/frontend/src/uxbox/main/ui/shapes/shape.cljs b/frontend/src/uxbox/main/ui/shapes/shape.cljs index e83591956..6dd1365d9 100644 --- a/frontend/src/uxbox/main/ui/shapes/shape.cljs +++ b/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)) diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index 85c9b823e..b21fea9bc 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/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}]