mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 07:11:32 -05:00
Add move cursor when shape is displaced on viewport.
This commit is contained in:
parent
4dc728378c
commit
99f935863a
9 changed files with 50 additions and 18 deletions
|
@ -204,6 +204,10 @@ h4 {
|
|||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.move-cursor {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: solid 1px $color-gray-light;
|
||||
border-right: 0;
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
@ -45,10 +46,13 @@
|
|||
(:cy shape))
|
||||
rotation (or rotation 0)
|
||||
|
||||
moving? (boolean displacement)
|
||||
|
||||
xfmt (-> (gmt/matrix)
|
||||
(gmt/rotate* rotation center))
|
||||
|
||||
props {:id (str "shape-" id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:transform (str xfmt)}
|
||||
|
||||
attrs (merge props
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
[uxbox.main.ui.shapes.text :as text]
|
||||
[uxbox.main.ui.shapes.path :as path]
|
||||
[uxbox.main.ui.shapes.image :as image]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
|
@ -75,7 +76,9 @@
|
|||
resize (gmt/multiply resize)
|
||||
displacement (gmt/multiply displacement))
|
||||
|
||||
moving? (boolean displacement)
|
||||
attrs {:id (str "shape-" id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:transform (str xfmt)}]
|
||||
[:g attrs
|
||||
(for [item (reverse items)
|
||||
|
|
|
@ -9,9 +9,11 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
|
||||
;; --- Icon Component
|
||||
|
||||
|
@ -39,7 +41,6 @@
|
|||
center (gpt/point x-center y-center)]
|
||||
(gmt/rotate* mt rotation center)))
|
||||
|
||||
|
||||
(mx/defc icon-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id content metadata rotation x1 y1 modifiers] :as shape}]
|
||||
|
@ -56,10 +57,12 @@
|
|||
xfmt (cond-> (gmt/matrix)
|
||||
(pos? rotation) (rotate shape))
|
||||
|
||||
moving? (boolean displacement)
|
||||
props {:id (str id)
|
||||
:x x1
|
||||
:y y1
|
||||
:view-box view-box
|
||||
:class (classnames :move-cursor moving?)
|
||||
:width width
|
||||
:height height
|
||||
:preserve-aspect-ratio "none"
|
||||
|
|
|
@ -14,8 +14,9 @@
|
|||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.geom.matrix :as gmt]))
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
@ -62,9 +63,11 @@
|
|||
resize (gmt/multiply resize)
|
||||
displacement (gmt/multiply displacement))
|
||||
|
||||
moving? (boolean displacement)
|
||||
props {:x x1 :y y1
|
||||
:id (str "shape-" id)
|
||||
:preserve-aspect-ratio "none"
|
||||
:class (classnames :move-cursor moving?)
|
||||
:xlink-href (:url image)
|
||||
:transform (str xfmt)
|
||||
:width width
|
||||
|
|
|
@ -7,12 +7,13 @@
|
|||
(ns uxbox.main.ui.shapes.path
|
||||
(:require [potok.core :as ptk]
|
||||
[cuerdas.core :as str :include-macros true]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
@ -69,9 +70,14 @@
|
|||
shape (cond-> shape
|
||||
displacement (geom/transform displacement)
|
||||
resize (geom/transform resize))
|
||||
moving? (boolean displacement)
|
||||
|
||||
pdata (render-path shape)
|
||||
attrs (merge {:id (str id) :d pdata}
|
||||
(attrs/extract-style-attrs shape))]
|
||||
props {:id (str id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:d pdata}
|
||||
|
||||
attrs (merge (attrs/extract-style-attrs shape) props)]
|
||||
(if background?
|
||||
[:g {}
|
||||
[:path {:stroke "transparent"
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Rect Component
|
||||
|
@ -53,11 +54,13 @@
|
|||
xfmt (cond-> (gmt/matrix)
|
||||
(pos? rotation) (rotate shape))
|
||||
|
||||
moving? (boolean displacement)
|
||||
|
||||
props {:x x1 :y y1
|
||||
:id (str "shape-" id)
|
||||
:class (classnames :move-cursor moving?)
|
||||
:width width
|
||||
:height height
|
||||
:transform (str xfmt)}
|
||||
|
||||
attrs (merge (attrs/extract-style-attrs shape) props)]
|
||||
[:rect attrs]))
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.color :as color]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true])
|
||||
|
@ -166,8 +167,10 @@
|
|||
|
||||
{:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
|
||||
(geom/size))
|
||||
moving? (boolean displacement)
|
||||
props {:x x1
|
||||
:y y1
|
||||
:class (classnames :move-cursor moving?)
|
||||
:id (str id)
|
||||
:ref "fobject"
|
||||
:width width
|
||||
|
@ -187,16 +190,19 @@
|
|||
{:mixins [mx/static]
|
||||
:did-mount text-shape-wrapper-did-mount
|
||||
:did-remount text-shape-wrapper-did-remount}
|
||||
[{:keys [id content tmp-resize-xform tmp-displacement] :as shape}]
|
||||
(let [xfmt (cond-> (gmt/matrix)
|
||||
tmp-displacement (gmt/translate tmp-displacement)
|
||||
tmp-resize-xform (gmt/multiply tmp-resize-xform))
|
||||
[{:keys [id content modifiers] :as shape}]
|
||||
(let [{:keys [displacement resize]} modifiers
|
||||
xfmt (cond-> (gmt/matrix)
|
||||
displacement (gmt/multiply displacement)
|
||||
resize (gmt/multiply resize))
|
||||
|
||||
{:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
|
||||
(geom/size))
|
||||
moving? (boolean displacement)
|
||||
style (make-style shape)]
|
||||
[:foreignObject {:x x1
|
||||
:y y1
|
||||
:class (classnames :move-cursor moving?)
|
||||
:id (str id)
|
||||
:ref "fobject"
|
||||
:width width
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
(:require [lentes.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
|
@ -17,13 +18,12 @@
|
|||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap-pageform]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.data :refer (classnames)]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom.dnd :as dnd]
|
||||
[uxbox.util.dom :as dom]))
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue