fix(canvas): prevent the dom of resize observer being null & simplified node selected highlight settings (#78)

* fix(canvas): prevent the dom of resize observer being null

* refactor(container): simplified node selected highlight settings

* fix(snap): react warning

* fix: tsc error

apps/demo-free-layout/src/components/base-node/error-icon.tsx

@@ -0,0 +1,15 @@
+import { IconInfoCircle } from '@douyinfe/semi-icons';
+
+export const ErrorIcon = () => (
+  <IconInfoCircle
+    style={{
+      position: 'absolute',
+      color: 'red',
+      left: -6,
+      top: -6,
+      zIndex: 1,
+      background: 'white',
+      borderRadius: 8,
+    }}
+  />
+);

apps/demo-free-layout/src/components/base-node/index.css

@@ -0,0 +1,17 @@
+.flowgram-node-render {
+  align-items: flex-start;
+  background-color: #fff;
+  border: 1px solid rgba(6, 7, 9, 0.15);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+  min-width: 360px;
+  width: 100%;
+  height: 100%;
+}
+
+.flowgram-node-render.selected {
+  border: 1px solid var(--coz-stroke-hglt, #4e40e5);
+}

apps/demo-free-layout/src/components/base-node/index.tsx

@@ -8,7 +8,8 @@ import {
 import { ConfigProvider } from '@douyinfe/semi-ui';
 
 import { NodeRenderContext } from '../../context';
-import { BaseNodeStyle, ErrorIcon } from './styles';
+import './index.css';
+import { ErrorIcon } from './error-icon';
 
 export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
   /**
@@ -29,20 +30,18 @@ export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
   const getPopupContainer = useCallback(() => node.renderData.node || document.body, []);
 
   return (
-    <ConfigProvider getPopupContainer={getPopupContainer}>
-      <WorkflowNodeRenderer className="flowgram-node" node={node}>
-        {form?.state.invalid && <ErrorIcon />}
-        <BaseNodeStyle
-          className={`flowgram-node-render ${nodeRender.selected ? 'selected' : ''}`}
-          style={{
-            outline: form?.state.invalid ? '1px solid red' : 'none',
-          }}
-        >
-          <NodeRenderContext.Provider value={nodeRender}>
-            {form?.render()}
-          </NodeRenderContext.Provider>
-        </BaseNodeStyle>
-      </WorkflowNodeRenderer>
-    </ConfigProvider>
+    <WorkflowNodeRenderer
+      className={`flowgram-node-render ${nodeRender.selected ? 'selected' : ''}`}
+      node={node}
+      style={{
+        borderRadius: 8,
+        outline: form?.state.invalid ? '1px solid red' : 'none',
+      }}
+    >
+      {form?.state.invalid && <ErrorIcon />}
+      <NodeRenderContext.Provider value={nodeRender}>
+        <ConfigProvider getPopupContainer={getPopupContainer}>{form?.render()}</ConfigProvider>
+      </NodeRenderContext.Provider>
+    </WorkflowNodeRenderer>
   );
 };

apps/demo-free-layout/src/components/base-node/styles.tsx

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-import { IconInfoCircle } from '@douyinfe/semi-icons';
-
-export const BaseNodeStyle = styled.div`
-  align-items: flex-start;
-  background-color: #fff;
-  border: 1px solid rgba(6, 7, 9, 0.15);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  position: relative;
-  min-width: 360px;
-  width: 100%;
-  height: 100%;
-
-  &.selected {
-    border: 1px solid var(--coz-stroke-hglt, #4e40e5);
-  }
-`;
-
-export const ErrorIcon = () => (
-  <IconInfoCircle
-    style={{
-      position: 'absolute',
-      color: 'red',
-      left: -6,
-      top: -6,
-      zIndex: 1,
-      background: 'white',
-      borderRadius: 8,
-    }}
-  />
-);

packages/canvas-engine/renderer/src/utils/element.ts

@@ -1,7 +1,13 @@
 import { isNil } from 'lodash';
-export const isHidden = (dom: HTMLElement) => {
+export const isHidden = (dom?: HTMLElement) => {
+  if (!dom || isNil(dom?.offsetParent)) {
+    return true;
+  }
   const style = window.getComputedStyle(dom);
-  return isNil(dom?.offsetParent) || style?.display === 'none';
+  if (style?.display === 'none') {
+    return true;
+  }
+  return false;
 };
 
 export const isRectInit = (rect?: DOMRect): boolean => {

packages/plugins/free-container-plugin/src/node-into-container/service.ts

@@ -259,7 +259,7 @@ export class NodeIntoContainerService {
       const renderData = this.state.dropNode.getData(FlowNodeRenderData);
       const renderDom = renderData.node?.children?.[0] as HTMLElement;
       if (renderDom) {
-        renderDom.style.outline = '';
+        renderDom.classList.remove('selected');
       }
     }
     this.state.dropNode = dropNode;
@@ -270,7 +270,7 @@ export class NodeIntoContainerService {
     const renderData = dropNode.getData(FlowNodeRenderData);
     const renderDom = renderData.node?.children?.[0] as HTMLElement;
     if (renderDom) {
-      renderDom.style.outline = '1px solid var(--coz-stroke-hglt,#4e40e5)';
+      renderDom.classList.add('selected');
     }
   }
 

packages/plugins/free-snap-plugin/src/layer.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { inject, injectable } from 'inversify';
-import { FlowNodeTransformData } from '@flowgram.ai/document';
-import { Layer } from '@flowgram.ai/core';
-import { WorkflowDocument } from '@flowgram.ai/free-layout-core';
 import { domUtils } from '@flowgram.ai/utils';
 import { Rectangle } from '@flowgram.ai/utils';
+import { WorkflowDocument } from '@flowgram.ai/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram.ai/document';
+import { Layer } from '@flowgram.ai/core';
 
 import { isEqual, isGreaterThan, isNumber } from './utils';
 import { AlignRect, SnapEvent, WorkflowSnapLayerOptions } from './type';
@@ -30,7 +30,7 @@ export class WorkflowSnapLayer extends Layer<WorkflowSnapLayerOptions> {
   @inject(WorkflowSnapService) private readonly service: WorkflowSnapService;
 
   public readonly node = domUtils.createDivWithClass(
-    'gedit-playground-layer gedit-flow-snap-layer',
+    'gedit-playground-layer gedit-flow-snap-layer'
   );
 
   private edgeLines: SnapRenderLine[] = [];
@@ -78,7 +78,7 @@ export class WorkflowSnapLayer extends Layer<WorkflowSnapLayerOptions> {
           className={`workflow-snap-edge-line ${className}`}
           data-testid="sdk.workflow.canvas.snap.edgeLine"
           data-snap-line-id={id}
-          data-snap-line-sourceNode={sourceNode}
+          data-snap-line-source-node={sourceNode}
           key={id}
           style={{
             top,
@@ -110,7 +110,7 @@ export class WorkflowSnapLayer extends Layer<WorkflowSnapLayerOptions> {
           className={`workflow-snap-align-line ${renderLine.className}`}
           data-testid="sdk.workflow.canvas.snap.alignLine"
           data-snap-line-id={id}
-          data-snap-line-sourceNode={renderLine.sourceNode}
+          data-snap-line-source-node={renderLine.sourceNode}
           key={id}
           style={{
             position: 'absolute',