diff --git a/frontend/src/app/main/ui/exports/assets.cljs b/frontend/src/app/main/ui/exports/assets.cljs index feb7f52906..1ff389679b 100644 --- a/frontend/src/app/main/ui/exports/assets.cljs +++ b/frontend/src/app/main/ui/exports/assets.cljs @@ -17,7 +17,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.icons :as deprecated-icon] - [app.main.ui.workspace.shapes :refer [shape-wrapper]] + [app.main.ui.workspace.shapes :refer [shape-wrapper*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] [app.util.strings :as ust] @@ -140,7 +140,7 @@ :style {:-webkit-print-color-adjust :exact} :fill "none"} - [:& shape-wrapper {:shape shape}]])] + [:> shape-wrapper* {:shape shape}]])] [:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))] diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index d1889e620e..144fd56ad1 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/frontend/src/app/main/ui/workspace/shapes.cljs @@ -30,10 +30,9 @@ [app.main.ui.workspace.shapes.path :as path] [app.main.ui.workspace.shapes.svg-raw :as svg-raw] [app.main.ui.workspace.shapes.text :as text] - [app.util.object :as obj] [rumext.v2 :as mf])) -(declare shape-wrapper) +(declare shape-wrapper*) (declare group-wrapper) (declare svg-raw-wrapper) (declare bool-wrapper) @@ -55,14 +54,11 @@ (dm/get-prop shape :selrect))] (grc/overlaps-rects? vbox bounds)))) -(mf/defc root-shape +(mf/defc root-shape* "Draws the root shape of the viewport and recursively all the shapes" - {::mf/wrap [mf/memo] - ::mf/wrap-props false} - [props] - (let [objects (obj/get props "objects") - active-frames (obj/get props "active-frames") - shapes (cfh/get-immediate-children objects) + {::mf/wrap [mf/memo]} + [{:keys [objects active-frames]}] + (let [shapes (cfh/get-immediate-children objects) vbox (mf/use-ctx ctx/current-vbox) frame-overlap? (mf/with-memo [vbox objects] @@ -90,14 +86,12 @@ {:shape shape :objects objects :thumbnail? (not (contains? active-frames (dm/get-prop shape :id)))}] - [:& shape-wrapper {:shape shape}])])]]])) + [:> shape-wrapper* {:shape shape}])])]]])) -(mf/defc shape-wrapper - {::mf/wrap [#(mf/memo' % common/check-shape-props)] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - shape-type (dm/get-prop shape :type) +(mf/defc shape-wrapper* + {::mf/wrap [#(mf/memo' % common/check-shape-props)]} + [{:keys [shape]}] + (let [shape-type (dm/get-prop shape :type) shape-id (dm/get-prop shape :id) ;; FIXME: WARN: this breaks react rule of hooks (hooks can't be under conditional) @@ -121,8 +115,8 @@ (not ^boolean (:hidden shape))) [:> wrapper-elem wrapper-props (case shape-type - :path [:> path/path-wrapper props] - :text [:> text/text-wrapper props] + :path [:> path/path-wrapper* props] + :text [:> text/text-wrapper* props] :group [:> group-wrapper props] :rect [:> rect-wrapper props] :image [:> image-wrapper props] @@ -133,8 +127,8 @@ nil)]))) -(def group-wrapper (group/group-wrapper-factory shape-wrapper)) -(def svg-raw-wrapper (svg-raw/svg-raw-wrapper-factory shape-wrapper)) -(def bool-wrapper (bool/bool-wrapper-factory shape-wrapper)) -(def nested-frame-wrapper (frame/nested-frame-wrapper-factory shape-wrapper)) -(def root-frame-wrapper (frame/root-frame-wrapper-factory shape-wrapper)) +(def group-wrapper (group/group-wrapper-factory shape-wrapper*)) +(def svg-raw-wrapper (svg-raw/svg-raw-wrapper-factory shape-wrapper*)) +(def bool-wrapper (bool/bool-wrapper-factory shape-wrapper*)) +(def nested-frame-wrapper (frame/nested-frame-wrapper-factory shape-wrapper*)) +(def root-frame-wrapper (frame/root-frame-wrapper-factory shape-wrapper*)) diff --git a/frontend/src/app/main/ui/workspace/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/shapes/bool.cljs index db69d45585..3818b344a8 100644 --- a/frontend/src/app/main/ui/workspace/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/bool.cljs @@ -17,12 +17,10 @@ (defn bool-wrapper-factory [shape-wrapper] (let [bool-shape (bool/bool-shape shape-wrapper)] - (mf/fnc bool-wrapper - {::mf/wrap [#(mf/memo' % check-shape-props)] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - shape-id (dm/get-prop shape :id) + (mf/fnc bool-wrapper* + {::mf/wrap [#(mf/memo' % check-shape-props)]} + [{:keys [shape]}] + (let [shape-id (dm/get-prop shape :id) child-sel* (mf/with-memo [shape-id] (refs/is-child-selected? shape-id)) diff --git a/frontend/src/app/main/ui/workspace/shapes/debug.cljs b/frontend/src/app/main/ui/workspace/shapes/debug.cljs index 01800fcd8f..551baea09d 100644 --- a/frontend/src/app/main/ui/workspace/shapes/debug.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/debug.cljs @@ -47,11 +47,9 @@ :stroke-width 1 :stroke color}]])) -(mf/defc debug-text-bounds - {::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - zoom (mf/deref refs/selected-zoom) +(mf/defc debug-text-bounds* + [{:keys [shape]}] + (let [zoom (mf/deref refs/selected-zoom) bounding-box (gst/shape->rect shape) ctx (js* "document.createElement(\"canvas\").getContext(\"2d\")")] [:g {:transform (gsh/transform-str shape)} @@ -91,8 +89,7 @@ :style {:stroke "green" :stroke-width (/ 2 zoom)}}]]))])) -(mf/defc debug-bool-shape - {::mf/wrap-props false} +(mf/defc debug-bool-shape* [{:keys [shape]}] (let [objects (mf/deref refs/workspace-page-objects) @@ -180,9 +177,9 @@ (when (and ^boolean (dbg/enabled? :bool-shapes) ^boolean (cfh/bool-shape? shape)) - [:& debug-bool-shape {:shape shape}]) + [:> debug-bool-shape* {:shape shape}]) (when (and ^boolean (dbg/enabled? :text-outline) ^boolean (cfh/text-shape? shape) ^boolean (seq (:position-data shape))) - [:& debug-text-bounds {:shape shape}])]) + [:> debug-text-bounds* {:shape shape}])]) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 42af2a3ff0..448ad7e91c 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -31,14 +31,12 @@ (defn frame-shape-factory [shape-wrapper] (let [frame-shape (frame/frame-shape shape-wrapper)] - (mf/fnc frame-shape-inner + (mf/fnc frame-shape-inner* {::mf/wrap [#(mf/memo' % check-shape-props)] - ::mf/wrap-props false ::mf/forward-ref true} - [props ref] + [{:keys [shape]} ref] - (let [shape (unchecked-get props "shape") - shape-id (dm/get-prop shape :id) + (let [shape-id (dm/get-prop shape :id) childs-ref (mf/with-memo [shape-id] (refs/children-objects shape-id)) @@ -65,12 +63,10 @@ [shape-wrapper] (let [frame-shape (frame-shape-factory shape-wrapper)] - (mf/fnc frame-wrapper - {::mf/wrap [#(mf/memo' % check-props)] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - objects (dsh/lookup-page-objects @st/state) + (mf/fnc frame-wrapper* + {::mf/wrap [#(mf/memo' % check-props)]} + [{:keys [shape]}] + (let [objects (dsh/lookup-page-objects @st/state) frame-id (dm/get-prop shape :id) @@ -113,16 +109,11 @@ (defn root-frame-wrapper-factory [shape-wrapper] (let [frame-shape (frame-shape-factory shape-wrapper)] - (mf/fnc frame-wrapper - {::mf/wrap [#(mf/memo' % check-props)] - ::mf/wrap-props false} - [props] + (mf/fnc frame-wrapper* + {::mf/wrap [#(mf/memo' % check-props)]} + [{:keys [shape thumbnail? objects]}] - (let [shape (unchecked-get props "shape") - thumbnail? (unchecked-get props "thumbnail?") - objects (unchecked-get props "objects") - - file-id (mf/use-ctx ctx/current-file-id) + (let [file-id (mf/use-ctx ctx/current-file-id) page-id (mf/use-ctx ctx/current-page-id) frame-id (dm/get-prop shape :id) diff --git a/frontend/src/app/main/ui/workspace/shapes/group.cljs b/frontend/src/app/main/ui/workspace/shapes/group.cljs index 6b44979565..36b208a833 100644 --- a/frontend/src/app/main/ui/workspace/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/group.cljs @@ -17,12 +17,10 @@ (defn group-wrapper-factory [shape-wrapper] (let [group-shape (group/group-shape shape-wrapper)] - (mf/fnc group-wrapper - {::mf/wrap [#(mf/memo' % check-shape-props)] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - shape-id (dm/get-prop shape :id) + (mf/fnc group-wrapper* + {::mf/wrap [#(mf/memo' % check-shape-props)]} + [{:keys [shape]}] + (let [shape-id (dm/get-prop shape :id) childs* (mf/with-memo [shape-id] (refs/children-objects shape-id)) diff --git a/frontend/src/app/main/ui/workspace/shapes/path.cljs b/frontend/src/app/main/ui/workspace/shapes/path.cljs index 41c37e420d..8363e621a7 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path.cljs @@ -26,8 +26,7 @@ (let [shape (update shape :content types.path/apply-content-modifiers content-modifiers)] (types.path/update-geometry shape))) -(mf/defc path-wrapper - {::mf/wrap-props false} +(mf/defc path-wrapper* [{:keys [shape]}] (let [shape-id (dm/get-prop shape :id) diff --git a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs index 2eaa47ef4b..49df3568e0 100644 --- a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs @@ -16,12 +16,10 @@ (defn svg-raw-wrapper-factory [shape-wrapper] (let [svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)] - (mf/fnc svg-raw-wrapper - {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - childs-ref (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape))) + (mf/fnc svg-raw-wrapper* + {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))]} + [{:keys [shape]}] + (let [childs-ref (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape))) childs (mf/deref childs-ref) svg-tag (get-in shape [:content :tag])] (if (contains? csvg/svg-group-safe-tags svg-tag) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 601f5148fa..2647027a88 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -15,8 +15,7 @@ [rumext.v2 :as mf])) ;; --- Text Wrapper for workspace -(mf/defc text-wrapper - {::mf/wrap-props false} +(mf/defc text-wrapper* [{:keys [shape]}] (let [shape-id (dm/get-prop shape :id) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index af03a2f6de..7539e97e36 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -400,9 +400,9 @@ [:& (mf/provider ctx/current-vbox) {:value vbox'} [:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)} ;; Render root shape - [:& shapes/root-shape {:key page-id - :objects base-objects - :active-frames @active-frames}]]]] + [:> shapes/root-shape* {:key page-id + :objects base-objects + :active-frames @active-frames}]]]] [:svg.viewport-controls {:xmlns "http://www.w3.org/2000/svg" diff --git a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs index c7ccc2c72c..620c9025a9 100644 --- a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs @@ -57,7 +57,7 @@ [{:keys [shape zoom tool] :as props}] [:g.draw-area [:g {:style {:pointer-events "none"}} - [:& shapes/shape-wrapper {:shape shape}]] + [:> shapes/shape-wrapper* {:shape shape}]] (case tool :path [:> path-draw-area* props]