From e638475a67c1c0209ba58a0254c769d1b4609b4d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 17 Jun 2022 14:24:54 +0200 Subject: [PATCH] :sparkles: Handoff handling nested frames --- frontend/src/app/main/render.cljs | 46 ++++++++++++------- frontend/src/app/main/ui/shapes/shape.cljs | 2 +- .../app/main/ui/viewer/handoff/render.cljs | 16 ++++--- .../src/app/main/ui/viewer/thumbnails.cljs | 7 +-- 4 files changed, 43 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index ba5d938cc..d53c44ba6 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -277,18 +277,33 @@ (gpt/negate) (gmt/translate-matrix))) + children-ids + (cph/get-children-ids objects frame-id) + objects (mf/with-memo [frame-id objects modifier] (let [update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)] - (->> (cph/get-children-ids objects frame-id) + (->> children-ids (into [frame-id]) (reduce update-fn objects)))) frame (mf/with-memo [modifier] - (assoc-in frame [:modifiers :displacement] modifier)) + (-> frame + (assoc-in [:modifiers :displacement] modifier) + (gsh/transform-shape))) - wrapper + bounds + (if (:show-content frame) + (gsh/selection-rect (concat [frame] (->> children-ids (map (d/getf objects))))) + (-> frame :points gsh/points->rect)) + + frame + (cond-> frame + (and (some? bounds) (nil? (:children-bounds bounds))) + (assoc :children-bounds bounds)) + + frame-wrapper (mf/with-memo [objects] (frame-wrapper-factory objects)) @@ -296,21 +311,18 @@ height (* (:height bounds) zoom) vbox (format-viewbox {:width (:width bounds 0) :height (:height bounds 0)})] - [:svg {:view-box vbox - :width (ust/format-precision width viewbox-decimal-precision) - :height (ust/format-precision height viewbox-decimal-precision) - :version "1.1" - :xmlns "http://www.w3.org/2000/svg" - :xmlnsXlink "http://www.w3.org/1999/xlink" - :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns") - :fill "none"} - (if (or (not show-thumbnails?) (nil? (:thumbnail frame))) - [:& wrapper {:shape frame :view-box vbox}] + [:& (mf/provider muc/render-thumbnails) {:value show-thumbnails?} + [:svg {:view-box vbox + :width (ust/format-precision width viewbox-decimal-precision) + :height (ust/format-precision height viewbox-decimal-precision) + :version "1.1" + :xmlns "http://www.w3.org/2000/svg" + :xmlnsXlink "http://www.w3.org/1999/xlink" + :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns") + :fill "none"} - ;; Render the frame thumbnail - (let [frame (gsh/transform-shape frame)] - [:> shape-container {:shape frame} - [:& frame/frame-thumbnail {:shape frame :bounds (assoc bounds :x 0 :y 0)}]]))])) + [:> shape-container {:shape frame} + [:& frame-wrapper {:shape frame :view-box vbox}]]]])) ;; Component for rendering a thumbnail of a single componenent. Mainly diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 902dc6727..820b62746 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -7,8 +7,8 @@ (ns app.main.ui.shapes.shape (:require [app.common.data :as d] - [app.common.pages.helpers :as cph] [app.common.data.macros :as dm] + [app.common.pages.helpers :as cph] [app.common.uuid :as uuid] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] diff --git a/frontend/src/app/main/ui/viewer/handoff/render.cljs b/frontend/src/app/main/ui/viewer/handoff/render.cljs index 6fb837fd5..3cfb179bf 100644 --- a/frontend/src/app/main/ui/viewer/handoff/render.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/render.cljs @@ -30,24 +30,26 @@ (declare shape-container-factory) (defn handle-hover-shape - [{:keys [type id]} hover?] + [shape hover?] (fn [event] - (when-not (#{:group :frame} type) + (when-not (or (cph/group-shape? shape) + (cph/root-frame? shape)) (dom/prevent-default event) (dom/stop-propagation event) - (st/emit! (dv/hover-shape id hover?))))) + (st/emit! (dv/hover-shape (:id shape) hover?))))) -(defn select-shape [{:keys [type id]}] +(defn select-shape [shape] (fn [event] - (when-not (#{:group :frame} type) + (when-not (or (cph/group-shape? shape) + (cph/root-frame? shape)) (dom/stop-propagation event) (dom/prevent-default event) (cond (.-shiftKey ^js event) - (st/emit! (dv/toggle-selection id)) + (st/emit! (dv/toggle-selection (:id shape))) :else - (st/emit! (dv/select-shape id)))))) + (st/emit! (dv/select-shape (:id shape))))))) (defn shape-wrapper-factory [component] diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index b0b6828ba..afd76945f 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -6,10 +6,10 @@ (ns app.main.ui.viewer.thumbnails (:require - [app.common.pages.helpers :as cph] - [app.common.geom.shapes :as gsh] [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.geom.shapes :as gsh] + [app.common.pages.helpers :as cph] [app.main.data.viewer :as dv] [app.main.render :as render] [app.main.store :as st] @@ -85,7 +85,8 @@ [:div.thumbnail-preview {:class (dom/classnames :selected selected?)} [:& render/frame-svg {:frame (-> frame - (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))) + (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))) + (assoc :children-bounds children-bounds)) :objects objects :show-thumbnails? true}]] [:div.thumbnail-info