Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-21 04:01:24 -05:00
Code Issues Activity

Add move cursor when shape is displaced on viewport.

Browse source
This commit is contained in:
Andrey Antukh 2017-03-01 19:13:10 +01:00
parent 4dc728378c
commit 99f935863a
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
9 changed files with 50 additions and 18 deletions
frontend
resources/styles/common
base.scss
src/uxbox/main/ui
shapes
circle.cljsgroup.cljsicon.cljsimage.cljspath.cljsrect.cljstext.cljs
workspace/sidebar
sitemap.cljs

4
frontend/resources/styles/common/base.scss
View file

@ -204,6 +204,10 @@ h4 {
padding: 0 !important;
}
.move-cursor {
cursor: move;
}
hr {
border-top: solid 1px $color-gray-light;
border-right: 0;

4
frontend/src/uxbox/main/ui/shapes/circle.cljs
View file

@ -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

3
frontend/src/uxbox/main/ui/shapes/group.cljs
View file

@ -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
frontend/src/uxbox/main/ui/shapes/icon.cljs
View file

@ -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"

7
frontend/src/uxbox/main/ui/shapes/image.cljs
View file

@ -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

14
frontend/src/uxbox/main/ui/shapes/path.cljs
View file

@ -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"

5
frontend/src/uxbox/main/ui/shapes/rect.cljs
View file

@ -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]))

14
frontend/src/uxbox/main/ui/shapes/text.cljs
View file

@ -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

8
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -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