mirror of
https://github.com/penpot/penpot.git
synced 2025-05-21 09:26:12 +02:00
More work on zoom.
This commit is contained in:
Andrey Antukh
parent
9ce6cd0f92
commit
38509eea99
7 changed files with 56 additions and 71 deletions
|
|
@ -22,7 +22,7 @@
|
|||
[uxbox.ui.confirm]
|
||||
[uxbox.ui.keyboard :as kbd]
|
||||
[uxbox.ui.workspace.canvas.scroll :as scroll]
|
||||
[uxbox.ui.workspace.base :as uuwb]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.shortcuts :as wshortcuts]
|
||||
[uxbox.ui.workspace.header :refer (header)]
|
||||
[uxbox.ui.workspace.rules :refer (horizontal-rule vertical-rule)]
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
dom (mx/get-ref-dom own "workspace-canvas")]
|
||||
|
||||
;; Set initial scroll position
|
||||
(set! (.-scrollLeft dom) uuwb/canvas-start-scroll-x)
|
||||
(set! (.-scrollTop dom) uuwb/canvas-start-scroll-y)
|
||||
(set! (.-scrollLeft dom) (* wb/canvas-start-scroll-x @wb/zoom-l))
|
||||
(set! (.-scrollTop dom) (* wb/canvas-start-scroll-y @wb/zoom-l))
|
||||
|
||||
(assoc own ::sub1 sub1 ::sub2 sub2)))
|
||||
|
||||
|
|
@ -85,12 +85,7 @@
|
|||
(let [target (.-target event)
|
||||
top (.-scrollTop target)
|
||||
left (.-scrollLeft target)]
|
||||
(rx/push! uuwb/scroll-b (gpt/point left top))))
|
||||
|
||||
|
||||
(def ^:const ^:private zoom-l
|
||||
(-> (l/in [:workspace :zoom])
|
||||
(l/focus-atom st/state)))
|
||||
(rx/push! wb/scroll-b (gpt/point left top))))
|
||||
|
||||
(defn- on-wheel
|
||||
[own event]
|
||||
|
|
@ -102,12 +97,12 @@
|
|||
(rs/emit! (dw/decrease-zoom)))
|
||||
|
||||
(let [dom (mx/get-ref-dom own "workspace-canvas")]
|
||||
(set! (.-scrollLeft dom) (* uuwb/canvas-start-scroll-x (or @zoom-l 1)))
|
||||
(set! (.-scrollTop dom) (* uuwb/canvas-start-scroll-y (or @zoom-l 1))))))
|
||||
(set! (.-scrollLeft dom) (* wb/canvas-start-scroll-x @wb/zoom-l))
|
||||
(set! (.-scrollTop dom) (* wb/canvas-start-scroll-y @wb/zoom-l)))))
|
||||
|
||||
(defn- workspace-render
|
||||
[own projectid]
|
||||
(let [{:keys [flags zoom] :as workspace} (rum/react uuwb/workspace-l)
|
||||
(let [{:keys [flags zoom] :as workspace} (rum/react wb/workspace-l)
|
||||
left-sidebar? (not (empty? (keep flags [:layers :sitemap
|
||||
:document-history])))
|
||||
right-sidebar? (not (empty? (keep flags [:icons :drawtools
|
||||
|
|
|
|||
|
|
@ -40,22 +40,26 @@
|
|||
(as-> (ul/getter getter) $
|
||||
(l/focus-atom $ st/state))))
|
||||
|
||||
(def ^:static selected-shapes-l
|
||||
(def ^:const selected-shapes-l
|
||||
(as-> (l/in [:selected]) $
|
||||
(l/focus-atom $ workspace-l)))
|
||||
|
||||
(def ^:static toolboxes-l
|
||||
(def ^:const toolboxes-l
|
||||
(as-> (l/in [:toolboxes]) $
|
||||
(l/focus-atom $ workspace-l)))
|
||||
|
||||
(def ^:static flags-l
|
||||
(def ^:const flags-l
|
||||
(as-> (l/in [:flags]) $
|
||||
(l/focus-atom $ workspace-l)))
|
||||
|
||||
(def ^:static shapes-by-id-l
|
||||
(def ^:const shapes-by-id-l
|
||||
(as-> (l/key :shapes-by-id) $
|
||||
(l/focus-atom $ st/state)))
|
||||
|
||||
(def ^:const zoom-l
|
||||
(-> (l/in [:workspace :zoom])
|
||||
(l/focus-atom st/state)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Scroll Stream
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
[lentes.core :as l]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.shapes :as ush]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.data.workspace :as udw]
|
||||
[uxbox.data.shapes :as uds]
|
||||
[uxbox.ui.core :as uuc]
|
||||
|
|
@ -53,10 +54,11 @@
|
|||
|
||||
(define-once :drawing-subscriptions
|
||||
(letfn [(init-shape [shape]
|
||||
(let [{:keys [x y] :as point} @wb/mouse-canvas-a
|
||||
(let [{:keys [x y] :as pt} (gpt/divide @wb/mouse-canvas-a @wb/zoom-l)
|
||||
shape (ush/initialize shape {:x1 x :y1 y :x2 x :y2 y})]
|
||||
|
||||
(reset! +drawing-shape+ shape)
|
||||
(reset! +drawing-position+ (assoc point :lock false))
|
||||
(reset! +drawing-position+ (assoc pt :lock false))
|
||||
|
||||
(let [stoper (->> uuc/actions-s
|
||||
(rx/map :type)
|
||||
|
|
@ -67,8 +69,16 @@
|
|||
(rx/with-latest-from vector wb/mouse-ctrl-s $)
|
||||
(rx/subscribe $ on-value nil on-complete)))))
|
||||
|
||||
(on-value [[point ctrl?]]
|
||||
(reset! +drawing-position+ (assoc point :lock ctrl?)))
|
||||
(init-icon [shape]
|
||||
(let [{:keys [x y]} (gpt/divide @wb/mouse-canvas-a @wb/zoom-l)
|
||||
props {:x1 x :y1 y :x2 (+ x 100) :y2 (+ y 100)}
|
||||
shape (ush/initialize shape props)]
|
||||
(rs/emit! (uds/add-shape shape)
|
||||
(udw/select-for-drawing nil))))
|
||||
|
||||
(on-value [[pt ctrl?]]
|
||||
(let [pt (gpt/divide pt @wb/zoom-l)]
|
||||
(reset! +drawing-position+ (assoc pt :lock ctrl?))))
|
||||
|
||||
(on-complete []
|
||||
(let [shape @+drawing-shape+
|
||||
|
|
@ -79,12 +89,6 @@
|
|||
(reset! +drawing-position+ nil)
|
||||
(reset! +drawing-shape+ nil)))
|
||||
|
||||
(init-icon [shape]
|
||||
(let [{:keys [x y]} @wb/mouse-canvas-a
|
||||
props {:x1 x :y1 y :x2 (+ x 100) :y2 (+ y 100)}
|
||||
shape (ush/initialize shape props)]
|
||||
(rs/emit! (uds/add-shape shape)
|
||||
(udw/select-for-drawing nil))))
|
||||
(init []
|
||||
(when-let [shape (:drawing @wb/workspace-l)]
|
||||
(case (:type shape)
|
||||
|
|
|
|||
|
|
@ -10,18 +10,20 @@
|
|||
(:require [beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as ust]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.ui.core :as uuc]
|
||||
[uxbox.ui.workspace.base :as uuwb]
|
||||
[uxbox.data.shapes :as uds]))
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.data.shapes :as uds]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
(define-once :movement-subscription
|
||||
(letfn [(on-value [delta]
|
||||
(let [pageid (get-in @ust/state [:workspace :page])
|
||||
selected (get-in @ust/state [:workspace :selected])
|
||||
shapes (->> (vals @uuwb/shapes-by-id-l)
|
||||
(let [pageid (get-in @st/state [:workspace :page])
|
||||
selected (get-in @st/state [:workspace :selected])
|
||||
shapes (->> (vals @wb/shapes-by-id-l)
|
||||
(filter #(= (:page %) pageid))
|
||||
(filter (comp selected :id)))]
|
||||
(filter (comp selected :id)))
|
||||
delta (gpt/divide delta @wb/zoom-l)]
|
||||
(doseq [{:keys [id group]} shapes]
|
||||
(rs/emit! (uds/move-shape id delta)))))
|
||||
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
(rx/map :type)
|
||||
(rx/filter empty?)
|
||||
(rx/take 1))]
|
||||
(as-> uuwb/mouse-delta-s $
|
||||
(as-> wb/mouse-delta-s $
|
||||
(rx/take-until stoper $)
|
||||
(rx/on-value $ on-value))))]
|
||||
|
||||
|
|
|
|||
|
|
@ -25,10 +25,6 @@
|
|||
|
||||
(defonce selrect-pos (atom nil))
|
||||
|
||||
(def ^:const ^:private zoom-l
|
||||
(-> (l/in [:workspace :zoom])
|
||||
(l/focus-atom st/state)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Component
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -56,21 +52,11 @@
|
|||
;; Subscriptions
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn selrect->rect
|
||||
(defn- selrect->rect
|
||||
([data] (selrect->rect data false))
|
||||
([data translate?]
|
||||
(let [start (:start data)
|
||||
current (:current data )
|
||||
|
||||
zoom (or @zoom-l 1)
|
||||
start (if translate?
|
||||
(gpt/multiply start (- zoom (- zoom 1)))
|
||||
start)
|
||||
|
||||
current (if translate?
|
||||
(gpt/multiply current (- zoom (- zoom 1)))
|
||||
current)
|
||||
|
||||
current (:current data)
|
||||
start-x (min (:x start) (:x current))
|
||||
start-y (min (:y start) (:y current))
|
||||
current-x (max (:x start) (:x current))
|
||||
|
|
@ -82,27 +68,24 @@
|
|||
:width (- current-x start-x)
|
||||
:height (- current-y start-y)})))
|
||||
|
||||
(define-once :selrect-subscriptions
|
||||
(letfn [(on-value [pos]
|
||||
(let [pos' (as-> (gmx/matrix) $
|
||||
(gmx/scale $ (or @zoom-l 1))
|
||||
(gpt/transform-point pos $))]
|
||||
;; (println "on-value" pos pos')
|
||||
(swap! selrect-pos assoc :current pos)))
|
||||
|
||||
(translate-selrect [selrect]
|
||||
(let [zoom (or @zoom-l 1)
|
||||
startx (* wb/canvas-start-x zoom)
|
||||
starty (* wb/canvas-start-y zoom)]
|
||||
(defn- translate-to-canvas
|
||||
[selrect]
|
||||
(let [startx (* wb/canvas-start-x @wb/zoom-l)
|
||||
starty (* wb/canvas-start-y @wb/zoom-l)]
|
||||
(assoc selrect
|
||||
:x (- (:x selrect) startx)
|
||||
:y (- (:y selrect) starty))))
|
||||
:y (- (:y selrect) starty)
|
||||
:width (/ (:width selrect) @wb/zoom-l)
|
||||
:height (/ (:height selrect) @wb/zoom-l))))
|
||||
|
||||
(define-once :selrect-subscriptions
|
||||
(letfn [(on-value [pos]
|
||||
(swap! selrect-pos assoc :current pos))
|
||||
|
||||
(on-complete []
|
||||
(let [selrect (selrect->rect @selrect-pos true)
|
||||
selrect' (translate-selrect selrect)]
|
||||
;; (println selrect "---" selrect2)
|
||||
(rs/emit! (dw/select-shapes selrect'))
|
||||
(let [selrect (selrect->rect @selrect-pos)
|
||||
selrect (translate-to-canvas selrect)]
|
||||
(rs/emit! (dw/select-shapes selrect))
|
||||
(reset! selrect-pos nil)))
|
||||
|
||||
(init []
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@
|
|||
path (reduce (partial make-vertical-tick zoom) [] +ticks+)
|
||||
labels (->> (map (partial horizontal-text-label zoom) +ticks+)
|
||||
(filterv identity))]
|
||||
(println (count labels))
|
||||
(html
|
||||
[:g
|
||||
[:path {:d (str/join " " path) :stroke "#9da2a6"}]
|
||||
|
|
|
|||
|
|
@ -33,9 +33,7 @@
|
|||
:ctrl+shift+f #(rs/emit! (dw/toggle-flag :drawtools))
|
||||
:ctrl+shift+i #(rs/emit! (dw/toggle-flag :icons))
|
||||
:ctrl+shift+l #(rs/emit! (dw/toggle-flag :layers))
|
||||
:ctrl+p #(rs/emit! (dw/increase-zoom))
|
||||
:ctrl+m #(rs/emit! (dw/decrease-zoom))
|
||||
:ctrl+l #(rs/emit! (dw/reset-zoom))
|
||||
:ctrl+0 #(rs/emit! (dw/reset-zoom))
|
||||
:ctrl+r #(rs/emit! (dw/toggle-flag :ruler))
|
||||
:ctrl+d #(rs/emit! (dw/duplicate-selected))
|
||||
:ctrl+c #(rs/emit! (dw/copy-to-clipboard))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue