From 76d8ca1e72d82462681dac4889b9204904502e74 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 25 Nov 2020 16:30:30 +0100 Subject: [PATCH] :paperclip: Cosmetic changes on text shape component. --- frontend/src/app/main/ui/shapes/text.cljs | 49 ++++++------ .../app/main/ui/workspace/shapes/text.cljs | 80 ++++++++++--------- 2 files changed, 67 insertions(+), 62 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index 3fbc1f972..4a4513e01 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -2,24 +2,27 @@ ;; 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) 2016-2019 Andrey Antukh +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL (ns app.main.ui.shapes.text (:require - [clojure.set :as set] - [promesa.core :as p] - [cuerdas.core :as str] - [rumext.alpha :as mf] + [app.common.data :as d] + [app.common.geom.matrix :as gmt] + [app.common.geom.shapes :as geom] [app.main.data.fetch :as df] [app.main.fonts :as fonts] [app.main.ui.context :as muc] [app.main.ui.shapes.group :refer [mask-id-ctx]] - [app.common.data :as d] - [app.common.geom.shapes :as geom] - [app.common.geom.matrix :as gmt] - [app.util.object :as obj] [app.util.color :as uc] - [app.util.text :as ut])) + [app.util.object :as obj] + [app.util.text :as ut] + [clojure.set :as set] + [cuerdas.core :as str] + [promesa.core :as p] + [rumext.alpha :as mf])) ;; --- Text Editor Rendering @@ -31,12 +34,12 @@ :width "100%" :display "flex"}] (cond-> base - (= valign "top") (obj/set! "alignItems" "flex-start") - (= valign "center") (obj/set! "alignItems" "center") - (= valign "bottom") (obj/set! "alignItems" "flex-end") - (= talign "left") (obj/set! "justifyContent" "flex-start") - (= talign "center") (obj/set! "justifyContent" "center") - (= talign "right") (obj/set! "justifyContent" "flex-end") + (= valign "top") (obj/set! "alignItems" "flex-start") + (= valign "center") (obj/set! "alignItems" "center") + (= valign "bottom") (obj/set! "alignItems" "flex-end") + (= talign "left") (obj/set! "justifyContent" "flex-start") + (= talign "center") (obj/set! "justifyContent" "center") + (= talign "right") (obj/set! "justifyContent" "flex-end") (= talign "justify") (obj/set! "justifyContent" "stretch")))) (defn- generate-paragraph-styles @@ -52,19 +55,19 @@ (defn- generate-text-styles [data] - (let [letter-spacing (obj/get data "letter-spacing") + (let [letter-spacing (obj/get data "letter-spacing") text-decoration (obj/get data "text-decoration") - text-transform (obj/get data "text-transform") - line-height (obj/get data "line-height") + text-transform (obj/get data "text-transform") + line-height (obj/get data "line-height") - font-id (obj/get data "font-id" (:font-id ut/default-text-attrs)) + font-id (obj/get data "font-id" (:font-id ut/default-text-attrs)) font-variant-id (obj/get data "font-variant-id") - font-family (obj/get data "font-family") - font-size (obj/get data "font-size") + font-family (obj/get data "font-family") + font-size (obj/get data "font-size") ;; Old properties for backwards compatibility - fill (obj/get data "fill") + fill (obj/get data "fill") opacity (obj/get data "opacity" 1) fill-color (obj/get data "fill-color" fill) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index c389583f5..2a9b1b24b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -11,32 +11,32 @@ (:require ["slate" :as slate] ["slate-react" :as rslate] - [goog.events :as events] - [goog.object :as gobj] - [cuerdas.core :as str] - [rumext.alpha :as mf] - [beicon.core :as rx] - [app.util.color :as color] - [app.util.dom :as dom] - [app.util.text :as ut] - [app.util.object :as obj] - [app.util.color :as uc] - [app.util.timers :as timers] [app.common.data :as d] [app.common.geom.shapes :as geom] - [app.main.refs :as refs] - [app.main.store :as st] - [app.main.fonts :as fonts] [app.main.data.workspace :as dw] [app.main.data.workspace.common :as dwc] [app.main.data.workspace.texts :as dwt] - [app.main.ui.cursors :as cur] - [app.main.ui.workspace.shapes.common :as common] - [app.main.ui.shapes.text :as text] - [app.main.ui.keyboard :as kbd] + [app.main.fonts :as fonts] + [app.main.refs :as refs] + [app.main.store :as st] [app.main.ui.context :as muc] + [app.main.ui.cursors :as cur] + [app.main.ui.keyboard :as kbd] [app.main.ui.shapes.filters :as filters] - [app.main.ui.shapes.shape :refer [shape-container]]) + [app.main.ui.shapes.shape :refer [shape-container]] + [app.main.ui.shapes.text :as text] + [app.main.ui.workspace.shapes.common :as common] + [app.util.color :as color] + [app.util.color :as uc] + [app.util.dom :as dom] + [app.util.object :as obj] + [app.util.text :as ut] + [app.util.timers :as timers] + [beicon.core :as rx] + [cuerdas.core :as str] + [goog.events :as events] + [goog.object :as gobj] + [rumext.alpha :as mf]) (:import goog.events.EventType goog.events.KeyCodes)) @@ -59,38 +59,40 @@ (mf/defc text-wrapper {::mf/wrap-props false} [props] - (let [{:keys [id x1 y1 content group grow-type width height ] :as shape} (unchecked-get props "shape") - selected-iref (mf/use-memo (mf/deps (:id shape)) - #(refs/make-selected-ref (:id shape))) - selected? (mf/deref selected-iref) - edition (mf/deref refs/selected-edition) + (let [shape (unchecked-get props "shape") + selected-iref (mf/use-memo (mf/deps (:id shape)) + #(refs/make-selected-ref (:id shape))) + selected? (mf/deref selected-iref) + edition (mf/deref refs/selected-edition) current-transform (mf/deref refs/current-transform) + render-editor (mf/use-state false) - render-editor (mf/use-state false) + edition? (= edition (:id shape)) - edition? (= edition id) + embed-resources? (mf/use-ctx muc/embed-ctx) - embed-resources? (mf/use-ctx muc/embed-ctx) - - on-mouse-down #(handle-mouse-down % shape) - on-context-menu #(common/on-context-menu % shape) + on-mouse-down #(handle-mouse-down % shape) + on-context-menu #(common/on-context-menu % shape) on-double-click (fn [event] (dom/stop-propagation event) (dom/prevent-default event) (when selected? - (st/emit! (dw/start-edition-mode (:id shape)))))] + (st/emit! (dw/start-edition-mode (:id shape))))) + + check? + (and (#{:auto-width :auto-height} (:grow-type shape)) + selected? + (not edition?) + (not embed-resources?) + (nil? current-transform))] (mf/use-effect - (mf/deps shape edition selected? current-transform) - (fn [] (let [check? (and (#{:auto-width :auto-height} (:grow-type shape)) - selected? - (not edition?) - (not embed-resources?) - (nil? current-transform)) - result (timers/schedule #(reset! render-editor check?))] - #(rx/dispose! result)))) + (mf/deps check?) + (fn [] + (let [sem (timers/schedule #(reset! render-editor check?))] + #(rx/dispose! sem)))) [:> shape-container {:shape shape :on-double-click on-double-click