import {
Skeleton as InnerSkeleton,
IWidgetBaseConfig,
IWidgetConfigArea,
SkeletonEvents,
} from '@alilc/lowcode-editor-skeleton';
import { skeletonSymbol } from './symbols';
export default class Skeleton {
private readonly [skeletonSymbol]: InnerSkeleton;
constructor(skeleton: InnerSkeleton) {
this[skeletonSymbol] = skeleton;
}
/**
* å¢žåŠ ä¸€ä¸ªé¢æ¿å®žä¾‹
* @param config
* @param extraConfig
* @returns
*/
add(config: IWidgetBaseConfig, extraConfig?: Record) {
return this[skeletonSymbol].add(config, extraConfig);
}
/**
* 移除一个é¢æ¿å®žä¾‹
* @param config
* @returns
*/
remove(config: IWidgetBaseConfig) {
const { area, name } = config;
const skeleton = this[skeletonSymbol];
if (!normalizeArea(area)) return;
skeleton[normalizeArea(area)!].container.remove(name);
}
/**
* 显示é¢æ¿
* @param name
*/
showPanel(name: string) {
this[skeletonSymbol].getPanel(name)?.show();
}
/**
* éšè—é¢æ¿
* @param name
*/
hidePanel(name: string) {
this[skeletonSymbol].getPanel(name)?.hide();
}
/**
* 显示 widget
* @param name
*/
showWidget(name: string) {
this[skeletonSymbol].getWidget(name)?.show();
}
/**
* enable widget
* @param name
*/
enableWidget(name: string) {
this[skeletonSymbol].getWidget(name)?.enable?.();
}
/**
* éšè— widget
* @param name
*/
hideWidget(name: string) {
this[skeletonSymbol].getWidget(name)?.hide();
}
/**
* disable widget，ä¸å¯ç‚¹å‡»
* @param name
*/
disableWidget(name: string) {
this[skeletonSymbol].getWidget(name)?.disable?.();
}
/**
* ç›‘å¬ panel 显示事件
* @param listener
* @returns
*/
onShowPanel(listener: (...args: unknown[]) => void) {
const { editor } = this[skeletonSymbol];
editor.on(SkeletonEvents.PANEL_SHOW, (name: any, panel: any) => {
// ä¸æ³„æ¼ skeleton
const { skeleton, ...restPanel } = panel;
listener(name, restPanel);
});
return () => editor.off(SkeletonEvents.PANEL_SHOW, listener);
}
/**
* ç›‘å¬ panel éšè—事件
* @param listener
* @returns
*/
onHidePanel(listener: (...args: unknown[]) => void) {
const { editor } = this[skeletonSymbol];
editor.on(SkeletonEvents.PANEL_HIDE, (name: any, panel: any) => {
// ä¸æ³„æ¼ skeleton
const { skeleton, ...restPanel } = panel;
listener(name, restPanel);
});
return () => editor.off(SkeletonEvents.PANEL_HIDE, listener);
}
/**
* ç›‘å¬ widget 显示事件
* @param listener
* @returns
*/
onShowWidget(listener: (...args: unknown[]) => void) {
const { editor } = this[skeletonSymbol];
editor.on(SkeletonEvents.WIDGET_SHOW, (name: any, panel: any) => {
// ä¸æ³„æ¼ skeleton
const { skeleton, ...rest } = panel;
listener(name, rest);
});
return () => editor.off(SkeletonEvents.WIDGET_SHOW, listener);
}
/**
* ç›‘å¬ widget éšè—事件
* @param listener
* @returns
*/
onHideWidget(listener: (...args: unknown[]) => void) {
const { editor } = this[skeletonSymbol];
editor.on(SkeletonEvents.WIDGET_HIDE, (name: any, panel: any) => {
// ä¸æ³„æ¼ skeleton
const { skeleton, ...rest } = panel;
listener(name, rest);
});
return () => editor.off(SkeletonEvents.WIDGET_HIDE, listener);
}
}
function normalizeArea(area: IWidgetConfigArea | undefined) {
switch (area) {
case 'leftArea':
case 'left':
return 'leftArea';
case 'rightArea':
case 'right':
return 'rightArea';
case 'topArea':
case 'top':
return 'topArea';
case 'toolbar':
return 'toolbar';
case 'mainArea':
case 'main':
case 'center':
case 'centerArea':
return 'mainArea';
case 'bottomArea':
case 'bottom':
return 'bottomArea';
case 'leftFixedArea':
return 'leftFixedArea';
case 'leftFloatArea':
return 'leftFloatArea';
case 'stages':
return 'stages';
default:
throw new Error(`${area} not supported`);
}
}