feat: 支持 Panel / Widget / PanelDock 等类型的面板 disable / enable 方法, 以及相应的事件触发

packages/editor-skeleton/src/components/widget-views/index.less

@@ -5,4 +5,10 @@
   &.hidden {
     display: none;
   }
+
+}
+
+.lc-widget-disabled {
+  pointer-events: none;
+  opacity: 0.4;
 }

packages/editor-skeleton/src/components/widget-views/index.tsx

@@ -73,7 +73,6 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
       ...props,
       className: classNames(className, {
         actived: dock.actived,
-        disabled: dock.disabled,
       }),
       onClick: () => {
         onClick && onClick();
@@ -260,13 +259,16 @@ export class WidgetView extends Component<{ widget: IWidget }> {
 
   componentDidMount() {
     this.checkVisible();
+    this.checkDisabled();
   }
 
   componentDidUpdate() {
     this.checkVisible();
+    this.checkDisabled();
   }
 
   private lastVisible = false;
+  private lastDisabled = false;
 
   checkVisible() {
     const { widget } = this.props;
@@ -281,11 +283,31 @@ export class WidgetView extends Component<{ widget: IWidget }> {
     }
   }
 
+  checkDisabled() {
+    const { widget } = this.props;
+    const currentDisabled = widget.disabled;
+    if (currentDisabled !== this.lastDisabled) {
+      this.lastDisabled = currentDisabled;
+      if (this.lastDisabled) {
+        widget.skeleton.postEvent(SkeletonEvents.WIDGET_DISABLE, widget.name, widget);
+      } else {
+        widget.skeleton.postEvent(SkeletonEvents.WIDGET_ENABLE, widget.name, widget);
+      }
+    }
+  }
+
   render() {
     const { widget } = this.props;
     if (!widget.visible) {
       return null;
     }
+    if (widget.disabled) {
+      return (
+        <div className="lc-widget-disabled">
+          {widget.body}
+        </div>
+      );
+    }
     return widget.body;
   }
 }

packages/editor-skeleton/src/skeleton.ts

@@ -31,6 +31,8 @@ export enum SkeletonEvents {
   PANEL_HIDE = 'skeleton.panel.hide',
   WIDGET_SHOW = 'skeleton.widget.show',
   WIDGET_HIDE = 'skeleton.widget.hide',
+  WIDGET_DISABLE = 'skeleton.widget.disable',
+  WIDGET_ENABLE = 'skeleton.widget.enable',
 }
 
 export class Skeleton {

packages/editor-skeleton/src/widget/dock.ts

@@ -24,6 +24,8 @@ export default class Dock implements IWidget {
     return this._visible;
   }
 
+  @obx.ref private _disabled = false;
+
   get content(): ReactNode {
     return createElement(WidgetView, {
       widget: this,
@@ -76,6 +78,23 @@ export default class Dock implements IWidget {
     }
   }
 
+  private setDisabled(flag: boolean) {
+    if (this._disabled === flag) return;
+    this._disabled = flag;
+  }
+
+  disable() {
+    this.setDisabled(true);
+  }
+
+  enable() {
+    this.setDisabled(false);
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
   getContent() {
     return this.content;
   }

packages/editor-skeleton/src/widget/panel-dock.ts

@@ -125,6 +125,7 @@ export default class PanelDock implements IWidget {
   }
 
   private setDisabled(flag: boolean) {
+    if (this._disabled === flag) return;
     this._disabled = flag;
   }
 
@@ -141,10 +142,8 @@ export default class PanelDock implements IWidget {
   }
 
   togglePanel() {
-    if (!this._disabled) {
     this.panel?.toggle();
   }
-  }
 
   getName() {
     return this.name;

packages/editor-skeleton/src/widget/widget.ts

@@ -12,6 +12,7 @@ export interface IWidget {
   readonly align?: string;
   readonly isWidget: true;
   readonly visible: boolean;
+  readonly disabled: boolean;
   readonly body: ReactNode;
   readonly skeleton: Skeleton;
   readonly config: IWidgetBaseConfig;
@@ -21,6 +22,8 @@ export interface IWidget {
   show(): void;
   hide(): void;
   toggle(): void;
+  enable?(): void;
+  disable?(): void;
 }
 
 export default class Widget implements IWidget {
@@ -40,6 +43,8 @@ export default class Widget implements IWidget {
 
   @obx.ref inited = false;
 
+  @obx.ref private _disabled = false;
+
   private _body: ReactNode;
 
   get body() {
@@ -109,6 +114,23 @@ export default class Widget implements IWidget {
   toggle() {
     this.setVisible(!this._visible);
   }
+
+  private setDisabled(flag: boolean) {
+    if (this._disabled === flag) return;
+    this._disabled = flag;
+  }
+
+  disable() {
+    this.setDisabled(true);
+  }
+
+  enable() {
+    this.setDisabled(false);
+  }
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
 }
 
 export function isWidget(obj: any): obj is IWidget {