3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-14 00:46:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add spec for new text data

Browse source
This commit is contained in:
alonso.torres 2022-02-17 18:10:28 +01:00
parent bbf91a8957
commit e183d67e2a
10 changed files with 93 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

10
backend/src/app/http/errors.clj
View file

@ -61,13 +61,13 @@
explain (us/pretty-explain data)] explain (us/pretty-explain data)]
{:status 400 {:status 400
:body (-> data :body (-> data
(dissoc ::s/problems) (dissoc ::s/problems ::s/value)
(dissoc ::s/value)
(cond-> explain (assoc :explain explain)))})) (cond-> explain (assoc :explain explain)))}))
(defmethod handle-exception :assertion (defmethod handle-exception :assertion
[error request] [error request]
(let [edata (ex-data error)] (let [edata (ex-data error)
explain (us/pretty-explain edata)]
(l/error ::l/raw (ex-message error) (l/error ::l/raw (ex-message error)
::l/context (get-error-context request error) ::l/context (get-error-context request error)
:cause error) :cause error)
@ -75,7 +75,9 @@
{:status 500 {:status 500
:body {:type :server-error :body {:type :server-error
:code :assertion :code :assertion
:data (dissoc edata ::s/problems ::s/value ::s/spec)}})) :data (-> edata
(dissoc ::s/problems ::s/value ::s/spec)
(cond-> explain (assoc :explain explain)))}}))
(defmethod handle-exception :not-found (defmethod handle-exception :not-found
[err _] [err _]

43
common/src/app/common/spec/shape.cljc
View file

@ -208,6 +208,46 @@
:text-content :text-content
(s/keys :req-un [:internal.shape.text/text])))) (s/keys :req-un [:internal.shape.text/text]))))
(s/def :internal.shape.text/position-data
(s/coll-of :internal.shape.text/position-data-element
:kind vector?
:min-count 1))
(s/def :internal.shape.text/position-data-element
(s/keys :req-un [:internal.shape.text.position-data/x
:internal.shape.text.position-data/y
:internal.shape.text.position-data/width
:internal.shape.text.position-data/height]
:opt-un [:internal.shape.text.position-data/fill-color
:internal.shape.text.position-data/fill-opacity
:internal.shape.text.position-data/font-family
:internal.shape.text.position-data/font-size
:internal.shape.text.position-data/font-style
:internal.shape.text.position-data/font-weight
:internal.shape.text.position-data/rtl?
:internal.shape.text.position-data/text
:internal.shape.text.position-data/text-decoration
:internal.shape.text.position-data/text-transform]
))
(s/def :internal.shape.text.position-data/x ::us/safe-number)
(s/def :internal.shape.text.position-data/y ::us/safe-number)
(s/def :internal.shape.text.position-data/width ::us/safe-number)
(s/def :internal.shape.text.position-data/height ::us/safe-number)
(s/def :internal.shape.text.position-data/fill-color ::fill-color)
(s/def :internal.shape.text.position-data/fill-opacity ::fill-opacity)
(s/def :internal.shape.text.position-data/fill-color-gradient ::fill-color-gradient)
(s/def :internal.shape.text.position-data/font-family string?)
(s/def :internal.shape.text.position-data/font-size string?)
(s/def :internal.shape.text.position-data/font-style string?)
(s/def :internal.shape.text.position-data/font-weight string?)
(s/def :internal.shape.text.position-data/rtl? boolean?)
(s/def :internal.shape.text.position-data/text string?)
(s/def :internal.shape.text.position-data/text-decoration string?)
(s/def :internal.shape.text.position-data/text-transform string?)
(s/def :internal.shape.path/command keyword?) (s/def :internal.shape.path/command keyword?)
(s/def :internal.shape.path/params (s/def :internal.shape.path/params
(s/nilable (s/map-of keyword? any?))) (s/nilable (s/map-of keyword? any?)))
@ -226,7 +266,8 @@
(defmethod shape-spec :text [_] (defmethod shape-spec :text [_]
(s/and ::shape-attrs (s/and ::shape-attrs
(s/keys :opt-un [:internal.shape.text/content]))) (s/keys :opt-un [:internal.shape.text/content
:internal.shape.text/position-data])))
(defmethod shape-spec :path [_] (defmethod shape-spec :path [_]
(s/and ::shape-attrs (s/and ::shape-attrs

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

@ -35,8 +35,7 @@
;; the property it's known. ;; the property it's known.
;; `inline-flex` is similar to flex but `overflows` outside the bounds of the ;; `inline-flex` is similar to flex but `overflows` outside the bounds of the
;; parent ;; parent
(let [auto-width? (= grow-type :auto-width) (let [auto-width? (= grow-type :auto-width)]
auto-height? (= grow-type :auto-height)]
#js {:display "inline-flex" #js {:display "inline-flex"
:flexDirection "column" :flexDirection "column"
:justifyContent "inherit" :justifyContent "inherit"

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

@ -23,7 +23,7 @@
[props] [props]
(let [render-id (mf/use-ctx muc/render-ctx) (let [render-id (mf/use-ctx muc/render-ctx)
{:keys [id x y width height position-data] :as shape} (obj/get props "shape") {:keys [position-data] :as shape} (obj/get props "shape")
transform (str (gsh/transform-matrix shape)) transform (str (gsh/transform-matrix shape))
group-props (-> #js {:transform transform} group-props (-> #js {:transform transform}
(attrs/add-style-attrs shape render-id)) (attrs/add-style-attrs shape render-id))

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

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.shapes.text (ns app.main.ui.workspace.shapes.text
(:require (:require
[app.common.attrs :as attrs] [app.common.attrs :as attrs]
[app.common.data :as d]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.logging :as log] [app.common.logging :as log]
@ -150,7 +151,9 @@
(gsh/transform-rect mtx)))))] (gsh/transform-rect mtx)))))]
(reset! local-position-data position-data)))) (reset! local-position-data position-data))))
[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)] [shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))]
;; When the text is "dirty?" we get recalculate the positions ;; When the text is "dirty?" we get recalculate the positions
(mf/use-layout-effect (mf/use-layout-effect
@ -159,21 +162,22 @@
(let [node (mf/ref-val shape-ref)] (let [node (mf/ref-val shape-ref)]
(when (and dirty? (some? node)) (when (and dirty? (some? node))
(let [position-data (utp/calc-position-data node)] (let [position-data (utp/calc-position-data node)]
(reset! local-position-data nil) (when (d/not-empty? position-data)
(st/emit! (dch/update-shapes (reset! local-position-data nil)
[id] (st/emit! (dch/update-shapes
(fn [shape] [id]
(-> shape (fn [shape]
(dissoc :dirty?) (-> shape
(assoc :position-data position-data))) (dissoc :dirty?)
{:save-undo? false}))))))) (assoc :position-data position-data)))
{:save-undo? false}))))))))
[:> shape-container {:shape shape} [:> shape-container {:shape shape}
;; We keep hidden the shape when we're editing so it keeps track of the size ;; We keep hidden the shape when we're editing so it keeps track of the size
;; and updates the selrect accordingly ;; and updates the selrect accordingly
[:* [:*
[:g.text-shape {:ref on-change-node [:g.text-shape {:ref on-change-node
:opacity (when (or edition? (some? (:position-data shape))) 0) :opacity (when (or edition? show-svg-text?) 0)
:pointer-events "none"} :pointer-events "none"}
;; The `:key` prop here is mandatory because the ;; The `:key` prop here is mandatory because the
@ -186,7 +190,7 @@
:edition? edition? :edition? edition?
:key (str id edition?)}]] :key (str id edition?)}]]
(when (and (or (some? (:position-data shape)) (some? local-position-data))) (when show-svg-text?
(let [shape (let [shape
(cond-> shape (cond-> shape
(some? @local-position-data) (some? @local-position-data)

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

@ -15,15 +15,11 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.cursors :as cur] [app.main.ui.cursors :as cur]
[app.main.ui.hooks.mutable-observer :refer [use-mutable-observer]]
[app.main.ui.shapes.shape :refer [shape-container]]
[app.main.ui.shapes.text.styles :as sts] [app.main.ui.shapes.text.styles :as sts]
[app.main.ui.shapes.text.svg-text :as svg]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.text-editor :as ted] [app.util.text-editor :as ted]
[app.util.text-svg-position :as utp]
[goog.events :as events] [goog.events :as events]
[rumext.alpha :as mf]) [rumext.alpha :as mf])
(:import (:import

5
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -84,7 +84,6 @@
;; REFS ;; REFS
viewport-ref (mf/use-ref nil) viewport-ref (mf/use-ref nil)
raw-position-ref (mf/use-ref nil) ;; Stores the raw position of the cursor
;; VARS ;; VARS
disable-paste (mf/use-var false) disable-paste (mf/use-var false)
@ -130,7 +129,7 @@
on-pointer-down (actions/on-pointer-down) on-pointer-down (actions/on-pointer-down)
on-pointer-enter (actions/on-pointer-enter in-viewport?) on-pointer-enter (actions/on-pointer-enter in-viewport?)
on-pointer-leave (actions/on-pointer-leave in-viewport?) on-pointer-leave (actions/on-pointer-leave in-viewport?)
on-pointer-move (actions/on-pointer-move viewport-ref raw-position-ref zoom move-stream) on-pointer-move (actions/on-pointer-move viewport-ref zoom move-stream)
on-pointer-up (actions/on-pointer-up) on-pointer-up (actions/on-pointer-up)
on-move-selected (actions/on-move-selected hover hover-ids selected space?) on-move-selected (actions/on-move-selected hover hover-ids selected space?)
on-menu-selected (actions/on-menu-selected hover hover-ids selected) on-menu-selected (actions/on-menu-selected hover hover-ids selected)
@ -169,7 +168,7 @@
(hooks/setup-viewport-size viewport-ref) (hooks/setup-viewport-size viewport-ref)
(hooks/setup-cursor cursor alt? ctrl? space? panning drawing-tool drawing-path? node-editing?) (hooks/setup-cursor cursor alt? ctrl? space? panning drawing-tool drawing-path? node-editing?)
(hooks/setup-keyboard alt? ctrl? space?) (hooks/setup-keyboard alt? ctrl? space?)
(hooks/setup-hover-shapes page-id move-stream raw-position-ref base-objects transform selected ctrl? hover hover-ids @hover-disabled? zoom) (hooks/setup-hover-shapes page-id move-stream base-objects transform selected ctrl? hover hover-ids @hover-disabled? zoom)
(hooks/setup-viewport-modifiers modifiers base-objects) (hooks/setup-viewport-modifiers modifiers base-objects)
(hooks/setup-shortcuts node-editing? drawing-path?) (hooks/setup-shortcuts node-editing? drawing-path?)
(hooks/setup-active-frames base-objects vbox hover active-frames) (hooks/setup-active-frames base-objects vbox hover active-frames)

3
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

@ -350,14 +350,13 @@
(kbd/shift? event) (kbd/shift? event)
(kbd/alt? event)))))))) (kbd/alt? event))))))))
(defn on-pointer-move [viewport-ref raw-position-ref zoom move-stream] (defn on-pointer-move [viewport-ref zoom move-stream]
(mf/use-callback (mf/use-callback
(mf/deps zoom move-stream) (mf/deps zoom move-stream)
(fn [event] (fn [event]
(let [raw-pt (dom/get-client-position event) (let [raw-pt (dom/get-client-position event)
viewport (mf/ref-val viewport-ref) viewport (mf/ref-val viewport-ref)
pt (utils/translate-point-to-viewport viewport zoom raw-pt)] pt (utils/translate-point-to-viewport viewport zoom raw-pt)]
(mf/set-ref-val! raw-position-ref raw-pt)
(rx/push! move-stream pt))))) (rx/push! move-stream pt)))))
(defn on-mouse-wheel [viewport-ref zoom] (defn on-mouse-wheel [viewport-ref zoom]

3
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -8,7 +8,6 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.geom.shapes.rect :as gshr]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.main.data.shortcuts :as dsc] [app.main.data.shortcuts :as dsc]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
@ -98,7 +97,7 @@
(some #(cph/is-parent? objects % group-id)) (some #(cph/is-parent? objects % group-id))
(not)))) (not))))
(defn setup-hover-shapes [page-id move-stream raw-position-ref objects transform selected ctrl? hover hover-ids hover-disabled? zoom] (defn setup-hover-shapes [page-id move-stream objects transform selected ctrl? hover hover-ids hover-disabled? zoom]
(let [;; We use ref so we don't recreate the stream on a change (let [;; We use ref so we don't recreate the stream on a change
zoom-ref (mf/use-ref zoom) zoom-ref (mf/use-ref zoom)
ctrl-ref (mf/use-ref @ctrl?) ctrl-ref (mf/use-ref @ctrl?)

48
frontend/src/app/util/text_svg_position.cljs
View file

@ -99,27 +99,27 @@
zoom (get-in @st/state [:workspace-local :zoom]) zoom (get-in @st/state [:workspace-local :zoom])
text-data (calc-text-node-positions base-node viewport zoom)] text-data (calc-text-node-positions base-node viewport zoom)]
(->> text-data (->> text-data
(map (fn [{:keys [node position text]}] (mapv (fn [{:keys [node position text]}]
(let [{:keys [x y width height]} position (let [{:keys [x y width height]} position
rtl? (= "rtl" (.-dir (.-parentElement ^js node))) rtl? (= "rtl" (.-dir (.-parentElement ^js node)))
styles (js/getComputedStyle ^js node) styles (js/getComputedStyle ^js node)
get (fn [prop] get (fn [prop]
(let [value (.getPropertyValue styles prop)] (let [value (.getPropertyValue styles prop)]
(when (and value (not= value "")) (when (and value (not= value ""))
value)))] value)))]
(d/without-nils (d/without-nils
{:rtl? rtl? {:rtl? rtl?
:x (if rtl? (+ x width) x) :x (if rtl? (+ x width) x)
:y (+ y height) :y (+ y height)
:width width :width width
:height height :height height
:font-family (str (get "font-family")) :font-family (str (get "font-family"))
:font-size (str (get "font-size")) :font-size (str (get "font-size"))
:font-weight (str (get "font-weight")) :font-weight (str (get "font-weight"))
:text-transform (str (get "text-transform")) :text-transform (str (get "text-transform"))
:text-decoration (str (get "text-decoration")) :text-decoration (str (get "text-decoration"))
:font-style (str (get "font-style")) :font-style (str (get "font-style"))
:fill-color (or (get "--fill-color") "#000000") :fill-color (or (get "--fill-color") "#000000")
:fill-color-gradient (transit/decode-str (get "--fill-color-gradient")) :fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
:fill-opacity (d/parse-double (or (get "--fill-opacity") "1")) :fill-opacity (d/parse-double (or (get "--fill-opacity") "1"))
:text text}))))))) :text text})))))))