mirror of
https://github.com/penpot/penpot.git
synced 2025-06-01 06:31:39 +02:00
🐛 Fixes problem with flipped texts
This commit is contained in:
alonso.torres
parent
2a17f0e507
commit
0046b60c93
5 changed files with 80 additions and 72 deletions
|
|
@ -65,52 +65,47 @@
|
|||
:position :top-left
|
||||
:props {:cx x :cy y}}
|
||||
|
||||
;; TOP
|
||||
{:type :rotation
|
||||
:position :top-right
|
||||
:props {:cx (+ x width) :cy y}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :top-right
|
||||
:props {:cx (+ x width) :cy y}}
|
||||
|
||||
{:type :rotation
|
||||
:position :bottom-right
|
||||
:props {:cx (+ x width) :cy (+ y height)}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :bottom-right
|
||||
:props {:cx (+ x width) :cy (+ y height)}}
|
||||
|
||||
{:type :rotation
|
||||
:position :bottom-left
|
||||
:props {:cx x :cy (+ y height)}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :bottom-left
|
||||
:props {:cx x :cy (+ y height)}}
|
||||
|
||||
{:type :resize-side
|
||||
:position :top
|
||||
:props {:x x :y y :length width :angle 0 }}
|
||||
|
||||
;; TOP-RIGHT
|
||||
{:type :rotation
|
||||
:position :top-right
|
||||
:props {:cx (+ x width) :cy y}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :top-right
|
||||
:props {:cx (+ x width) :cy y}}
|
||||
|
||||
;; RIGHT
|
||||
{:type :resize-side
|
||||
:position :right
|
||||
:props {:x (+ x width) :y y :length height :angle 90 }}
|
||||
|
||||
;; BOTTOM-RIGHT
|
||||
{:type :rotation
|
||||
:position :bottom-right
|
||||
:props {:cx (+ x width) :cy (+ y height)}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :bottom-right
|
||||
:props {:cx (+ x width) :cy (+ y height)}}
|
||||
|
||||
;; BOTTOM
|
||||
{:type :resize-side
|
||||
:position :bottom
|
||||
:props {:x (+ x width) :y (+ y height) :length width :angle 180 }}
|
||||
|
||||
;; BOTTOM-LEFT
|
||||
{:type :rotation
|
||||
:position :bottom-left
|
||||
:props {:cx x :cy (+ y height)}}
|
||||
|
||||
{:type :resize-point
|
||||
:position :bottom-left
|
||||
:props {:cx x :cy (+ y height)}}
|
||||
|
||||
;; LEFT
|
||||
{:type :resize-side
|
||||
:position :left
|
||||
:props {:x x :y (+ y height) :length height :angle 270 }}])
|
||||
:props {:x x :y (+ y height) :length height :angle 270 }}
|
||||
|
||||
])
|
||||
|
||||
(mf/defc rotation-handler [{:keys [cx cy transform position rotation zoom on-rotate]}]
|
||||
(let [size (/ rotation-handler-size zoom)
|
||||
|
|
@ -160,11 +155,13 @@
|
|||
(mf/defc resize-side-handler [{:keys [x y length angle zoom position rotation transform on-resize]}]
|
||||
(let [res-point (if (#{:top :bottom} position)
|
||||
{:y y}
|
||||
{:x x})]
|
||||
[:rect {:x (+ x (/ resize-point-rect-size zoom))
|
||||
{:x x})
|
||||
width length #_(max 0 (- length (/ (* resize-point-rect-size 2) zoom)))
|
||||
height (/ resize-side-height zoom)]
|
||||
[:rect {:x x
|
||||
:y (- y (/ resize-side-height 2 zoom))
|
||||
:width (max 0 (- length (/ (* resize-point-rect-size 2) zoom)))
|
||||
:height (/ resize-side-height zoom)
|
||||
:width width
|
||||
:height height
|
||||
:transform (gmt/multiply transform
|
||||
(gmt/rotate-matrix angle (gpt/point x y)))
|
||||
:on-mouse-down #(on-resize res-point %)
|
||||
|
|
@ -183,7 +180,7 @@
|
|||
current-transform (mf/deref refs/current-transform)
|
||||
|
||||
selrect (:selrect shape)
|
||||
transform (geom/transform-matrix shape)
|
||||
transform (geom/transform-matrix shape {:no-flip true})
|
||||
|
||||
tr-shape (geom/transform-shape shape)]
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
(ns app.main.ui.workspace.shapes.text
|
||||
(:require
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
|
|
@ -40,14 +41,11 @@
|
|||
|
||||
;; --- Text Wrapper for workspace
|
||||
|
||||
(defn handle-shape-resize [{:keys [name id selrect grow-type overflow-text]} new-width new-height]
|
||||
(defn handle-shape-resize [{:keys [id selrect grow-type overflow-text]} new-width new-height]
|
||||
(let [{shape-width :width shape-height :height} selrect
|
||||
undo-transaction (get-in @st/state [:workspace-undo :transaction])]
|
||||
(when (not undo-transaction) (st/emit! dwc/start-undo-transaction))
|
||||
(when (and (> new-width 0)
|
||||
(> new-height 0)
|
||||
(or (not= shape-width new-width)
|
||||
(not= shape-height new-height)))
|
||||
(when (and (> new-width 0) (> new-height 0))
|
||||
(cond
|
||||
(and overflow-text (not= :fixed grow-type))
|
||||
(st/emit! (dwt/update-overflow-text id false))
|
||||
|
|
@ -58,17 +56,19 @@
|
|||
(and (= :fixed grow-type) overflow-text (<= new-height shape-height))
|
||||
(st/emit! (dwt/update-overflow-text id false))
|
||||
|
||||
(= grow-type :auto-width)
|
||||
(and (or (not= shape-width new-width)
|
||||
(not= shape-height new-height))
|
||||
(= grow-type :auto-width))
|
||||
(st/emit! (dw/update-dimensions [id] :width new-width)
|
||||
(dw/update-dimensions [id] :height new-height))
|
||||
|
||||
(= grow-type :auto-height)
|
||||
(and (not= shape-height new-height) (= grow-type :auto-height))
|
||||
(st/emit! (dw/update-dimensions [id] :height new-height))))
|
||||
(when (not undo-transaction) (st/emit! dwc/discard-undo-transaction))))
|
||||
|
||||
(defn resize-observer [shape root query]
|
||||
(defn resize-observer [{:keys [id selrect grow-type overflow-text] :as shape} root query]
|
||||
(mf/use-effect
|
||||
(mf/deps shape root query)
|
||||
(mf/deps id selrect grow-type overflow-text root query)
|
||||
(fn []
|
||||
(let [on-change (fn [entries]
|
||||
(when (seq entries)
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
(timers/raf
|
||||
#(let [width (obj/get-in entries [0 "contentRect" "width"])
|
||||
height (obj/get-in entries [0 "contentRect" "height"])]
|
||||
(handle-shape-resize shape width height)))))
|
||||
(handle-shape-resize shape (mth/ceil width) (mth/ceil height))))))
|
||||
observer (js/ResizeObserver. on-change)
|
||||
node (when root (dom/query root query))]
|
||||
(when node (.observe observer node))
|
||||
|
|
@ -106,12 +106,9 @@
|
|||
handle-double-click (use-double-click shape selected?)
|
||||
|
||||
text-ref (mf/use-ref nil)
|
||||
text-node (mf/ref-val text-ref)
|
||||
edit-text-ref (mf/use-ref nil)
|
||||
edit-text-node (mf/ref-val edit-text-ref)]
|
||||
text-node (mf/ref-val text-ref)]
|
||||
|
||||
(resize-observer shape text-node ".paragraph-set")
|
||||
(resize-observer shape edit-text-node ".paragraph-set")
|
||||
|
||||
[:> shape-container {:shape shape}
|
||||
[:& text/text-shape {:key "text-shape"
|
||||
|
|
@ -121,7 +118,6 @@
|
|||
:style {:display (when edition? "none")}}]
|
||||
(when edition?
|
||||
[:& editor/text-shape-edit {:key "editor"
|
||||
:ref edit-text-ref
|
||||
:shape shape}])
|
||||
|
||||
(when-not edition?
|
||||
|
|
|
|||
|
|
@ -117,8 +117,13 @@
|
|||
[shape props]
|
||||
(mf/html
|
||||
(let [element (obj/get props "element")
|
||||
props (obj/merge! props #js {:shape shape})]
|
||||
(case (obj/get element "type")
|
||||
type (obj/get element "type")
|
||||
props (obj/merge! props #js {:shape shape})
|
||||
props (cond-> props
|
||||
(= type "root") (obj/set! "key" "root")
|
||||
(= type "paragraph-set") (obj/set! "key" "paragraph-set"))]
|
||||
|
||||
(case type
|
||||
"root" [:> editor-root-node props]
|
||||
"paragraph-set" [:> editor-paragraph-set-node props]
|
||||
"paragraph" [:> editor-paragraph-node props]
|
||||
|
|
@ -138,13 +143,12 @@
|
|||
[props ref]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
node-ref (unchecked-get props "node-ref")
|
||||
;; read-only? (or (unchecked-get props "read-only?") false)
|
||||
|
||||
{:keys [id x y width height content grow-type]} shape
|
||||
zoom (mf/deref refs/selected-zoom)
|
||||
state (mf/use-state #(parse-content content))
|
||||
editor (mf/use-memo #(dwt/create-editor))
|
||||
;;self-ref (mf/use-ref)
|
||||
self-ref (mf/use-ref)
|
||||
selecting-ref (mf/use-ref)
|
||||
measure-ref (mf/use-ref)
|
||||
|
||||
|
|
@ -164,7 +168,7 @@
|
|||
(let [sidebar (dom/get-element "settings-bar")
|
||||
assets (dom/get-element-by-class "assets-bar")
|
||||
cpicker (dom/get-element-by-class "colorpicker-tooltip")
|
||||
self (when node-ref (mf/ref-val node-ref))
|
||||
self (mf/ref-val self-ref)
|
||||
target (dom/get-target event)
|
||||
selecting? (mf/ref-val selecting-ref)]
|
||||
(when-not (or (and sidebar (.contains sidebar target))
|
||||
|
|
@ -227,7 +231,7 @@
|
|||
(reset! state (parse-content content))
|
||||
(reset! content-var content)))
|
||||
|
||||
[:foreignObject {:ref ref
|
||||
[:foreignObject {:ref self-ref
|
||||
:transform (gsh/transform-matrix shape)
|
||||
:x x :y y
|
||||
:width (if (#{:auto-width} grow-type) 10000 width)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue