From 95f0f63276b76558980654a9724acffe99844ac9 Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 15 Jun 2023 19:19:39 +0200 Subject: [PATCH] :bug: Fix creation cursors not being displayed --- frontend/src/app/main.cljs | 4 +- frontend/src/app/main/ui/css_cursors.cljs | 70 +++++++++++++++++++ frontend/src/app/main/ui/cursors.cljs | 61 +--------------- frontend/src/app/main/ui/measurements.cljs | 6 +- .../main/ui/workspace/shapes/path/editor.cljs | 2 +- .../main/ui/workspace/shapes/text/editor.cljs | 2 +- .../src/app/main/ui/workspace/viewport.cljs | 2 +- .../main/ui/workspace/viewport/guides.cljs | 2 +- .../ui/workspace/viewport/pixel_overlay.cljs | 2 +- .../main/ui/workspace/viewport/selection.cljs | 2 +- .../app/main/ui/workspace/viewport/utils.cljs | 2 +- frontend/src/app/util/css.cljs | 22 ++++-- 12 files changed, 99 insertions(+), 78 deletions(-) create mode 100644 frontend/src/app/main/ui/css_cursors.cljs diff --git a/frontend/src/app/main.cljs b/frontend/src/app/main.cljs index 0c0a70f74..7adc05e65 100644 --- a/frontend/src/app/main.cljs +++ b/frontend/src/app/main.cljs @@ -18,7 +18,7 @@ [app.main.ui :as ui] [app.main.ui.alert] [app.main.ui.confirm] - [app.main.ui.cursors :as cursors] + [app.main.ui.css-cursors :as cur] [app.main.ui.delete-shared] [app.main.ui.modal :refer [modal]] [app.main.ui.routes :as rt] @@ -45,7 +45,7 @@ (defn init-ui [] - (cursors/init-styles) + (cur/init-styles) (mf/mount (mf/element ui/app) (dom/get-element "app")) (mf/mount (mf/element modal) (dom/get-element "modal"))) diff --git a/frontend/src/app/main/ui/css_cursors.cljs b/frontend/src/app/main/ui/css_cursors.cljs new file mode 100644 index 000000000..9c0a97276 --- /dev/null +++ b/frontend/src/app/main/ui/css_cursors.cljs @@ -0,0 +1,70 @@ +(ns app.main.ui.css-cursors + (:require + [app.common.data.macros :as dm] + [app.main.ui.cursors :as cur] + [app.util.css :as css])) + +;; angle per rotation +(def angle-step 10) + +(defn get-static + "Returns the class name of a static cursor" + [name] + (dm/str "cursor-" name)) + +(defn get-dynamic + "Returns the class name of a dynamic cursor (with rotation)" + [name rotation] + (dm/str "cursor-" name "-" (mod (* (.floor js/Math (/ rotation angle-step)) angle-step) 360))) + +(defn init-static-cursor-style + "Initializes a static cursor style" + [style name value] + (.add style (dm/str ".cursor-" name) (js-obj "cursor" (dm/str value " !important")))) + +(defn init-dynamic-cursor-style + "Initializes a dynamic cursor style" + [style name fn] + (let [rotations (seq (range 0 360 angle-step))] + (doseq [rotation rotations] + (.add style (dm/str ".cursor-" name "-" rotation) (js-obj "cursor" (dm/str (fn rotation) " !important")))))) + +(defn init-styles + "Initializes all cursor styles" + [] + (let [style (css/create-style "css-cursors")] + ;; static + (init-static-cursor-style style "comments" cur/comments) + (init-static-cursor-style style "create-artboard" cur/create-artboard) + (init-static-cursor-style style "create-ellipse" cur/create-ellipse) + (init-static-cursor-style style "create-polygon" cur/create-polygon) + (init-static-cursor-style style "create-rectangle" cur/create-rectangle) + (init-static-cursor-style style "create-shape" cur/create-shape) + (init-static-cursor-style style "duplicate" cur/duplicate) + (init-static-cursor-style style "hand" cur/hand) + (init-static-cursor-style style "move-pointer" cur/move-pointer) + (init-static-cursor-style style "pen" cur/pen) + (init-static-cursor-style style "pen-node" cur/pen-node) + (init-static-cursor-style style "pencil" cur/pencil) + (init-static-cursor-style style "picker" cur/picker) + (init-static-cursor-style style "pointer-inner" cur/pointer-inner) + (init-static-cursor-style style "pointer-move" cur/pointer-move) + (init-static-cursor-style style "pointer-node" cur/pointer-node) + (init-static-cursor-style style "resize-alt" cur/resize-alt) + (init-static-cursor-style style "zoom" cur/zoom) + (init-static-cursor-style style "zoom-in" cur/zoom-in) + (init-static-cursor-style style "zoom-out" cur/zoom-out) + + ;; dynamic + (init-dynamic-cursor-style style "resize-ew" cur/resize-ew) + (init-dynamic-cursor-style style "resize-nesw" cur/resize-nesw) + (init-dynamic-cursor-style style "resize-ns" cur/resize-ns) + (init-dynamic-cursor-style style "resize-nwse" cur/resize-nwse) + (init-dynamic-cursor-style style "rotate" cur/rotate) + (init-dynamic-cursor-style style "text" cur/text) + (init-dynamic-cursor-style style "scale-ew" cur/scale-ew) + (init-dynamic-cursor-style style "scale-nesw" cur/scale-nesw) + (init-dynamic-cursor-style style "scale-ns" cur/scale-ns) + (init-dynamic-cursor-style style "scale-nwse" cur/scale-nwse) + (init-dynamic-cursor-style style "resize-ew-2" cur/resize-ew-2) + (init-dynamic-cursor-style style "resize-ns-2" cur/resize-ns-2))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/cursors.cljs b/frontend/src/app/main/ui/cursors.cljs index acfbe43f2..93d2128fd 100644 --- a/frontend/src/app/main/ui/cursors.cljs +++ b/frontend/src/app/main/ui/cursors.cljs @@ -7,8 +7,6 @@ (ns app.main.ui.cursors (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn]]) (:require - [app.common.data.macros :as dm] - [app.util.css :as css] [app.util.timers :as ts] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -43,7 +41,7 @@ (def rotate (cursor-fn :rotate 90)) (def text (cursor-fn :text 0)) -;; text +;; Text (def scale-ew (cursor-fn :scale-h 0)) (def scale-nesw (cursor-fn :scale-h 45)) (def scale-ns (cursor-fn :scale-h 90)) @@ -52,63 +50,6 @@ ;; (def resize-ew-2 (cursor-fn :resize-h-2 0)) (def resize-ns-2 (cursor-fn :resize-h-2 90)) - -(defn get-static - [name] - (dm/str "cursor-" name)) - -(defn get-dynamic - [name rotation] - (dm/str "cursor-" name "-" (.floor js/Math rotation))) - -(defn init-static-cursor-style - [style name value] - (.add style (dm/str ".cursor-" name) (js-obj "cursor" (dm/str value " !important")))) - -(defn init-dynamic-cursor-style - [style name fn] - (let [rotations (seq (range 0 360 1))] - (doseq [rotation rotations] - (.add style (dm/str ".cursor-" name "-" rotation) (js-obj "cursor" (dm/str (fn rotation) " !important")))))) - -(defn init-styles - [] - (let [style (css/create-style)] - ;; static - (init-static-cursor-style style "comments" comments) - (init-static-cursor-style style "create-artboard" create-artboard) - (init-static-cursor-style style "create-ellipse" create-ellipse) - (init-static-cursor-style style "create-polygon" create-polygon) - (init-static-cursor-style style "create-rectangle" create-rectangle) - (init-static-cursor-style style "create-shape" create-shape) - (init-static-cursor-style style "duplicate" duplicate) - (init-static-cursor-style style "hand" hand) - (init-static-cursor-style style "move-pointer" move-pointer) - (init-static-cursor-style style "pen" pen) - (init-static-cursor-style style "pen-node" pen-node) - (init-static-cursor-style style "pencil" pencil) - (init-static-cursor-style style "picker" picker) - (init-static-cursor-style style "pointer-inner" pointer-inner) - (init-static-cursor-style style "pointer-move" pointer-move) - (init-static-cursor-style style "pointer-node" pointer-node) - (init-static-cursor-style style "resize-alt" resize-alt) - (init-static-cursor-style style "zoom" zoom) - (init-static-cursor-style style "zoom-in" zoom-in) - (init-static-cursor-style style "zoom-out" zoom-out) - - ;; dynamic - (init-dynamic-cursor-style style "resize-ew" resize-ew) - (init-dynamic-cursor-style style "resize-nesw" resize-nesw) - (init-dynamic-cursor-style style "resize-ns" resize-ns) - (init-dynamic-cursor-style style "resize-nwse" resize-nwse) - (init-dynamic-cursor-style style "rotate" rotate) - (init-dynamic-cursor-style style "text" text) - (init-dynamic-cursor-style style "scale-ew" scale-ew) - (init-dynamic-cursor-style style "scale-nesw" scale-nesw) - (init-dynamic-cursor-style style "scale-ns" scale-ns) - (init-dynamic-cursor-style style "scale-nwse" scale-nwse) - (init-dynamic-cursor-style style "resize-ew-2" resize-ew-2) - (init-dynamic-cursor-style style "resize-ns-2" resize-ns-2))) (mf/defc debug-preview {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 441e39ba1..49342608c 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -20,7 +20,7 @@ [app.main.data.workspace.state-helpers :as wsh] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.formats :as fmt] [app.main.ui.workspace.viewport.viewport-ref :refer [point->viewport]] [app.util.dom :as dom] @@ -516,9 +516,9 @@ :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move + :class (when (or hover? selected?) + (if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90))) :style {:fill (if (or hover? selected?) warning-color "none") - :cursor (when (or hover? selected?) - (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) :opacity (if selected? 0.5 0.25)}}])) (mf/defc margin-rects [{:keys [shape frame zoom alt? shift?]}] diff --git a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs index 57559919a..36edbce91 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs @@ -16,7 +16,7 @@ [app.main.snap :as snap] [app.main.store :as st] [app.main.streams :as ms] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.shapes.path.common :as pc] [app.util.dom :as dom] diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 455084405..ae28789f6 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -17,7 +17,7 @@ [app.main.data.workspace.texts :as dwt] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.shapes.text.styles :as sts] [app.util.dom :as dom] [app.util.keyboard :as kbd] diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 889b6a0cd..d84b525df 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -330,7 +330,7 @@ :key (str "viewport" page-id) :view-box (utils/format-viewbox vbox) :ref on-viewport-ref - :class (dm/str @cursor (when drawing-tool "drawing")) + :class (dm/str @cursor (when drawing-tool " drawing")) :style {:touch-action "none"} :fill "none" diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index 89e10adbd..1182ca4ea 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs @@ -17,7 +17,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.streams :as ms] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.formats :as fmt] [app.main.ui.workspace.viewport.rules :as rules] [app.util.dom :as dom] diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index d0513030e..c7129b3a1 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -14,7 +14,7 @@ [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.workspace.shapes :as shapes] [app.util.dom :as dom] [app.util.http :as http] diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index e91312c1d..b7d419f32 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -17,7 +17,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.workspace.shapes.path.editor :refer [path-editor]] [app.util.dom :as dom] [app.util.object :as obj] diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index dec88a0e0..5587022d8 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/utils.cljs @@ -9,7 +9,7 @@ [app.common.data.macros :as dm] [app.common.geom.point :as gpt] [app.common.math :as mth] - [app.main.ui.cursors :as cur] + [app.main.ui.css-cursors :as cur] [app.main.ui.formats :refer [format-number]])) (defn format-viewbox [vbox] diff --git a/frontend/src/app/util/css.cljs b/frontend/src/app/util/css.cljs index 2e822b957..c0fbae2b6 100644 --- a/frontend/src/app/util/css.cljs +++ b/frontend/src/app/util/css.cljs @@ -13,15 +13,25 @@ (defn add-rule "Adds a CSS rule to a CSS Style Sheet" [styleSheet selector declarations] - (.insertRule styleSheet (dm/str selector " {" (declarations->str declarations) "}"))) + (let [rule (dm/str selector " { " (declarations->str declarations) " }")] + (.insertRule styleSheet rule (.-length (.-cssRules styleSheet))))) + +(defn wrap-style-sheet + [style] + #js {:add (partial add-rule (.-sheet style))}) ;; FIXME: Maybe we should rename this to `create-dynamic-style`? (defn create-style "Creates a new CSS Style Sheet and returns an object that allows adding rules to it" - [] - (let [style (dom/create-element "style")] - (dom/set-attribute! style "type" "text/css") - (dom/append-child! js/document.head style) - (js-obj "add" (partial add-rule (.-sheet style))))) + [id] + (let [element (dom/get-element id)] + (if (some? element) + (wrap-style-sheet element) + (let [style (dom/create-element "style")] + (dom/set-attribute! style "id" id) + (dom/set-attribute! style "type" "text/css") + (dom/append-child! js/document.head style) + (wrap-style-sheet style))))) +