From 7abbcdf2267f64a3ae163a7eaab0ce23ee3c6d8d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 13 Jul 2022 10:20:35 +0200 Subject: [PATCH] :sparkles: Move text position calculation outside foreign object --- .../app/main/ui/shapes/text/html_text.cljs | 103 +++++++ .../src/app/main/ui/shapes/text/svg_text.cljs | 10 +- .../workspace/shapes/text/viewport_texts.cljs | 4 +- .../shapes/text/viewport_texts_html.cljs | 258 ++++++++++++++++++ .../src/app/main/ui/workspace/viewport.cljs | 25 +- frontend/src/app/util/dom.cljs | 8 + frontend/src/app/util/text_svg_position.cljs | 114 +++----- 7 files changed, 426 insertions(+), 96 deletions(-) create mode 100644 frontend/src/app/main/ui/shapes/text/html_text.cljs create mode 100644 frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs diff --git a/frontend/src/app/main/ui/shapes/text/html_text.cljs b/frontend/src/app/main/ui/shapes/text/html_text.cljs new file mode 100644 index 000000000..50b26ad78 --- /dev/null +++ b/frontend/src/app/main/ui/shapes/text/html_text.cljs @@ -0,0 +1,103 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.shapes.text.html-text + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.ui.shapes.text.styles :as sts] + [app.util.object :as obj] + [rumext.alpha :as mf])) + +(mf/defc render-text + {::mf/wrap-props false} + [props] + (let [node (obj/get props "node") + parent (obj/get props "parent") + shape (obj/get props "shape") + text (:text node) + style (if (= text "") + (sts/generate-text-styles shape parent) + (sts/generate-text-styles shape node))] + [:span.text-node {:style style} + (if (= text "") "\u00A0" text)])) + +(mf/defc render-root + {::mf/wrap-props false} + [props] + (let [node (obj/get props "node") + children (obj/get props "children") + shape (obj/get props "shape") + style (sts/generate-root-styles shape node)] + [:div.root.rich-text + {:style style + :xmlns "http://www.w3.org/1999/xhtml"} + children])) + +(mf/defc render-paragraph-set + {::mf/wrap-props false} + [props] + (let [children (obj/get props "children") + shape (obj/get props "shape") + style (sts/generate-paragraph-set-styles shape)] + [:div.paragraph-set {:style style} children])) + +(mf/defc render-paragraph + {::mf/wrap-props false} + [props] + (let [node (obj/get props "node") + shape (obj/get props "shape") + children (obj/get props "children") + style (sts/generate-paragraph-styles shape node) + dir (:text-direction node "auto")] + [:p.paragraph {:style style :dir dir} children])) + +;; -- Text nodes +(mf/defc render-node + {::mf/wrap-props false} + [props] + (let [{:keys [type text children]} (obj/get props "node")] + (if (string? text) + [:> render-text props] + (let [component (case type + "root" render-root + "paragraph-set" render-paragraph-set + "paragraph" render-paragraph + nil)] + (when component + [:> component props + (for [[index node] (d/enumerate children)] + (let [props (-> (obj/clone props) + (obj/set! "node" node) + (obj/set! "index" index) + (obj/set! "key" index))] + [:> render-node props]))]))))) + +(mf/defc text-shape + {::mf/wrap-props false + ::mf/forward-ref true} + [props ref] + (let [shape (obj/get props "shape") + grow-type (obj/get props "grow-type") + {:keys [id x y width height content]} shape] + + [:div.text-node-html + {:id (dm/str "html-text-node-" id) + :ref ref + :data-x x + :data-y y + :style {:position "fixed" + :left 0 + :top 0 + :width (if (#{:auto-width} grow-type) 100000 width) + :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}} + ;; We use a class here because react has a bug that won't use the appropriate selector for + ;; `background-clip` + [:style ".text-node { background-clip: text; + -webkit-background-clip: text;" ] + [:& render-node {:index 0 + :shape shape + :node content}]])) diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs index 7a5fad4d2..a94aaad62 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs @@ -11,7 +11,6 @@ [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] - [app.config :as cfg] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]] @@ -87,12 +86,10 @@ [:> :g group-props (for [[index data] (d/enumerate position-data)] - (let [y (if (cfg/check-browser? :safari) - (- (:y data) (:height data)) - (:y data)) - + (let [y (- (:y data) (:height data)) + dominant-bl (when-not (cfg/check-browser? :safari) "text-before-edge") alignment-bl (when (cfg/check-browser? :safari) "text-before-edge") - dominant-bl (when-not (cfg/check-browser? :safari) "ideographic") + rtl? (= "rtl" (:direction data)) props (-> #js {:key (dm/str "text-" (:id shape) "-" index) :x (if rtl? (+ (:x data) (:width data)) (:x data)) @@ -115,4 +112,3 @@ [:& (mf/provider muc/render-ctx) {:key index :value (str render-id "_" (:id shape) "_" index)} [:& shape-custom-strokes {:shape shape :position index :render-id render-id} [:> :text props (:text data)]]]))]])) - diff --git a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs index 5c69a3c48..b0aa93524 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs @@ -66,7 +66,7 @@ [{:keys [grow-type id migrate] :as shape} node] ;; Check if we need to update the size because it's auto-width or auto-height ;; Update the position-data of every text fragment - (p/let [position-data (tsp/calc-position-data node)] + (p/let [position-data (tsp/calc-position-data id)] ;; At least one paragraph needs to be inside the bounding box (when (gsht/overlaps-position-data? shape position-data) (st/emit! (dwt/update-position-data id position-data))) @@ -85,7 +85,7 @@ (defn- update-text-modifier [{:keys [grow-type id]} node] - (p/let [position-data (tsp/calc-position-data node) + (p/let [position-data (tsp/calc-position-data id) props {:position-data position-data} props diff --git a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs new file mode 100644 index 000000000..a8892489a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs @@ -0,0 +1,258 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.workspace.shapes.text.viewport-texts-html + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.common.geom.shapes :as gsh] + [app.common.geom.shapes.text :as gsht] + [app.common.math :as mth] + [app.common.pages.helpers :as cph] + [app.common.text :as txt] + [app.main.data.workspace.texts :as dwt] + [app.main.fonts :as fonts] + [app.main.refs :as refs] + [app.main.store :as st] + [app.main.ui.hooks :as hooks] + [app.main.ui.shapes.text.html-text :as html] + [app.util.dom :as dom] + [app.util.object :as obj] + [app.util.text-editor :as ted] + [app.util.text-svg-position :as tsp] + [app.util.timers :as ts] + [promesa.core :as p] + [rumext.alpha :as mf])) + +(defn strip-position-data [shape] + (dissoc shape :position-data :transform :transform-inverse)) + +(defn strip-modifier + [modifier] + (if (or (some? (dm/get-in modifier [:modifiers :resize-vector])) + (some? (dm/get-in modifier [:modifiers :resize-vector-2]))) + modifier + (d/update-when modifier :modifiers dissoc :displacement :rotation))) + +(defn process-shape [modifiers {:keys [id] :as shape}] + (let [modifier (-> (get modifiers id) strip-modifier) + shape (cond-> shape + (not (gsh/empty-modifiers? (:modifiers modifier))) + (-> (assoc :grow-type :fixed) + (merge modifier) gsh/transform-shape))] + (-> shape + (cond-> (nil? (:position-data shape)) + (assoc :migrate true)) + strip-position-data))) + +(defn- update-with-editor-state + "Updates the shape with the current state in the editor" + [shape editor-state] + (let [content (:content shape) + editor-content + (when editor-state + (-> editor-state + (ted/get-editor-current-content) + (ted/export-content)))] + + (cond-> shape + (and (some? shape) (some? editor-content)) + (assoc :content (d/txt-merge content editor-content))))) + +(defn- update-text-shape + [{:keys [grow-type id migrate] :as shape} node] + ;; Check if we need to update the size because it's auto-width or auto-height + ;; Update the position-data of every text fragment + (p/let [position-data (tsp/calc-position-data id)] + ;; At least one paragraph needs to be inside the bounding box + (when (gsht/overlaps-position-data? shape position-data) + (st/emit! (dwt/update-position-data id position-data))) + + (when (contains? #{:auto-height :auto-width} grow-type) + (let [{:keys [width height]} + (-> (dom/query node ".paragraph-set") + (dom/get-client-size)) + width (mth/ceil width) + height (mth/ceil height)] + (when (and (not (mth/almost-zero? width)) + (not (mth/almost-zero? height)) + (not migrate)) + (st/emit! (dwt/resize-text id width height))))) + (st/emit! (dwt/clean-text-modifier id)))) + +(defn- update-text-modifier + [{:keys [grow-type id]} node] + (p/let [position-data (tsp/calc-position-data id) + props {:position-data position-data} + + props + (if (contains? #{:auto-height :auto-width} grow-type) + (let [{:keys [width height]} (-> (dom/query node ".paragraph-set") (dom/get-client-size)) + width (mth/ceil width) + height (mth/ceil height)] + (if (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height))) + (assoc props :width width :height height) + props)) + props)] + + (st/emit! (dwt/update-text-modifier id props)))) + +(mf/defc text-container + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [props] + (let [shape (obj/get props "shape") + on-update (obj/get props "on-update") + + handle-update + (mf/use-callback + (mf/deps shape on-update) + (fn [node] + (when (some? node) + (on-update shape node))))] + + [:& html/text-shape {:key (str "shape-" (:id shape)) + :ref handle-update + :shape shape + :grow-type (:grow-type shape)}])) + +(mf/defc viewport-texts-wrapper + {::mf/wrap-props false + ::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} + [props] + (let [text-shapes (obj/get props "text-shapes") + modifiers (obj/get props "modifiers") + prev-modifiers (hooks/use-previous modifiers) + prev-text-shapes (hooks/use-previous text-shapes) + + ;; A change in position-data won't be a "real" change + text-change? + (fn [id] + (let [old-shape (get prev-text-shapes id) + new-shape (get text-shapes id) + old-modifiers (-> (get prev-modifiers id) strip-modifier) + new-modifiers (-> (get modifiers id) strip-modifier)] + + (or (and (not (identical? old-shape new-shape)) + (not= (dissoc old-shape :migrate :position-data) + (dissoc new-shape :migrate :position-data))) + (not= new-modifiers old-modifiers) + + ;; When the position data is nil we force to recalculate + (:migrate new-shape)))) + + changed-texts + (mf/use-memo + (mf/deps text-shapes modifiers) + #(->> (keys text-shapes) + (filter text-change?) + (map (d/getf text-shapes)))) + + handle-update-modifier (mf/use-callback update-text-modifier) + handle-update-shape (mf/use-callback update-text-shape)] + + [:* + (for [{:keys [id] :as shape} changed-texts] + [:& text-container {:shape (gsh/transform-shape shape) + :on-update (if (some? (get modifiers (:id shape))) + handle-update-modifier + handle-update-shape) + :key (str (dm/str "text-container-" id))}])])) + +(mf/defc viewport-text-editing + {::mf/wrap-props false} + [props] + + (let [shape (obj/get props "shape") + + ;; Join current objects with the state of the editor + editor-state + (-> (mf/deref refs/workspace-editor-state) + (get (:id shape))) + + text-modifier-ref + (mf/use-memo (mf/deps (:id shape)) #(refs/workspace-text-modifier-by-id (:id shape))) + + text-modifier + (mf/deref text-modifier-ref) + + shape (cond-> shape + (some? editor-state) + (update-with-editor-state editor-state)) + + ;; When we have a text with grow-type :auto-height we need to check the correct height + ;; otherwise the center alignment will break + shape + (if (or (not= :auto-height (:grow-type shape)) (empty? text-modifier)) + shape + (let [tr-shape (dwt/apply-text-modifier shape text-modifier)] + (cond-> shape + ;; we only change the height otherwise could cause problems with the other fields + (some? text-modifier) + (assoc :height (:height tr-shape))))) + + shape (hooks/use-equal-memo shape) + + handle-update-shape (mf/use-callback update-text-modifier)] + + (mf/use-effect + (mf/deps (:id shape)) + (fn [] + #(st/emit! (dwt/remove-text-modifier (:id shape))))) + + [:& text-container {:shape shape + :on-update handle-update-shape}])) + +(defn check-props + [new-props old-props] + (and (identical? (unchecked-get new-props "objects") + (unchecked-get old-props "objects")) + (identical? (unchecked-get new-props "modifiers") + (unchecked-get old-props "modifiers")) + (= (unchecked-get new-props "edition") + (unchecked-get old-props "edition")))) + +(mf/defc viewport-texts + {::mf/wrap-props false + ::mf/wrap [#(mf/memo' % check-props)]} + [props] + (let [objects (obj/get props "objects") + edition (obj/get props "edition") + modifiers (obj/get props "modifiers") + + text-shapes + (mf/use-memo + (mf/deps objects) + #(into {} (filter (comp cph/text-shape? second)) objects)) + + text-shapes + (mf/use-memo + (mf/deps text-shapes modifiers) + #(d/update-vals text-shapes (partial process-shape modifiers))) + + editing-shape (get text-shapes edition) + + ;; This memo is necesary so the viewport-text-wrapper memoize its props correctly + text-shapes-wrapper + (mf/use-memo + (mf/deps text-shapes edition) + (fn [] + (dissoc text-shapes edition)))] + + ;; We only need the effect to run on "mount" because the next fonts will be changed when the texts are + ;; edited + (mf/use-effect + (fn [] + (let [text-nodes (->> text-shapes (vals)(mapcat #(txt/node-seq txt/is-text-node? (:content %)))) + fonts (into #{} (keep :font-id) text-nodes)] + (run! fonts/ensure-loaded! fonts)))) + + [:* + (when editing-shape + [:& viewport-text-editing {:shape editing-shape}]) + + [:& viewport-texts-wrapper {:text-shapes text-shapes-wrapper + :modifiers modifiers}]])) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 1c2874d91..101005e75 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -21,6 +21,7 @@ [app.main.ui.workspace.shapes.text.editor :as editor] [app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]] [app.main.ui.workspace.shapes.text.viewport-texts :as stv] + [app.main.ui.workspace.shapes.text.viewport-texts-html :as stvh] [app.main.ui.workspace.viewport.actions :as actions] [app.main.ui.workspace.viewport.comments :as comments] [app.main.ui.workspace.viewport.drawarea :as drawarea] @@ -194,6 +195,13 @@ [:div.viewport [:div.viewport-overlays {:ref overlays-ref} + [:div {:style {:pointer-events "none" :opacity 0}} + [:& stvh/viewport-texts + {:key (dm/str "texts-" page-id) + :page-id page-id + :objects objects + :modifiers modifiers + :edition edition}]] (when show-comments? [:& comments/comments-layer {:vbox vbox @@ -236,23 +244,6 @@ :objects base-objects :active-frames @active-frames}]]]] - [:svg.render-shapes - {:id "text-position-layer" - :xmlns "http://www.w3.org/2000/svg" - :xmlnsXlink "http://www.w3.org/1999/xlink" - :preserveAspectRatio "xMidYMid meet" - :key (str "text-position-layer" page-id) - :width (:width vport 0) - :height (:height vport 0) - :view-box (utils/format-viewbox vbox)} - - [:g {:pointer-events "none" :opacity 0} - [:& stv/viewport-texts {:key (dm/str "texts-" page-id) - :page-id page-id - :objects objects - :modifiers modifiers - :edition edition}]]] - [:svg.viewport-controls {:xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index a3aeb4da5..fd4127f80 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -128,6 +128,14 @@ (when (some? node) (.-parentElement ^js node))) +(defn get-parent-with-selector + [^js node selector] + + (loop [current node] + (if (or (nil? current) (.matches current selector) ) + current + (recur (.-parentElement current))))) + (defn get-value "Extract the value from dom node." [^js node] diff --git a/frontend/src/app/util/text_svg_position.cljs b/frontend/src/app/util/text_svg_position.cljs index 5e00aa731..f73655a19 100644 --- a/frontend/src/app/util/text_svg_position.cljs +++ b/frontend/src/app/util/text_svg_position.cljs @@ -8,10 +8,8 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.geom.point :as gpt] [app.common.transit :as transit] [app.main.fonts :as fonts] - [app.main.store :as st] [app.util.dom :as dom] [app.util.text-position-data :as tpd] [promesa.core :as p])) @@ -59,78 +57,54 @@ (p/then #(when (not (dom/check-font? font)) (load-font font)))))) -(defn calc-text-node-positions - [base-node viewport zoom] +(defn- calc-text-node-positions + [shape-id] - (when (and (some? base-node)(some? viewport)) - (let [translate-point - (fn [pt] - (let [vbox (.. ^js viewport -viewBox -baseVal) - brect (dom/get-bounding-rect viewport) - brect (gpt/point (d/parse-integer (:left brect)) - (d/parse-integer (:top brect))) - box (gpt/point (.-x vbox) (.-y vbox)) - zoom (gpt/point zoom)] - - (-> (gpt/subtract pt brect) - (gpt/divide zoom) - (gpt/add box)))) + (when (some? shape-id) + (let [text-nodes (dom/query-all (dm/str "#html-text-node-" shape-id " .text-node")) + load-fonts (->> text-nodes (map resolve-font)) - translate-rect - (fn [{:keys [x y width height] :as rect}] - (let [p1 (-> (gpt/point x y) - (translate-point)) - - p2 (-> (gpt/point (+ x width) (+ y height)) - (translate-point))] - (assoc rect - :x (:x p1) - :y (:y p1) - :width (- (:x p2) (:x p1)) - :height (- (:y p2) (:y p1))))) - - text-nodes (dom/query-all base-node ".text-node, span[data-text]") - load-fonts (->> text-nodes (map resolve-font))] + process-text-node + (fn [parent-node] + (let [root (dom/get-parent-with-selector parent-node ".text-node-html") + shape-x (-> (dom/get-attribute root "data-x") d/parse-double) + shape-y (-> (dom/get-attribute root "data-y") d/parse-double) + direction (.-direction (js/getComputedStyle parent-node))] + (->> (.-childNodes parent-node) + (mapcat #(parse-text-nodes parent-node direction %)) + (mapv #(-> % + (update-in [:position :x] + shape-x) + (update-in [:position :y] + shape-y))))))] (-> (p/all load-fonts) (p/then (fn [] - (->> text-nodes - (mapcat - (fn [parent-node] - (let [direction (.-direction (js/getComputedStyle parent-node))] - (->> (.-childNodes parent-node) - (mapcat #(parse-text-nodes parent-node direction %)))))) - (mapv #(update % :position translate-rect))))))))) + (->> text-nodes (mapcat process-text-node)))))))) (defn calc-position-data - [base-node] - (let [viewport (dom/get-element "render") - zoom (or (get-in @st/state [:workspace-local :zoom]) 1)] - (when (and (some? base-node) (some? viewport)) - (p/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 direction]}] - (let [{:keys [x y width height]} position - styles (js/getComputedStyle ^js node) - get (fn [prop] - (let [value (.getPropertyValue styles prop)] - (when (and value (not= value "")) - value)))] - (d/without-nils - {:x x - :y (+ y height) - :width width - :height height - :direction direction - :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")) - :letter-spacing (str (get "letter-spacing")) - :font-style (str (get "font-style")) - :fills (transit/decode-str (get "--fills")) - :text text})))))))))) - - + [shape-id] + (when (some? shape-id) + (p/let [text-data (calc-text-node-positions shape-id)] + (when (d/not-empty? text-data) + (->> text-data + (mapv (fn [{:keys [node position text direction]}] + (let [{:keys [x y width height]} position + styles (js/getComputedStyle ^js node) + get (fn [prop] + (let [value (.getPropertyValue styles prop)] + (when (and value (not= value "")) + value)))] + (d/without-nils + {:x x + :y (+ y height) + :width width + :height height + :direction direction + :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")) + :letter-spacing (str (get "letter-spacing")) + :font-style (str (get "font-style")) + :fills (transit/decode-str (get "--fills")) + :text text})))))))))