fix: fix the problem of using canvas.dragon api in workspace mode

packages/designer/src/designer/designer.ts

@@ -59,7 +59,7 @@ export interface DesignerProps {
 
 
 export class Designer implements IDesigner {
-  readonly dragon = new Dragon(this);
+  dragon: Dragon;
 
   readonly componentActions = new ComponentActions();
 
@@ -99,6 +99,7 @@ export class Designer implements IDesigner {
 
     this.project = new Project(this, props.defaultSchema, viewName);
 
+    this.dragon = new Dragon(this);
     this.dragon.onDragstart((e) => {
       this.detecting.enable = false;
       const { dragObject } = e;
@@ -564,6 +565,10 @@ export class Designer implements IDesigner {
   }
 
   addPropsReducer(reducer: IPublicTypePropsTransducer, stage: IPublicEnumTransformStage) {
+    if (!reducer) {
+      logger.error('reducer is not available');
+      return;
+    }
     const reducers = this.propsReducers.get(stage);
     if (reducers) {
       reducers.push(reducer);

packages/shell/src/api/canvas.ts

@@ -26,7 +26,7 @@ export class Canvas implements IPublicApiCanvas {
     return this[editorSymbol].get('designer') as IDesigner;
   }
 
-  constructor(editor: IPublicModelEditor) {
+  constructor(editor: IPublicModelEditor, readonly workspaceMode: boolean = false) {
     this[editorSymbol] = editor;
   }
 
@@ -49,7 +49,7 @@ export class Canvas implements IPublicApiCanvas {
   }
 
   get dragon(): IPublicModelDragon | null {
-    return Dragon.create(this[designerSymbol].dragon);
+    return Dragon.create(this[designerSymbol].dragon, this.workspaceMode);
   }
 
   get activeTracker(): IPublicModelActiveTracker | null {

packages/shell/src/model/dragon.ts

@@ -19,11 +19,14 @@ export const innerDragonSymbol = Symbol('innerDragonSymbol');
 export class Dragon implements IPublicModelDragon {
   private readonly [innerDragonSymbol]: IPublicModelDragon;
 
-  constructor(innerDragon: IPublicModelDragon) {
+  constructor(innerDragon: IPublicModelDragon, readonly workspaceMode: boolean) {
     this[innerDragonSymbol] = innerDragon;
   }
 
   get [dragonSymbol](): any {
+    if (this.workspaceMode) {
+      return this[innerDragonSymbol];
+    }
     const workspace = globalContext.get('workspace');
     let editor = globalContext.get('editor');
 
@@ -35,11 +38,11 @@ export class Dragon implements IPublicModelDragon {
     return designer.dragon;
   }
 
-  static create(dragon: IPublicModelDragon | null): IPublicModelDragon | null {
+  static create(dragon: IPublicModelDragon | null, workspaceMode: boolean): IPublicModelDragon | null {
     if (!dragon) {
       return null;
     }
-    return new Dragon(dragon);
+    return new Dragon(dragon, workspaceMode);
   }
 
   /**

packages/workspace/src/base-context.ts

@@ -81,7 +81,7 @@ export class BasicContext {
     const event = new Event(commonEvent, { prefix: 'common' });
     const logger = getLogger({ level: 'warn', bizName: 'common' });
     const skeleton = new Skeleton(innerSkeleton, 'any', true);
-    const canvas = new Canvas(editor);
+    const canvas = new Canvas(editor, true);
     editor.set('setters', setters);
     editor.set('project', project);
     editor.set('material', material);

packages/workspace/src/layouts/workbench.less

@@ -153,6 +153,7 @@ body {
     .lc-top-area-left, .lc-sub-top-area-left {
       display: flex;
       align-items: center;
+      max-width: 100%;
     }
 
     .lc-top-area-center, .lc-sub-top-area-center {
@@ -361,6 +362,18 @@ body {
       }
     }
 
+    .lc-workspace-workbench-center-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .engine-actionitem {
+      max-width: 100%;
+    }
+
     .lc-workspace-workbench-window {
       position: relative;
       height: 100%;

packages/workspace/src/layouts/workbench.tsx

@@ -41,7 +41,7 @@ export class Workbench extends Component<{
             <LeftFloatPane area={skeleton.leftFloatArea} />
             <LeftFixedPane area={skeleton.leftFixedArea} />
             <div className="lc-workspace-workbench-center">
-              <>
+              <div className="lc-workspace-workbench-center-content">
                 <SubTopArea area={skeleton.subTopArea} itemClassName={topAreaItemClassName} />
                 <div className="lc-workspace-workbench-window">
                   {
@@ -54,7 +54,7 @@ export class Workbench extends Component<{
                     ))
                   }
                 </div>
-              </>
+              </div>
               <MainArea area={skeleton.mainArea} />
               <BottomArea area={skeleton.bottomArea} />
             </div>

packages/workspace/src/workspace.ts

@@ -101,7 +101,7 @@ export class Workspace implements IPublicApiWorkspace {
 
   private remove(index: number) {
     const window = this.windows[index];
-    this.windows = this.windows.splice(index - 1, 1);
+    this.windows.splice(index, 1);
     if (this.window === window) {
       this.window = this.windows[index] || this.windows[index + 1] || this.windows[index - 1];
       this.emitChangeActiveWindow();