feat: intellij webview ReplicationStoreWorker

packages/erd-editor-intellij-webview/src/main.ts

@@ -15,12 +15,20 @@ import {
   vscodeSaveReplicationAction,
   vscodeSaveThemeAction,
   vscodeSaveValueAction,
+  webviewReplicationAction,
 } from '@dineug/erd-editor-vscode-bridge';
 import { encode } from 'base64-arraybuffer';
 
 const bridge = new Emitter();
+const workerBridge = new Emitter();
 const editor = document.createElement('erd-editor');
 const sharedStore = editor.getSharedStore({ mouseTracker: false });
+const replicationStoreWorker = new Worker(
+  new URL('./services/replicationStore.worker', import.meta.url),
+  {
+    name: '@dineug/erd-editor-intellij-webview/replication-store-worker',
+  }
+);
 
 const dispatch = (action: AnyAction) => {
   window.cefQuery({
@@ -31,6 +39,10 @@ const dispatch = (action: AnyAction) => {
   });
 };
 
+const dispatchWorker = (action: AnyAction) => {
+  replicationStoreWorker.postMessage(action);
+};
+
 import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
   setGetShikiServiceCallback(getShikiService);
 });
@@ -71,18 +83,27 @@ bridge.on({
         break;
     }
   },
-  webviewInitialValue: ({ payload: { value } }) => {
-    editor.addEventListener('change', handleChange);
+  webviewInitialValue: action => {
+    const {
+      payload: { value },
+    } = action;
+    dispatchWorker(action);
+    // editor.addEventListener('change', handleChange);
     editor.addEventListener('changePresetTheme', handleChangePresetTheme);
     editor.setInitialValue(value);
     editor.enableThemeBuilder = true;
     sharedStore.subscribe(actions => {
+      dispatchWorker(webviewReplicationAction({ actions }));
       dispatch(vscodeSaveReplicationAction({ actions }));
     });
     document.body.appendChild(editor);
   },
-  webviewReplication: ({ payload: { actions } }) => {
+  webviewReplication: action => {
+    const {
+      payload: { actions },
+    } = action;
     sharedStore.dispatch(actions);
+    dispatchWorker(action);
   },
   webviewUpdateTheme: ({ payload }) => {
     editor.setPresetTheme({
@@ -95,5 +116,14 @@ bridge.on({
   },
 });
 
+workerBridge.on({
+  vscodeSaveValue: action => {
+    dispatch(action);
+  },
+});
+
 window.addEventListener('message', event => bridge.emit(event.data));
+replicationStoreWorker.addEventListener('message', event => {
+  workerBridge.emit(event.data);
+});
 dispatch(vscodeInitialAction());

packages/erd-editor-intellij-webview/src/services/replicationStore.worker.ts

@@ -0,0 +1,36 @@
+import { createReplicationStore } from '@dineug/erd-editor/engine.js';
+import {
+  AnyAction,
+  Emitter,
+  vscodeSaveValueAction,
+} from '@dineug/erd-editor-vscode-bridge';
+
+import { toWidth } from '@/utils/text';
+
+const store = createReplicationStore({ toWidth });
+const bridge = new Emitter();
+
+const dispatch = (action: AnyAction) => {
+  globalThis.postMessage(action);
+};
+
+store.on({
+  change: () => {
+    dispatch(
+      vscodeSaveValueAction({
+        value: store.value,
+      })
+    );
+  },
+});
+
+bridge.on({
+  webviewInitialValue: ({ payload: { value } }) => {
+    store.setInitialValue(value);
+  },
+  webviewReplication: ({ payload: { actions } }) => {
+    store.dispatch(actions);
+  },
+});
+
+globalThis.addEventListener('message', event => bridge.emit(event.data));

packages/erd-editor-intellij-webview/src/utils/text.ts

@@ -0,0 +1,42 @@
+const TEXT_PADDING = 2;
+const TextFontFamily =
+  "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'" as const;
+
+let canvas: OffscreenCanvas | null = null;
+let canvasContext: OffscreenCanvasRenderingContext2D | null = null;
+
+function getCanvas(): OffscreenCanvas | null {
+  if (canvas) {
+    return canvas;
+  }
+
+  try {
+    canvas = new OffscreenCanvas(0, 0);
+  } catch {}
+
+  return canvas;
+}
+
+function getCanvasContext() {
+  if (canvasContext) {
+    return canvasContext;
+  }
+
+  const canvas = getCanvas();
+  if (!canvas) return null;
+
+  canvasContext = canvas.getContext('2d');
+  if (canvasContext) {
+    canvasContext.font = `400 12px ${TextFontFamily}`;
+  }
+  return canvasContext;
+}
+
+export function toWidth(text: string) {
+  const canvasContext = getCanvasContext();
+  const width = canvasContext
+    ? canvasContext.measureText(text).width
+    : text.length * 10;
+
+  return Math.round(width) + TEXT_PADDING;
+}

packages/erd-editor-intellij-webview/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]

packages/erd-editor-vscode-webview/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
     }