From 901e06ac013f45b62f41f719c4f349be2ea0508d Mon Sep 17 00:00:00 2001 From: kangwei Date: Tue, 10 Mar 2020 22:35:41 +0800 Subject: [PATCH] joint editor & designer --- .../src/builtins/simulator/host/host.less | 2 +- .../src/builtins/simulator/host/host.ts | 2 +- .../designer/src/designer/component-type.ts | 144 +++++++++++------- .../src/designer/document/node/root-node.ts | 12 +- packages/editor/src/config/components.js | 6 +- packages/editor/src/config/setters.ts | 16 ++ packages/editor/src/config/skeleton.js | 44 +----- packages/editor/src/framework/definitions.ts | 5 +- packages/editor/src/index.tsx | 5 +- .../editor/src/plugins/designer/index.scss | 3 +- .../editor/src/plugins/designer/index.tsx | 44 +++--- packages/editor/src/skeleton/global.scss | 3 +- .../skeleton/layouts/CenterArea/index.scss | 2 +- .../src/skeleton/layouts/RightArea/index.tsx | 12 ++ packages/editor/src/skeleton/skeleton.tsx | 1 - .../.eslintignore | 0 .../.eslintrc | 0 .../.prettierrc | 0 .../README.md | 0 .../package.json | 2 +- .../builtin-setters/array-setter/index.tsx | 45 +++--- .../array-setter/sortable.less | 0 .../builtin-setters/array-setter/sortable.tsx | 0 .../builtin-setters/array-setter/style.less | 0 .../object-setter/object-setter.tsx | 0 .../src/field/index.less | 0 .../src/field/index.tsx | 0 .../src/index.tsx | 8 +- .../src/main.ts | 68 ++++++--- .../src/settings-pane.tsx | 43 +++--- .../src/style.less | 4 + .../src/tip/embed-tip.tsx | 0 .../src/tip/index.ts | 0 .../src/tip/style.less | 0 .../src/tip/tip-container.tsx | 0 .../src/tip/tip-handler.ts | 0 .../src/tip/tip.tsx | 0 .../src/tip/utils.ts | 0 .../src/title/index.tsx | 0 .../src/title/title.less | 0 .../src/variables.less | 0 .../tsconfig.json | 0 42 files changed, 269 insertions(+), 202 deletions(-) create mode 100644 packages/editor/src/config/setters.ts rename packages/{plugin-settings-pane => plugin-settings}/.eslintignore (100%) rename packages/{plugin-settings-pane => plugin-settings}/.eslintrc (100%) rename packages/{plugin-settings-pane => plugin-settings}/.prettierrc (100%) rename packages/{plugin-settings-pane => plugin-settings}/README.md (100%) rename packages/{plugin-settings-pane => plugin-settings}/package.json (94%) rename packages/{plugin-settings-pane => plugin-settings}/src/builtin-setters/array-setter/index.tsx (89%) rename packages/{plugin-settings-pane => plugin-settings}/src/builtin-setters/array-setter/sortable.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/builtin-setters/array-setter/sortable.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/builtin-setters/array-setter/style.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/builtin-setters/object-setter/object-setter.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/field/index.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/field/index.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/index.tsx (91%) rename packages/{plugin-settings-pane => plugin-settings}/src/main.ts (89%) rename packages/{plugin-settings-pane => plugin-settings}/src/settings-pane.tsx (89%) rename packages/{plugin-settings-pane => plugin-settings}/src/style.less (97%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/embed-tip.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/index.ts (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/style.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/tip-container.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/tip-handler.ts (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/tip.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/tip/utils.ts (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/title/index.tsx (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/title/title.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/src/variables.less (100%) rename packages/{plugin-settings-pane => plugin-settings}/tsconfig.json (100%) diff --git a/packages/designer/src/builtins/simulator/host/host.less b/packages/designer/src/builtins/simulator/host/host.less index f39b44c63..120c9bfb3 100644 --- a/packages/designer/src/builtins/simulator/host/host.less +++ b/packages/designer/src/builtins/simulator/host/host.less @@ -45,7 +45,7 @@ } } - &-device-legao { + &-device-default { top: 15px; right: 15px; bottom: 15px; diff --git a/packages/designer/src/builtins/simulator/host/host.ts b/packages/designer/src/builtins/simulator/host/host.ts index 273fbcee6..59a7ef04f 100644 --- a/packages/designer/src/builtins/simulator/host/host.ts +++ b/packages/designer/src/builtins/simulator/host/host.ts @@ -81,7 +81,7 @@ export class SimulatorHost implements ISimulator { @computed get device(): string | undefined { // 根据 device 不同来做画布外框样式变化 渲染时可选择不同组件 // renderer 依赖 - return this.get('device'); + return this.get('device') || 'default'; } @computed get deviceClassName(): string | undefined { diff --git a/packages/designer/src/designer/component-type.ts b/packages/designer/src/designer/component-type.ts index 3b05345b8..d45ccb482 100644 --- a/packages/designer/src/designer/component-type.ts +++ b/packages/designer/src/designer/component-type.ts @@ -86,7 +86,7 @@ function npmToURI(npm: { main?: string; version: string; }): string { - let pkg = []; + const pkg = []; if (npm.package) { pkg.push(npm.package); } @@ -143,63 +143,91 @@ export class ComponentType { } private _configure?: Configure; get configure() { - return [{ - name: '#props', - title: "属性", - items: [{ - name: 'label', - title: '标签', - setter: 'StringSetter' - }, { - name: 'name', - title: '名称', - setter: { - componentName: 'ArraySetter', - props: { - itemConfig: { - setter: 'StringSetter', - defaultValue: '' - } - } - } - }, { - name: 'size', - title: '大小', - setter: 'StringSetter' - }, { - name: 'age', - title: '年龄', - setter: 'NumberSetter' - }] - }, { - name: '#styles', - title: "样式", - items: [{ - name: 'className', - title: '类名绑定', - setter: 'ClassNameSetter' - }, { - name: 'className2', - title: '类名绑定', - setter: 'StringSetter' - }, { - name: '#inlineStyles', - title: '行内样式', - items: [] - }] - }, { - name: '#events', - title: "事件", - items: [{ - name: '!events', - title: '事件绑定', - setter: 'EventsSetter' - }] - }, { - name: '#data', - title: "数据", - items: [] - }]; + return [ + { + name: '#props', + title: '属性', + items: [ + { + name: 'label', + title: '标签', + setter: 'StringSetter', + }, + { + name: 'name', + title: '名称', + setter: { + componentName: 'ArraySetter', + props: { + itemConfig: { + setter: 'StringSetter', + defaultValue: '', + }, + }, + }, + }, + { + name: 'size', + title: '大小', + setter: 'StringSetter', + }, + { + name: 'age', + title: '年龄', + setter: 'NumberSetter', + }, + ], + }, + { + name: '#styles', + title: '样式', + items: [ + { + name: 'className', + title: '类名绑定', + setter: 'ClassNameSetter', + }, + { + name: 'className2', + title: '类名绑定', + setter: 'StringSetter', + }, + { + name: '#inlineStyles', + title: '行内样式', + items: [], + }, + ], + }, + { + name: '#events', + title: '事件', + items: [ + { + name: '!events', + title: '事件绑定', + setter: { + componentName: 'EventsSetter', + }, + extraProps: { + getValue(field: any) { + console.info('lifeCycles', field.getExtraPropValue('lifeCycles')); + return field.getPropValue('xxx'); + }, + setValue(field: any, val: any) { + field.setExtraPropValue('lifeCycles', val); + field.setPropValue('xxx', val); + }, + }, + }, + ], + }, + { + name: '#data', + title: '数据', + items: [], + }, + ]; } private parentWhitelist?: string[] | null; diff --git a/packages/designer/src/designer/document/node/root-node.ts b/packages/designer/src/designer/document/node/root-node.ts index 46bf1d51d..aa8b629cc 100644 --- a/packages/designer/src/designer/document/node/root-node.ts +++ b/packages/designer/src/designer/document/node/root-node.ts @@ -17,9 +17,9 @@ import Props from './props/props'; * meta * state * defaultProps + * dataSource * lifeCycles * methods - * dataSource * css * * [Directives **not used**] @@ -42,16 +42,16 @@ export default class RootNode extends Node implements NodeParent { return 0; } get nextSibling() { - return null + return null; } get prevSibling() { - return null + return null; } get zLevel() { return 0; } get parent() { - return null + return null; } get children(): NodeChildren { return this._children as NodeChildren; @@ -59,7 +59,9 @@ export default class RootNode extends Node implements NodeParent { get props(): Props { return this._props as any; } - internalSetParent(parent: null) {} + internalSetParent(parent: null) { + // empty + } constructor(readonly document: DocumentModel, rootSchema: RootSchema) { super(document, rootSchema); diff --git a/packages/editor/src/config/components.js b/packages/editor/src/config/components.js index fe508c3e0..15edcae76 100644 --- a/packages/editor/src/config/components.js +++ b/packages/editor/src/config/components.js @@ -1,6 +1,7 @@ import logo from '../plugins/logo'; -import designer from '../plugins/designer'; +import Designer from '../plugins/designer'; import undoRedo from '../plugins/undoRedo'; +import Settings from '../../../plugin-settings'; import topBalloonIcon from '@ali/iceluna-addon-2'; import topDialogIcon from '@ali/iceluna-addon-2'; import leftPanelIcon from '@ali/iceluna-addon-2'; @@ -16,7 +17,8 @@ import PluginFactory from '../framework/pluginFactory'; export default { logo: PluginFactory(logo), - designer: PluginFactory(designer), + designer: PluginFactory(Designer), + settings: PluginFactory(Settings), undoRedo: PluginFactory(undoRedo), topBalloonIcon: PluginFactory(topBalloonIcon), topDialogIcon: PluginFactory(topDialogIcon), diff --git a/packages/editor/src/config/setters.ts b/packages/editor/src/config/setters.ts new file mode 100644 index 000000000..122792ca6 --- /dev/null +++ b/packages/editor/src/config/setters.ts @@ -0,0 +1,16 @@ +import { Input } from '@alifd/next'; +import NumberSetter from '../../../plugin-setters/number-setter'; +import { registerSetter } from '../../../plugin-settings/src'; +import { createElement } from 'react'; + +registerSetter('ClassNameSetter', () => { + return createElement('div', { + className: 'lc-block-setter' + }, '这里是类名绑定'); +}); + +registerSetter('EventsSetter', Input); + +registerSetter('StringSetter', { component: Input, props: { placeholder: "请输入" } }); + +registerSetter('NumberSetter', NumberSetter as any); diff --git a/packages/editor/src/config/skeleton.js b/packages/editor/src/config/skeleton.js index 765aa6c10..a39dc1f4f 100644 --- a/packages/editor/src/config/skeleton.js +++ b/packages/editor/src/config/skeleton.js @@ -204,54 +204,14 @@ export default { ], rightArea: [ { - pluginKey: 'rightPanel1', + pluginKey: 'settings', type: 'Panel', - props: { - title: '样式' - }, + props: {}, config: { - package: '@ali/iceluna-addon-2', version: '^1.0.0' }, pluginProps: {} }, - { - pluginKey: 'rightPanel2', - type: 'Panel', - props: { - title: '属性', - icon: 'dengpao' - }, - config: { - package: '@ali/iceluna-addon-2', - version: '^1.0.0' - }, - pluginProps: {} - }, - { - pluginKey: 'rightPanel3', - type: 'Panel', - props: { - title: '事件' - }, - config: { - package: '@ali/iceluna-addon-2', - version: '^1.0.0' - }, - pluginProps: {} - }, - { - pluginKey: 'rightPanel4', - type: 'Panel', - props: { - title: '数据' - }, - config: { - package: '@ali/iceluna-addon-2', - version: '^1.0.0' - }, - pluginProps: {} - } ], centerArea: [{ pluginKey: 'designer', diff --git a/packages/editor/src/framework/definitions.ts b/packages/editor/src/framework/definitions.ts index 5e30a4466..16493bfb9 100644 --- a/packages/editor/src/framework/definitions.ts +++ b/packages/editor/src/framework/definitions.ts @@ -112,7 +112,10 @@ export interface Utils { [propName: string]: (...args) => any; } -export interface PluginClass extends React.Component { +export interface PluginClass extends React.ComponentClass<{ + editor: Editor; + [key: string]: any +}> { init?: (editor: Editor) => void; open?: () => any; close?: () => any; diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index b0c5fee5a..f93e9b0e5 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -7,13 +7,14 @@ import config from './config/skeleton'; import components from './config/components'; import utils from './config/utils'; import constants from './config/constants'; -import messages from './config/locale'; +import './config/locale'; +import './config/setters'; import pkg from '../package.json'; import './global.scss'; import './config/theme.scss'; -window.__pkg = pkg; +(window as any).__pkg = pkg; const ICE_CONTAINER = document.getElementById('ice-container'); diff --git a/packages/editor/src/plugins/designer/index.scss b/packages/editor/src/plugins/designer/index.scss index 0d512ea9a..395bb8961 100644 --- a/packages/editor/src/plugins/designer/index.scss +++ b/packages/editor/src/plugins/designer/index.scss @@ -1,5 +1,4 @@ .lowcode-plugin-designer { - background-color: #ffffff; width: 100%; height: 100%; -} \ No newline at end of file +} diff --git a/packages/editor/src/plugins/designer/index.tsx b/packages/editor/src/plugins/designer/index.tsx index 6b5960548..8acd749d0 100644 --- a/packages/editor/src/plugins/designer/index.tsx +++ b/packages/editor/src/plugins/designer/index.tsx @@ -172,29 +172,27 @@ export default class DesignerPlugin extends PureComponent { render() { const { editor } = this.props; return ( -
- -
+ ); } } diff --git a/packages/editor/src/skeleton/global.scss b/packages/editor/src/skeleton/global.scss index 514f5b463..d825900bc 100644 --- a/packages/editor/src/skeleton/global.scss +++ b/packages/editor/src/skeleton/global.scss @@ -20,13 +20,12 @@ body { right: 0; bottom: 0; display: flex; - background-color: #d8d8d8; + background-color: rgba(31, 56, 88, 0.06); } .lowcode-center-area { flex: 1; display: flex; flex-direction: column; - padding: 10px; overflow: auto; } } diff --git a/packages/editor/src/skeleton/layouts/CenterArea/index.scss b/packages/editor/src/skeleton/layouts/CenterArea/index.scss index b2584ed2b..40a1806a6 100644 --- a/packages/editor/src/skeleton/layouts/CenterArea/index.scss +++ b/packages/editor/src/skeleton/layouts/CenterArea/index.scss @@ -1,3 +1,3 @@ .lowcode-center-area { - padding: 12px; + padding: 0; } diff --git a/packages/editor/src/skeleton/layouts/RightArea/index.tsx b/packages/editor/src/skeleton/layouts/RightArea/index.tsx index 5b51d02fb..00fd7fbe6 100644 --- a/packages/editor/src/skeleton/layouts/RightArea/index.tsx +++ b/packages/editor/src/skeleton/layouts/RightArea/index.tsx @@ -128,6 +128,18 @@ export default class RightArea extends PureComponent; + } + const Comp = this.editor.components[pane.pluginKey]; + return ( +
+ +
+ ); + } return (
; prevLength: number; } -export class ListSetter extends Component< - { - value: any[]; - field: SettingField; - itemConfig?: { - setter?: SetterType; - defaultValue?: any | ((field: SettingField, editor: any) => any); - required?: boolean; - }; - multiValue?: boolean; - }, - ArraySetterState -> { - static getDerivedStateFromProps(props: any, state: ArraySetterState) { + +interface ArraySetterProps { + value: any[]; + field: SettingField; + itemConfig?: { + setter?: SetterType; + defaultValue?: any | ((field: SettingField) => any); + required?: boolean; + }; + multiValue?: boolean; +} + +export class ListSetter extends Component { + static getDerivedStateFromProps(props: ArraySetterProps, state: ArraySetterState) { const { value, field } = props; const newLength = value && Array.isArray(value) ? value.length : 0; if (state && state.prevLength === newLength) { @@ -63,6 +63,12 @@ export class ListSetter extends Component< }; } + state: ArraySetterState = { + items: [], + itemsMap: new Map(), + prevLength: 0, + }; + onSort(sortedIds: Array) { const { itemsMap } = this.state; const items = sortedIds.map((id, index) => { @@ -87,7 +93,7 @@ export class ListSetter extends Component< }); items.push(item); itemsMap.set(item.id, item); - item.setValue(typeof defaultValue === 'function' ? defaultValue(item, item.editor) : defaultValue); + item.setValue(typeof defaultValue === 'function' ? defaultValue(item) : defaultValue); this.scrollToLast = true; this.setState({ items: items.slice(), @@ -202,17 +208,14 @@ class ArrayItem extends Component<{ } } -class TableSetter extends ListSetter { +class TableSetter extends ListSetter {} -} - -export default class ArraySetter extends Component< -{ +export default class ArraySetter extends Component<{ value: any[]; field: SettingField; itemConfig?: { setter?: SetterType; - defaultValue?: any | ((field: SettingField, editor: any) => any); + defaultValue?: any | ((field: SettingField) => any); required?: boolean; }; mode?: 'popup' | 'list' | 'table'; diff --git a/packages/plugin-settings-pane/src/builtin-setters/array-setter/sortable.less b/packages/plugin-settings/src/builtin-setters/array-setter/sortable.less similarity index 100% rename from packages/plugin-settings-pane/src/builtin-setters/array-setter/sortable.less rename to packages/plugin-settings/src/builtin-setters/array-setter/sortable.less diff --git a/packages/plugin-settings-pane/src/builtin-setters/array-setter/sortable.tsx b/packages/plugin-settings/src/builtin-setters/array-setter/sortable.tsx similarity index 100% rename from packages/plugin-settings-pane/src/builtin-setters/array-setter/sortable.tsx rename to packages/plugin-settings/src/builtin-setters/array-setter/sortable.tsx diff --git a/packages/plugin-settings-pane/src/builtin-setters/array-setter/style.less b/packages/plugin-settings/src/builtin-setters/array-setter/style.less similarity index 100% rename from packages/plugin-settings-pane/src/builtin-setters/array-setter/style.less rename to packages/plugin-settings/src/builtin-setters/array-setter/style.less diff --git a/packages/plugin-settings-pane/src/builtin-setters/object-setter/object-setter.tsx b/packages/plugin-settings/src/builtin-setters/object-setter/object-setter.tsx similarity index 100% rename from packages/plugin-settings-pane/src/builtin-setters/object-setter/object-setter.tsx rename to packages/plugin-settings/src/builtin-setters/object-setter/object-setter.tsx diff --git a/packages/plugin-settings-pane/src/field/index.less b/packages/plugin-settings/src/field/index.less similarity index 100% rename from packages/plugin-settings-pane/src/field/index.less rename to packages/plugin-settings/src/field/index.less diff --git a/packages/plugin-settings-pane/src/field/index.tsx b/packages/plugin-settings/src/field/index.tsx similarity index 100% rename from packages/plugin-settings-pane/src/field/index.tsx rename to packages/plugin-settings/src/field/index.tsx diff --git a/packages/plugin-settings-pane/src/index.tsx b/packages/plugin-settings/src/index.tsx similarity index 91% rename from packages/plugin-settings-pane/src/index.tsx rename to packages/plugin-settings/src/index.tsx index 1d63c2e37..2c5b5a7b7 100644 --- a/packages/plugin-settings-pane/src/index.tsx +++ b/packages/plugin-settings/src/index.tsx @@ -3,7 +3,7 @@ import { Tab, Breadcrumb, Icon } from '@alifd/next'; import { SettingsMain, SettingField, isSettingField } from './main'; import './style.less'; import Title from './title'; -import SettingsTab, { registerSetter, createSetterContent, getSetter, createSettingFieldView } from './settings-pane'; +import SettingsPane, { registerSetter, createSetterContent, getSetter, createSettingFieldView } from './settings-pane'; import Node from '../../designer/src/designer/document/node/node'; import ArraySetter from './builtin-setters/array-setter'; @@ -50,7 +50,7 @@ export default class SettingsMainView extends Component { onMouseOut: hoverNode.bind(null, node, false), onClick: selectNode.bind(null, node), }; - items.unshift({node.title}); + items.unshift({node.title}); node = node.parent; } @@ -91,7 +91,7 @@ export default class SettingsMainView extends Component {
{this.renderBreadcrumb()}
- +
); @@ -107,7 +107,7 @@ export default class SettingsMainView extends Component { > {(items as SettingField[]).map(field => ( } key={field.name}> - + ))} diff --git a/packages/plugin-settings-pane/src/main.ts b/packages/plugin-settings/src/main.ts similarity index 89% rename from packages/plugin-settings-pane/src/main.ts rename to packages/plugin-settings/src/main.ts index 1bab5a30c..89f111ca8 100644 --- a/packages/plugin-settings-pane/src/main.ts +++ b/packages/plugin-settings/src/main.ts @@ -45,9 +45,9 @@ export interface SettingTarget { readonly path: string[]; - /** - * 响应式自动运行 - */ + readonly top: SettingTarget; + + // 响应式自动运行 onEffect(action: () => void): () => void; // 获取属性值 @@ -56,6 +56,12 @@ export interface SettingTarget { // 设置属性值 setPropValue(propName: string | number, value: any): void; + // 获取附属属性值 + getExtraPropValue(propName: string): any; + + // 设置附属属性值 + setExtraPropValue(propName: string, value: any): void; + /* // 所有属性值数据 readonly props: object; @@ -74,7 +80,7 @@ export function isCustomView(obj: any): obj is CustomView { return obj && (isValidElement(obj) || isReactComponent(obj)); } -export type DynamicProps = (field: SettingField, editor: any) => object; +export type DynamicProps = (field: SettingField) => object; export interface SetterConfig { /** @@ -102,13 +108,13 @@ export interface FieldExtraProps { * default value of target prop for setter use */ defaultValue?: any; - onChange?: (val: any, field: SettingField, editor: any) => void; - getValue?: (field: SettingField, editor: any) => any; + getValue?: (field: SettingField, fieldValue: any) => any; + setValue?: (field: SettingField, value: any) => void; /** * the field conditional show, is not set always true * @default undefined */ - condition?: (field: SettingField, editor: any) => boolean; + condition?: (field: SettingField) => boolean; /** * default collapsed when display accordion */ @@ -168,6 +174,7 @@ export class SettingField implements SettingTarget { readonly nodes: Node[]; readonly componentType: ComponentType | null; readonly designer: Designer; + readonly top: SettingTarget; get path() { const path = this.parent.path.slice(); if (this.type === 'field') { @@ -210,6 +217,7 @@ export class SettingField implements SettingTarget { this.isOne = parent.isOne; this.isNone = parent.isNone; this.designer = parent.designer!; + this.top = parent.top; // initial items if (this.type === 'group' && items) { @@ -277,26 +285,25 @@ export class SettingField implements SettingTarget { * 获取当前属性值 */ getValue(): any { - if (this.type !== 'field') { - return null; + let val: any = null; + if (this.type === 'field') { + val = this.parent.getPropValue(this.name); } - // todo: use getValue const { getValue } = this.extraProps; - if (getValue) { - return getValue(this, this.editor); - } - return this.parent.getPropValue(this.name); + return getValue ? getValue(this, val) : val; } /** * 设置当前属性值 */ setValue(val: any) { - if (this.type !== 'field') { - return; + if (this.type === 'field') { + this.parent.setPropValue(this.name, val); + } + const { setValue } = this.extraProps; + if (setValue) { + setValue(this, val); } - // todo: use onChange - this.parent.setPropValue(this.name, val); } setKey(key: string | number) { @@ -338,6 +345,14 @@ export class SettingField implements SettingTarget { return this.parent.getPropValue(path); } + getExtraPropValue(propName: string) { + return this.top.getExtraPropValue(propName); + } + + setExtraPropValue(propName: string, value: any) { + this.top.setExtraPropValue(propName, value); + } + purge() { this.disposeItems(); } @@ -356,6 +371,7 @@ export class SettingsMain implements SettingTarget { private _componentType: ComponentType | null = null; private _isSame: boolean = true; readonly path = []; + readonly top: SettingTarget = this; get nodes(): Node[] { return this._nodes; @@ -433,6 +449,9 @@ export class SettingsMain implements SettingTarget { * 获取属性值 */ getPropValue(propName: string): any { + if (this.nodes.length < 1) { + return null; + } return this.nodes[0].getProp(propName, false)?.value; } @@ -445,6 +464,19 @@ export class SettingsMain implements SettingTarget { }); } + getExtraPropValue(propName: string) { + if (this.nodes.length < 1) { + return null; + } + return this.nodes[0].getExtraProp(propName, false)?.value; + } + + setExtraPropValue(propName: string, value: any) { + this.nodes.forEach(node => { + node.getExtraProp(propName, true)?.setValue(value); + }); + } + // 设置多个属性值，替换原有值 setProps(data: object) { this.nodes.forEach(node => { diff --git a/packages/plugin-settings-pane/src/settings-pane.tsx b/packages/plugin-settings/src/settings-pane.tsx similarity index 89% rename from packages/plugin-settings-pane/src/settings-pane.tsx rename to packages/plugin-settings/src/settings-pane.tsx index 75555c5a0..095593ccf 100644 --- a/packages/plugin-settings-pane/src/settings-pane.tsx +++ b/packages/plugin-settings/src/settings-pane.tsx @@ -11,14 +11,22 @@ import { DynamicProps, } from './main'; import { Field, FieldGroup } from './field'; +import { TitleContent } from './title'; -export type RegisteredSetter = CustomView | { +export type RegisteredSetter = { component: CustomView; - props?: object; + defaultProps?: object; + title?: TitleContent; }; const settersMap = new Map(); -export function registerSetter(type: string, setter: RegisteredSetter) { +export function registerSetter(type: string, setter: CustomView | RegisteredSetter) { + if (isCustomView(setter)) { + setter = { + component: setter, + title: (setter as any).displayName || (setter as any).name || 'CustomSetter' + }; + } settersMap.set(type, setter); } @@ -29,15 +37,16 @@ export function getSetter(type: string): RegisteredSetter | null { export function createSetterContent(setter: any, props: object): ReactNode { if (typeof setter === 'string') { setter = getSetter(setter); - if (!isCustomView(setter)) { - if (setter.props) { - props = { - ...setter.props, - ...props, - }; - } - setter = setter.component; + if (!setter) { + return null; } + if (setter.defaultProps) { + props = { + ...setter.defaultProps, + ...props, + }; + } + setter = setter.component; } return createContent(setter, props); @@ -71,12 +80,12 @@ class SettingFieldView extends Component<{ field: SettingField }> { let firstRun: boolean = true; this.dispose = field.onEffect(() => { const state: any = {}; - const { extraProps, editor } = field; + const { extraProps } = field; const { condition, defaultValue } = extraProps; - state.visible = field.isOne && typeof condition === 'function' ? !condition(field, editor) : true; + state.visible = field.isOne && typeof condition === 'function' ? !condition(field) : true; if (state.visible) { state.setterProps = { - ...(typeof setterProps === 'function' ? setterProps(field, editor) : setterProps), + ...(typeof setterProps === 'function' ? setterProps(field) : setterProps), }; if (field.type === 'field') { if (defaultValue != null && !('defaultValue' in state.setterProps)) { @@ -136,7 +145,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { forceInline: extraProps.forceInline, key: field.id, // === injection - prop: field, + prop: field, // for compatible field, // === IO value, // reaction point @@ -165,7 +174,7 @@ class SettingGroupView extends Component<{ field: SettingField }> { let firstRun: boolean = true; this.dispose = field.onEffect(() => { const state: any = {}; - state.visible = field.isOne && typeof condition === 'function' ? !condition(field, field.editor) : true; + state.visible = field.isOne && typeof condition === 'function' ? !condition(field) : true; if (state.visible) { state.items = field.items.slice(); } @@ -216,7 +225,7 @@ export function createSettingFieldView(item: SettingField | CustomView, field: S return ; } } else { - return createContent(item, { key: index, field, editor: field.editor }); + return createContent(item, { key: index, field }); } } diff --git a/packages/plugin-settings-pane/src/style.less b/packages/plugin-settings/src/style.less similarity index 97% rename from packages/plugin-settings-pane/src/style.less rename to packages/plugin-settings/src/style.less index 69f479316..3255da07b 100644 --- a/packages/plugin-settings-pane/src/style.less +++ b/packages/plugin-settings/src/style.less @@ -33,6 +33,7 @@ .lc-settings-main { position: relative; + height: 100%; .lc-settings-notice { text-align: center; @@ -64,6 +65,9 @@ &:not(:last-child):hover { cursor: pointer; } + .next-breadcrumb-text { + font-size: 12px; + } } } } diff --git a/packages/plugin-settings-pane/src/tip/embed-tip.tsx b/packages/plugin-settings/src/tip/embed-tip.tsx similarity index 100% rename from packages/plugin-settings-pane/src/tip/embed-tip.tsx rename to packages/plugin-settings/src/tip/embed-tip.tsx diff --git a/packages/plugin-settings-pane/src/tip/index.ts b/packages/plugin-settings/src/tip/index.ts similarity index 100% rename from packages/plugin-settings-pane/src/tip/index.ts rename to packages/plugin-settings/src/tip/index.ts diff --git a/packages/plugin-settings-pane/src/tip/style.less b/packages/plugin-settings/src/tip/style.less similarity index 100% rename from packages/plugin-settings-pane/src/tip/style.less rename to packages/plugin-settings/src/tip/style.less diff --git a/packages/plugin-settings-pane/src/tip/tip-container.tsx b/packages/plugin-settings/src/tip/tip-container.tsx similarity index 100% rename from packages/plugin-settings-pane/src/tip/tip-container.tsx rename to packages/plugin-settings/src/tip/tip-container.tsx diff --git a/packages/plugin-settings-pane/src/tip/tip-handler.ts b/packages/plugin-settings/src/tip/tip-handler.ts similarity index 100% rename from packages/plugin-settings-pane/src/tip/tip-handler.ts rename to packages/plugin-settings/src/tip/tip-handler.ts diff --git a/packages/plugin-settings-pane/src/tip/tip.tsx b/packages/plugin-settings/src/tip/tip.tsx similarity index 100% rename from packages/plugin-settings-pane/src/tip/tip.tsx rename to packages/plugin-settings/src/tip/tip.tsx diff --git a/packages/plugin-settings-pane/src/tip/utils.ts b/packages/plugin-settings/src/tip/utils.ts similarity index 100% rename from packages/plugin-settings-pane/src/tip/utils.ts rename to packages/plugin-settings/src/tip/utils.ts diff --git a/packages/plugin-settings-pane/src/title/index.tsx b/packages/plugin-settings/src/title/index.tsx similarity index 100% rename from packages/plugin-settings-pane/src/title/index.tsx rename to packages/plugin-settings/src/title/index.tsx diff --git a/packages/plugin-settings-pane/src/title/title.less b/packages/plugin-settings/src/title/title.less similarity index 100% rename from packages/plugin-settings-pane/src/title/title.less rename to packages/plugin-settings/src/title/title.less diff --git a/packages/plugin-settings-pane/src/variables.less b/packages/plugin-settings/src/variables.less similarity index 100% rename from packages/plugin-settings-pane/src/variables.less rename to packages/plugin-settings/src/variables.less diff --git a/packages/plugin-settings-pane/tsconfig.json b/packages/plugin-settings/tsconfig.json similarity index 100% rename from packages/plugin-settings-pane/tsconfig.json rename to packages/plugin-settings/tsconfig.json