Adding a polyselection

playcanvas · Nov 5, 2024 · 3d16057 · 3d16057
1 parent f01a717
commit 3d16057
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -11,6 +11,7 @@ import { registerTransformHandlerEvents } from './transform-handler';
 import { ToolManager } from './tools/tool-manager';
 import { RectSelection } from './tools/rect-selection';
 import { BrushSelection } from './tools/brush-selection';
+import { PolygonSelection } from './tools/polygon-selection';
 import { SphereSelection } from './tools/sphere-selection';
 import { MoveTool } from './tools/move-tool';
 import { RotateTool } from './tools/rotate-tool';
@@ -69,6 +70,7 @@ const initShortcuts = (events: Events) => {
     shortcuts.register(['G', 'g'], { event: 'grid.toggleVisible' });
     shortcuts.register(['C', 'c'], { event: 'tool.toggleCoordSpace' });
     shortcuts.register(['F', 'f'], { event: 'camera.focus' });
+    shortcuts.register(['O', 'o'], { event: 'tool.polygonSelection', sticky: true });
     shortcuts.register(['B', 'b'], { event: 'tool.brushSelection', sticky: true });
     shortcuts.register(['R', 'r'], { event: 'tool.rectSelection', sticky: true });
     shortcuts.register(['P', 'p'], { event: 'tool.rectSelection', sticky: true });
@@ -164,6 +166,7 @@ const main = async () => {
     const toolManager = new ToolManager(events);
     toolManager.register('rectSelection', new RectSelection(events, editorUI.toolsContainer.dom));
     toolManager.register('brushSelection', new BrushSelection(events, editorUI.toolsContainer.dom));
+    toolManager.register('polygonSelection', new PolygonSelection(events, editorUI.toolsContainer.dom));
     toolManager.register('sphereSelection', new SphereSelection(events, scene, editorUI.canvasContainer));
     toolManager.register('move', new MoveTool(events, scene));
     toolManager.register('rotate', new RotateTool(events, scene));

diff --git a/src/tools/polygon-selection.ts b/src/tools/polygon-selection.ts
@@ -18,7 +18,6 @@ class PolygonSelection {
         // create polyline element
         const polyline = document.createElementNS(svg.namespaceURI, 'polyline') as SVGPolylineElement;
         polyline.setAttribute('fill', 'none');
-        polyline.setAttribute('stroke', '#f60');
         polyline.setAttribute('stroke-width', '1');
         polyline.setAttribute('stroke-dasharray', '5, 5');
         polyline.setAttribute('stroke-dashoffset', '0');
@@ -35,7 +34,7 @@ class PolygonSelection {
 
         const paint = () => {
             polyline.setAttribute('points', [...points, currentPoint].reduce((prev, current) => prev + `${current.x}, ${current.y} `, ""));
-            parent.style.cursor = isClosed() ? 'pointer' : 'crosshair';
+            polyline.setAttribute('stroke', isClosed() ? '#fa6' : '#f60');
         };
 
         const isClosed = () => points.length > 1 && Math.abs(currentPoint.x - points[0].x) < 4 && Math.abs(currentPoint.y - points[0].y) < 4;

diff --git a/src/ui/bottom-toolbar.ts b/src/ui/bottom-toolbar.ts
@@ -7,6 +7,7 @@ import undoSvg from './svg/undo.svg';
 import redoSvg from './svg/redo.svg';
 import pickerSvg from './svg/select-picker.svg';
 import brushSvg from './svg/select-brush.svg';
+import polygonSvg from './svg/select-poly.svg';
 import sphereSvg from './svg/select-sphere.svg';
 // import lassoSvg from './svg/select-lasso.svg';
 // import cropSvg from './svg/crop.svg';
@@ -46,6 +47,11 @@ class BottomToolbar extends Container {
             class: 'bottom-toolbar-tool'
         });
 
+        const polygon = new Button({
+            id: 'bottom-toolbar-polygon',
+            class: 'bottom-toolbar-tool'
+        });
+
         const brush = new Button({
             id: 'bottom-toolbar-brush',
             class: 'bottom-toolbar-tool'
@@ -93,6 +99,7 @@ class BottomToolbar extends Container {
         undo.dom.appendChild(createSvg(undoSvg));
         redo.dom.appendChild(createSvg(redoSvg));
         picker.dom.appendChild(createSvg(pickerSvg));
+        polygon.dom.appendChild(createSvg(polygonSvg));
         brush.dom.appendChild(createSvg(brushSvg));
         sphere.dom.appendChild(createSvg(sphereSvg));
         // lasso.dom.appendChild(createSvg(lassoSvg));
@@ -102,6 +109,7 @@ class BottomToolbar extends Container {
         this.append(redo);
         this.append(new Element({ class: 'bottom-toolbar-separator' }));
         this.append(picker);
+        this.append(polygon);
         this.append(brush);
         // this.append(lasso);
         this.append(new Element({ class: 'bottom-toolbar-separator' }));
@@ -115,6 +123,7 @@ class BottomToolbar extends Container {
 
         undo.dom.addEventListener('click', () => events.fire('edit.undo'));
         redo.dom.addEventListener('click', () => events.fire('edit.redo'));
+        polygon.dom.addEventListener('click', () => events.fire('tool.polygonSelection'));
         brush.dom.addEventListener('click', () => events.fire('tool.brushSelection'));
         picker.dom.addEventListener('click', () => events.fire('tool.rectSelection'));
         sphere.dom.addEventListener('click', () => events.fire('tool.sphereSelection'));
@@ -129,6 +138,7 @@ class BottomToolbar extends Container {
         events.on('tool.activated', (toolName: string) => {
             picker.class[toolName === 'rectSelection' ? 'add' : 'remove']('active');
             brush.class[toolName === 'brushSelection' ? 'add' : 'remove']('active');
+            polygon.class[toolName === 'polygonSelection' ? 'add' : 'remove']('active');
             sphere.class[toolName === 'sphereSelection' ? 'add' : 'remove']('active');
             translate.class[toolName === 'move' ? 'add' : 'remove']('active');
             rotate.class[toolName === 'rotate' ? 'add' : 'remove']('active');
@@ -144,6 +154,7 @@ class BottomToolbar extends Container {
         tooltips.register(redo, localize('tooltip.redo'));
         tooltips.register(picker, localize('tooltip.picker'));
         tooltips.register(brush, localize('tooltip.brush'));
+        tooltips.register(polygon, localize('tooltip.polygon'));
         // tooltips.register(lasso, 'Lasso Select');
         tooltips.register(sphere, localize('tooltip.sphere'));
         // tooltips.register(crop, 'Crop');

diff --git a/src/ui/localization.ts b/src/ui/localization.ts
@@ -147,6 +147,7 @@ const localizeInit = () => {
                         "tooltip.undo": "Rückgängig ( Strg + Z )",
                         "tooltip.redo": "Wiederholen ( Strg + Shift + Z )",
                         "tooltip.picker": "Einzelselektion ( P )",
+                        "tooltip.polygon": "Polygonselektion ( O )",
                         "tooltip.brush": "Pinselselektion ( B )",
                         "tooltip.sphere": "Kugelselektion",
                         "tooltip.translate": "Verschieben ( 1 )",
@@ -291,6 +292,7 @@ const localizeInit = () => {
                         "tooltip.undo": "Undo ( Ctrl + Z )",
                         "tooltip.redo": "Redo ( Ctrl + Shift + Z )",
                         "tooltip.picker": "Picker Select ( P )",
+                        "tooltip.polygon": "Polygon Select ( O )",
                         "tooltip.brush": "Brush Select ( B )",
                         "tooltip.sphere": "Sphere Select",
                         "tooltip.translate": "Translate ( 1 )",