mirror of
https://github.com/penpot/penpot.git
synced 2026-04-25 11:18:36 +00:00
♻️ Convert workspace shapes/text components to * suffix (Batch 3)
Migrate ::mf/wrap-props false components in shapes/text/: - editor.cljs: text-shape-edit-html* (forward-ref), text-editor-svg* (block-component and selection-component kept as-is, used by DraftJS internals) - v3_editor.cljs: text-editor* - viewport_texts_html.cljs: text-container*, text-changes-renderer*, text-modifiers-renderer*, viewport-text-editing*, viewport-texts* (viewport-texts* preserves custom check-props memo wrap) - Update call sites in viewport.cljs and viewport_wasm.cljs
This commit is contained in:
Andrey Antukh
parent
c18425c8ad
commit
7b53c99482
@ -95,12 +95,11 @@
|
||||
"bottom" "flex-end"
|
||||
nil))
|
||||
|
||||
(mf/defc text-shape-edit-html
|
||||
(mf/defc text-shape-edit-html*
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props _]
|
||||
(let [{:keys [id content] :as shape} (obj/get props "shape")
|
||||
[{:keys [shape]} _]
|
||||
(let [{:keys [id content]} shape
|
||||
|
||||
state-map (mf/deref refs/workspace-editor-state)
|
||||
state (get state-map id empty-editor-state)
|
||||
@ -269,8 +268,7 @@
|
||||
(-> (gpt/subtract pt box)
|
||||
(gpt/multiply zoom)))))
|
||||
|
||||
(mf/defc text-editor-svg
|
||||
{::mf/wrap-props false}
|
||||
(mf/defc text-editor-svg*
|
||||
[{:keys [shape modifiers]}]
|
||||
(let [shape-id (dm/get-prop shape :id)
|
||||
modifiers (dm/get-in modifiers [shape-id :modifiers])
|
||||
@ -343,6 +341,6 @@
|
||||
|
||||
[:foreignObject {:x x :y y :width width :height height}
|
||||
[:div {:style style}
|
||||
[:& text-shape-edit-html
|
||||
[:> text-shape-edit-html*
|
||||
{:shape shape
|
||||
:key (dm/str shape-id)}]]]]))
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
[app.render-wasm.api :as wasm.api]
|
||||
[app.render-wasm.text-editor :as text-editor]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
@ -40,12 +39,10 @@
|
||||
(if (>= (count lang) 3) (str/capital lang) (str/upper lang)))
|
||||
"Noto Color Emoji"))
|
||||
|
||||
(mf/defc text-editor
|
||||
(mf/defc text-editor*
|
||||
"Contenteditable element positioned over the text shape to capture input events."
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (obj/get props "shape")
|
||||
shape-id (dm/get-prop shape :id)
|
||||
[{:keys [shape]}]
|
||||
(let [shape-id (dm/get-prop shape :id)
|
||||
|
||||
clip-id (dm/str "text-edition-clip" shape-id)
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
[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.text.content :as content]
|
||||
@ -116,14 +115,10 @@
|
||||
props))))
|
||||
(p/fmap #(st/emit! (dwt/update-text-modifier id %)))))
|
||||
|
||||
(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/defc text-container*
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [shape on-update]}]
|
||||
(let [handle-update
|
||||
(mf/use-callback
|
||||
(mf/deps shape on-update)
|
||||
(fn [node]
|
||||
@ -147,12 +142,9 @@
|
||||
(mth/close? (dm/get-prop shape :width) (dm/get-prop other :width))
|
||||
(mth/close? (dm/get-prop shape :height) (dm/get-prop other :height)))))
|
||||
|
||||
(mf/defc text-changes-renderer
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [text-shapes (unchecked-get props "text-shapes")
|
||||
|
||||
prev-text-shapes (hooks/use-previous text-shapes)
|
||||
(mf/defc text-changes-renderer*
|
||||
[{:keys [text-shapes]}]
|
||||
(let [prev-text-shapes (hooks/use-previous text-shapes)
|
||||
|
||||
;; We store in the state the texts still pending to be calculated so we can
|
||||
;; get its position
|
||||
@ -191,15 +183,13 @@
|
||||
|
||||
[:.text-changes-renderer
|
||||
(for [{:keys [id] :as shape} changed-texts]
|
||||
[:& text-container {:key (dm/str "text-container-" id)
|
||||
:shape shape
|
||||
:on-update handle-update-shape}])]))
|
||||
[:> text-container* {:key (dm/str "text-container-" id)
|
||||
:shape shape
|
||||
:on-update handle-update-shape}])]))
|
||||
|
||||
(mf/defc text-modifiers-renderer
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [text-shapes (-> (obj/get props "text-shapes")
|
||||
(update-vals fix-position))
|
||||
(mf/defc text-modifiers-renderer*
|
||||
[{:keys [text-shapes]}]
|
||||
(let [text-shapes (update-vals text-shapes fix-position)
|
||||
|
||||
prev-text-shapes (hooks/use-previous text-shapes)
|
||||
|
||||
@ -223,16 +213,14 @@
|
||||
|
||||
[:.text-changes-renderer
|
||||
(for [{:keys [id] :as shape} changed-texts]
|
||||
[:& text-container {:key (dm/str "text-container-" id)
|
||||
:shape shape
|
||||
:on-update handle-update-shape}])]))
|
||||
[:> text-container* {:key (dm/str "text-container-" id)
|
||||
:shape shape
|
||||
:on-update handle-update-shape}])]))
|
||||
|
||||
(mf/defc viewport-text-editing
|
||||
{::mf/wrap-props false
|
||||
::mf/wrap [mf/memo]}
|
||||
[props]
|
||||
(let [shape (obj/get props "shape")
|
||||
shape-id (:id shape)
|
||||
(mf/defc viewport-text-editing*
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [shape]}]
|
||||
(let [shape-id (:id shape)
|
||||
|
||||
workspace-editor-state (mf/deref refs/workspace-editor-state)
|
||||
workspace-v2-editor-state (mf/deref refs/workspace-v2-editor-state)
|
||||
@ -271,8 +259,8 @@
|
||||
(fn []
|
||||
#(st/emit! (dwt/remove-text-modifier (:id shape)))))
|
||||
|
||||
[:& text-container {:shape shape
|
||||
:on-update handle-update-shape}]))
|
||||
[:> text-container* {:shape shape
|
||||
:on-update handle-update-shape}]))
|
||||
|
||||
(defn check-props
|
||||
[new-props old-props]
|
||||
@ -283,15 +271,10 @@
|
||||
(= (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/defc viewport-texts*
|
||||
{::mf/wrap [#(mf/memo' % check-props)]}
|
||||
[{:keys [objects edition modifiers]}]
|
||||
(let [text-shapes
|
||||
(mf/use-memo
|
||||
(mf/deps objects)
|
||||
(fn []
|
||||
@ -334,7 +317,7 @@
|
||||
|
||||
[:*
|
||||
(when editing-shape
|
||||
[:& viewport-text-editing {:shape editing-shape}])
|
||||
[:> viewport-text-editing* {:shape editing-shape}])
|
||||
|
||||
[:& text-modifiers-renderer {:text-shapes text-shapes-modifiers}]
|
||||
[:& text-changes-renderer {:text-shapes text-shapes-changes}]]))
|
||||
[:> text-modifiers-renderer* {:text-shapes text-shapes-modifiers}]
|
||||
[:> text-changes-renderer* {:text-shapes text-shapes-changes}]]))
|
||||
|
||||
@ -339,7 +339,7 @@
|
||||
;; some opacity because to debug auto-width events will fill the screen
|
||||
:opacity 0.6}}
|
||||
(when (and (:can-edit permissions) (not read-only?))
|
||||
[:& stvh/viewport-texts
|
||||
[:> stvh/viewport-texts*
|
||||
{:key (dm/str "texts-" page-id)
|
||||
:page-id page-id
|
||||
:objects objects
|
||||
@ -442,8 +442,8 @@
|
||||
[:> editor-v2/text-editor* {:shape editing-shape
|
||||
:canvas-ref canvas-ref
|
||||
:modifiers modifiers}]
|
||||
[:& editor-v1/text-editor-svg {:shape editing-shape
|
||||
:modifiers modifiers}]))
|
||||
[:> editor-v1/text-editor-svg* {:shape editing-shape
|
||||
:modifiers modifiers}]))
|
||||
|
||||
(when show-frame-outline?
|
||||
(let [outlined-frame-id
|
||||
|
||||
@ -514,17 +514,17 @@
|
||||
(when show-text-editor?
|
||||
(cond
|
||||
(features/active-feature? @st/state "text-editor-wasm/v1")
|
||||
[:& editor-v3/text-editor {:shape editing-shape
|
||||
:canvas-ref canvas-ref
|
||||
:ref text-editor-ref}]
|
||||
[:> editor-v3/text-editor* {:shape editing-shape
|
||||
:canvas-ref canvas-ref
|
||||
:ref text-editor-ref}]
|
||||
|
||||
(features/active-feature? @st/state "text-editor/v2")
|
||||
[:> editor-v2/text-editor* {:shape editing-shape
|
||||
:canvas-ref canvas-ref
|
||||
:ref text-editor-ref}]
|
||||
|
||||
:else [:& editor-v1/text-editor-svg {:shape editing-shape
|
||||
:ref text-editor-ref}]))
|
||||
:else [:> editor-v1/text-editor-svg* {:shape editing-shape
|
||||
:ref text-editor-ref}]))
|
||||
|
||||
(when show-frame-outline?
|
||||
(let [outlined-frame-id
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user