Merge branch 'develop' into patch-1

Author: sdshaoda

docs/docs/api/model/node.md

@@ -657,4 +657,22 @@ setConditionalVisible(): void;
  */
 getDOMNode(): HTMLElement;
 
+```
+
+### getRGL
+
+获取磁贴相关信息
+
+```typescript
+/**
+ * 获取磁贴相关信息
+ */
+getRGL(): {
+  isContainerNode: boolean;
+  isEmptyNode: boolean;
+  isRGLContainerNode: boolean;
+  isRGLNode: boolean;
+  isRGL: boolean;
+  rglNode: Node | null;
+}
 ```

packages/designer/src/component-actions.ts

@@ -1,4 +1,4 @@
-import { IPublicTypeComponentAction, IPublicTypeMetadataTransducer } from '@alilc/lowcode-types';
+import { IPublicModelNode, IPublicTypeComponentAction, IPublicTypeMetadataTransducer } from '@alilc/lowcode-types';
 import { engineConfig } from '@alilc/lowcode-editor-core';
 import { intlNode } from './locale';
 import {
@@ -8,18 +8,19 @@ import {
   IconClone,
   IconHidden,
 } from './icons';
-import { Node } from './document';
 import { componentDefaults, legacyIssues } from './transducers';
 
 export class ComponentActions {
+  private metadataTransducers: IPublicTypeMetadataTransducer[] = [];
+
   actions: IPublicTypeComponentAction[] = [
     {
       name: 'remove',
       content: {
         icon: IconRemove,
         title: intlNode('remove'),
         /* istanbul ignore next */
-        action(node: Node) {
+        action(node: IPublicModelNode) {
           node.remove();
         },
       },
@@ -31,13 +32,13 @@ export class ComponentActions {
         icon: IconHidden,
         title: intlNode('hide'),
         /* istanbul ignore next */
-        action(node: Node) {
-          node.setVisible(false);
+        action(node: IPublicModelNode) {
+          node.visible = false;
         },
       },
       /* istanbul ignore next */
-      condition: (node: Node) => {
-        return node.componentMeta.isModal;
+      condition: (node: IPublicModelNode) => {
+        return node.componentMeta?.isModal;
       },
       important: true,
     },
@@ -47,25 +48,25 @@ export class ComponentActions {
         icon: IconClone,
         title: intlNode('copy'),
         /* istanbul ignore next */
-        action(node: Node) {
+        action(node: IPublicModelNode) {
           // node.remove();
           const { document: doc, parent, index } = node;
           if (parent) {
-            const newNode = doc.insertNode(parent, node, index + 1, true);
-            newNode.select();
-            const { isRGL, rglNode } = node.getRGL();
+            const newNode = doc?.insertNode(parent, node, (index ?? 0) + 1, true);
+            newNode?.select();
+            const { isRGL, rglNode } = node?.getRGL();
             if (isRGL) {
               // 复制 layout 信息
-              const layout = rglNode.getPropValue('layout') || [];
-              const curLayout = layout.filter((item) => item.i === node.getPropValue('fieldId'));
+              const layout: any = rglNode?.getPropValue('layout') || [];
+              const curLayout = layout.filter((item: any) => item.i === node.getPropValue('fieldId'));
               if (curLayout && curLayout[0]) {
                 layout.push({
                   ...curLayout[0],
-                  i: newNode.getPropValue('fieldId'),
+                  i: newNode?.getPropValue('fieldId'),
                 });
-                rglNode.setPropValue('layout', layout);
+                rglNode?.setPropValue('layout', layout);
                 // 如果是磁贴块复制，则需要滚动到影响位置
-                setTimeout(() => newNode.document.simulator?.scrollToNode(newNode), 10);
+                setTimeout(() => newNode?.document?.project?.simulatorHost?.scrollToNode(newNode), 10);
               }
             }
           }
@@ -79,13 +80,13 @@ export class ComponentActions {
         icon: IconLock, // 锁定 icon
         title: intlNode('lock'),
         /* istanbul ignore next */
-        action(node: Node) {
+        action(node: IPublicModelNode) {
           node.lock();
         },
       },
       /* istanbul ignore next */
-      condition: (node: Node) => {
-        return engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked;
+      condition: (node: IPublicModelNode) => {
+        return engineConfig.get('enableCanvasLock', false) && node.isContainerNode && !node.isLocked;
       },
       important: true,
     },
@@ -95,13 +96,13 @@ export class ComponentActions {
         icon: IconUnlock, // 解锁 icon
         title: intlNode('unlock'),
         /* istanbul ignore next */
-        action(node: Node) {
+        action(node: IPublicModelNode) {
           node.lock(false);
         },
       },
       /* istanbul ignore next */
-      condition: (node: Node) => {
-        return engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked;
+      condition: (node: IPublicModelNode) => {
+        return engineConfig.get('enableCanvasLock', false) && node.isContainerNode && node.isLocked;
       },
       important: true,
     },
@@ -132,8 +133,6 @@ export class ComponentActions {
     }
   }
 
-  private metadataTransducers: IPublicTypeMetadataTransducer[] = [];
-
   registerMetadataTransducer(
     transducer: IPublicTypeMetadataTransducer,
     level = 100,

packages/designer/src/document/node/node.ts

@@ -1225,7 +1225,7 @@ export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema>
     const isRGLContainerNode = this.isRGLContainer;
     const isRGLNode = this.getParent()?.isRGLContainer;
     const isRGL = isRGLContainerNode || (isRGLNode && (!isContainerNode || !isEmptyNode));
-    let rglNode = isRGLContainerNode ? this : isRGL ? this?.getParent() : {};
+    let rglNode = isRGLContainerNode ? this : isRGL ? this?.getParent() : null;
     return { isContainerNode, isEmptyNode, isRGLContainerNode, isRGLNode, isRGL, rglNode };
   }
 

packages/designer/src/project/project.less

@@ -14,7 +14,7 @@
   }
 
   .lc-simulator {
-    background: rgb(237, 239, 243);
+    background-color: var(--color-background, rgb(237, 239, 243));
   }
 
   .lc-simulator-shell {

packages/editor-core/src/widgets/tip/style.less

@@ -147,7 +147,7 @@
   z-index: 2;
   position: fixed;
   box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--color-layer-tooltip-background);
   max-height: 400px;
   color: var(--color-text-reverse, rgba(255, 255, 255, 0.8));
   left: 0;

packages/editor-skeleton/src/components/settings/style.less

@@ -143,7 +143,6 @@
   .lc-outline-pane {
     position: absolute;
     z-index: 100;
-    background-color: white;
     top: 0;
     bottom: 0;
     display: none;

packages/editor-skeleton/src/index.ts

@@ -8,3 +8,4 @@ export * from './components/popup';
 export * from './context';
 export * from './register-defaults';
 export * from './widget';
+export * from './layouts';

packages/editor-skeleton/src/layouts/index.ts

@@ -0,0 +1,7 @@
+export { default as LeftArea } from './left-area';
+export { default as LeftFloatPane } from './left-float-pane';
+export { default as LeftFixedPane } from './left-fixed-pane';
+export { default as MainArea } from './main-area';
+export { default as BottomArea } from './bottom-area';
+export { default as TopArea } from './top-area';
+export { default as SubTopArea } from './sub-top-area';

packages/editor-skeleton/src/layouts/left-area.tsx

@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 
 @observer
-export default class LeftArea extends Component<{ area: Area }> {
+export default class LeftArea extends Component<{ area: Area; className?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, className = 'lc-left-area' } = this.props;
     if (area.isEmpty()) {
       return null;
     }
     return (
-      <div className={classNames('lc-left-area', {
+      <div className={classNames(className, {
         'lc-area-visible': area.visible,
       })}
       >
@@ -21,7 +21,6 @@ export default class LeftArea extends Component<{ area: Area }> {
   }
 }
 
-
 @observer
 class Contents extends Component<{ area: Area }> {
   render() {