Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 08:20:45 -05:00
Code Issues Activity

📎 Cosmetic changes on text shape component.

Browse source
This commit is contained in:
Andrey Antukh 2020-11-25 16:30:30 +01:00 committed by Hirunatan
parent 6c07cfcd25
commit 76d8ca1e72
2 changed files with 67 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -2,24 +2,27 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; 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/. ;; 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 (ns app.main.ui.shapes.text
(:require (:require
[clojure.set :as set] [app.common.data :as d]
[promesa.core :as p] [app.common.geom.matrix :as gmt]
[cuerdas.core :as str] [app.common.geom.shapes :as geom]
[rumext.alpha :as mf]
[app.main.data.fetch :as df] [app.main.data.fetch :as df]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.main.ui.context :as muc] [app.main.ui.context :as muc]
[app.main.ui.shapes.group :refer [mask-id-ctx]] [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.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 ;; --- Text Editor Rendering
@ -31,12 +34,12 @@
:width "100%" :width "100%"
:display "flex"}] :display "flex"}]
(cond-> base (cond-> base
(= valign "top") (obj/set! "alignItems" "flex-start") (= valign "top") (obj/set! "alignItems" "flex-start")
(= valign "center") (obj/set! "alignItems" "center") (= valign "center") (obj/set! "alignItems" "center")
(= valign "bottom") (obj/set! "alignItems" "flex-end") (= valign "bottom") (obj/set! "alignItems" "flex-end")
(= talign "left") (obj/set! "justifyContent" "flex-start") (= talign "left") (obj/set! "justifyContent" "flex-start")
(= talign "center") (obj/set! "justifyContent" "center") (= talign "center") (obj/set! "justifyContent" "center")
(= talign "right") (obj/set! "justifyContent" "flex-end") (= talign "right") (obj/set! "justifyContent" "flex-end")
(= talign "justify") (obj/set! "justifyContent" "stretch")))) (= talign "justify") (obj/set! "justifyContent" "stretch"))))
(defn- generate-paragraph-styles (defn- generate-paragraph-styles
@ -52,19 +55,19 @@
(defn- generate-text-styles (defn- generate-text-styles
[data] [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-decoration (obj/get data "text-decoration")
text-transform (obj/get data "text-transform") text-transform (obj/get data "text-transform")
line-height (obj/get data "line-height") 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-variant-id (obj/get data "font-variant-id")
font-family (obj/get data "font-family") font-family (obj/get data "font-family")
font-size (obj/get data "font-size") font-size (obj/get data "font-size")
;; Old properties for backwards compatibility ;; Old properties for backwards compatibility
fill (obj/get data "fill") fill (obj/get data "fill")
opacity (obj/get data "opacity" 1) opacity (obj/get data "opacity" 1)
fill-color (obj/get data "fill-color" fill) fill-color (obj/get data "fill-color" fill)

80
frontend/src/app/main/ui/workspace/shapes/text.cljs
View file

@ -11,32 +11,32 @@
(:require (:require
["slate" :as slate] ["slate" :as slate]
["slate-react" :as rslate] ["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.data :as d]
[app.common.geom.shapes :as geom] [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 :as dw]
[app.main.data.workspace.common :as dwc] [app.main.data.workspace.common :as dwc]
[app.main.data.workspace.texts :as dwt] [app.main.data.workspace.texts :as dwt]
[app.main.ui.cursors :as cur] [app.main.fonts :as fonts]
[app.main.ui.workspace.shapes.common :as common] [app.main.refs :as refs]
[app.main.ui.shapes.text :as text] [app.main.store :as st]
[app.main.ui.keyboard :as kbd]
[app.main.ui.context :as muc] [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.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 (:import
goog.events.EventType goog.events.EventType
goog.events.KeyCodes)) goog.events.KeyCodes))
@ -59,38 +59,40 @@
(mf/defc text-wrapper (mf/defc text-wrapper
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [{:keys [id x1 y1 content group grow-type width height ] :as shape} (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
selected-iref (mf/use-memo (mf/deps (:id shape)) selected-iref (mf/use-memo (mf/deps (:id shape))
#(refs/make-selected-ref (:id shape))) #(refs/make-selected-ref (:id shape)))
selected? (mf/deref selected-iref) selected? (mf/deref selected-iref)
edition (mf/deref refs/selected-edition) edition (mf/deref refs/selected-edition)
current-transform (mf/deref refs/current-transform) 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 on-double-click
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(when selected? (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/use-effect
(mf/deps shape edition selected? current-transform) (mf/deps check?)
(fn [] (let [check? (and (#{:auto-width :auto-height} (:grow-type shape)) (fn []
selected? (let [sem (timers/schedule #(reset! render-editor check?))]
(not edition?) #(rx/dispose! sem))))
(not embed-resources?)
(nil? current-transform))
result (timers/schedule #(reset! render-editor check?))]
#(rx/dispose! result))))
[:> shape-container {:shape shape [:> shape-container {:shape shape
:on-double-click on-double-click :on-double-click on-double-click