mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 15:51:37 -05:00
✨ Allow canvas movement and resize.
This commit is contained in:
parent
902f7c4181
commit
daac4486e5
7 changed files with 16 additions and 73 deletions
|
@ -372,6 +372,7 @@
|
|||
(let [xf (comp (map #(get-in state [:shapes %]))
|
||||
(remove :hidden)
|
||||
(remove :blocked)
|
||||
(remove #(= :canvas (:type %)))
|
||||
(map geom/selection-rect))
|
||||
match (partial try-match-shape xf selrect)
|
||||
shapes (get-in state [:pages page-id :shapes])]
|
||||
|
|
|
@ -512,6 +512,7 @@
|
|||
"Apply the matrix transformation to shape."
|
||||
[{:keys [type] :as shape} xfmt]
|
||||
(case type
|
||||
:canvas (transform-rect shape xfmt)
|
||||
:rect (transform-rect shape xfmt)
|
||||
:icon (transform-rect shape xfmt)
|
||||
:text (transform-rect shape xfmt)
|
||||
|
|
|
@ -14,12 +14,14 @@
|
|||
[uxbox.main.ui.shapes.image :as image]
|
||||
[uxbox.main.ui.shapes.path :as path]
|
||||
[uxbox.main.ui.shapes.rect :as rect]
|
||||
[uxbox.main.ui.shapes.canvas :as canvas]
|
||||
[uxbox.main.ui.shapes.text :as text]))
|
||||
|
||||
(defn render-shape
|
||||
[shape]
|
||||
(mf/html
|
||||
(case (:type shape)
|
||||
:canvas [:& canvas/canvas-component {:shape shape}]
|
||||
:curve [:& path/path-component {:shape shape}]
|
||||
:text [:& text/text-component {:shape shape}]
|
||||
:icon [:& icon/icon-component {:shape shape}]
|
||||
|
|
|
@ -35,30 +35,36 @@
|
|||
(rx/take-until stoper))
|
||||
(rx/of (dw/materialize-current-modifier id)))))))
|
||||
|
||||
(defn start-move-selected
|
||||
[]
|
||||
(def start-move-selected
|
||||
(reify
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
selected (get-in state [:workspace pid :selected])]
|
||||
(prn "start-move-selected" selected)
|
||||
(rx/from-coll (map start-move selected))))))
|
||||
|
||||
(defn on-mouse-down
|
||||
[event {:keys [id] :as shape} selected]
|
||||
[event {:keys [id type] :as shape} selected]
|
||||
(let [selected? (contains? selected id)
|
||||
drawing? @refs/selected-drawing-tool]
|
||||
(prn "on-mouse-down" id type selected? (= type :canvas))
|
||||
(when-not (:blocked shape)
|
||||
(cond
|
||||
drawing?
|
||||
nil
|
||||
|
||||
(= type :canvas)
|
||||
(when selected?
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! start-move-selected))
|
||||
|
||||
(and (not selected?) (empty? selected))
|
||||
(do
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dw/deselect-all)
|
||||
(dw/select-shape id)
|
||||
(start-move-selected)))
|
||||
start-move-selected))
|
||||
|
||||
(and (not selected?) (not (empty? selected)))
|
||||
(do
|
||||
|
@ -67,8 +73,8 @@
|
|||
(st/emit! (dw/select-shape id))
|
||||
(st/emit! (dw/deselect-all)
|
||||
(dw/select-shape id)
|
||||
(start-move-selected))))
|
||||
start-move-selected)))
|
||||
:else
|
||||
(do
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (start-move-selected)))))))
|
||||
(st/emit! start-move-selected))))))
|
||||
|
|
|
@ -25,7 +25,6 @@
|
|||
(let [selected (mf/deref refs/selected-shapes)
|
||||
selected? (contains? selected (:id shape))
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)]
|
||||
;; shape (assoc shape :modifiers modifiers)]
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down}
|
||||
[:& rect-shape {:shape shape}]]))
|
||||
|
|
|
@ -1,60 +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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.canvas
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.shapes :as uus]
|
||||
[uxbox.main.ui.workspace.drawarea :refer [draw-area]]
|
||||
[uxbox.main.ui.workspace.selection :refer [selection-handlers]]
|
||||
[uxbox.main.ui.workspace.streams :as uws]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
(def selected-canvas
|
||||
(-> (l/key :selected-canvas)
|
||||
(l/derive refs/workspace)))
|
||||
|
||||
(defn- make-canvas-iref
|
||||
[id]
|
||||
(-> (l/in [:canvas id])
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc canvas
|
||||
[{:keys [id] :as props}]
|
||||
(let [canvas-iref (mf/use-memo #(make-canvas-iref id) #js [id])
|
||||
canvas (-> (mf/deref canvas-iref)
|
||||
(geom/size))
|
||||
selected (mf/deref selected-canvas)
|
||||
selected? (= id selected)]
|
||||
(letfn [(on-double-click [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (dw/select-canvas id)))
|
||||
(on-mouse-down [event]
|
||||
(when selected?
|
||||
(dom/stop-propagation event)
|
||||
#_(st/emit! (start-move id))))]
|
||||
[:rect.page-canvas
|
||||
{:x (:x1 canvas)
|
||||
:class (when selected? "selected")
|
||||
:y (:y1 canvas)
|
||||
:fill (:background canvas "#ffffff")
|
||||
:width (:width canvas)
|
||||
:height (:height canvas)
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-double-click on-double-click}])))
|
||||
|
||||
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.workspace.canvas :refer [canvas]]
|
||||
[uxbox.main.ui.workspace.grid :refer [grid]]
|
||||
[uxbox.main.ui.workspace.ruler :refer [ruler]]
|
||||
[uxbox.main.ui.workspace.streams :as uws]
|
||||
|
@ -229,8 +228,6 @@
|
|||
(events/unlistenByKey key2))))]
|
||||
|
||||
(mf/use-effect on-mount)
|
||||
;; (prn "viewport.render" (:id page))
|
||||
|
||||
[:*
|
||||
[:& coordinates {:zoom zoom}]
|
||||
#_[:div.tooltip-container
|
||||
|
@ -249,9 +246,6 @@
|
|||
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
|
||||
(when page
|
||||
[:*
|
||||
(for [id (:canvas page)]
|
||||
[:& canvas {:key id :id id}])
|
||||
|
||||
(for [id (reverse (:shapes page))]
|
||||
[:& uus/shape-component {:id id :key id}])
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue