optimize: 移除对 @alilc/lowcode-utils 的依赖

Author: knight.chen

packages/utils/src/check.ts

@@ -22,3 +22,7 @@ export function isESModule(obj: unknown): obj is ESModule {
 export function isCSSUrl(url: string): boolean {
   return /\.css$/.test(url);
 }
+
+export function isElement(node: unknown): node is Element {
+  return isObject(node) && node.nodeType === Node.ELEMENT_NODE;
+}

packages/utils/src/setup-environment.ts

@@ -2,19 +2,14 @@ import type { Project } from '@alilc/lowcode-shell';
 import { AssetType } from '@alilc/lowcode-types';
 import { assetItem } from './asset';
 
-export function setupHostEnvironment(project: Project): void {
+export function setupHostEnvironment(project: Project, vueRuntimeUrl: string): void {
   project.onSimulatorHostReady((host) => {
     host.set('environment', [
       assetItem(
         AssetType.JSText,
-        'window.Vue=window.parent.Vue;window.__is_simulator_env__=true;',
-        undefined,
-        'vue'
-      ),
-      assetItem(
-        AssetType.JSText,
-        'window.__VUE_DEVTOOLS_GLOBAL_HOOK__=window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;window.__VUE_HMR_RUNTIME__=window.parent.__VUE_HMR_RUNTIME__;'
+        'window.__is_simulator_env__=true;window.__VUE_DEVTOOLS_GLOBAL_HOOK__=window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;'
       ),
+      assetItem(AssetType.JSUrl, vueRuntimeUrl, undefined, 'vue'),
     ]);
   });
 }

packages/vue-simulator-renderer/package.json

@@ -19,7 +19,6 @@
   "homepage": "https://unpkg.com/@knxcloud/[email protected]/build/index.html",
   "dependencies": {
     "@alilc/lowcode-types": "^1.0.11",
-    "@alilc/lowcode-utils": "^1.0.11",
     "@knxcloud/lowcode-utils": "^1.4.3",
     "@knxcloud/lowcode-vue-renderer": "^1.4.3",
     "vue-router": "^4.0.16"

packages/vue-simulator-renderer/src/index.less

@@ -25,6 +25,26 @@ html.engine-cursor-ew-resize * {
   cursor: ew-resize !important;
 }
 
+html.lc-cursor-dragging,
+html.lc-cursor-dragging * {
+  cursor: move !important;
+}
+
+html.lc-cursor-x-resizing,
+html.lc-cursor-x-resizing * {
+  cursor: col-resize;
+}
+
+html.lc-cursor-y-resizing,
+html.lc-cursor-y-resizing * {
+  cursor: row-resize;
+}
+
+html.lc-cursor-copy,
+html.lc-cursor-copy * {
+  cursor: copy !important;
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

packages/vue-simulator-renderer/src/index.ts

@@ -16,9 +16,6 @@ win.addEventListener('beforeunload', () => {
 export default simulator;
 export * from '@knxcloud/lowcode-vue-renderer';
 export {
-  useLeaf,
-  useRenderer,
-  useRootScope,
   config as vueRendererConfig,
   default as VueRenderer,
 } from '@knxcloud/lowcode-vue-renderer';

packages/vue-simulator-renderer/src/simulator.ts

@@ -1,11 +1,5 @@
 import { DocumentModel } from '@alilc/lowcode-designer';
 import { TransformStage } from '@alilc/lowcode-types';
-import {
-  AssetLoader,
-  cursor,
-  getSubComponent,
-  setNativeSelection,
-} from '@alilc/lowcode-utils';
 import {
   Ref,
   Component,
@@ -18,7 +12,7 @@ import {
   onUnmounted,
 } from 'vue';
 import { config } from '@knxcloud/lowcode-vue-renderer';
-import { buildComponents } from '@knxcloud/lowcode-utils';
+import { AssetLoader, buildComponents, getSubComponent } from '@knxcloud/lowcode-utils';
 import {
   ComponentInstance,
   DocumentInstance,
@@ -30,6 +24,7 @@ import { Renderer, SimulatorRendererView } from './simulator-view';
 import { Slot, Leaf, Page } from './buildin-components';
 import { host } from './host';
 import {
+  cursor,
   findDOMNodes,
   getClientRects,
   getCompRootData,
@@ -38,6 +33,7 @@ import {
   ComponentRecord,
   isComponentRecord,
   getClosestNodeInstanceByComponent,
+  setNativeSelection,
 } from './utils';
 import { createMemoryHistory, createRouter } from 'vue-router';
 

packages/vue-simulator-renderer/src/utils/cursor.ts

@@ -0,0 +1,61 @@
+class Cursor {
+  private states = new Set<string>();
+
+  setDragging(flag: boolean) {
+    if (flag) {
+      this.addState('dragging');
+    } else {
+      this.removeState('dragging');
+    }
+  }
+
+  setXResizing(flag: boolean) {
+    if (flag) {
+      this.addState('x-resizing');
+    } else {
+      this.removeState('x-resizing');
+    }
+  }
+
+  setYResizing(flag: boolean) {
+    if (flag) {
+      this.addState('y-resizing');
+    } else {
+      this.removeState('y-resizing');
+    }
+  }
+
+  setCopy(flag: boolean) {
+    if (flag) {
+      this.addState('copy');
+    } else {
+      this.removeState('copy');
+    }
+  }
+
+  isCopy() {
+    return this.states.has('copy');
+  }
+
+  release() {
+    for (const state of this.states) {
+      this.removeState(state);
+    }
+  }
+
+  addState(state: string) {
+    if (!this.states.has(state)) {
+      this.states.add(state);
+      document.documentElement.classList.add(`lc-cursor-${state}`);
+    }
+  }
+
+  private removeState(state: string) {
+    if (this.states.has(state)) {
+      this.states.delete(state);
+      document.documentElement.classList.remove(`lc-cursor-${state}`);
+    }
+  }
+}
+
+export const cursor = new Cursor();

packages/vue-simulator-renderer/src/utils/get-client-rects.ts

@@ -1,4 +1,4 @@
-import { isElement } from '@alilc/lowcode-utils';
+import { isElement } from '@knxcloud/lowcode-utils';
 
 // a range for test TextNode clientRect
 const cycleRange = document.createRange();

packages/vue-simulator-renderer/src/utils/index.ts

@@ -5,3 +5,5 @@ export * from './check';
 export * from './closest-node';
 export * from './find-dom-nodes';
 export * from './logger';
+export * from './cursor';
+export * from './navtive-selection';

packages/vue-simulator-renderer/src/utils/navtive-selection.ts

@@ -0,0 +1,15 @@
+let nativeSelectionEnabled = true;
+const preventSelection = (e: Event) => {
+  if (nativeSelectionEnabled) {
+    return null;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+  return false;
+};
+document.addEventListener('selectstart', preventSelection, true);
+document.addEventListener('dragstart', preventSelection, true);
+
+export function setNativeSelection(enableFlag: boolean) {
+  nativeSelectionEnabled = enableFlag;
+}