From 96eacb6efefa06d49e993f94a01d40e516d05b93 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 18 Feb 2022 11:15:21 +0100 Subject: [PATCH] :sparkles: Changed update text flow --- .../app/common/geom/shapes/transforms.cljc | 9 ++- .../resources/styles/main/partials/texts.scss | 1 - .../src/app/main/data/workspace/texts.cljs | 5 +- .../app/main/data/workspace/transforms.cljs | 2 +- .../src/app/main/ui/shapes/text/styles.cljs | 3 +- .../app/main/ui/workspace/shapes/text.cljs | 40 ++++++------ frontend/src/app/util/text_svg_position.cljs | 62 +++++++++---------- 7 files changed, 61 insertions(+), 61 deletions(-) diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index a636233222..a2d3312325 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/common/src/app/common/geom/shapes/transforms.cljc @@ -43,9 +43,9 @@ [position-data dx dy] (->> position-data - (map #(-> % - (update :x + dx) - (update :y + dy))))) + (mapv #(-> % + (update :x + dx) + (update :y + dy))))) (defn move "Move the shape relatively to its current @@ -542,8 +542,7 @@ :else (let [shape (apply-displacement shape) - modifiers (:modifiers shape) - shape (cond-> shape (= :text (:type shape)) (assoc :dirty? true))] + modifiers (:modifiers shape)] (cond-> shape (not (empty-modifiers? modifiers)) (-> (set-flip modifiers) diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss index d84442eb17..41b258e15b 100644 --- a/frontend/resources/styles/main/partials/texts.scss +++ b/frontend/resources/styles/main/partials/texts.scss @@ -3,7 +3,6 @@ .rich-text { color: $color-black; height: 100%; - white-space: pre-wrap; font-family: sourcesanspro; div { diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 0c0f79228e..c643335bab 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -65,7 +65,7 @@ (when (and (not= content (:content shape)) (some? (:current-page-id state))) (rx/of - (dch/update-shapes [id] #(assoc % :content content :dirty? true)) + (dch/update-shapes [id] #(assoc % :content content)) (dwu/commit-undo-transaction))))) (when (some? id) @@ -150,8 +150,7 @@ (let [merge-attrs #(merge-fn % attrs) transform #(txt/transform-nodes pred-fn merge-attrs %)] (-> shape - (update :content transform) - (assoc :dirty? true)))) + (update :content transform)))) (defn update-root-attrs [{:keys [id attrs]}] diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 699bd919da..d81e2bc775 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -185,7 +185,7 @@ :transform :transform-inverse :rotation - :dirty? + :position-data :flip-x :flip-y]}) (clear-local-transform) diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index fc65f836b5..3e21da621a 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -81,7 +81,8 @@ :textTransform text-transform :lineHeight (or line-height "inherit") :color "transparent" - :caretColor (or text-color "black")} + :caretColor (or text-color "black") + :overflowWrap "initial"} base (-> base (obj/set! "--fill-color" fill-color) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index ca7a373c71..b62cdcfb89 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -123,7 +123,7 @@ (mf/defc text-wrapper {::mf/wrap-props false} [props] - (let [{:keys [id dirty?] :as shape} (unchecked-get props "shape") + (let [{:keys [id content points] :as shape} (unchecked-get props "shape") edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local)) edition? (mf/deref edition-ref) @@ -131,9 +131,8 @@ handle-change-foreign-object (fn [node] - (when (some? node) - (let [position-data (utp/calc-position-data node) - parent (dom/get-parent node) + (when-let [position-data (utp/calc-position-data node)] + (let [parent (dom/get-parent node) parent-transform (dom/get-attribute parent "transform") node-transform (dom/get-attribute node "transform") @@ -153,24 +152,27 @@ [shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object) - show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))] + show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data)) + + update-position-data + (fn [] + (when (some? @local-position-data) + (reset! local-position-data nil) + (st/emit! (dch/update-shapes + [id] + (fn [shape] + (-> shape + (assoc :position-data @local-position-data))) + {:save-undo? false}))))] - ;; When the text is "dirty?" we get recalculate the positions (mf/use-layout-effect - (mf/deps id dirty?) + (mf/deps @local-position-data) (fn [] - (let [node (mf/ref-val shape-ref)] - (when (and dirty? (some? node)) - (let [position-data (utp/calc-position-data node)] - (when (d/not-empty? position-data) - (reset! local-position-data nil) - (st/emit! (dch/update-shapes - [id] - (fn [shape] - (-> shape - (dissoc :dirty?) - (assoc :position-data position-data))) - {:save-undo? false})))))))) + ;; Timer to update the shape. We do this so a lot of changes won't produce + ;; a lot of updates (kind of a debounce) + (let [sid (timers/schedule 250 update-position-data)] + (fn [] + (rx/dispose! sid))))) [:> shape-container {:shape shape} ;; We keep hidden the shape when we're editing so it keeps track of the size diff --git a/frontend/src/app/util/text_svg_position.cljs b/frontend/src/app/util/text_svg_position.cljs index 624aa43279..ee9a0f0ba5 100644 --- a/frontend/src/app/util/text_svg_position.cljs +++ b/frontend/src/app/util/text_svg_position.cljs @@ -54,7 +54,7 @@ (defn calc-text-node-positions [base-node viewport zoom] - (when (some? viewport) + (when (and (some? base-node)(some? viewport)) (let [translate-point (fn [pt] (let [vbox (.. ^js viewport -viewBox -baseVal) @@ -89,37 +89,37 @@ (let [rtl? (= "rtl" (.-dir (.-parentElement parent-node)))] (->> (.-childNodes parent-node) (mapcat #(parse-text-nodes parent-node rtl? %)))))) - (map #(update % :position translate-rect)))))) - - + (mapv #(update % :position translate-rect)))))) (defn calc-position-data [base-node] (let [viewport (dom/get-element "render") - zoom (get-in @st/state [:workspace-local :zoom]) - text-data (calc-text-node-positions base-node viewport zoom)] - (->> text-data - (mapv (fn [{:keys [node position text]}] - (let [{:keys [x y width height]} position - rtl? (= "rtl" (.-dir (.-parentElement ^js node))) - styles (js/getComputedStyle ^js node) - get (fn [prop] - (let [value (.getPropertyValue styles prop)] - (when (and value (not= value "")) - value)))] - (d/without-nils - {:rtl? rtl? - :x (if rtl? (+ x width) x) - :y (+ y height) - :width width - :height height - :font-family (str (get "font-family")) - :font-size (str (get "font-size")) - :font-weight (str (get "font-weight")) - :text-transform (str (get "text-transform")) - :text-decoration (str (get "text-decoration")) - :font-style (str (get "font-style")) - :fill-color (or (get "--fill-color") "#000000") - :fill-color-gradient (transit/decode-str (get "--fill-color-gradient")) - :fill-opacity (d/parse-double (or (get "--fill-opacity") "1")) - :text text}))))))) + zoom (or (get-in @st/state [:workspace-local :zoom]) 1)] + (when (and (some? base-node) (some? viewport)) + (let [text-data (calc-text-node-positions base-node viewport zoom)] + (when (d/not-empty? text-data) + (->> text-data + (mapv (fn [{:keys [node position text]}] + (let [{:keys [x y width height]} position + rtl? (= "rtl" (.-dir (.-parentElement ^js node))) + styles (js/getComputedStyle ^js node) + get (fn [prop] + (let [value (.getPropertyValue styles prop)] + (when (and value (not= value "")) + value)))] + (d/without-nils + {:rtl? rtl? + :x (if rtl? (+ x width) x) + :y (+ y height) + :width width + :height height + :font-family (str (get "font-family")) + :font-size (str (get "font-size")) + :font-weight (str (get "font-weight")) + :text-transform (str (get "text-transform")) + :text-decoration (str (get "text-decoration")) + :font-style (str (get "font-style")) + :fill-color (or (get "--fill-color") "#000000") + :fill-color-gradient (transit/decode-str (get "--fill-color-gradient")) + :fill-opacity (d/parse-double (or (get "--fill-opacity") "1")) + :text text}))))))))))