Created new interactive scaling menu.

public/sw.js

@@ -1,5 +1,5 @@
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js');
-const VERSION = '8';
+const VERSION = '9';
 const CACHE = "deepdiagram";
 const IMAGEDELIVERY_CACHE = "deepdiagram-images";
 const MAPTILE_CACHE = 'maptiler';
@@ -73,12 +73,7 @@ workbox.routing.registerRoute(
     })
 );
 
-workbox.routing.registerRoute(
-    new RegExp('.*imagedelivery.net.*'),
-    new workbox.strategies.StaleWhileRevalidate({
-        cacheName: IMAGEDELIVERY_CACHE
-    })
-);
+
 workbox.routing.registerRoute(
     new RegExp('/db/.*'),
     new workbox.strategies.StaleWhileRevalidate({

src/controllers/base.ts

@@ -103,6 +103,10 @@ export class Base {
         trigger.onButtonStateChangedObservable.add(() => {
             if (trigger.changes.pressed) {
                 if (trigger.pressed) {
+                    if (this.diagramManager.diagramMenuManager.scaleMenu.mesh == this._meshUnderPointer) {
+                        return;
+                    }
+
                     if (this._clickStart == 0) {
                         this._clickStart = Date.now();
                         window.setTimeout(() => {

src/controllers/functions/grabAndClone.ts

@@ -1,7 +1,8 @@
-import {AbstractMesh, Vector3} from "@babylonjs/core";
+import {AbstractMesh} from "@babylonjs/core";
 import {DiagramManager} from "../../diagram/diagramManager";
 import {DiagramObject} from "../../diagram/diagramObject";
 import log from "loglevel";
+import {vectoxys} from "../../diagram/functions/vectorConversion";
 
 export function grabAndClone(diagramManager: DiagramManager, mesh: AbstractMesh, parent: AbstractMesh):
     DiagramObject {
@@ -38,7 +39,3 @@ export function grabAndClone(diagramManager: DiagramManager, mesh: AbstractMesh,
     }
 
 }
-
-function vectoxys(v: Vector3): { x, y, z } {
-    return {x: v.x, y: v.y, z: v.z};
-}

src/diagram/diagramMenuManager.ts

@@ -5,17 +5,17 @@ import {DefaultScene} from "../defaultScene";
 import {ControllerEvent, ControllerEventType, Controllers} from "../controllers/controllers";
 import log from "loglevel";
 import {Toolbox} from "../toolbox/toolbox";
-import {ScaleMenu} from "../menus/scaleMenu";
 import {ClickMenu} from "../menus/clickMenu";
 import {ConfigMenu} from "../menus/configMenu";
 import {AppConfig} from "../util/appConfig";
 import {DiagramEventObserverMask} from "./types/diagramEventObserverMask";
 import {ConnectionPreview} from "../menus/connectionPreview";
+import {ScaleMenu2} from "../menus/ScaleMenu2";
 
 
 export class DiagramMenuManager {
     public readonly toolbox: Toolbox;
-    public readonly scaleMenu: ScaleMenu;
+    public readonly scaleMenu: ScaleMenu2;
     public readonly configMenu: ConfigMenu;
     private readonly _notifier: Observable<DiagramEvent>;
     private readonly _inputTextView: InputTextView;
@@ -33,13 +33,13 @@ export class DiagramMenuManager {
             this.notifyAll({type: DiagramEventType.MODIFY, entity: {id: evt.id, text: evt.text}});
         });
         this.toolbox = new Toolbox();
-        this.scaleMenu = new ScaleMenu();
-        this.scaleMenu.onScaleChangeObservable.add((mesh: AbstractMesh) => {
+        this.scaleMenu = new ScaleMenu2(this._notifier);
+        /*this.scaleMenu.onScaleChangeObservable.add((mesh: AbstractMesh) => {
             this.notifyAll({type: DiagramEventType.MODIFY, entity: {id: mesh.id, scale: mesh.scaling}});
             const position = mesh.absolutePosition.clone();
             position.y = mesh.getBoundingInfo().boundingBox.maximumWorld.y + .1;
             this.scaleMenu.changePosition(position);
-        });
+        });*/
         controllers.controllerObservable.add((event: ControllerEvent) => {
             if (event.type == ControllerEventType.B_BUTTON) {
                 if (event.value > .8) {

src/diagram/functions/buildMeshFromDiagramEntity.ts

@@ -158,9 +158,6 @@ function xyztovec(xyz: { x, y, z }): Vector3 {
     return new Vector3(xyz.x, xyz.y, xyz.z);
 }
 
-function vectoxys(v: Vector3): { x, y, z } {
-    return {x: v.x, y: v.y, z: v.z};
-}
 
 export function buildMissingMaterial(name: string, scene: Scene, color: string): StandardMaterial {
     const existingMaterial = scene.getMaterialById(name);

src/diagram/functions/toDiagramEntity.ts

@@ -1,7 +1,8 @@
-import {AbstractMesh, Vector3} from "@babylonjs/core";
+import {AbstractMesh} from "@babylonjs/core";
 import {DiagramEntity} from "../types/diagramEntity";
 import log from "loglevel";
 import {v4 as uuidv4} from 'uuid';
+import {vectoxys} from "./vectorConversion";
 
 
 export function toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
@@ -41,7 +42,3 @@ export function toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
     }
     return entity;
 }
-
-function vectoxys(v: Vector3): { x, y, z } {
-    return {x: v.x, y: v.y, z: v.z};
-}

src/diagram/functions/vectorConversion.ts

@@ -0,0 +1,5 @@
+import {Vector3} from "@babylonjs/core";
+
+export function vectoxys(v: Vector3): { x, y, z } {
+    return {x: v.x, y: v.y, z: v.z};
+}

src/menus/ScaleMenu2.ts

@@ -0,0 +1,57 @@
+import {AbstractMesh, GizmoManager, IAxisScaleGizmo, Observable} from "@babylonjs/core";
+import {DefaultScene} from "../defaultScene";
+import {DiagramEvent, DiagramEventType} from "../diagram/types/diagramEntity";
+import {toDiagramEntity} from "../diagram/functions/toDiagramEntity";
+
+export class ScaleMenu2 {
+    private readonly _gizmoManager: GizmoManager;
+    private readonly _notifier: Observable<DiagramEvent>;
+
+    constructor(notifier: Observable<DiagramEvent>) {
+        this._notifier = notifier;
+        this._gizmoManager = new GizmoManager(DefaultScene.Scene);
+        this._gizmoManager.positionGizmoEnabled = false;
+        this._gizmoManager.rotationGizmoEnabled = false;
+        this._gizmoManager.scaleGizmoEnabled = true;
+        this._gizmoManager.boundingBoxGizmoEnabled = false;
+        this._gizmoManager.usePointerToAttachGizmos = false;
+        configureGizmo(this._gizmoManager.gizmos.scaleGizmo.yGizmo);
+        configureGizmo(this._gizmoManager.gizmos.scaleGizmo.xGizmo);
+        configureGizmo(this._gizmoManager.gizmos.scaleGizmo.zGizmo);
+        this._gizmoManager.gizmos.scaleGizmo.onDragEndObservable.add((event) => {
+            if (this.mesh.scaling.x < .01) {
+                this.mesh.scaling.x = .01;
+            }
+            if (this.mesh.scaling.y < .01) {
+                this.mesh.scaling.y = .01;
+            }
+            if (this.mesh.scaling.z < .01) {
+                this.mesh.scaling.z = .01;
+            }
+            const entity = toDiagramEntity(this.mesh);
+            this._notifier.notifyObservers({type: DiagramEventType.MODIFY, entity: entity});
+        });
+
+    }
+
+    public get mesh() {
+        return this._gizmoManager.attachedMesh;
+    }
+
+    public show(mesh: AbstractMesh) {
+        this._gizmoManager.attachToMesh(mesh);
+    }
+
+    public hide() {
+        this._gizmoManager.attachToMesh(null);
+    }
+
+}
+
+function configureGizmo(gizmo: IAxisScaleGizmo) {
+    gizmo.snapDistance = .1;
+    gizmo.uniformScaling = false;
+    gizmo.scaleRatio = 3;
+    gizmo.sensitivity = 3;
+
+}