mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 00:10:11 -05:00
📎 Cosmetic changes on text shape component.
This commit is contained in:
Andrey Antukh
Hirunatan
parent
6c07cfcd25
commit
76d8ca1e72
2 changed files with 67 additions and 62 deletions
|
|
@ -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 <niwi@niwi.nz>
|
||||
;; 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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue