Cursor configuration

sass/components/canvas/canvas.scss

@@ -124,6 +124,7 @@
 
 .chart-editor-canvas-view {
   position: relative;
+  cursor: grab;
 
   .canvas-view {
     position: absolute;
@@ -241,8 +242,8 @@
   }
 
   .interaction-handler {
-    cursor: -webkit-grab;
-    cursor: grab;
+    // cursor: -webkit-grab;
+    // cursor: grab;
     fill: none;
     stroke: none;
     pointer-events: fill;
@@ -590,10 +591,8 @@
   }
 
   .bounding-box {
-    cursor: default;
-
     &.interactable {
-      cursor: pointer;
+      // cursor: pointer;
     }
 
     * {

src/app/renderer/index.tsx

@@ -463,9 +463,13 @@ export function renderGraphicalElementSVG(
     onWheel?: (e: React.MouseEvent<Element>) => void;
     onMouseMove?: (e: React.MouseEvent<Element>) => void;
   } = {};
+  if (style) {
+    style.cursor = element.style?.cursor ?? "default";
+  }
   if (element.selectable) {
-    style.cursor = "pointer";
+    // style.cursor = "pointer";
     style.pointerEvents = "all";
+
     if (options.onClick) {
       mouseEvents.onClick = (e: React.MouseEvent<Element>) => {
         e.stopPropagation();

src/app/stores/defaults.ts

@@ -351,6 +351,7 @@ export function createDefaultChart(
       backgroundOpacity: 1,
       enableContextMenu: true,
       exposed: true,
+      cursor: "default"
     },
     mappings: {
       marginTop: {

src/core/graphics/elements.ts

@@ -67,6 +67,8 @@ export interface Style {
   strokeLinejoin?: "round" | "miter" | "bevel";
   strokeLinecap?: "round" | "butt" | "square";
 
+  cursor?: string;
+
   colorFilter?: ColorFilter;
 
   fillColor?: Color;

src/core/graphics/renderer/index.ts

@@ -104,6 +104,10 @@ export class ChartRenderer {
           enableContextMenu: <boolean>cls.object.properties.enableContextMenu,
           enableSelection: <boolean>cls.object.properties.enableSelection,
         };
+        if (!markGraphics.style) {
+          markGraphics.style = {};
+        }
+        markGraphics.style.cursor = <string>cls.object.properties.cursor
         const group = makeGroup([markGraphics]);
         group.key = `gl:${glyph._id}-mkst-gr:${markIndex}-${markGraphics.key}`;
         return group;

src/core/prototypes/charts/index.ts

@@ -132,6 +132,7 @@ export class RectangleChart extends ChartClass {
     backgroundColor: null,
     backgroundOpacity: 1,
     enableContextMenu: true,
+    cursor: "default"
   };
 
   public readonly object: Specification.Chart & {

src/core/prototypes/object.ts

@@ -57,6 +57,7 @@ export abstract class ObjectClass<
     enableContextMenu: true,
     enableSelection: true,
     exposed: true,
+    cursor: "default"
   };
 
   /** Default mapping values */
@@ -122,6 +123,24 @@ export abstract class ObjectClass<
               searchSection: strings.objects.interactivity,
             }
           ),
+          manager.inputSelect(
+            { property: "cursor" },
+            {
+              type: "dropdown",
+              label: strings.objects.cursor.cursor,
+              searchSection: strings.objects.interactivity,
+              options: [
+                "default",
+                "crosshair",
+                "grab"
+              ],
+              labels: [
+                strings.objects.cursor.default,
+                strings.objects.cursor.crosshair,
+                strings.objects.cursor.grab
+              ]
+            }
+          ),
         ]
       ),
     ];

src/strings.ts

@@ -474,6 +474,12 @@ export const strings = {
     dropTickData: "Tick data: drop here to assign tick data",
     toolTips: "Tooltips",
     selection: "Selection",
+    cursor: {
+      cursor: "Cursor",
+      default: "Default",
+      crosshair: "Crosshair",
+      grab: "Grab",
+    },
     axes: {
       data: "Data",
       numericalSuffix: ": Numerical",