From 7f0487d3ada5c57f3bf51c6bd41b708150a88af4 Mon Sep 17 00:00:00 2001
From: dineug <dineug2@gmail.com>
Date: Fri, 19 Jan 2024 19:36:48 +0900
Subject: [PATCH] fix: canvas controller

---
 packages/erd-editor-vscode/src/editor.ts      |  5 ++
 .../src/erd-editor-provider.ts                |  2 +-
 .../components/erd/canvas/Canvas.styles.ts    |  4 ++
 .../src/components/erd/canvas/Canvas.ts       | 70 +++++++++++--------
 .../erd/erd-context-menu/menus/exportMenus.ts | 16 +----
 5 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/packages/erd-editor-vscode/src/editor.ts b/packages/erd-editor-vscode/src/editor.ts
index 79db5119..53d754db 100644
--- a/packages/erd-editor-vscode/src/editor.ts
+++ b/packages/erd-editor-vscode/src/editor.ts
@@ -20,6 +20,11 @@ export abstract class Editor {
   ) {}
 
   get readonly() {
+    // TODO: scheme
+    // scheme: untitled, file, git, conflictResolution
+    // const editable = vscode.workspace.fs.isWritableFileSystem(
+    //   this.document.uri.scheme
+    // );
     return (
       this.document.uri.scheme === 'git' ||
       this.document.uri.scheme === 'conflictResolution'
diff --git a/packages/erd-editor-vscode/src/erd-editor-provider.ts b/packages/erd-editor-vscode/src/erd-editor-provider.ts
index cba36e7c..a11e062d 100644
--- a/packages/erd-editor-vscode/src/erd-editor-provider.ts
+++ b/packages/erd-editor-vscode/src/erd-editor-provider.ts
@@ -89,7 +89,7 @@ export class ErdEditorProvider
 
     const editor = this.createEditor(
       document,
-      webviewPanel.webview,
+      webview,
       this.context,
       this.docToTupleMap
     );
diff --git a/packages/erd-editor/src/components/erd/canvas/Canvas.styles.ts b/packages/erd-editor/src/components/erd/canvas/Canvas.styles.ts
index 2a75506b..af79f7e6 100644
--- a/packages/erd-editor/src/components/erd/canvas/Canvas.styles.ts
+++ b/packages/erd-editor/src/components/erd/canvas/Canvas.styles.ts
@@ -7,3 +7,7 @@ export const root = css`
   left: 0;
   will-change: transform;
 `;
+
+export const controller = css`
+  will-change: transform;
+`;
diff --git a/packages/erd-editor/src/components/erd/canvas/Canvas.ts b/packages/erd-editor/src/components/erd/canvas/Canvas.ts
index 24c9f82e..3eacbc1b 100644
--- a/packages/erd-editor/src/components/erd/canvas/Canvas.ts
+++ b/packages/erd-editor/src/components/erd/canvas/Canvas.ts
@@ -42,8 +42,7 @@ const Canvas: FC<CanvasProps> = (props, ctx) => {
 
     return html`
       <div
-        class=${styles.root}
-        ${ref(props.canvas)}
+        class=${styles.controller}
         style=${{
           width: `${width}px`,
           height: `${height}px`,
@@ -53,34 +52,45 @@ const Canvas: FC<CanvasProps> = (props, ctx) => {
           'pointer-events': props.grabMove ? 'none' : 'auto',
         }}
       >
-        ${cache(
-          isHighLevelTable(zoomLevel)
-            ? html`${repeat(
-                tables,
-                table => table.id,
-                table => html`<${HighLevelTable} table=${table} />`
-              )}`
-            : html`${repeat(
-                tables,
-                table => table.id,
-                table => html`<${Table} table=${table} />`
-              )}`
-        )}
-        ${repeat(
-          memos,
-          memo => memo.id,
-          memo => html`<${Memo} memo=${memo} />`
-        )}
-        ${bHas(show, Show.relationship) ? html`<${CanvasSvg} />` : null}
-        ${drawRelationship?.start
-          ? html`
-              <${DrawRelationship}
-                root=${props.root}
-                draw=${drawRelationship}
-              />
-            `
-          : null}
-        <${SharedMouseTracker} />
+        <div
+          class=${styles.root}
+          ${ref(props.canvas)}
+          style=${{
+            width: `${width}px`,
+            height: `${height}px`,
+            'min-width': `${width}px`,
+            'min-height': `${height}px`,
+          }}
+        >
+          ${cache(
+            isHighLevelTable(zoomLevel)
+              ? html`${repeat(
+                  tables,
+                  table => table.id,
+                  table => html`<${HighLevelTable} table=${table} />`
+                )}`
+              : html`${repeat(
+                  tables,
+                  table => table.id,
+                  table => html`<${Table} table=${table} />`
+                )}`
+          )}
+          ${repeat(
+            memos,
+            memo => memo.id,
+            memo => html`<${Memo} memo=${memo} />`
+          )}
+          ${bHas(show, Show.relationship) ? html`<${CanvasSvg} />` : null}
+          ${drawRelationship?.start
+            ? html`
+                <${DrawRelationship}
+                  root=${props.root}
+                  draw=${drawRelationship}
+                />
+              `
+            : null}
+          <${SharedMouseTracker} />
+        </div>
       </div>
     `;
   };
diff --git a/packages/erd-editor/src/components/erd/erd-context-menu/menus/exportMenus.ts b/packages/erd-editor/src/components/erd/erd-context-menu/menus/exportMenus.ts
index 15285faa..6bd9f90a 100644
--- a/packages/erd-editor/src/components/erd/erd-context-menu/menus/exportMenus.ts
+++ b/packages/erd-editor/src/components/erd/erd-context-menu/menus/exportMenus.ts
@@ -1,8 +1,6 @@
 import { toJson } from '@dineug/erd-editor-schema';
-import { nextTick } from '@dineug/r-html';
 
 import { AppContext } from '@/components/appContext';
-import { scrollToAction } from '@/engine/modules/settings/atom.actions';
 import {
   exportJSON,
   exportPNG,
@@ -26,8 +24,8 @@ export function createExportMenus(
       },
       name: 'json',
       onClick: () => {
-        exportJSON(toJson(store.state), databaseName);
         onClose();
+        exportJSON(toJson(store.state), databaseName);
       },
     },
     {
@@ -37,8 +35,8 @@ export function createExportMenus(
       },
       name: 'Schema SQL',
       onClick: () => {
-        exportSchemaSQL(createSchemaSQL(store.state), databaseName);
         onClose();
+        exportSchemaSQL(createSchemaSQL(store.state), databaseName);
       },
     },
     {
@@ -49,15 +47,7 @@ export function createExportMenus(
       name: 'png',
       onClick: () => {
         onClose();
-        store.dispatchSync(
-          scrollToAction({
-            scrollTop: 0,
-            scrollLeft: 0,
-          })
-        );
-        nextTick(() => {
-          exportPNG(root, databaseName);
-        });
+        exportPNG(root, databaseName);
       },
     },
   ];