minerva-design 1.7.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # minerva-design
 
+## 1.8.0
+
+### Minor Changes
+
+- b8036ec: QuadrantChart: drag and double-click feedback. React gets `onPointDrag`, which reports every move of a dragged dot with the quadrant under the pointer, and `onPointDoubleClick`, which fires when the same dot is clicked twice quickly (`onPointClick` still fires for each click). While a dot is dragged, React also highlights the quadrant it would drop into. The same events are on Vue (`pointDrag`, `pointDoubleClick`), Angular (`pointDrag`, `pointDoubleClick`), and `<minerva-quadrant-chart>` (`minerva-point-drag`, `minerva-point-double-click`). Setting `onPointDrag` alone now makes the dots draggable, the same as `onPointDrop`.
+
 ## 1.7.1
 
 ### Patch Changes

package/custom-elements.json

@@ -7431,7 +7431,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Lets the user drag the dots (`minerva-point-drop`)",
+              "description": "Lets the user drag the dots (`minerva-point-drag`, `minerva-point-drop`)",
               "attribute": "drag-points"
             },
             {
@@ -7543,10 +7543,18 @@
                 "module": "src/components/chart/chart.ts"
               }
             },
+            {
+              "description": "The same dot was clicked twice in quick succession; detail: { point, index }",
+              "name": "minerva-point-double-click"
+            },
             {
               "description": "The empty area of a quadrant was clicked; detail: { quadrant, x, y }",
               "name": "minerva-quadrant-click"
             },
+            {
+              "description": "A dot is being dragged (on every move); detail: { point, index, x, y, quadrant }",
+              "name": "minerva-point-drag"
+            },
             {
               "description": "A dragged dot was released; detail: { point, index, x, y, quadrant }",
               "name": "minerva-point-drop"
@@ -7659,7 +7667,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Lets the user drag the dots (`minerva-point-drop`)",
+              "description": "Lets the user drag the dots (`minerva-point-drag`, `minerva-point-drop`)",
               "fieldName": "dragPoints"
             },
             {

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -32025,6 +32025,7 @@ var MnCartesianChartBase = class MnCartesianChartBase extends MnChartEngine {
 			chart.on("plotClick", (event) => this.plotClicked?.(event)),
 			chart.on("zoom", (view) => this.zoom.emit(view)),
 			chart.on("renderer", (renderer) => this.rendererChange.emit(renderer)),
+			chart.on("drag", (event) => this.dragged?.(event)),
 			chart.on("drop", (event) => this.dropped?.(event))
 		];
 	}
@@ -33395,6 +33396,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const DOUBLE_CLICK_MS = 400;
 var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 	constructor() {
 		super(...arguments);
@@ -33426,8 +33428,11 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 			transform: booleanAttribute
 		});
 		this.pointClick = output();
+		this.pointDoubleClick = output();
 		this.quadrantClick = output();
+		this.pointDrag = output();
 		this.pointDrop = output();
+		this.lastClick = null;
 	}
 	geometry() {
 		return {
@@ -33456,7 +33461,19 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 	clicked(event) {
 		const index = event.items[0]?.index;
 		const point = index === void 0 ? void 0 : this.points()[index];
-		if (point && index !== void 0) this.pointClick.emit({
+		if (!point || index === void 0) return;
+		const now = Date.now();
+		const last = this.lastClick;
+		const double = last?.index === index && now - last.time < DOUBLE_CLICK_MS;
+		this.lastClick = double ? null : {
+			index,
+			time: now
+		};
+		this.pointClick.emit({
+			point,
+			index
+		});
+		if (double) this.pointDoubleClick.emit({
 			point,
 			index
 		});
@@ -33468,17 +33485,25 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 			y: event.y
 		});
 	}
-	dropped(event) {
+	dropAt(event) {
 		const index = event.item.index;
 		const point = this.points()[index];
-		if (!point) return;
-		this.pointDrop.emit({
+		if (!point) return null;
+		return {
 			point,
 			index,
 			x: event.x,
 			y: event.y,
 			quadrant: quadrantOf(this.geometry(), event.x, event.y)
-		});
+		};
+	}
+	dragged(event) {
+		const target = this.dropAt(event);
+		if (target) this.pointDrag.emit(target);
+	}
+	dropped(event) {
+		const target = this.dropAt(event);
+		if (target) this.pointDrop.emit(target);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -33606,7 +33631,9 @@ var MnQuadrantChart = class MnQuadrantChart extends MnCartesianChartBase {
 			},
 			outputs: {
 				pointClick: "pointClick",
+				pointDoubleClick: "pointDoubleClick",
 				quadrantClick: "quadrantClick",
+				pointDrag: "pointDrag",
 				pointDrop: "pointDrop"
 			},
 			usesInheritance: true,
@@ -33755,10 +33782,18 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["pointClick"]
 		}],
+		pointDoubleClick: [{
+			type: i0.Output,
+			args: ["pointDoubleClick"]
+		}],
 		quadrantClick: [{
 			type: i0.Output,
 			args: ["quadrantClick"]
 		}],
+		pointDrag: [{
+			type: i0.Output,
+			args: ["pointDrag"]
+		}],
 		pointDrop: [{
 			type: i0.Output,
 			args: ["pointDrop"]