From a84080ddfa0a691e7fcb6f18516fbd480f821df6 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 25 Feb 2020 21:01:18 +0100 Subject: [PATCH] :bug: Fix text shape edition on-blur interaction. --- frontend/src/uxbox/main/data/workspace.cljs | 12 ++++- frontend/src/uxbox/main/ui/shapes/text.cljs | 53 +++++++++++++++++---- 2 files changed, 53 insertions(+), 12 deletions(-) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index eb3e932f9..4f119dae2 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -1628,9 +1628,11 @@ ;; --- Start shape "edition mode" +(declare clear-edition-mode) + (defn start-edition-mode [id] - {:pre [(uuid? id)]} + (us/assert ::us/uuid id) (ptk/reify ::start-edition-mode ptk/UpdateEvent (update [_ state] @@ -1641,7 +1643,13 @@ (->> stream (rx/filter #(= % :interrupt)) (rx/take 1) - (rx/map (fn [_] #(d/dissoc-in % [:workspace-local :edition]))))))) + (rx/map (constantly clear-edition-mode)))))) + +(def clear-edition-mode + (ptk/reify ::clear-edition-mode + ptk/UpdateEvent + (update [_ state] + (update state :workspace-local dissoc :edition)))) ;; --- Select for Drawing diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index de363634a..c78c90f1c 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/shapes/text.cljs @@ -8,6 +8,7 @@ (:require [cuerdas.core :as str] [goog.events :as events] + [goog.object :as gobj] [lentes.core :as l] [rumext.core :as mx] [rumext.alpha :as mf] @@ -111,14 +112,35 @@ (mf/defc text-shape-edit [{:keys [shape] :as props}] (let [ref (mf/use-ref) - {:keys [id x y width height content]} shape] + {:keys [id x y width height content]} shape + + on-unmount + (fn [] + (let [content (-> (mf/ref-val ref) + (dom/get-value))] + (st/emit! (udw/update-shape id {:content content})))) + + + on-blur + (fn [event] + (st/emit! udw/clear-edition-mode + udw/deselect-all))] (mf/use-effect - #(fn [] - (let [content (-> (mf/ref-val ref) - (dom/get-value))] - (st/emit! (udw/update-shape id {:content content}))))) + #(let [dom (mf/ref-val ref) + val (dom/get-value dom)] + (.focus dom) + (gobj/set dom "selectionStart" (count val)) + (gobj/set dom "selectionEnd" (count val)) + (fn [] + (let [content (-> (mf/ref-val ref) + (dom/get-value))] + (st/emit! (udw/update-shape id {:content content})))))) + + + [:foreignObject {:x x :y y :width width :height height} [:textarea {:style (make-style shape) + :on-blur on-blur :default-value content :ref ref}]])) @@ -126,14 +148,25 @@ (mf/defc text-shape [{:keys [shape] :as props}] - (let [{:keys [id rotation modifier-mtx]} shape - shape (cond - (gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx) - :else shape) + (let [ds-modifier (:displacement-modifier shape) + rz-modifier (:resize-modifier shape) + + shape (cond-> shape + (gmt/matrix? rz-modifier) (geom/transform rz-modifier) + (gmt/matrix? ds-modifier) (geom/transform ds-modifier)) + + + {:keys [id x y width height rotation content]} shape + + transform (when (and rotation (pos? rotation)) + (str/format "rotate(%s %s %s)" + rotation + (+ x (/ width 2)) + (+ y (/ height 2))))] - {:keys [x y width height content]} shape] [:foreignObject {:x x :y y + :transform transform :id (str id) :width width :height height}