fix: 移除 renderer 内 components 的响应式逻辑

refactor: 优化判断点击节点是否在视口内的逻辑
fix: 修复 parseMetadata 后丢失 npm 信息

packages/designer/src/builtin-simulator/bem-tools/borders.less

@@ -25,6 +25,7 @@
     align-items: stretch;
     justify-content: flex-end;
     pointer-events: all;
+    background-color: white;
     > * {
       flex-shrink: 0;
     }

packages/designer/src/component-meta.ts

@@ -70,7 +70,7 @@ export class ComponentMeta {
     return this._npm;
   }
 
-  set npm(_npm) {
+  set npm(_npm: any) {
     this.setNpm(_npm);
   }
 
@@ -167,7 +167,7 @@ export class ComponentMeta {
 
   private parseMetadata(metadata: ComponentMetadata) {
     const { componentName, npm } = metadata;
-    this._npm = npm;
+    this._npm = npm || this._npm;
     this._componentName = componentName;
 
     // 额外转换逻辑

packages/designer/src/utils/misc.ts

@@ -4,9 +4,20 @@ export function isElementNode(domNode: Element) {
   return domNode.nodeType === Node.ELEMENT_NODE;
 }
 
+/**
+ * 判断节点是否在 viewport 内，判断依据：只要节点有一部分在 viewport 内，都算 true，其余情况 false
+ * @param domNode 待检测的节点
+ * @param viewport 画布 viewport
+ * @returns 是否在 viewport 内
+ */
 export function isDOMNodeVisible(domNode: Element, viewport: Viewport) {
   const domNodeRect = domNode.getBoundingClientRect();
   const { width, height } = viewport.contentBounds;
-  const { left, right, top, bottom } = domNodeRect;
+  const { left, right, top, bottom, width: nodeWidth, height: nodeHeight } = domNodeRect;
-  return left >= 0 && top >= 0 && bottom <= height && right <= width;
+  return (
+    left >= -nodeWidth &&
+    top >= -nodeHeight &&
+    bottom <= height + nodeHeight &&
+    right <= width + nodeWidth
+  );
 }

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -142,6 +142,7 @@ class Renderer extends Component<{
     const messages = container.context?.utils?.i18n?.messages || {};
 
     return (
+      // @ts-ignore
       <LowCodeRenderer
         locale={locale}
         messages={messages}

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

@@ -46,13 +46,6 @@ export class DocumentInstance {
     });
   }
 
-  // private _libraryMap: { [key: string]: string } = {};
-  // private buildComponents() {
-  //   this._components = {
-  //     ...builtinComponents,
-  //     ...buildComponents(this._libraryMap, this._componentsMap),
-  //   };
-  // }
   @obx.ref private _components: any = {};
 
   @computed get components(): object {
@@ -310,16 +303,15 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
   private _libraryMap: { [key: string]: string } = {};
 
   private buildComponents() {
-    // TODO: remove this.createComponent
     this._components = buildComponents(this._libraryMap, this._componentsMap, this.createComponent.bind(this));
     this._components = {
       ...builtinComponents,
       ...this._components,
     };
   }
-  @obx.ref private _components: any = {};
+  private _components: any = {};
 
-  @computed get components(): object {
+  get components(): object {
     // 根据 device 选择不同组件，进行响应式
     // 更好的做法是，根据 device 选择加载不同的组件资源，甚至是 simulatorUrl
     return this._components;