mirror of
https://github.com/penpot/penpot.git
synced 2025-02-26 16:56:11 -05:00
Make path resizable.
This commit is contained in:
parent
5fd1e7f030
commit
5d2c066356
4 changed files with 62 additions and 18 deletions
|
@ -42,7 +42,8 @@
|
|||
:rect (move-rect shape dpoint)
|
||||
:text (move-rect shape dpoint)
|
||||
:line (move-rect shape dpoint)
|
||||
:path (move-path shape dpoint)
|
||||
;; :path (move-path shape dpoint)
|
||||
:path (move-rect shape dpoint)
|
||||
:circle (move-circle shape dpoint)
|
||||
:group (move-group shape dpoint)))
|
||||
|
||||
|
@ -141,7 +142,8 @@
|
|||
:text (rect-size shape)
|
||||
:rect (rect-size shape)
|
||||
:icon (rect-size shape)
|
||||
:line (rect-size shape)))
|
||||
:line (rect-size shape)
|
||||
:path (rect-size shape)))
|
||||
|
||||
(defn- rect-size
|
||||
"A specialized function for calculate size
|
||||
|
@ -176,7 +178,6 @@
|
|||
:bottom (gpt/point (/ (+ x1 x2) 2)
|
||||
(/ (+ y1 y2) 2))))
|
||||
|
||||
|
||||
(defn- get-circle-vertext-point
|
||||
[{:keys [rx ry]} id]
|
||||
(gpt/point rx ry))
|
||||
|
@ -194,6 +195,7 @@
|
|||
:rect (move-rect-vertex shape vid dpoint)
|
||||
:text (move-rect-vertex shape vid dpoint)
|
||||
:icon (move-rect-vertex shape vid dpoint)
|
||||
:path (move-rect-vertex shape vid dpoint)
|
||||
:circle (move-circle-vertex shape vid dpoint)))
|
||||
|
||||
(defn- move-rect-vertex
|
||||
|
@ -260,6 +262,7 @@
|
|||
:icon (resize-rect shape point)
|
||||
:text (resize-rect shape point)
|
||||
:line (resize-line shape point)
|
||||
:path (resize-rect shape point)
|
||||
:circle (resize-circle shape point)))
|
||||
|
||||
(defn- resize-rect
|
||||
|
@ -443,7 +446,8 @@
|
|||
:text (generic-outer-rect state shape)
|
||||
:icon (generic-outer-rect state shape)
|
||||
:line (generic-outer-rect state shape)
|
||||
:path (path-outer-rect state shape)
|
||||
:path (generic-outer-rect state shape)
|
||||
;; :path (path-outer-rect state shape)
|
||||
:circle (circle-outer-rect state shape)
|
||||
:group (group-outer-rect state shape))]
|
||||
(if (:group shape)
|
||||
|
@ -579,6 +583,7 @@
|
|||
(declare text-transformation-matrix)
|
||||
(declare circle-transformation-matrix)
|
||||
(declare icon-transformation-matrix)
|
||||
(declare path-transformation-matrix)
|
||||
(declare group-transformation-matrix)
|
||||
|
||||
(defn transformation-matrix
|
||||
|
@ -590,6 +595,7 @@
|
|||
:text (text-transformation-matrix state shape)
|
||||
:circle (circle-transformation-matrix state shape)
|
||||
:icon (icon-transformation-matrix state shape)
|
||||
:path (path-transformation-matrix state shape)
|
||||
:group (group-transformation-matrix state shape))))
|
||||
|
||||
(defn- rect-transformation-matrix
|
||||
|
@ -628,6 +634,22 @@
|
|||
(gmt/translate (- center-x) (- center-y))
|
||||
(gmt/scale scale-x scale-y))))
|
||||
|
||||
(defn- path-transformation-matrix
|
||||
[state {:keys [x1 y1 rotation view-box] :or {rotation 0} :as shape}]
|
||||
(let [{:keys [width height]} (size shape)
|
||||
orig-width (nth view-box 2)
|
||||
orig-height (nth view-box 3)
|
||||
scale-x (/ width orig-width)
|
||||
scale-y (/ height orig-height)
|
||||
center-x (- width (/ width 2))
|
||||
center-y (- height (/ height 2))]
|
||||
(-> (gmt/matrix)
|
||||
(gmt/translate x1 y1)
|
||||
(gmt/translate center-x center-y)
|
||||
(gmt/rotate rotation)
|
||||
(gmt/translate (- center-x) (- center-y))
|
||||
(gmt/scale scale-x scale-y))))
|
||||
|
||||
(defn- circle-transformation-matrix
|
||||
[state {:keys [cx cy rx ry rotation] :or {rotation 0} :as shape}]
|
||||
(-> (gmt/matrix)
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
(defn render-component
|
||||
[{:keys [type] :as shape}]
|
||||
;; (println "render-component" (pr-str shape))
|
||||
(case type
|
||||
:group (group-component shape)
|
||||
:text (text/text-component shape)
|
||||
|
|
|
@ -19,11 +19,9 @@
|
|||
[{:keys [id] :as shape}]
|
||||
(let [selected (mx/react common/selected-shapes-ref)
|
||||
selected? (contains? selected id)
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)
|
||||
]
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)]
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down
|
||||
}
|
||||
:on-mouse-down on-mouse-down}
|
||||
(path-shape shape identity)]))
|
||||
|
||||
;; --- Path Shape
|
||||
|
@ -39,10 +37,11 @@
|
|||
|
||||
(mx/defc path-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id] :as shape}]
|
||||
[{:keys [id drawing?] :as shape}]
|
||||
(let [key (str "shape-" id)
|
||||
props {:d (render-path shape)}
|
||||
rfm (geom/transformation-matrix shape)
|
||||
attrs (-> (attrs/extract-style-attrs shape)
|
||||
(merge {:id key :key key})
|
||||
(merge props))]
|
||||
(merge {:id key :key key :d (render-path shape)})
|
||||
(merge (when-not drawing?
|
||||
{:transform (str rfm)})))]
|
||||
[:path attrs]))
|
||||
|
|
|
@ -101,17 +101,15 @@
|
|||
(uds/align-point point)
|
||||
(rx/of point))))
|
||||
(rx/map #(gpt/subtract % canvas-coords)))
|
||||
|
||||
stoper (->> wb/events-s
|
||||
(rx/map first)
|
||||
(rx/filter #(= % :mouse/double-click))
|
||||
(rx/take 1))
|
||||
;; stoper (rx/empty)
|
||||
firstpos (rx/take 1 mouse)
|
||||
stream (->> (rx/take-until stoper mouse)
|
||||
(rx/skip-while #(nil? @drawing-shape))
|
||||
(rx/with-latest-from vector wb/mouse-ctrl-s))
|
||||
ptstream (->> wb/events-s
|
||||
ptstream (->> (rx/take-until stoper wb/events-s)
|
||||
(rx/map first)
|
||||
(rx/filter #(= % :mouse/click))
|
||||
(rx/with-latest-from vector mouse)
|
||||
|
@ -127,25 +125,49 @@
|
|||
(if (= (count points) index)
|
||||
(append-point shape point)
|
||||
(assoc-in shape [:points index] point))))
|
||||
|
||||
(normalize-shape [{:keys [points] :as shape}]
|
||||
(let [minx (apply min (map :x points))
|
||||
miny (apply min (map :y points))
|
||||
maxx (apply max (map :x points))
|
||||
maxy (apply max (map :y points))
|
||||
|
||||
dx (- 0 minx)
|
||||
dy (- 0 miny)
|
||||
points (mapv #(gpt/add % [dx dy]) points)
|
||||
width (- maxx minx)
|
||||
height (- maxy miny)]
|
||||
|
||||
(assoc shape
|
||||
:x1 minx
|
||||
:y1 miny
|
||||
:x2 maxx
|
||||
:y2 maxy
|
||||
:view-box [0 0 width height]
|
||||
:points points)))
|
||||
|
||||
(on-first-point [point]
|
||||
(println "on-first-point" point)
|
||||
(let [shape (append-point shape point)]
|
||||
(swap! counter inc)
|
||||
(reset! drawing-shape shape)))
|
||||
|
||||
(on-click [point]
|
||||
(let [shape (append-point @drawing-shape point)]
|
||||
(swap! counter inc)
|
||||
(reset! drawing-shape shape)))
|
||||
|
||||
(on-draw [[point ctrl?]]
|
||||
(let [shape (update-point @drawing-shape point @counter)]
|
||||
(reset! drawing-shape shape)))
|
||||
|
||||
(on-end []
|
||||
(let [shape @drawing-shape]
|
||||
(let [shape (normalize-shape @drawing-shape)]
|
||||
(println "on-end" shape)
|
||||
(rs/emit! (uds/add-shape shape)
|
||||
(udw/select-for-drawing nil)
|
||||
(uds/select-first-shape))
|
||||
(reset! drawing-position nil)
|
||||
(reset! drawing-shape nil)
|
||||
(reset! drawing-position nil)
|
||||
(rlocks/release! :ui/draw)))]
|
||||
|
||||
(rx/subscribe firstpos on-first-point)
|
||||
|
|
Loading…
Add table
Reference in a new issue