Merge branch 'develop' into patch-3

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-engine-docs",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "低代码引擎版本化文档",
   "license": "MIT",
   "files": [

modules/code-generator/src/cli/solutions/example-solution.ts

@@ -635,18 +635,20 @@ export default function createHelloWorldProjectBuilder() {
     template: CodeGen.solutionParts.icejs.template,
     plugins: {
       components: [
-        CodeGen.plugins.react.reactCommonDeps(),
+        CodeGen.plugins.icejs.reactCommonDeps(),
-        CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
+        CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
-        CodeGen.plugins.react.containerClass(),
+        CodeGen.plugins.common.styleImport(),
-        CodeGen.plugins.react.containerInjectContext(),
+        CodeGen.plugins.icejs.containerClass(),
-        CodeGen.plugins.react.containerInjectUtils(),
+        CodeGen.plugins.icejs.containerInjectContext(),
-        CodeGen.plugins.react.containerInjectDataSourceEngine(),
+        CodeGen.plugins.icejs.containerInjectUtils(),
-        CodeGen.plugins.react.containerInjectI18n(),
+        CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
-        CodeGen.plugins.react.containerInitState(),
+        CodeGen.plugins.icejs.containerInjectI18n(),
-        CodeGen.plugins.react.containerLifeCycle(),
+        CodeGen.plugins.icejs.containerInjectConstants(),
-        CodeGen.plugins.react.containerMethod(),
+        CodeGen.plugins.icejs.containerInitState(),
+        CodeGen.plugins.icejs.containerLifeCycle(),
+        CodeGen.plugins.icejs.containerMethod(),
         examplePlugin(),
-        CodeGen.plugins.react.jsx({
+        CodeGen.plugins.icejs.jsx({
           nodeTypeMapping: {
             Div: 'div',
             Component: 'div',
@@ -657,18 +659,20 @@ export default function createHelloWorldProjectBuilder() {
         CodeGen.plugins.style.css(),
       ],
       pages: [
-        CodeGen.plugins.react.reactCommonDeps(),
+        CodeGen.plugins.icejs.reactCommonDeps(),
-        CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
+        CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
-        CodeGen.plugins.react.containerClass(),
+        CodeGen.plugins.common.styleImport(),
-        CodeGen.plugins.react.containerInjectContext(),
+        CodeGen.plugins.icejs.containerClass(),
-        CodeGen.plugins.react.containerInjectUtils(),
+        CodeGen.plugins.icejs.containerInjectContext(),
-        CodeGen.plugins.react.containerInjectDataSourceEngine(),
+        CodeGen.plugins.icejs.containerInjectUtils(),
-        CodeGen.plugins.react.containerInjectI18n(),
+        CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
-        CodeGen.plugins.react.containerInitState(),
+        CodeGen.plugins.icejs.containerInjectI18n(),
-        CodeGen.plugins.react.containerLifeCycle(),
+        CodeGen.plugins.icejs.containerInjectConstants(),
-        CodeGen.plugins.react.containerMethod(),
+        CodeGen.plugins.icejs.containerInitState(),
+        CodeGen.plugins.icejs.containerLifeCycle(),
+        CodeGen.plugins.icejs.containerMethod(),
         examplePlugin(),
-        CodeGen.plugins.react.jsx({
+        CodeGen.plugins.icejs.jsx({
           nodeTypeMapping: {
             Div: 'div',
             Component: 'div',
@@ -679,13 +683,13 @@ export default function createHelloWorldProjectBuilder() {
         CodeGen.plugins.style.css(),
       ],
       router: [
-        CodeGen.plugins.common.esmodule(),
+        CodeGen.plugins.common.esModule(),
         CodeGen.solutionParts.icejs.plugins.router(),
       ],
       entry: [CodeGen.solutionParts.icejs.plugins.entry()],
       constants: [CodeGen.plugins.project.constants()],
       utils: [
-        CodeGen.plugins.common.esmodule(),
+        CodeGen.plugins.common.esModule(),
         CodeGen.plugins.project.utils('react'),
       ],
       i18n: [CodeGen.plugins.project.i18n()],

modules/code-generator/src/solutions/icejs.ts

@@ -45,6 +45,7 @@ export default function createIceJsProjectBuilder(
         containerInjectUtils(),
         containerInjectDataSourceEngine(),
         containerInjectI18n(),
+        containerInjectConstants(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),

modules/code-generator/src/solutions/icejs3.ts

@@ -45,6 +45,7 @@ export default function createIceJsProjectBuilder(
         containerInjectUtils(),
         containerInjectDataSourceEngine(),
         containerInjectI18n(),
+        containerInjectConstants(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),

packages/designer/src/builtin-simulator/host.ts

@@ -4,7 +4,6 @@ import {
   reaction,
   computed,
   getPublicPath,
-  focusTracker,
   engineConfig,
   globalLocale,
   IReactionPublic,
@@ -519,7 +518,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     // bind hotkey & clipboard
     const hotkey = this.designer.editor.get('innerHotkey');
     hotkey.mount(this._contentWindow);
-    focusTracker.mount(this._contentWindow);
+    const innerSkeleton = this.designer.editor.get('skeleton');
+    innerSkeleton.focusTracker.mount(this._contentWindow);
     clipboard.injectCopyPaster(this._contentDocument);
 
     // TODO: dispose the bindings

packages/designer/tests/builtin-simulator/host.test.ts

@@ -24,6 +24,9 @@ import { fireEvent } from '@testing-library/react';
 import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 import { Setters, Workspace } from '@alilc/lowcode-shell';
 import { ILowCodePluginContextApiAssembler, ILowCodePluginContextPrivate, LowCodePluginManager } from '@alilc/lowcode-designer';
+import {
+  Skeleton as InnerSkeleton,
+} from '@alilc/lowcode-editor-skeleton';
 
 describe('Host 测试', () => {
   let editor: Editor;
@@ -45,6 +48,8 @@ describe('Host 测试', () => {
     const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler);
     const innerWorkspace = new InnerWorkspace(() => {}, {});
     const workspace = new Workspace(innerWorkspace);
+    const innerSkeleton = new InnerSkeleton(editor);
+    editor.set('skeleton' as any, innerSkeleton);
     editor.set('innerHotkey', new InnerHotkey())
     editor.set('setters', new Setters(new InnerSetters()));
     editor.set('innerPlugins' as any, innerPlugins);

packages/editor-core/src/config.ts

@@ -155,6 +155,10 @@ const VALID_ENGINE_OPTIONS = {
     description: '是否开启应用级设计模式',
     default: false,
   },
+  workspaceEmptyComponent: {
+    type: 'function',
+    description: '应用级设计模式下，窗口为空时展示的占位组件',
+  },
 };
 
 const getStrictModeValue = (engineOptions: IPublicTypeEngineOptions, defaultValue: boolean): boolean => {

packages/editor-core/src/utils/focus-tracker.ts

@@ -1,4 +1,8 @@
 export class FocusTracker {
+  private actives: Focusable[] = [];
+
+  private modals: Array<{ checkDown: (e: MouseEvent) => boolean; checkOpen: () => boolean }> = [];
+
   mount(win: Window) {
     const checkDown = (e: MouseEvent) => {
       if (this.checkModalDown(e)) {
@@ -16,14 +20,10 @@ export class FocusTracker {
     };
   }
 
-  private actives: Focusable[] = [];
-
   get first() {
     return this.actives[0];
   }
 
-  private modals: Array<{ checkDown: (e: MouseEvent) => boolean; checkOpen: () => boolean }> = [];
-
   addModal(checkDown: (e: MouseEvent) => boolean, checkOpen: () => boolean) {
     this.modals.push({
       checkDown,
@@ -154,7 +154,3 @@ export class Focusable {
     }
   }
 }
-
-export const focusTracker = new FocusTracker();
-
-focusTracker.mount(window);

packages/editor-skeleton/src/layouts/left-float-pane.tsx

@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Focusable, focusTracker } from '@alilc/lowcode-editor-core';
+import { observer, Focusable } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 import { Panel } from '../widget/panel';
 import { PanelConfig } from '../types';
@@ -31,7 +31,7 @@ export default class LeftFloatPane extends Component<{ area: Area<PanelConfig, P
       area.skeleton.editor.removeListener('designer.drag', triggerClose);
     };
 
-    this.focusing = focusTracker.create({
+    this.focusing = area.skeleton.focusTracker.create({
       range: (e) => {
         const target = e.target as HTMLElement;
         if (!target) {

packages/editor-skeleton/src/skeleton.ts

@@ -1,4 +1,4 @@
-import { action, makeObservable, obx, engineConfig, IEditor } from '@alilc/lowcode-editor-core';
+import { action, makeObservable, obx, engineConfig, IEditor, FocusTracker } from '@alilc/lowcode-editor-core';
 import {
   DockConfig,
   PanelConfig,
@@ -83,6 +83,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
 
   readonly widgets: IWidget[];
 
+  readonly focusTracker: FocusTracker;
+
   getPanel(name: string): Panel | undefined;
 
   getWidget(name: string): IWidget | undefined;
@@ -133,6 +135,8 @@ export class Skeleton {
 
   readonly widgets: IWidget[] = [];
 
+  readonly focusTracker = new FocusTracker();
+
   constructor(readonly editor: IEditor, readonly viewName: string = 'global') {
     makeObservable(this);
     this.leftArea = new Area(
@@ -245,6 +249,7 @@ export class Skeleton {
 
     this.setupPlugins();
     this.setupEvents();
+    this.focusTracker.mount(window);
   }
 
   /**

packages/plugin-designer/src/index.tsx

@@ -67,6 +67,11 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
           locale,
         });
       });
+      engineConfig.onGot('requestHandlersMap', (requestHandlersMap) => {
+        this.setState({
+          requestHandlersMap,
+        });
+      });
       const { components, packages, extraEnvironment, utils } = assets;
       const state = {
         componentMetadatas: components || [],

packages/plugin-outline-pane/src/controllers/tree.ts

@@ -30,6 +30,10 @@ export class Tree {
       treeNode?.notifyExpandableChanged();
     });
 
+    doc?.history.onChangeCursor(() => {
+      this.root?.notifyExpandableChanged();
+    });
+
     doc?.onChangeNodeProp((info: IPublicTypePropChangeOptions) => {
       const { node, key } = info;
       if (key === '___title___') {

packages/renderer-core/src/hoc/leaf.tsx

@@ -193,8 +193,8 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
     getNode,
   });
 
-  if (curDocumentId && cache.component.has(componentCacheId)) {
+  if (curDocumentId && cache.component.has(componentCacheId) && (cache.component.get(componentCacheId).Comp === Comp)) {
-    return cache.component.get(componentCacheId);
+    return cache.component.get(componentCacheId).LeafWrapper;
   }
 
   class LeafHoc extends Component {
@@ -590,7 +590,10 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
 
   LeafWrapper.displayName = (Comp as any).displayName;
 
-  cache.component.set(componentCacheId, LeafWrapper);
+  cache.component.set(componentCacheId, {
+    LeafWrapper,
+    Comp,
+  });
 
   return LeafWrapper;
 }

packages/workspace/src/layouts/left-float-pane.tsx

@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Focusable, focusTracker } from '@alilc/lowcode-editor-core';
+import { observer, Focusable } from '@alilc/lowcode-editor-core';
 import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
 
 @observer
@@ -29,7 +29,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
       area.skeleton.editor.removeListener('designer.drag', triggerClose);
     };
 
-    this.focusing = focusTracker.create({
+    this.focusing = area.skeleton.focusTracker.create({
       range: (e) => {
         const target = e.target as HTMLElement;
         if (!target) {

packages/workspace/src/layouts/workbench.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { TipContainer, observer } from '@alilc/lowcode-editor-core';
+import { TipContainer, engineConfig, observer } from '@alilc/lowcode-editor-core';
 import { WindowView } from '../view/window-view';
 import classNames from 'classnames';
 import TopArea from './top-area';
@@ -21,17 +21,29 @@ export class Workbench extends Component<{
   components?: PluginClassSet;
   className?: string;
   topAreaItemClassName?: string;
+}, {
+  workspaceEmptyComponent: any;
 }> {
   constructor(props: any) {
     super(props);
     const { config, components, workspace } = this.props;
     const { skeleton } = workspace;
     skeleton.buildFromConfig(config, components);
+    engineConfig.onGot('workspaceEmptyComponent', (workspaceEmptyComponent) => {
+      this.setState({
+        workspaceEmptyComponent,
+      });
+    });
+    this.state = {
+      workspaceEmptyComponent: engineConfig.get('workspaceEmptyComponent'),
+    };
   }
 
   render() {
     const { workspace, className, topAreaItemClassName } = this.props;
     const { skeleton } = workspace;
+    const WorkspaceEmptyComponent = this.state.workspaceEmptyComponent;
+
     return (
       <div className={classNames('lc-workspace-workbench', className)}>
         <SkeletonContext.Provider value={skeleton}>
@@ -53,6 +65,10 @@ export class Workbench extends Component<{
                       />
                     ))
                   }
+
+                  {
+                    !workspace.windows.length && WorkspaceEmptyComponent ? <WorkspaceEmptyComponent /> : null
+                  }
                 </div>
               </div>
               <MainArea area={skeleton.mainArea} />

packages/workspace/src/workspace.ts

@@ -199,7 +199,7 @@ export class Workspace implements IWorkspace {
     this.windows.splice(index, 1);
     if (this.window === window) {
       this.window = this.windows[index] || this.windows[index + 1] || this.windows[index - 1];
-      if (this.window.sleep) {
+      if (this.window?.sleep) {
         this.window.init();
       }
       this.emitChangeActiveWindow();