From 99f935863a69ab5c1ddb586d4fb06e9b7828b3f0 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 1 Mar 2017 19:13:10 +0100 Subject: [PATCH] Add move cursor when shape is displaced on viewport. --- frontend/resources/styles/common/base.scss | 4 ++++ frontend/src/uxbox/main/ui/shapes/circle.cljs | 4 ++++ frontend/src/uxbox/main/ui/shapes/group.cljs | 3 +++ frontend/src/uxbox/main/ui/shapes/icon.cljs | 9 ++++++--- frontend/src/uxbox/main/ui/shapes/image.cljs | 7 +++++-- frontend/src/uxbox/main/ui/shapes/path.cljs | 14 ++++++++++---- frontend/src/uxbox/main/ui/shapes/rect.cljs | 5 ++++- frontend/src/uxbox/main/ui/shapes/text.cljs | 14 ++++++++++---- .../uxbox/main/ui/workspace/sidebar/sitemap.cljs | 8 ++++---- 9 files changed, 50 insertions(+), 18 deletions(-) diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index bfea82251..cc37c3a0f 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -204,6 +204,10 @@ h4 { padding: 0 !important; } +.move-cursor { + cursor: move; +} + hr { border-top: solid 1px $color-gray-light; border-right: 0; diff --git a/frontend/src/uxbox/main/ui/shapes/circle.cljs b/frontend/src/uxbox/main/ui/shapes/circle.cljs index 93fe703a3..af10bb479 100644 --- a/frontend/src/uxbox/main/ui/shapes/circle.cljs +++ b/frontend/src/uxbox/main/ui/shapes/circle.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/shapes/group.cljs b/frontend/src/uxbox/main/ui/shapes/group.cljs index bf0e53dc9..546eadcfa 100644 --- a/frontend/src/uxbox/main/ui/shapes/group.cljs +++ b/frontend/src/uxbox/main/ui/shapes/group.cljs @@ -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) diff --git a/frontend/src/uxbox/main/ui/shapes/icon.cljs b/frontend/src/uxbox/main/ui/shapes/icon.cljs index 353fbb544..a33b16724 100644 --- a/frontend/src/uxbox/main/ui/shapes/icon.cljs +++ b/frontend/src/uxbox/main/ui/shapes/icon.cljs @@ -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" diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index 8f50e7f57..0252d6b58 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/frontend/src/uxbox/main/ui/shapes/image.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/shapes/path.cljs b/frontend/src/uxbox/main/ui/shapes/path.cljs index 525810c77..6d40929ec 100644 --- a/frontend/src/uxbox/main/ui/shapes/path.cljs +++ b/frontend/src/uxbox/main/ui/shapes/path.cljs @@ -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" diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index 8d16abb79..dfe56ce55 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/frontend/src/uxbox/main/ui/shapes/rect.cljs @@ -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])) diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index bf00aa4f4..e7699fa79 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/shapes/text.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index b12588a0a..cfb6fd8a1 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -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