diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 3e21da621..e23225338 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -58,60 +58,63 @@ (= grow-type :auto-width) (obj/set! "whiteSpace" "pre")))) (defn generate-text-styles - [data] - (let [letter-spacing (:letter-spacing data 0) - text-decoration (:text-decoration data) - text-transform (:text-transform data) - line-height (:line-height data 1.2) + ([data] + (generate-text-styles data nil)) - font-id (:font-id data (:font-id txt/default-text-attrs)) - font-variant-id (:font-variant-id data) + ([data {:keys [show-text?] :or {show-text? true}}] + (let [letter-spacing (:letter-spacing data 0) + text-decoration (:text-decoration data) + text-transform (:text-transform data) + line-height (:line-height data 1.2) - font-size (:font-size data) - fill-color (:fill-color data) - fill-opacity (:fill-opacity data) + font-id (:font-id data (:font-id txt/default-text-attrs)) + font-variant-id (:font-variant-id data) - [r g b a] (uc/hex->rgba fill-color fill-opacity) - text-color (when (and (some? fill-color) (some? fill-opacity)) - (str/format "rgba(%s, %s, %s, %s)" r g b a)) + font-size (:font-size data) + fill-color (:fill-color data) + fill-opacity (:fill-opacity data) - fontsdb (deref fonts/fontsdb) + [r g b a] (uc/hex->rgba fill-color fill-opacity) + text-color (when (and (some? fill-color) (some? fill-opacity)) + (str/format "rgba(%s, %s, %s, %s)" r g b a)) - base #js {:textDecoration text-decoration - :textTransform text-transform - :lineHeight (or line-height "inherit") - :color "transparent" - :caretColor (or text-color "black") - :overflowWrap "initial"} + fontsdb (deref fonts/fontsdb) - base (-> base - (obj/set! "--fill-color" fill-color) - (obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data))) - (obj/set! "--fill-opacity" fill-opacity))] + base #js {:textDecoration text-decoration + :textTransform text-transform + :lineHeight (or line-height "inherit") + :color (if show-text? text-color "transparent") + :caretColor (or text-color "black") + :overflowWrap "initial"} - (when (and (string? letter-spacing) - (pos? (alength letter-spacing))) - (obj/set! base "letterSpacing" (str letter-spacing "px"))) + base (-> base + (obj/set! "--fill-color" fill-color) + (obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data))) + (obj/set! "--fill-opacity" fill-opacity))] - (when (and (string? font-size) - (pos? (alength font-size))) - (obj/set! base "fontSize" (str font-size "px"))) + (when (and (string? letter-spacing) + (pos? (alength letter-spacing))) + (obj/set! base "letterSpacing" (str letter-spacing "px"))) - (when (and (string? font-id) - (pos? (alength font-id))) - (fonts/ensure-loaded! font-id) - (let [font (get fontsdb font-id) - font-family (str/quote - (or (:family font) - (:font-family data))) - font-variant (d/seek #(= font-variant-id (:id %)) - (:variants font)) - font-style (or (:style font-variant) - (:font-style data)) - font-weight (or (:weight font-variant) - (:font-weight data))] - (obj/set! base "fontFamily" font-family) - (obj/set! base "fontStyle" font-style) - (obj/set! base "fontWeight" font-weight))) + (when (and (string? font-size) + (pos? (alength font-size))) + (obj/set! base "fontSize" (str font-size "px"))) - base)) + (when (and (string? font-id) + (pos? (alength font-id))) + (fonts/ensure-loaded! font-id) + (let [font (get fontsdb font-id) + font-family (str/quote + (or (:family font) + (:font-family data))) + font-variant (d/seek #(= font-variant-id (:id %)) + (:variants font)) + font-style (or (:style font-variant) + (:font-style data)) + font-weight (or (:weight font-variant) + (:font-weight data))] + (obj/set! base "fontFamily" font-family) + (obj/set! base "fontStyle" font-style) + (obj/set! base "fontWeight" font-weight))) + + base))) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 36e82d864..dfdfc1093 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -122,12 +122,14 @@ (mf/defc text-wrapper {::mf/wrap-props false} [props] - (let [{:keys [id] :as shape} (unchecked-get props "shape") + (let [{:keys [id position-data] :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) local-position-data (mf/use-state nil) + sid-ref (mf/use-ref nil) + handle-change-foreign-object (fn [node] (when-let [position-data (utp/calc-position-data node)] @@ -149,9 +151,9 @@ (gsh/transform-rect mtx)))))] (reset! local-position-data position-data)))) - [_ on-change-node] (use-mutable-observer handle-change-foreign-object) + [node-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) (some? @local-position-data)) update-position-data (fn [] @@ -173,12 +175,36 @@ (fn [] (rx/dispose! sid))))) + (mf/use-layout-effect + (mf/deps show-svg-text?) + (fn [] + (let [] + (when-not show-svg-text? + ;; There is no position data we need to calculate it even if no change has happened + ;; this usualy happens the first time a text is rendered + (let [update-data + (fn update-data [] + (let [node (mf/ref-val node-ref)] + (if (some? node) + (let [position-data (utp/calc-position-data node)] + (reset! local-position-data position-data)) + + ;; No node present, we need to keep waiting + (do (when-let [sid (mf/ref-val sid-ref)] (rx/dispose! sid)) + (when-not @local-position-data + (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))))))] + (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))) + + (fn [] + (when-let [sid (mf/ref-val sid-ref)] + (rx/dispose! sid)))))) + [:> shape-container {:shape shape} ;; We keep hidden the shape when we're editing so it keeps track of the size ;; and updates the selrect accordingly [:* [:g.text-shape {:ref on-change-node - :opacity (when (or edition? show-svg-text?) 0) + :opacity (when show-svg-text? 0) :pointer-events "none"} ;; The `:key` prop here is mandatory because the @@ -186,7 +212,7 @@ ;; the component if the edition flag changes. [:& text-resize-content {:shape (cond-> shape - (:position-data shape) + show-svg-text? (dissoc :transform :transform-inverse)) :edition? edition? :key (str id edition?)}]] diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index ad6ea6f9b..5d4b45552 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -62,9 +62,9 @@ (-> (.getData content) (.toJS) (js->clj :keywordize-keys true) - (sts/generate-text-styles)) + (sts/generate-text-styles {:show-text? false})) (-> (txt/styles-to-attrs styles) - (sts/generate-text-styles)))) + (sts/generate-text-styles {:show-text? false})))) (def default-decorator (ted/create-decorator "PENPOT_SELECTION" selection-component))