From 598bc954df87bc6d5875c404cefc6f26b51f6afe Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:05:09 -0400
Subject: resizing 90%

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss       | 15 ++++++++-------
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 87f493291..ac60ddb3e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -246,9 +246,9 @@
     }
 
     &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
-        height: 10px;
-        width: 10px;
-        background-color: blue;
+        height: 15px;
+        width: 15px;
+        background-color: none;
     }
 }
 
@@ -504,10 +504,11 @@
         flex: 0 0 auto;
         overflow: scroll;
         display: grid;
-        width: auto;
-        height: auto;
-        max-width: 240;
-        max-height: 240;
+        width: 100%;
+        aspect-ratio: 1.23;
+        //height: auto;
+        // max-width: 240;
+        // max-height: 240;
         border: 1px solid rgb(180, 180, 180);
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index bc04f9a69..ef53dde8e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -66,7 +66,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _resizing: boolean = false;
     @observable _offset: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
-    @observable _initDimensions: {width: number, height: number, x: number, y: number} = {width: 300, height: 400, x: 0, y: 0};
+    @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
     @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400};
 
     constructor(props: any) {
@@ -228,6 +228,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     onDrag = (e: any): boolean => {
         this._pageX = e.pageX - (this._startPos?.x ?? 0);
         this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        this._initDimensions.x = this._pageX;
+        this._initDimensions.y = this._pageY;
         return true;
     }
 
@@ -236,11 +238,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
         let vals: {scale: {x: number, y: number}, refPt: [number, number], transl: {x: number, y: number}};
         switch (dragHdl) {
-            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: -moveY } }; break;
-            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: -moveY } }; break;
+            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
+            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
             case 'top':        vals = { scale: { x: 1,             y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
             case 'left':       vals = { scale: { x: 1 - moveX / w, y: 1 },             refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
-            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: moveY } }; break;
+            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
             case 'right':      vals = { scale: { x: 1 + moveX / w, y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
             case 'bottomRight':vals = { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
             case 'bottom':     vals = { scale: { x: 1,             y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
@@ -255,8 +257,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
         const {height, width, x, y} = this._initDimensions;
 
-        console.log(scale.x)
-
         this._menuDimensions.width = Math.max(100, scale.x * width);
         this._menuDimensions.height = Math.max(100, scale.y * height);
         this._pageX = x + translation.x;
@@ -568,10 +568,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
             <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>, 
             <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
-            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: -7, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: -7, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: height, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: height, cursor: 'nesw-resize'}}/>
+            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>
         ]; //prettier-ignore
     }
 
-- 
cgit v1.2.3-70-g09d2