mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
Add initial alignment on movement and resize.
This commit is contained in:
Andrey Antukh
parent
9e25f7ab9d
commit
c2e63d5603
5 changed files with 68 additions and 40 deletions
|
|
@ -7,15 +7,18 @@
|
|||
|
||||
(ns uxbox.data.shapes
|
||||
(:require [beicon.core :as rx]
|
||||
[uxbox.constants :as c]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.state.shapes :as stsh]
|
||||
[uxbox.schema :as sc]
|
||||
[uxbox.data.core :refer (worker)]
|
||||
[uxbox.data.pages :as udp]
|
||||
[uxbox.util.geom :as geom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.data :refer (index-of)]))
|
||||
[uxbox.util.data :refer (index-of)]
|
||||
[uxbox.util.workers :as uw]))
|
||||
|
||||
(defn add-shape
|
||||
"Create and add shape to the current selected page."
|
||||
|
|
@ -56,6 +59,25 @@
|
|||
(let [shape (get-in state [:shapes-by-id sid])]
|
||||
(update-in state [:shapes-by-id sid] geom/move delta)))))
|
||||
|
||||
(declare align-point)
|
||||
|
||||
(def coords
|
||||
(gpt/point c/canvas-start-x
|
||||
c/canvas-start-y))
|
||||
|
||||
(defn initial-align-shape
|
||||
[id]
|
||||
(reify
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state s]
|
||||
(let [shape (get-in state [:shapes-by-id id])
|
||||
shape (geom/outer-rect state shape)
|
||||
point (gpt/point (:x shape) (:y shape))
|
||||
point (gpt/add point coords)]
|
||||
(->> (align-point point)
|
||||
(rx/map #(gpt/subtract % point))
|
||||
(rx/map #(move-shape id %)))))))
|
||||
|
||||
(defn update-line-attrs
|
||||
[sid {:keys [x1 y1 x2 y2] :as opts}]
|
||||
(reify
|
||||
|
|
@ -110,6 +132,18 @@
|
|||
(-apply-update [_ state]
|
||||
(update-in state [:shapes-by-id id] geom/move-vertex vid delta))))
|
||||
|
||||
(defn initial-vertext-align
|
||||
[id vid]
|
||||
(reify
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state s]
|
||||
(let [shape (get-in state [:shapes-by-id id])
|
||||
point (geom/get-vertex-point shape vid)
|
||||
point (gpt/add point coords)]
|
||||
(->> (align-point point)
|
||||
(rx/map #(gpt/subtract % point))
|
||||
(rx/map #(update-vertex-position id {:vid vid :delta %})))))))
|
||||
|
||||
(defn update-position
|
||||
"Update the start position coordenate of the shape."
|
||||
[sid {:keys [x y] :as opts}]
|
||||
|
|
@ -444,3 +478,11 @@
|
|||
(-apply-update [_ state]
|
||||
(let [selected (get-in state [:workspace :selected])]
|
||||
(stsh/move-layer state selected loc)))))
|
||||
|
||||
;; --- Point Alignment (with Grid)
|
||||
|
||||
(defn align-point
|
||||
[point]
|
||||
(let [message {:cmd :grid/align :point point}]
|
||||
(->> (uw/ask! worker message)
|
||||
(rx/map :point))))
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; 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 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.ui.workspace.align
|
||||
"Shape alignmen impl."
|
||||
(:require [beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.data.core :refer (worker)]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.workers :as uw]))
|
||||
|
||||
;; (defn- move
|
||||
;; [shape p1]
|
||||
;; (let [dx (- (:x2 shape) (:x1 shape))
|
||||
;; dy (- (:y2 shape) (:y1 shape))
|
||||
;; p2 (gpt/add p1 [dx dy])]
|
||||
;; (assoc shape
|
||||
;; :x1 (:x p1)
|
||||
;; :y1 (:y p1)
|
||||
;; :x2 (:x p2)
|
||||
;; :y2 (:y p2))))
|
||||
|
||||
(defn translate
|
||||
[point]
|
||||
(let [message {:cmd :grid/align :point point}]
|
||||
(->> (uw/ask! worker message)
|
||||
(rx/map :point))))
|
||||
|
|
@ -14,12 +14,10 @@
|
|||
[uxbox.state :as st]
|
||||
[uxbox.ui.core :as uuc]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.align :as align]
|
||||
[uxbox.data.shapes :as uds]
|
||||
[uxbox.util.geom :as geom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
||||
;; --- Lenses
|
||||
|
||||
(defn- resolve-selected
|
||||
|
|
@ -61,12 +59,13 @@
|
|||
(rs/emit! (uds/move-shape id delta)))
|
||||
|
||||
(defn- watch-movement
|
||||
[stoper align? shape]
|
||||
[stoper align? {:keys [id] :as shape}]
|
||||
(when align? (rs/emit! (uds/initial-align-shape id)))
|
||||
(let [stream (->> wb/mouse-viewport-s
|
||||
(rx/sample 10)
|
||||
(rx/mapcat (fn [point]
|
||||
(if align?
|
||||
(align/translate point)
|
||||
(uds/align-point point)
|
||||
(rx/of point))))
|
||||
(rx/buffer 2 1)
|
||||
(rx/map wb/coords-delta)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[uxbox.data.shapes :as uds]
|
||||
[uxbox.ui.core :as uuc]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.align :as align]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
(declare initialize)
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
|
||||
(defn- initialize
|
||||
[event]
|
||||
(let [payload (:payload event)
|
||||
(let [{:keys [vid shape] :as payload} (:payload event)
|
||||
stoper (->> uuc/actions-s
|
||||
(rx/map :type)
|
||||
(rx/filter #(empty? %))
|
||||
|
|
@ -41,13 +40,15 @@
|
|||
(rx/sample 10)
|
||||
(rx/mapcat (fn [point]
|
||||
(if align?
|
||||
(align/translate point)
|
||||
(uds/align-point point)
|
||||
(rx/of point))))
|
||||
(rx/buffer 2 1)
|
||||
(rx/map wb/coords-delta)
|
||||
(rx/take-until stoper)
|
||||
(rx/map #(gpt/divide % @wb/zoom-l))
|
||||
(rx/with-latest-from vector wb/mouse-ctrl-s))]
|
||||
(when align?
|
||||
(rs/emit! (uds/initial-vertext-align shape vid)))
|
||||
(rx/subscribe stream #(handle-resize payload %))))
|
||||
|
||||
(defn- handle-resize
|
||||
|
|
|
|||
|
|
@ -138,6 +138,24 @@
|
|||
{:width (- x2 x1)
|
||||
:height (- y2 y1)})
|
||||
|
||||
;; --- Vertex Access
|
||||
|
||||
(declare get-rect-vertext-point)
|
||||
|
||||
(defn get-vertex-point
|
||||
[shape id]
|
||||
(case (:type shape)
|
||||
:icon (get-rect-vertext-point shape id)
|
||||
:rect (get-rect-vertext-point shape id)))
|
||||
|
||||
(defn- get-rect-vertext-point
|
||||
[{:keys [x1 y1 x2 y2]} id]
|
||||
(case id
|
||||
1 (gpt/point x1 y1)
|
||||
2 (gpt/point x2 y1)
|
||||
3 (gpt/point x1 y2)
|
||||
4 (gpt/point x2 y2)))
|
||||
|
||||
;; --- Vertex Movement (Relative)
|
||||
|
||||
(declare move-rect-vertex)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue