github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 10:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved text edition and drawing behavior.

Browse Source
This commit is contained in:
Andrey Antukh 2016-08-30 19:04:19 +03:00
parent f9d80363be
commit cf5f7349a6
No known key found for this signature in database
GPG Key ID: 4DFEBCB8316A8B95
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/uxbox/main/ui/shapes/selection.cljs
View File

@ -191,5 +191,10 @@
(path-edition-selection-handlers shape) (path-edition-selection-handlers shape)
(single-not-editable-selection-handlers shape)) (single-not-editable-selection-handlers shape))
(= :text (:type shape))
(if (= @edition-ref (:id shape))
(single-not-editable-selection-handlers shape)
(single-selection-handlers (first shapes)))
:else :else
(single-selection-handlers (first shapes)))))) (single-selection-handlers (first shapes))))))

33
src/uxbox/main/ui/shapes/text.cljs
View File

@ -22,12 +22,12 @@
;; --- Events ;; --- Events
(defn handle-mouse-down (defn handle-mouse-down
[event local {:keys [id group] :as shape} selected] [event {:keys [id group] :as shape} selected]
(if (and (not (:blocked shape)) (if (and (not (:blocked shape))
(or @common/drawing-state-ref (or @common/drawing-state-ref
(:edition @local) @common/edition-ref
(and group (:locked (geom/resolve-parent shape))))) (and group (:locked (geom/resolve-parent shape)))))
nil (dom/stop-propagation event)
(common/on-mouse-down event shape selected))) (common/on-mouse-down event shape selected)))
;; --- Text Component ;; --- Text Component
@ -36,25 +36,23 @@
(declare text-shape-edit) (declare text-shape-edit)
(mx/defcs text-component (mx/defcs text-component
{:mixins [mx/static mx/reactive (mx/local)]} {:mixins [mx/static mx/reactive]}
[own {:keys [id x1 y1 content group] :as shape}] [own {:keys [id x1 y1 content group] :as shape}]
(let [selected (mx/react common/selected-ref) (let [selected (mx/react common/selected-ref)
edition? (= (mx/react common/edition-ref) id)
selected? (and (contains? selected id) selected? (and (contains? selected id)
(= (count selected) 1)) (= (count selected) 1))]
local (:rum/local own)]
(letfn [(on-mouse-down [event] (letfn [(on-mouse-down [event]
(handle-mouse-down event local shape selected)) (handle-mouse-down event shape selected))
(on-done [_]
(swap! local assoc :edition false))
(on-double-click [event] (on-double-click [event]
(swap! local assoc :edition true) (dom/stop-propagation event)
(rlocks/acquire! :ui/text-edit))] (rs/emit! (uds/start-edition-mode id)))]
[:g.shape {:class (when selected? "selected") [:g.shape {:class (when selected? "selected")
:ref "main" :ref "main"
:on-double-click on-double-click :on-double-click on-double-click
:on-mouse-down on-mouse-down} :on-mouse-down on-mouse-down}
(if (:edition @local false) (if edition?
(text-shape-edit shape on-done) (text-shape-edit shape)
(text-shape shape))]))) (text-shape shape))])))
;; --- Text Styles Helpers ;; --- Text Styles Helpers
@ -104,14 +102,13 @@
(mx/defc text-shape-edit (mx/defc text-shape-edit
{:did-mount text-shape-edit-did-mount {:did-mount text-shape-edit-did-mount
:mixins [mx/static]} :mixins [mx/static]}
[{:keys [id x1 y1 content] :as shape} on-done] [{:keys [id x1 y1 content] :as shape}]
(let [size (geom/size shape) (let [size (geom/size shape)
style (make-style shape) style (make-style shape)
rfm (geom/transformation-matrix shape) rfm (geom/transformation-matrix shape)
props {:x x1 :y y1 props {:x x1 :y y1 :transform (str rfm)}
:transform (str rfm)}
props (merge props size)] props (merge props size)]
(letfn [(on-blur [ev] (letfn [#_(on-blur [ev]
(rlocks/release! :ui/text-edit) (rlocks/release! :ui/text-edit)
(on-done)) (on-done))
(on-input [ev] (on-input [ev]
@ -121,7 +118,7 @@
[:rect (merge props +select-rect-attrs+)] [:rect (merge props +select-rect-attrs+)]
[:foreignObject props [:foreignObject props
[:p {:ref "container" [:p {:ref "container"
:on-blur on-blur ;; :on-blur on-blur
:on-input on-input :on-input on-input
:contentEditable true :contentEditable true
:style style}]]]))) :style style}]]])))