🐛 Fix creation cursors not being displayed

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

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

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}

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?]}]

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]

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]

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"
 

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]

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]

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]

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]

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)))))
+