From 75d2d97d8eb71a189f36f4194a5f2c40f72c2101 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 21 Sep 2021 12:11:54 +0200 Subject: [PATCH] :sparkles: Renderers for booleans --- common/src/app/common/geom/shapes/common.cljc | 2 +- .../src/app/main/data/workspace/booleans.cljs | 8 ++-- frontend/src/app/main/exports.cljs | 19 +++++++++- frontend/src/app/main/ui/shapes/bool.cljs | 1 + .../app/main/ui/viewer/handoff/render.cljs | 37 +++++++++++++++--- frontend/src/app/main/ui/viewer/shapes.cljs | 38 ++++++++++++++++--- 6 files changed, 86 insertions(+), 19 deletions(-) diff --git a/common/src/app/common/geom/shapes/common.cljc b/common/src/app/common/geom/shapes/common.cljc index 4ebd6a98e..00eec4386 100644 --- a/common/src/app/common/geom/shapes/common.cljc +++ b/common/src/app/common/geom/shapes/common.cljc @@ -6,8 +6,8 @@ (ns app.common.geom.shapes.common (:require - [app.common.geom.point :as gpt] [app.common.geom.matrix :as gmt] + [app.common.geom.point :as gpt] [app.common.math :as mth])) (defn center-rect diff --git a/frontend/src/app/main/data/workspace/booleans.cljs b/frontend/src/app/main/data/workspace/booleans.cljs index d5d7b1d36..845bce61a 100644 --- a/frontend/src/app/main/data/workspace/booleans.cljs +++ b/frontend/src/app/main/data/workspace/booleans.cljs @@ -97,10 +97,10 @@ (ptk/reify ::group-to-bool ptk/WatchEvent (watch [_ state _] - (let [objects (wsh/lookup-page-objects state)] - (let [change-to-bool - (fn [shape] (group->bool shape bool-type objects))] - (rx/of (dch/update-shapes [shape-id] change-to-bool {:reg-objects? true}))))))) + (let [objects (wsh/lookup-page-objects state) + change-to-bool + (fn [shape] (group->bool shape bool-type objects))] + (rx/of (dch/update-shapes [shape-id] change-to-bool {:reg-objects? true})))))) (defn bool-to-group [shape-id] diff --git a/frontend/src/app/main/exports.cljs b/frontend/src/app/main/exports.cljs index 5c0217152..726562f4c 100644 --- a/frontend/src/app/main/exports.cljs +++ b/frontend/src/app/main/exports.cljs @@ -14,6 +14,7 @@ [app.common.math :as mth] [app.common.pages :as cp] [app.common.uuid :as uuid] + [app.main.ui.shapes.bool :as bool] [app.main.ui.shapes.circle :as circle] [app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.export :as use] @@ -81,6 +82,18 @@ :is-child-selected? true :childs childs}])))) +(defn bool-wrapper-factory + [objects] + (let [shape-wrapper (shape-wrapper-factory objects) + bool-shape (bool/bool-shape shape-wrapper)] + (mf/fnc bool-wrapper + [{:keys [shape frame] :as props}] + (let [childs (->> (cp/get-children (:id shape) objects) + (select-keys objects))] + [:& bool-shape {:frame frame + :shape shape + :childs childs}])))) + (defn svg-raw-wrapper-factory [objects] (let [shape-wrapper (shape-wrapper-factory objects) @@ -104,9 +117,10 @@ [objects] (mf/fnc shape-wrapper [{:keys [frame shape] :as props}] - (let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper-factory objects)) + (let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper-factory objects)) svg-raw-wrapper (mf/use-memo (mf/deps objects) #(svg-raw-wrapper-factory objects)) - frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))] + bool-wrapper (mf/use-memo (mf/deps objects) #(bool-wrapper-factory objects)) + frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper-factory objects))] (when (and shape (not (:hidden shape))) (let [shape (-> (gsh/transform-shape shape) (gsh/translate-to-frame frame)) @@ -122,6 +136,7 @@ :circle [:> circle/circle-shape opts] :frame [:> frame-wrapper {:shape shape}] :group [:> group-wrapper {:shape shape :frame frame}] + :bool [:> bool-wrapper {:shape shape :frame frame}] nil)] ;; Don't wrap svg elements inside a otherwise some can break diff --git a/frontend/src/app/main/ui/shapes/bool.cljs b/frontend/src/app/main/ui/shapes/bool.cljs index 8a3db6d19..037479581 100644 --- a/frontend/src/app/main/ui/shapes/bool.cljs +++ b/frontend/src/app/main/ui/shapes/bool.cljs @@ -32,6 +32,7 @@ (let [childs (d/mapm #(gsh/transform-shape %2) childs)] (->> (:shapes shape) (map #(get childs %)) + (filter #(not (:hidden %))) (map #(stp/convert-to-path % childs)) (mapv :content) (pb/content-bool (:bool-type shape))))))] diff --git a/frontend/src/app/main/ui/viewer/handoff/render.cljs b/frontend/src/app/main/ui/viewer/handoff/render.cljs index 093cfc846..0f1854fc1 100644 --- a/frontend/src/app/main/ui/viewer/handoff/render.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/render.cljs @@ -8,8 +8,10 @@ "The main container for a frame in handoff mode" (:require [app.common.geom.shapes :as geom] + [app.common.pages :as cp] [app.main.data.viewer :as dv] [app.main.store :as st] + [app.main.ui.shapes.bool :as bool] [app.main.ui.shapes.circle :as circle] [app.main.ui.shapes.frame :as frame] [app.main.ui.shapes.group :as group] @@ -106,6 +108,22 @@ (obj/merge! #js {:childs childs}))] [:> group-wrapper props])))) +(defn bool-container-factory + [objects] + (let [shape-container (shape-container-factory objects) + bool-shape (bool/bool-shape shape-container) + bool-wrapper (shape-wrapper-factory bool-shape)] + (mf/fnc bool-container + {::mf/wrap-props false} + [props] + (let [shape (unchecked-get props "shape") + children-ids (cp/get-children (:id shape) objects) + childs (select-keys objects children-ids) + props (-> (obj/new) + (obj/merge! props) + (obj/merge! #js {:childs childs}))] + [:> bool-wrapper props])))) + (defn svg-raw-container-factory [objects] (let [shape-container (shape-container-factory objects) @@ -133,12 +151,18 @@ [props] (let [shape (unchecked-get props "shape") frame (unchecked-get props "frame") - group-container (mf/use-memo - (mf/deps objects) - #(group-container-factory objects)) - svg-raw-container (mf/use-memo - (mf/deps objects) - #(svg-raw-container-factory objects))] + + group-container + (mf/use-memo (mf/deps objects) + #(group-container-factory objects)) + + bool-container + (mf/use-memo (mf/deps objects) + #(bool-container-factory objects)) + + svg-raw-container + (mf/use-memo (mf/deps objects) + #(svg-raw-container-factory objects))] (when (and shape (not (:hidden shape))) (let [shape (-> (geom/transform-shape shape) (geom/translate-to-frame frame)) @@ -151,6 +175,7 @@ :image [:> image-wrapper opts] :circle [:> circle-wrapper opts] :group [:> group-container opts] + :bool [:> bool-container opts] :svg-raw [:> svg-raw-container opts]))))))) (mf/defc render-frame-svg diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 225c04a1d..5a2b88d73 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -15,6 +15,7 @@ [app.common.types.interactions :as cti] [app.main.data.viewer :as dv] [app.main.store :as st] + [app.main.ui.shapes.bool :as bool] [app.main.ui.shapes.circle :as circle] [app.main.ui.shapes.frame :as frame] [app.main.ui.shapes.group :as group] @@ -229,6 +230,10 @@ [shape-container show-interactions?] (generic-wrapper-factory (group/group-shape shape-container) show-interactions?)) +(defn bool-wrapper + [shape-container show-interactions?] + (generic-wrapper-factory (bool/bool-shape shape-container) show-interactions?)) + (defn svg-raw-wrapper [shape-container show-interactions?] (generic-wrapper-factory (svg-raw/svg-raw-shape shape-container) show-interactions?)) @@ -287,6 +292,21 @@ :show-interactions? show-interactions?})] [:> group-wrapper props])))) +(defn bool-container-factory + [objects show-interactions?] + (let [shape-container (shape-container-factory objects show-interactions?) + bool-wrapper (bool-wrapper shape-container show-interactions?)] + (mf/fnc bool-container + {::mf/wrap-props false} + [props] + (let [shape (unchecked-get props "shape") + childs (select-keys objects (cp/get-children (:id shape) objects)) + props (obj/merge! #js {} props + #js {:childs childs + :objects objects + :show-interactions? show-interactions?})] + [:> bool-wrapper props])))) + (defn svg-raw-container-factory [objects show-interactions?] (let [shape-container (shape-container-factory objects show-interactions?) @@ -312,12 +332,17 @@ (mf/fnc shape-container {::mf/wrap-props false} [props] - (let [group-container (mf/use-memo - (mf/deps objects) - #(group-container-factory objects show-interactions?)) - svg-raw-container (mf/use-memo - (mf/deps objects) - #(svg-raw-container-factory objects show-interactions?)) + (let [group-container + (mf/use-memo (mf/deps objects) + #(group-container-factory objects show-interactions?)) + + bool-container + (mf/use-memo (mf/deps objects) + #(bool-container-factory objects show-interactions?)) + + svg-raw-container + (mf/use-memo (mf/deps objects) + #(svg-raw-container-factory objects show-interactions?)) shape (unchecked-get props "shape") frame (unchecked-get props "frame")] (when (and shape (not (:hidden shape))) @@ -333,6 +358,7 @@ :image [:> image-wrapper opts] :circle [:> circle-wrapper opts] :group [:> group-container {:shape shape :frame frame :objects objects}] + :bool [:> bool-container {:shape shape :frame frame :objects objects}] :svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}]))))))) (mf/defc frame-svg