From e474accb610f366cac631df07143ad44333ab4d4 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 31 Jan 2024 13:04:21 +0100 Subject: [PATCH 1/7] :bug: Fix problem with components thumbnails single column --- .../src/app/main/ui/workspace/sidebar/assets/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 79fe504da..1b2789457 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -11,7 +11,7 @@ } .asset-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr)); + grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr)); grid-auto-rows: $s-112; max-width: 100%; gap: $s-4; From 188f5c616716b6206bbe91db03a2b1f350f299d9 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 31 Jan 2024 13:05:02 +0100 Subject: [PATCH 2/7] :bug: Fix problem with snap points --- common/src/app/common/geom/snap.cljc | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/common/src/app/common/geom/snap.cljc b/common/src/app/common/geom/snap.cljc index ff35d1674..a2cffe09f 100644 --- a/common/src/app/common/geom/snap.cljc +++ b/common/src/app/common/geom/snap.cljc @@ -15,15 +15,16 @@ (defn rect->snap-points [rect] - (let [x (dm/get-prop rect :x) - y (dm/get-prop rect :y) - w (dm/get-prop rect :width) - h (dm/get-prop rect :height)] - #{(gpt/point x y) - (gpt/point (+ x w) y) - (gpt/point (+ x w) (+ y h)) - (gpt/point x (+ y h)) - (grc/rect->center rect)})) + (when (some? rect) + (let [x (dm/get-prop rect :x) + y (dm/get-prop rect :y) + w (dm/get-prop rect :width) + h (dm/get-prop rect :height)] + #{(gpt/point x y) + (gpt/point (+ x w) y) + (gpt/point (+ x w) (+ y h)) + (gpt/point x (+ y h)) + (grc/rect->center rect)}))) (defn- frame->snap-points [frame] From 334d1fd9b3f8aa66ced59773e5836aeb5b844812 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 31 Jan 2024 17:55:53 +0100 Subject: [PATCH 3/7] :bug: Change order of contraints options panel --- .../main/ui/workspace/sidebar/options/shapes/bool.cljs | 8 ++++---- .../ui/workspace/sidebar/options/shapes/circle.cljs | 8 ++++---- .../ui/workspace/sidebar/options/shapes/frame.cljs | 7 +++---- .../ui/workspace/sidebar/options/shapes/group.cljs | 6 +++--- .../ui/workspace/sidebar/options/shapes/image.cljs | 8 ++++---- .../ui/workspace/sidebar/options/shapes/multiple.cljs | 6 +++--- .../main/ui/workspace/sidebar/options/shapes/path.cljs | 8 ++++---- .../main/ui/workspace/sidebar/options/shapes/rect.cljs | 8 ++++---- .../ui/workspace/sidebar/options/shapes/svg_raw.cljs | 8 ++++---- .../main/ui/workspace/sidebar/options/shapes/text.cljs | 10 +++++----- 10 files changed, 38 insertions(+), 39 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 4b5e52846..4cf2ef29f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -56,10 +56,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -81,6 +77,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index d37d6a4de..6bc6394b4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -58,10 +58,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -83,6 +79,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index e792751a2..1332faede 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -65,10 +65,6 @@ [:& component-menu {:shapes [shape]}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -91,6 +87,9 @@ :is-layout-container? is-layout-container? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) [:& fill-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 558e86b41..a892a87e0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -72,9 +72,6 @@ [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& component-menu {:shapes [shape]}] ;;remove this in components-v2 - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -96,6 +93,9 @@ :is-grid-parent? is-grid-parent? :values layout-item-values}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids constraint-ids :values constraint-values}]) + (when-not (empty? fill-ids) [:& fill-menu {:type type :ids fill-ids :values fill-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 6ae27dc02..a05e46575 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -58,10 +58,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -83,6 +79,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index f669bc4d9..af81ea652 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -364,9 +364,6 @@ (when-not (empty? components) [:& component-menu {:shapes components}]) - (when-not (or (empty? constraint-ids) ^boolean is-layout-child?) - [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - [:& layout-container-menu {:type type :ids layout-container-ids @@ -383,6 +380,9 @@ :is-grid-parent? is-grid-parent? :values layout-item-values}]) + (when-not (or (empty? constraint-ids) ^boolean is-layout-child?) + [:& constraints-menu {:ids constraint-ids :values constraint-values}]) + (when-not (empty? text-ids) [:& ot/text-menu {:type type :ids text-ids :values text-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index b803916be..db0aba009 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -57,10 +57,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -82,6 +78,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index aed851d0f..b7406ddca 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -60,10 +60,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids ids @@ -85,6 +81,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 87a2620e2..bf13cf76c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -129,10 +129,6 @@ :values measure-values :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -154,6 +150,10 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 955db7652..a3b9f3c4e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -93,11 +93,6 @@ :values (select-keys shape measure-attrs) :shape shape}] - (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) - [:& constraints-menu - {:ids ids - :values (select-keys shape constraint-attrs)}]) - [:& layout-container-menu {:type type :ids [(:id shape)] @@ -119,6 +114,11 @@ :is-grid-parent? is-grid-parent? :shape shape}]) + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu + {:ids ids + :values (select-keys shape constraint-attrs)}]) + [:& text-menu {:ids ids :type type From b0d723282b6e6048bebe6648af5012d2597f1fa4 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 1 Feb 2024 10:32:44 +0100 Subject: [PATCH 4/7] :bug: Fix problem when export not getting new change --- common/src/app/common/geom/shapes/bounds.cljc | 2 ++ frontend/src/app/main/data/exports.cljs | 8 ++++++++ frontend/src/app/main/refs.cljs | 3 +++ frontend/src/app/main/ui/components/copy_button.scss | 1 + 4 files changed, 14 insertions(+) diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index bb14ea345..c60840d7a 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -111,6 +111,7 @@ shadow-width (->> (:shadow shape) + (remove :hidden) (map #(case (:style % :drop-shadow) :drop-shadow (+ (mth/abs (:offset-x %)) (* (:spread %) 2) (* (:blur %) 2) 10) 0)) @@ -118,6 +119,7 @@ shadow-height (->> (:shadow shape) + (remove :hidden) (map #(case (:style % :drop-shadow) :drop-shadow (+ (mth/abs (:offset-y %)) (* (:spread %) 2) (* (:blur %) 2) 10) 0)) diff --git a/frontend/src/app/main/data/exports.cljs b/frontend/src/app/main/data/exports.cljs index 675f1d4d9..23eb50956 100644 --- a/frontend/src/app/main/data/exports.cljs +++ b/frontend/src/app/main/data/exports.cljs @@ -10,6 +10,7 @@ [app.main.data.modal :as modal] [app.main.data.workspace.persistence :as dwp] [app.main.data.workspace.state-helpers :as wsh] + [app.main.refs :as refs] [app.main.repo :as rp] [app.main.store :as st] [app.util.dom :as dom] @@ -166,6 +167,13 @@ :wait true}] (rx/concat (rx/of ::dwp/force-persist) + + ;; Wait the persist to be succesfull + (->> (rx/from-atom refs/persistence-state {:emit-current-value? true}) + (rx/filter #(or (nil? %) (= :saved %))) + (rx/first) + (rx/timeout 400 (rx/empty))) + (->> (rp/cmd! :export params) (rx/mapcat (fn [{:keys [id filename]}] (->> (rp/cmd! :export {:cmd :get-resource :blob? true :id id}) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 1a63a5032..434bca57e 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -591,3 +591,6 @@ (def updating-library (l/derived :updating-library st/state)) + +(def persistence-state + (l/derived (comp :status :workspace-persistence) st/state)) diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss index 1e07f6455..c81487f45 100644 --- a/frontend/src/app/main/ui/components/copy_button.scss +++ b/frontend/src/app/main/ui/components/copy_button.scss @@ -57,6 +57,7 @@ width: 100%; height: fit-content; text-align: left; + border: 1px solid transparent; .icon-btn { position: absolute; display: flex; From f1768c5a07f46d7da039b0f18a7043271b6c01ff Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 1 Feb 2024 11:32:35 +0100 Subject: [PATCH 5/7] :bug: Fix problems with inspect and texts --- common/src/app/common/text.cljc | 6 +++++- .../app/main/ui/viewer/inspect/attributes/common.cljs | 9 +++------ .../app/main/ui/viewer/inspect/attributes/common.scss | 10 +++++++++- .../main/ui/viewer/inspect/attributes/geometry.cljs | 6 ++++-- .../app/main/ui/viewer/inspect/attributes/text.scss | 3 +-- 5 files changed, 22 insertions(+), 12 deletions(-) diff --git a/common/src/app/common/text.cljc b/common/src/app/common/text.cljc index b5b12c5d5..f8297843d 100644 --- a/common/src/app/common/text.cljc +++ b/common/src/app/common/text.cljc @@ -53,6 +53,9 @@ (def text-transform-attrs [:text-transform]) +(def text-fills + [:fills]) + (def shape-attrs [:grow-type]) @@ -70,7 +73,8 @@ text-font-attrs text-spacing-attrs text-decoration-attrs - text-transform-attrs)) + text-transform-attrs + text-fills)) (def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs)) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs index 1fa810340..76001fe46 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs @@ -79,11 +79,9 @@ [:span {:class (stl/css-case :color-value-wrapper true :gradient-name (:gradient color))} (if (:gradient color) - [:& cbn/color-name {:color color - :size 80}] + [:& cbn/color-name {:color color :size 80}] (case format - :hex [:& cbn/color-name {:color color - :size 80}] + :hex [:& cbn/color-name {:color color}] :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] [:* (str/fmt "%s, %s, %s, %s" r g b a)]) :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) @@ -105,8 +103,7 @@ [:span {:class (stl/css-case :color-value-wrapper true :gradient-name (:gradient color))} (if (:gradient color) - [:& cbn/color-name {:color color - :size 80}] + [:& cbn/color-name {:color color}] (case format :hex [:& cbn/color-name {:color color :size 80}] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss index bb33fa99c..f05e0faa4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss @@ -58,6 +58,11 @@ } } +.name-opacity { + display: flex; + align-items: baseline; +} + .color-name-wrapper { @include titleTipography; @include flexColumn; @@ -113,8 +118,11 @@ .color-value-wrapper { @include inspectValue; text-transform: uppercase; - max-width: $s-124; + max-width: $s-80; padding-right: $s-8; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &.gradient-name { text-transform: none; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs index 58e39ca5f..4735502f7 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] [app.util.code-gen.style-css :as css] @@ -19,9 +20,10 @@ (mf/defc geometry-block [{:keys [objects shape]}] [:* - (for [property properties] + (for [[idx property] (d/enumerate properties)] (when-let [value (css/get-css-value objects shape property)] - [:div {:class (stl/css :geometry-row)} + [:div {:key (dm/str "block-" idx "-" (d/name property)) + :class (stl/css :geometry-row)} [:div {:class (stl/css :global/attr-label)} (d/name property)] [:div {:class (stl/css :global/attr-value)} [:& copy-button {:data (css/get-css-property objects shape property)} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss index 9f111adad..a506af1b4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss @@ -30,7 +30,6 @@ } .attributes-content-row { - width: $s-252; max-width: $s-252; min-height: calc($s-2 + $s-32); border-radius: $br-8; @@ -39,7 +38,7 @@ .content { @include titleTipography; width: 100%; - padding: 0; + padding: $s-4 0; color: var(--color-foreground-secondary); } From 7fa47d68a8fce8ed21203ab9fb125ea79fab0e1e Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 1 Feb 2024 16:30:54 +0100 Subject: [PATCH 6/7] :bug: Fix problems with text gradients --- .../app/common/geom/shapes/transforms.cljc | 37 +++++++------ common/src/app/common/text.cljc | 22 +++++++- frontend/src/app/main/ui/shapes/fills.cljs | 52 ++++++++++++++----- .../src/app/main/ui/shapes/text/styles.cljs | 2 +- .../main/ui/workspace/viewport/gradients.cljs | 28 +++++----- 5 files changed, 95 insertions(+), 46 deletions(-) diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index f9be02ada..f6ee1ea00 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/common/src/app/common/geom/shapes/transforms.cljc @@ -140,6 +140,28 @@ (gmt/translate (gpt/negate shape-center))))) +(defn inverse-transform-matrix + ([shape] + (inverse-transform-matrix shape nil)) + + ([shape params] + (inverse-transform-matrix shape params (or (gco/shape->center shape) (gpt/point 0 0)))) + + ([{:keys [flip-x flip-y transform-inverse] :as shape} {:keys [no-flip]} shape-center] + (-> (gmt/matrix) + (gmt/translate shape-center) + + (cond-> (and flip-x no-flip) + (gmt/scale (gpt/point -1 1))) + + (cond-> (and flip-y no-flip) + (gmt/scale (gpt/point 1 -1))) + + (cond-> (some? transform-inverse) + (gmt/multiply transform-inverse)) + + (gmt/translate (gpt/negate shape-center))))) + (defn transform-str ([shape] (transform-str shape nil)) @@ -152,21 +174,6 @@ (dm/str (transform-matrix shape params)) ""))) -;; FIXME: performance -(defn inverse-transform-matrix - ([shape] - (let [shape-center (or (gco/shape->center shape) - (gpt/point 0 0))] - (inverse-transform-matrix shape shape-center))) - ([{:keys [flip-x flip-y] :as shape} center] - (-> (gmt/matrix) - (gmt/translate center) - (cond-> - flip-x (gmt/scale (gpt/point -1 1)) - flip-y (gmt/scale (gpt/point 1 -1))) - (gmt/multiply (:transform-inverse shape (gmt/matrix))) - (gmt/translate (gpt/negate center))))) - ;; FIXME: move to geom rect? (defn transform-rect "Transform a rectangles and changes its attributes" diff --git a/common/src/app/common/text.cljc b/common/src/app/common/text.cljc index f8297843d..8b301d2d4 100644 --- a/common/src/app/common/text.cljc +++ b/common/src/app/common/text.cljc @@ -244,6 +244,21 @@ (run! #(.appendCodePoint sb (int %)) (subvec cpoints start end)) (.toString sb)))) +(defn- fix-gradients + "Conversion from draft doesn't convert correctly the fills gradient types. This + function change the type from string to keyword of the gradient type" + [data] + (letfn [(fix-type [type] + (cond-> type + (string? type) keyword)) + + (update-fill [fill] + (d/update-in-when fill [:fill-color-gradient :type] fix-type)) + + (update-all-fills [fills] + (mapv update-fill fills))] + (d/update-when data :fills update-all-fills))) + (defn convert-from-draft [content] (letfn [(extract-text [cpoints part] @@ -251,7 +266,9 @@ end (inc (first (last part))) text (code-points->text cpoints start end) attrs (second (first part))] - (assoc attrs :text text))) + (-> attrs + (fix-gradients) + (assoc :text text)))) (split-texts [text styles] (let [cpoints (text->code-points text) @@ -268,7 +285,8 @@ (let [key (get block :key) text (get block :text) styles (get block :inlineStyleRanges) - data (get block :data)] + data (->> (get block :data) + fix-gradients)] (-> data (assoc :key key) (assoc :type "paragraph") diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index 518222bcf..e4cb1eee3 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -8,7 +8,10 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.files.helpers :as cfh] + [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] + [app.common.geom.shapes.text :as gst] [app.config :as cf] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.gradients :as grad] @@ -28,7 +31,12 @@ fills (get shape :fills []) selrect (dm/get-prop shape :selrect) + + bounds (when (cfh/text-shape? shape) + (gst/shape->rect shape)) + metadata (get shape :metadata) + x (dm/get-prop selrect :x) y (dm/get-prop selrect :y) width (dm/get-prop selrect :width) @@ -62,32 +70,50 @@ (obj/set! pat-props "patternTransform" transform) pat-props)] - (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))] - [:* {:key (dm/str shape-index)} - (for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))] + (for [[obj-index obj] (d/enumerate (or (:position-data shape) [shape]))] + [:* {:key (dm/str obj-index)} + (for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))] (when (some? (:fill-color-gradient value)) (let [gradient (:fill-color-gradient value) + + from-p (-> (gpt/point (+ x (* width (:start-x gradient))) + (+ y (* height (:start-y gradient))))) + to-p (-> (gpt/point (+ x (* width (:end-x gradient))) + (+ y (* height (:end-y gradient))))) + + gradient + (cond-> gradient + (some? bounds) + (assoc + :start-x (/ (- (:x from-p) (:x bounds)) (:width bounds)) + :start-y (/ (- (:y from-p) (:y bounds)) (:height bounds)) + :end-x (/ (- (:x to-p) (:x bounds)) (:width bounds)) + :end-y (/ (- (:y to-p) (:y bounds)) (:height bounds)))) + props #js {:id (dm/str "fill-color-gradient-" render-id "-" fill-index) :key (dm/str fill-index) :gradient gradient - :shape shape}] - (case (:type gradient) - :linear [:> grad/linear-gradient props] - :radial [:> grad/radial-gradient props])))) + :shape obj}] + (case (d/name (:type gradient)) + "linear" [:> grad/linear-gradient props] + "radial" [:> grad/radial-gradient props])))) - (let [fill-id (dm/str "fill-" shape-index "-" render-id)] + (let [fill-id (dm/str "fill-" obj-index "-" render-id)] [:> :pattern (-> (obj/clone pat-props) (obj/set! "id" fill-id) - (cond-> has-image? + (cond-> (and has-image? (nil? bounds)) (-> (obj/set! "width" (* width no-repeat-padding)) - (obj/set! "height" (* height no-repeat-padding))))) + (obj/set! "height" (* height no-repeat-padding)))) + (cond-> (some? bounds) + (-> (obj/set! "width" (:width bounds)) + (obj/set! "height" (:height bounds))))) [:g - (for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))] + (for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))] (let [style (attrs/get-fill-style value fill-index render-id type) props #js {:key (dm/str fill-index) - :width width - :height height + :width (d/nilv (:width bounds) width) + :height (d/nilv (:height bounds) height) :style style}] (if (:fill-image value) (let [uri (cf/resolve-file-media (:fill-image value)) diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 64a8f34ef..0b4e325d9 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -93,7 +93,7 @@ :textTransform text-transform :color (if (and show-text? (not gradient?)) text-color "transparent") :background (when (and show-text? gradient?) text-color) - :caretColor (or text-color "black") + :caretColor (if (and (not gradient?) text-color) text-color "black") :overflowWrap "initial" :lineBreak "auto" :whiteSpace "break-spaces" diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs index e2bf517d1..c035b3134 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs @@ -118,7 +118,7 @@ :on-pointer-up on-pointer-up}]]) (mf/defc gradient-handler-transformed - [{:keys [from-p to-p width-p from-color to-color zoom editing transform + [{:keys [from-p to-p width-p from-color to-color zoom editing on-change-start on-change-finish on-change-width]}] (let [moving-point (mf/use-var nil) angle (+ 90 (gpt/angle from-p to-p)) @@ -151,7 +151,7 @@ (reset! moving-point nil))] (mf/use-effect - (mf/deps @moving-point from-p to-p width-p transform) + (mf/deps @moving-point from-p to-p width-p) (fn [] (let [subs (->> st/stream (rx/filter mse/pointer-event?) @@ -159,18 +159,17 @@ (rx/map mse/get-pointer-position) (rx/subs! (fn [pt] - (let [pt (gpt/transform pt transform)] - (case @moving-point - :from-p (when on-change-start (on-change-start pt)) - :to-p (when on-change-finish (on-change-finish pt)) - :width-p (when on-change-width - (let [width-v (gpt/unit (gpt/to-vec from-p width-p)) - distance (gpt/point-line-distance pt from-p to-p) - new-width-p (gpt/add - from-p - (gpt/multiply width-v (gpt/point distance)))] - (on-change-width new-width-p))) - nil)))))] + (case @moving-point + :from-p (when on-change-start (on-change-start pt)) + :to-p (when on-change-finish (on-change-finish pt)) + :width-p (when on-change-width + (let [width-v (gpt/unit (gpt/to-vec from-p width-p)) + distance (gpt/point-line-distance pt from-p to-p) + new-width-p (gpt/add + from-p + (gpt/multiply width-v (gpt/point distance)))] + (on-change-width new-width-p))) + nil))))] (fn [] (rx/dispose! subs))))) [:g.gradient-handlers [:defs @@ -296,7 +295,6 @@ :width-p (when (= :radial (:type gradient)) width-p) :from-color {:value start-color :opacity start-opacity} :to-color {:value end-color :opacity end-opacity} - :transform transform :zoom zoom :on-change-start on-change-start :on-change-finish on-change-finish From 3a260825b90bc34ced789ff8532fbf8c4a6015df Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 1 Feb 2024 16:58:06 +0100 Subject: [PATCH 7/7] :bug: Fix problem with multiplayer cursors --- frontend/src/app/main/data/workspace/notifications.cljs | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 6efa57439..54397b2f3 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -83,6 +83,7 @@ ;; position changes. (->> stream (rx/filter mse/pointer-event?) + (rx/filter #(= :viewport (mse/get-pointer-source %))) (rx/pipe (rxs/throttle 100)) (rx/map #(handle-pointer-send file-id (:pt %)))))