+ | ContentObject, key: string, node: Node) {
+function createAction(content: ReactNode | ComponentType | ActionContentObject, key: string, node: Node) {
if (isValidElement(content)) {
return cloneElement(content, { key, node });
}
if (isReactComponent(content)) {
return createElement(content, { key, node });
}
- if (isContentObject(content)) {
+ if (isActionContentObject(content)) {
const { action, description, icon } = content;
return (
{actions}
);
}
}
-function createAction(content: ReactNode | ComponentType {
action && action(node);
}}
@@ -133,7 +138,7 @@ function createAction(content: ReactNode | ComponentType | ContentObject, k
}
@observer
-export class OutlineSelectingForNode extends Component<{ node: Node }> {
+export class BorderSelectingForNode extends Component<{ node: Node }> {
static contextType = SimulatorContext;
get host(): SimulatorHost {
@@ -170,7 +175,7 @@ export class OutlineSelectingForNode extends Component<{ node: Node }> {
if (!observed) {
return null;
}
- return
{selecting.map(node => (
-
);
diff --git a/packages/designer/src/builtins/simulator/host/auxilary/outlines.less b/packages/designer/src/builtins/simulator/host/bem-tools/borders.less
similarity index 98%
rename from packages/designer/src/builtins/simulator/host/auxilary/outlines.less
rename to packages/designer/src/builtins/simulator/host/bem-tools/borders.less
index 19f4333ec..511bae9c2 100644
--- a/packages/designer/src/builtins/simulator/host/auxilary/outlines.less
+++ b/packages/designer/src/builtins/simulator/host/bem-tools/borders.less
@@ -1,4 +1,4 @@
-@scope: lc-outlines;
+@scope: lc-borders;
.@{scope} {
box-sizing: border-box;
diff --git a/packages/designer/src/builtins/simulator/host/auxilary/auxiliary.tsx b/packages/designer/src/builtins/simulator/host/bem-tools/index.tsx
similarity index 56%
rename from packages/designer/src/builtins/simulator/host/auxilary/auxiliary.tsx
rename to packages/designer/src/builtins/simulator/host/bem-tools/index.tsx
index 25aa33bbf..457fbdc3f 100644
--- a/packages/designer/src/builtins/simulator/host/auxilary/auxiliary.tsx
+++ b/packages/designer/src/builtins/simulator/host/bem-tools/index.tsx
@@ -1,15 +1,15 @@
-import { observer } from '@recore/obx-react';
import { Component } from 'react';
-import { OutlineHovering } from './outline-hovering';
+import { observer } from '../../../../../../globals';
+import { BorderHovering } from './border-hovering';
import { SimulatorContext } from '../context';
import { SimulatorHost } from '../host';
-import { OutlineSelecting } from './outline-selecting';
+import { BorderSelecting } from './border-selecting';
import { InsertionView } from './insertion';
-import './auxiliary.less';
-import './outlines.less';
+import './bem-tools.less';
+import './borders.less';
@observer
-export class AuxiliaryView extends Component {
+export class BemTools extends Component {
static contextType = SimulatorContext;
shouldComponentUpdate() {
@@ -20,9 +20,9 @@ export class AuxiliaryView extends Component {
const host = this.context as SimulatorHost;
const { scrollX, scrollY, scale } = host.viewport;
return (
- ();
+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);
+}
+
+export function getSetter(type: string): RegisteredSetter | null {
+ return settersMap.get(type) || null;
+}
+
+export function createSetterContent(setter: any, props: object): ReactNode {
+ if (typeof setter === 'string') {
+ setter = getSetter(setter);
+ if (!setter) {
+ return null;
+ }
+ if (setter.defaultProps) {
+ props = {
+ ...setter.defaultProps,
+ ...props,
+ };
+ }
+ setter = setter.component;
+ }
+
+ return createContent(setter, props);
+}
diff --git a/packages/globals/src/di/transducer.ts b/packages/globals/src/di/transducer.ts
new file mode 100644
index 000000000..c10639e41
--- /dev/null
+++ b/packages/globals/src/di/transducer.ts
@@ -0,0 +1,12 @@
+import { TransformedComponentMetadata } from '../types';
+
+export type MetadataTransducer = (prev: TransformedComponentMetadata) => TransformedComponentMetadata;
+const metadataTransducers: MetadataTransducer[] = [];
+
+export function registerMetadataTransducer(transducer: MetadataTransducer) {
+ metadataTransducers.push(transducer);
+}
+
+export function getRegisteredMetadataTransducers(): MetadataTransducer[] {
+ return metadataTransducers;
+}
diff --git a/packages/globals/src/icons/clone.tsx b/packages/globals/src/icons/clone.tsx
index 57dd701db..60b6b0dfc 100644
--- a/packages/globals/src/icons/clone.tsx
+++ b/packages/globals/src/icons/clone.tsx
@@ -1,6 +1,6 @@
import { IconBase, IconBaseProps } from "./icon-base";
-export function Clone(props: IconBaseProps) {
+export function IconClone(props: IconBaseProps) {
return (
+
+ );
+}
+IconComponent.displayName = 'Component';
diff --git a/packages/globals/src/icons/container.tsx b/packages/globals/src/icons/container.tsx
new file mode 100644
index 000000000..ceff81183
--- /dev/null
+++ b/packages/globals/src/icons/container.tsx
@@ -0,0 +1,11 @@
+import { IconBase, IconBaseProps } from "./icon-base";
+
+export function IconContainer(props: IconBaseProps) {
+ return (
+
+
+ );
+}
+IconContainer.displayName = 'Container';
diff --git a/packages/globals/src/icons/hidden.tsx b/packages/globals/src/icons/hidden.tsx
index 3abdc4448..5df9004cb 100644
--- a/packages/globals/src/icons/hidden.tsx
+++ b/packages/globals/src/icons/hidden.tsx
@@ -1,10 +1,10 @@
import { IconBase, IconBaseProps } from "./icon-base";
-export function Hidden(props: IconBaseProps) {
+export function IconHidden(props: IconBaseProps) {
return (
);
}
-Hidden.displayName = 'Hidden';
+IconHidden.displayName = 'Hidden';
diff --git a/packages/globals/src/icons/index.ts b/packages/globals/src/icons/index.ts
index f843f3a52..ac8767dc0 100644
--- a/packages/globals/src/icons/index.ts
+++ b/packages/globals/src/icons/index.ts
@@ -1,5 +1,8 @@
export * from './clone';
export * from './hidden';
export * from './remove';
-export * from './settings';
+export * from './setting';
export * from './icon-base';
+export * from './component';
+export * from './container';
+export * from './page';
diff --git a/packages/globals/src/icons/page.tsx b/packages/globals/src/icons/page.tsx
new file mode 100644
index 000000000..6fd182bf4
--- /dev/null
+++ b/packages/globals/src/icons/page.tsx
@@ -0,0 +1,12 @@
+import { IconBase, IconBaseProps } from "./icon-base";
+
+export function IconPage(props: IconBaseProps) {
+ return (
+
+
+ );
+}
+IconPage.displayName = 'Page';
diff --git a/packages/globals/src/icons/remove.tsx b/packages/globals/src/icons/remove.tsx
index 9f90088e7..5caf18f9e 100644
--- a/packages/globals/src/icons/remove.tsx
+++ b/packages/globals/src/icons/remove.tsx
@@ -1,10 +1,10 @@
import { IconBase, IconBaseProps } from './icon-base';
-export function Remove(props: IconBaseProps) {
+export function IconRemove(props: IconBaseProps) {
return (
);
}
-Remove.displayName = 'Remove';
+IconRemove.displayName = 'Remove';
diff --git a/packages/globals/src/icons/settings.tsx b/packages/globals/src/icons/setting.tsx
similarity index 96%
rename from packages/globals/src/icons/settings.tsx
rename to packages/globals/src/icons/setting.tsx
index 05628a7c1..e555cdf43 100644
--- a/packages/globals/src/icons/settings.tsx
+++ b/packages/globals/src/icons/setting.tsx
@@ -1,6 +1,6 @@
import { IconBase, IconBaseProps } from './icon-base';
-export function Setting(props: IconBaseProps) {
+export function IconSetting(props: IconBaseProps) {
return (
| IconConfig;
diff --git a/packages/globals/src/types/index.ts b/packages/globals/src/types/index.ts
new file mode 100644
index 000000000..705f7b28a
--- /dev/null
+++ b/packages/globals/src/types/index.ts
@@ -0,0 +1,13 @@
+export * from './data-source';
+export * from './field-config';
+export * from './i18n';
+export * from './icon';
+export * from './metadata';
+export * from './npm';
+export * from './prop-config';
+export * from './schema';
+export * from './tip';
+export * from './title';
+export * from './utils';
+export * from './value-type';
+export * from './setter-config';
diff --git a/packages/globals/src/types/metadata.ts b/packages/globals/src/types/metadata.ts
new file mode 100644
index 000000000..d0e36270c
--- /dev/null
+++ b/packages/globals/src/types/metadata.ts
@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { IconType } from './icon';
+import { TipContent } from './tip';
+import { TitleContent } from './title';
+import { PropConfig } from './prop-config';
+import { NpmInfo } from './npm';
+import { FieldConfig } from './field-config';
+
+export interface NestingRule {
+ childWhitelist?: string[];
+ parentWhitelist?: string[];
+ descendantBlacklist?: string[];
+ ancestorWhitelist?: string[];
+}
+
+export interface ComponentConfigure {
+ isContainer?: boolean;
+ isModal?: boolean;
+ isNullNode?: boolean;
+ descriptor?: string;
+ nestingRule?: NestingRule;
+ rectSelector?: string;
+ // copy,move,delete
+ disableBehaviors?: string[];
+ actions?: ComponentAction[];
+}
+
+export interface Configure {
+ props?: FieldConfig[];
+ styles?: object;
+ events?: object;
+ component?: ComponentConfigure;
+}
+
+export interface ActionContentObject {
+ // 图标
+ icon?: IconType;
+ // 描述
+ description?: TipContent;
+ // 执行动作
+ action?: (node: any) => void;
+}
+
+export interface ComponentAction {
+ // behaviorName
+ name: string;
+ // 菜单名称
+ content: string | ReactNode | ActionContentObject;
+ // 子集
+ items?: ComponentAction[];
+ // 不显示
+ condition?: boolean | ((node: any) => boolean);
+ // 显示在工具条上
+ important?: boolean;
+}
+
+export function isActionContentObject(obj: any): obj is ActionContentObject {
+ return obj && typeof obj === 'object';
+}
+
+export interface ComponentMetadata {
+ componentName: string;
+ /**
+ * unique id
+ */
+ uri?: string;
+ /**
+ * title or description
+ */
+ title?: TitleContent;
+ /**
+ * svg icon for component
+ */
+ icon?: IconType;
+ tags?: string[];
+ description?: string;
+ docUrl?: string;
+ screenshot?: string;
+ devMode?: 'procode' | 'lowcode';
+ npm?: NpmInfo;
+ props?: PropConfig[];
+ configure?: FieldConfig[] | Configure;
+}
+
+export interface TransformedComponentMetadata extends ComponentMetadata {
+ configure: Configure & { combined?: FieldConfig[] };
+}
diff --git a/packages/globals/src/types/npm.ts b/packages/globals/src/types/npm.ts
new file mode 100644
index 000000000..0335c3c81
--- /dev/null
+++ b/packages/globals/src/types/npm.ts
@@ -0,0 +1,11 @@
+export interface NpmInfo {
+ componentName?: string;
+ package: string;
+ version: string;
+ destructuring?: boolean;
+ exportName?: string;
+ subName?: string;
+ main?: string;
+}
+
+export type ComponentsMap = NpmInfo[];
diff --git a/packages/designer/src/designer/prop-config.ts b/packages/globals/src/types/prop-config.ts
similarity index 100%
rename from packages/designer/src/designer/prop-config.ts
rename to packages/globals/src/types/prop-config.ts
diff --git a/packages/globals/src/types/schema.ts b/packages/globals/src/types/schema.ts
new file mode 100644
index 000000000..74f8d9e74
--- /dev/null
+++ b/packages/globals/src/types/schema.ts
@@ -0,0 +1,80 @@
+import { ComponentsMap } from './npm';
+import { CompositeValue, JSExpression, CompositeObject, JSONObject } from './value-type';
+import { DataSource } from './data-source';
+import { I18nMap } from './i18n';
+import { UtilsMap } from './utils';
+
+export interface NodeSchema {
+ id?: string;
+ componentName: string;
+ props?: PropsMap | PropsList;
+ leadingComponents?: string;
+ condition?: CompositeValue;
+ loop?: CompositeValue;
+ loopArgs?: [string, string];
+ children?: NodeData | NodeData[];
+}
+
+export type PropsMap = CompositeObject;
+export type PropsList = Array<{
+ spread?: boolean;
+ name?: string;
+ value: CompositeValue;
+}>;
+
+export type NodeData = NodeSchema | JSExpression | DOMText;
+
+export function isDOMText(data: any): data is DOMText {
+ return typeof data === 'string';
+}
+
+export type DOMText = string;
+
+export interface RootSchema extends NodeSchema {
+ componentName: string; // 'Block' | 'Page' | 'Component';
+ fileName: string;
+ meta?: object;
+ state?: {
+ [key: string]: CompositeValue;
+ };
+ methods?: {
+ [key: string]: JSExpression;
+ };
+ lifeCycles?: {
+ [key: string]: JSExpression;
+ };
+ css?: string;
+ dataSource?: DataSource;
+ defaultProps?: CompositeObject;
+}
+
+export interface BlockSchema extends RootSchema {
+ componentName: 'Block';
+}
+
+export interface PageSchema extends RootSchema {
+ componentName: 'Page';
+}
+
+export interface ComponentSchema extends RootSchema {
+ componentName: 'Component';
+}
+
+export interface ProjectSchema {
+ version: string;
+ componentsMap: ComponentsMap;
+ componentsTree: RootSchema[];
+ i18n?: I18nMap;
+ utils?: UtilsMap;
+ constants?: JSONObject;
+ css?: string;
+ dataSource?: DataSource;
+}
+
+export function isNodeSchema(data: any): data is NodeSchema {
+ return data && data.componentName;
+}
+
+export function isProjectSchema(data: any): data is ProjectSchema {
+ return data && data.componentsTree;
+}
diff --git a/packages/globals/src/types/setter-config.ts b/packages/globals/src/types/setter-config.ts
new file mode 100644
index 000000000..1df336543
--- /dev/null
+++ b/packages/globals/src/types/setter-config.ts
@@ -0,0 +1,34 @@
+import { isReactComponent } from '../utils';
+import { ComponentType, ReactElement, isValidElement } from 'react';
+
+export type CustomView = ReactElement | ComponentType;
+
+export type DynamicProps = (field: any) => object;
+
+export interface SetterConfig {
+ /**
+ * if *string* passed must be a registered Setter Name
+ */
+ componentName: string | CustomView;
+ /**
+ * the props pass to Setter Component
+ */
+ props?: object | DynamicProps;
+ children?: any;
+ isRequired?: boolean;
+ initialValue?: any | ((field: any) => any);
+}
+
+/**
+ * if *string* passed must be a registered Setter Name, future support blockSchema
+ */
+export type SetterType = SetterConfig | string | CustomView;
+
+
+export function isSetterConfig(obj: any): obj is SetterConfig {
+ return obj && typeof obj === 'object' && 'componentName' in obj && !isCustomView(obj);
+}
+
+export function isCustomView(obj: any): obj is CustomView {
+ return obj && (isValidElement(obj) || isReactComponent(obj));
+}
diff --git a/packages/globals/src/types/tip.ts b/packages/globals/src/types/tip.ts
new file mode 100644
index 000000000..0d9cd4752
--- /dev/null
+++ b/packages/globals/src/types/tip.ts
@@ -0,0 +1,11 @@
+import { I18nData } from './i18n';
+import { ReactNode, ReactElement } from 'react';
+
+export interface TipConfig {
+ className?: string;
+ children?: I18nData | ReactNode;
+ theme?: string;
+ direction?: string; // 'n|s|w|e|top|bottom|left|right';
+}
+
+export type TipContent = string | I18nData | ReactElement | TipConfig;
diff --git a/packages/globals/src/types/title.ts b/packages/globals/src/types/title.ts
new file mode 100644
index 000000000..a63692933
--- /dev/null
+++ b/packages/globals/src/types/title.ts
@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from 'react';
+import { I18nData } from './i18n';
+import { TipContent } from './tip';
+import { IconType } from './icon';
+
+
+export interface TitleConfig {
+ label?: I18nData | ReactNode;
+ tip?: TipContent;
+ icon?: IconType;
+ className?: string;
+}
+
+export type TitleContent = string | I18nData | ReactElement | TitleConfig;
+
diff --git a/packages/globals/src/types/utils.ts b/packages/globals/src/types/utils.ts
new file mode 100644
index 000000000..f4a925f3b
--- /dev/null
+++ b/packages/globals/src/types/utils.ts
@@ -0,0 +1,13 @@
+import { NpmInfo } from './npm';
+
+export type UtilsMap = Array<
+| {
+ name: string;
+ type: 'npm';
+ content: NpmInfo;
+ }
+| {
+ name: string;
+ type: '';
+ }
+>;
diff --git a/packages/globals/src/types/value-type.ts b/packages/globals/src/types/value-type.ts
new file mode 100644
index 000000000..5659a555b
--- /dev/null
+++ b/packages/globals/src/types/value-type.ts
@@ -0,0 +1,42 @@
+import { NodeSchema } from './schema';
+
+// 表达式
+export interface JSExpression {
+ type: 'JSExpression';
+ /**
+ * 表达式字符串
+ */
+ value: string;
+ /**
+ * 模拟值
+ */
+ mock?: any;
+}
+
+export interface JSSlot {
+ type: 'JSSlot';
+ value: NodeSchema;
+}
+
+// JSON 基本类型
+export type JSONValue = boolean | string | number | null | JSONArray | JSONObject;
+export type JSONArray = JSONValue[];
+export interface JSONObject {
+ [key: string]: JSONValue;
+}
+
+// 复合类型
+export type CompositeValue = JSONValue | JSExpression | JSSlot | CompositeArray | CompositeObject;
+export type CompositeArray = CompositeValue[];
+export interface CompositeObject {
+ [key: string]: CompositeValue;
+}
+
+
+export function isJSExpression(data: any): data is JSExpression {
+ return data && data.type === 'JSExpression';
+}
+
+export function isJSSlot(data: any): data is JSSlot {
+ return data && data.type === 'JSSlot';
+}
diff --git a/packages/globals/src/utils/create-icon.tsx b/packages/globals/src/utils/create-icon.tsx
index 728d2fcdd..0f9ec82c7 100644
--- a/packages/globals/src/utils/create-icon.tsx
+++ b/packages/globals/src/utils/create-icon.tsx
@@ -1,18 +1,14 @@
import { Icon } from '@alifd/next';
-import { isValidElement, ReactNode, ComponentType, createElement, cloneElement, ReactElement } from 'react';
+import { isValidElement, ReactNode, createElement, cloneElement } from 'react';
import { isReactComponent } from './is-react';
-
-export interface IconConfig {
- type: string;
- size?: number | 'small' | 'xxs' | 'xs' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
- className?: string;
-}
-
-export type IconType = string | ReactElement | ComponentType | IconConfig;
+import { IconType } from '../types';
const URL_RE = /^(https?:)\/\//i;
-export function createIcon(icon: IconType, props?: object): ReactNode {
+export function createIcon(icon?: IconType | null, props?: object): ReactNode {
+ if (!icon) {
+ return null;
+ }
if (typeof icon === 'string') {
if (URL_RE.test(icon)) {
return 
;
@@ -26,9 +22,5 @@ export function createIcon(icon: IconType, props?: object): ReactNode {
return createElement(icon, {...props});
}
- if (icon) {
- return ();
+ @computed get currentTree(): Tree | null {
+ const doc = this.designer?.currentDocument;
+ if (doc) {
+ const id = doc.id;
+ if (this.treeMap.has(id)) {
+ return this.treeMap.get(id)!;
+ }
+ const tree = new Tree(doc);
+ // TODO: listen purge event to remove
+ this.treeMap.set(id, tree);
+ return tree;
+ }
+ return null;
+ }
+}
+
+const mastersMap = new Map();
+function getTreeMaster(designer: Designer): TreeMaster {
+ let master = mastersMap.get(designer);
+ if (!master) {
+ master = new TreeMaster(designer);
+ mastersMap.set(designer, master);
+ }
+ return master;
+}
+
+export class OutlineMain implements ISensor {
+ private _designer?: Designer;
+ @obx.ref private _master?: TreeMaster;
+ get master() {
+ return this._master;
+ }
+
+ constructor(readonly editor: any) {
+ if (editor.designer) {
+ this.setupDesigner(editor.designer);
+ } else {
+ editor.once('designer.ready', (designer: Designer) => {
+ this.setupDesigner(designer);
+ });
+ }
+ }
+
+ fixEvent(e: LocateEvent): LocateEvent {
+ throw new Error("Method not implemented.");
+ }
+
+ locate(e: LocateEvent): Location | undefined {
+ throw new Error("Method not implemented.");
+ }
+
+ isEnter(e: LocateEvent): boolean {
+ throw new Error("Method not implemented.");
+ }
+
+ deactiveSensor(): void {
+ throw new Error("Method not implemented.");
+ }
+
+ private setupDesigner(designer: Designer) {
+ this._designer = designer;
+ this._master = getTreeMaster(designer);
+ designer.dragon.addSensor(this);
+ }
+
+ purge() {
+ this._designer?.dragon.removeSensor(this);
+ // todo purge treeMaster if needed
+ }
+
+ private _sensorAvailable: boolean = false;
+ /**
+ * @see ISensor
+ */
+ get sensorAvailable() {
+ return this._sensorAvailable;
+ }
+
+ private _shell: HTMLDivElement | null = null;
+ mount(shell: HTMLDivElement | null) {
+ if (this._shell === shell) {
+ return;
+ }
+ this._shell = shell;
+ if (shell) {
+ this._sensorAvailable = true;
+ }
+ }
+}
+
+
diff --git a/packages/plugin-outline-pane/src/sensor.ts b/packages/plugin-outline-pane/src/sensor.ts
new file mode 100644
index 000000000..a0b92615d
--- /dev/null
+++ b/packages/plugin-outline-pane/src/sensor.ts
@@ -0,0 +1,220 @@
+import { ISenseAble, LocateEvent, isNodesDragTarget, activeTracker, getCurrentDocument } from '../../../globals';
+import Location, { isLocationChildrenDetail, LocationDetailType } from '../../../document/location';
+import tree from './tree';
+import Scroller, { ScrollTarget } from '../../../document/scroller';
+import { isShadowNode } from '../../../document/node/shadow-node';
+import TreeNode from './tree-node';
+import { INodeParent } from '../../../document/node';
+import DwellTimer from './helper/dwell-timer';
+import XAxisTracker from './helper/x-axis-tracker';
+
+export const OutlineBoardID = 'outline-board';
+export default class OutlineBoard implements ISenseAble {
+ id = OutlineBoardID;
+
+ get bounds() {
+ const rootElement = this.element;
+ const clientBound = rootElement.getBoundingClientRect();
+
+ return {
+ height: clientBound.height,
+ width: clientBound.width,
+ top: clientBound.top,
+ left: clientBound.left,
+ right: clientBound.right,
+ bottom: clientBound.bottom,
+ scale: 1,
+ scrollHeight: rootElement.scrollHeight,
+ scrollWidth: rootElement.scrollWidth,
+ };
+ }
+
+ sensitive: boolean = true;
+ private sensing: boolean = false;
+
+ private scrollTarget = new ScrollTarget(this.element);
+ private scroller = new Scroller(this, this.scrollTarget);
+
+ constructor(readonly element: HTMLDivElement) {
+ activeTracker.onChange(({ node, detail }) => {
+ const treeNode = isShadowNode(node) ? tree.getTreeNode(node.origin) : tree.getTreeNode(node);
+ if (treeNode.hidden) {
+ return;
+ }
+
+ if (detail && detail.type === LocationDetailType.Children) {
+ treeNode.expand(true);
+ } else {
+ treeNode.expandParents();
+ }
+ this.scrollToNode(treeNode, detail);
+ });
+ }
+
+ private tryScrollAgain: number | null = null;
+ scrollToNode(treeNode: TreeNode, detail?: any, tryTimes: number = 0) {
+ this.tryScrollAgain = null;
+ if (this.sensing) {
+ // is a active sensor
+ return;
+ }
+
+ const opt: any = {};
+ let scroll = false;
+ let rect: ClientRect | null;
+ if (detail && isLocationChildrenDetail(detail)) {
+ rect = tree.getInsertionRect();
+ } else {
+ rect = treeNode.computeRect();
+ }
+
+ if (!rect) {
+ if (!this.tryScrollAgain && tryTimes < 3) {
+ this.tryScrollAgain = requestAnimationFrame(() => this.scrollToNode(treeNode, detail, tryTimes + 1));
+ }
+ return;
+ }
+ const scrollTarget = this.scrollTarget;
+ const st = scrollTarget.top;
+ const { height, top, bottom, scrollHeight } = this.bounds;
+
+ if (rect.top < top || rect.bottom > bottom) {
+ opt.top = Math.min(rect.top + rect.height / 2 + st - top - height / 2, scrollHeight - height);
+ scroll = true;
+ }
+
+ if (scroll && this.scroller) {
+ this.scroller.scrollTo(opt);
+ }
+ }
+
+ isEnter(e: LocateEvent): boolean {
+ return this.inRange(e);
+ }
+
+ inRange(e: LocateEvent): boolean {
+ const rect = this.bounds;
+ return e.globalY >= rect.top && e.globalY <= rect.bottom && e.globalX >= rect.left && e.globalX <= rect.right;
+ }
+
+ deactive(): void {
+ this.sensing = false;
+ console.log('>>> deactive');
+ }
+
+ fixEvent(e: LocateEvent): LocateEvent {
+ return e;
+ }
+
+ private dwellTimer: DwellTimer = new DwellTimer(450);
+ private xAxisTracker = new XAxisTracker();
+
+ locate(e: LocateEvent): Location | undefined {
+ this.sensing = true;
+ this.scroller.scrolling(e);
+
+ const dragTarget = e.dragTarget;
+ // FIXME: not support multiples/nodedatas/any data,
+ const dragment = isNodesDragTarget(dragTarget) ? dragTarget.nodes[0] : null;
+ if (!dragment) {
+ return;
+ }
+ const doc = getCurrentDocument()!;
+ const preDraggedNode = doc.dropLocation && doc.dropLocation.target;
+
+ // 左右移动追踪，一旦左右移动满足位置条件，直接返回即可。
+ if (doc.dropLocation) {
+ const loc2 = this.xAxisTracker.track(doc.dropLocation, e);
+ if (loc2) {
+ this.dwellTimer.end();
+ return doc.createLocation(loc2);
+ }
+ } else {
+ this.dwellTimer.end();
+ return doc.createLocation({
+ target: dragment.parent!,
+ detail: {
+ type: LocationDetailType.Children,
+ index: dragment.index,
+ },
+ });
+ }
+
+ // 这语句的后半段是解决"丢帧"问题
+ // e 有一种情况，是从 root > .flow 开始冒泡，而不是实际节点。这种情况往往发生在：光标在插入框内移动
+ // 此时取上一次插入位置的 node 即可
+ const treeNode = tree.getTreeNodeByEvent(e as any) || (preDraggedNode && tree.getTreeNode(preDraggedNode));
+
+ // TODO: 没有判断是否可以放入 isDropContainer，决定 target 的值是父节点还是本节点
+ if (!treeNode || dragment === treeNode.node || treeNode.ignored) {
+ this.dwellTimer.end();
+ console.warn('not found tree-node or other reasons', treeNode, e);
+ return undefined;
+ }
+
+ // console.log('I am at', treeNode.id, e);
+
+ const rect = treeNode.computeRect();
+ if (!rect) {
+ this.dwellTimer.end();
+ console.warn('can not get the rect, node', treeNode.id);
+ return undefined;
+ }
+
+ const node = treeNode.node;
+ const parentNode = node.parent;
+
+ if (!parentNode) {
+ this.dwellTimer.end();
+ return undefined;
+ }
+
+ let index = Math.max(parentNode.children.indexOf(node), 0);
+ const center = rect.top + rect.height / 2;
+
+ // 常规处理
+ // 如果可以展开，但是没有展开，需要设置延时器，检查停留时间然后展开
+ // 最后返回合适的位置信息
+ // FIXME: 容器判断存在问题，比如 img 是可以被放入的
+ if (treeNode.isContainer() && !treeNode.expanded) {
+ if (e.globalY > center) {
+ this.dwellTimer.start(treeNode.id, () => {
+ doc.createLocation({
+ target: node as INodeParent,
+ detail: {
+ type: LocationDetailType.Children,
+ index: 0,
+ },
+ });
+ });
+ }
+ } else {
+ this.dwellTimer.end();
+ }
+
+ // 如果节点是展开状态，并且光标是在其下方，不做任何处理，直接返回即可
+ // 如果不做这个处理，那么会出现"抖动"情况：在当前元素中心线下方时，会作为该元素的第一个子节点插入，而又会碰到已经存在对第一个字节点"争相"处理
+ if (treeNode.expanded) {
+ if (e.globalY > center) {
+ return undefined;
+ }
+ }
+
+ // 如果光标移动到节点中心线下方，则将元素插入到该节点下方
+ // 反之插入该节点上方
+ if (e.globalY > center) {
+ // down
+ index = index + 1;
+ }
+
+ index = Math.min(index, parentNode.children.length);
+
+ return doc.createLocation({
+ target: parentNode,
+ detail: {
+ type: LocationDetailType.Children,
+ index,
+ },
+ });
+ }
+}
diff --git a/packages/plugin-outline-pane/src/tree-node.ts b/packages/plugin-outline-pane/src/tree-node.ts
new file mode 100644
index 000000000..d1e3a502f
--- /dev/null
+++ b/packages/plugin-outline-pane/src/tree-node.ts
@@ -0,0 +1,233 @@
+import { computed, obx, TitleContent } from '../../globals';
+import Node from '../../designer/src/designer/document/node/node';
+import DocumentModel from '../../designer/src/designer/document/document-model';
+import { isLocationChildrenDetail } from '../../designer/src/designer/helper/location';
+import Designer from '../../designer/src/designer/designer';
+import { Tree } from './tree';
+
+export interface Title {
+ label: string;
+ icon?: string;
+ actions?: any;
+}
+
+export default class TreeNode {
+ get id(): string {
+ return this.node.id;
+ }
+
+ /**
+ * 是否可以展开
+ */
+ @computed get expandable(): boolean {
+ return this.hasChildren() || this.isSlotContainer() || this.dropIndex != null;
+ }
+
+ /**
+ * 插入"线"位置信息
+ */
+ @computed get dropIndex(): number | null {
+ const loc = this.node.document.dropLocation;
+ return loc && this.isResponseDropping() && isLocationChildrenDetail(loc.detail) ? loc.detail.index : null;
+ }
+
+ @computed get depth(): number {
+ return this.node.zLevel;
+ }
+
+ /**
+ * 是否是响应投放区
+ */
+ @computed isResponseDropping(): boolean {
+ const loc = this.node.document.dropLocation;
+ if (!loc) {
+ return false;
+ }
+ return loc.target === this.node;
+ }
+
+ /**
+ * 默认为折叠状态
+ * 在初始化根节点时，设置为展开状态
+ */
+ @obx.ref private _expanded = false;
+ get expanded(): boolean {
+ return this.expandable && this._expanded;
+ }
+
+ set expanded(value: boolean) {
+ this._expanded = value;
+ }
+
+ @computed get hovering() {
+ return this.designer.hovering.current === this.node;
+ }
+
+ @computed get hidden(): boolean {
+ return this.node.getExtraProp('hidden', false)?.getValue() === true;
+ }
+
+ @computed get ignored(): boolean {
+ return this.node.getExtraProp('ignored', false)?.getValue() === true;
+ }
+
+ @computed get locked(): boolean {
+ return this.node.getExtraProp('locked', false)?.getValue() === true;
+ }
+
+ @computed get selected(): boolean {
+ // TODO: check is dragging
+ const selection = this.document.selection;
+ return selection.has(this.node.id);
+ }
+
+ @computed get title(): TitleContent {
+ return this.node.title;
+ }
+
+ @computed get parent() {
+ const parent = this.node.parent;
+ if (parent) {
+ return this.tree.getTreeNode(parent);
+ }
+ return null;
+ }
+
+ @computed get slots(): TreeNode[] {
+ // todo: shallowEqual
+ return this.node.slots.map((node) => this.tree.getTreeNode(node));
+ }
+
+ @computed get children(): TreeNode[] | null {
+ return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null;
+ }
+
+ /**
+ * 是否是容器，允许子节点拖入
+ */
+ isContainer(): boolean {
+ return this.node.isContainer();
+ }
+
+ /**
+ * 判断是否有"插槽"
+ */
+ isSlotContainer(): boolean {
+ return this.node.isSlotContainer();
+ }
+
+ hasChildren(): boolean {
+ return this.isContainer() && this.node.children?.notEmpty() ? true : false;
+ }
+
+ /*
+ get xForValue() {
+ const node = this.node;
+ return isElementNode(node) && node.xforValue ? node.xforValue : null;
+ }
+
+ get flowHidden() {
+ return (this.node as ElementNode).flowHidden;
+ }
+
+ get flowIndex() {
+ return (this.node as ElementNode).flowIndex;
+ }
+
+ get conditionFlow() {
+ return (this.node as ElementNode).conditionFlow;
+ }
+
+ hasXIf() {
+ return hasConditionFlow(this.node);
+ }
+
+ hasXFor() {
+ const node = this.node;
+ return isElementNode(node) && node.xforFn;
+ }
+ */
+
+ /**
+ * 展开节点，支持依次展开父节点
+ */
+ expand(tryExpandParents: boolean = false) {
+ // 这边不能直接使用 expanded，需要额外判断是否可以展开
+ // 如果只使用 expanded，会漏掉不可以展开的情况，即在不可以展开的情况下，会触发展开
+ if (this.expandable && !this._expanded) {
+ this.expanded = true;
+ }
+ if (tryExpandParents) {
+ this.expandParents();
+ }
+ }
+
+ /**
+ * 光标停留处理
+ * 超过一定时间，展开节点
+ */
+ private dwellTimer: number | undefined;
+ clearDwellTimer() {
+ clearTimeout(this.dwellTimer);
+ this.dwellTimer = undefined;
+ }
+ willExpand() {
+ if (this.dwellTimer) {
+ return;
+ }
+ this.clearDwellTimer();
+ if (this.expanded) {
+ return;
+ }
+ this.dwellTimer = setTimeout(() => {
+ this.clearDwellTimer();
+ this.expand(true);
+ }, 400) as any;
+ }
+
+ expandParents() {
+ let p = this.node.parent;
+ while (p) {
+ this.tree.getTreeNode(p).expanded = true;
+ p = p.parent;
+ }
+ }
+
+ private titleRef: HTMLDivElement | null = null;
+ mount(ref: HTMLDivElement | null) {
+ this.titleRef = ref;
+ }
+
+ computeRect() {
+ let target = this.titleRef;
+ if (!target) {
+ const nodeId = this.id;
+ target = window.document.querySelector(`div[data-id="${nodeId}"]`);
+ }
+ return target && target.getBoundingClientRect();
+ }
+
+ select(isMulti: boolean) {
+ const node = this.node;
+
+ /*
+ if (this.hasXIf()) {
+ (node as ElementNode).setFlowVisible();
+ }
+ */
+
+ const selection = node.document.selection;
+ if (isMulti) {
+ selection.add(node.id);
+ } else {
+ selection.select(node.id);
+ }
+ }
+
+ readonly designer: Designer;
+ readonly document: DocumentModel;
+ constructor(readonly tree: Tree, readonly node: Node) {
+ this.document = node.document;
+ this.designer = this.document.designer;
+ }
+}
diff --git a/packages/plugin-outline-pane/src/tree.ts b/packages/plugin-outline-pane/src/tree.ts
new file mode 100644
index 000000000..cefe9493c
--- /dev/null
+++ b/packages/plugin-outline-pane/src/tree.ts
@@ -0,0 +1,23 @@
+import TreeNode from './tree-node';
+import DocumentModel from '../../designer/src/designer/document/document-model';
+import Node from '../../designer/src/designer/document/node/node';
+
+export class Tree {
+ private treeNodesMap = new Map();
+
+ readonly root: TreeNode;
+
+ constructor(readonly document: DocumentModel) {
+ this.root = this.getTreeNode(document.rootNode);
+ }
+
+ getTreeNode(node: Node): TreeNode {
+ if (this.treeNodesMap.has(node.id)) {
+ return this.treeNodesMap.get(node.id)!;
+ }
+
+ const treeNode = new TreeNode(this, node);
+ this.treeNodesMap.set(node.id, treeNode);
+ return treeNode;
+ }
+}
diff --git a/packages/plugin-outline-pane/src/views/pane.less b/packages/plugin-outline-pane/src/views/pane.less
new file mode 100644
index 000000000..001de23f1
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/pane.less
@@ -0,0 +1,251 @@
+/* 面板背景的颜色 */
+@pane-bgcolor: #333131; // #1a1c23;
+/* 标题背景色 */
+//@title-bgcolor: var(--pane-bg-color; // backup rgba(0, 0, 0, 0.2);
+/* 标题边框色 */
+@title-bdcolor: transparent;
+@title-selectedcolor: #111;
+@section-bgcolor: transparent;
+@section-bdcolor: rgba(0, 0, 0, 0.1);
+/* 文字颜色 */
+@text-color: #ffffff;
+
+.hidden {
+ display: none;
+}
+
+.my-outline-pane {
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+
+ > .tree-scroll-container {
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ overflow: auto;
+ }
+}
+
+.my-outline-tree {
+ overflow: hidden;
+ margin-bottom: 20px;
+ padding-left: 5px;
+
+ // 禁用 Text Select
+ user-select: none;
+
+ .insertion {
+ pointer-events: none !important;
+ border: 1px dashed var(--color-brand-light);
+ height: 25px;
+ transform: translateZ(0);
+ }
+
+ .condition-flow-container {
+ @bd-setting: 1px solid #7b605b;
+ border-top: @bd-setting;
+ border-bottom: @bd-setting;
+ position: relative;
+
+ &:before {
+ position: absolute;
+ display: block;
+ width: 0;
+ border-left: @bd-setting;
+ height: 100%;
+ top: 0;
+ left: 0;
+ content: ' ';
+ z-index: 2;
+ }
+ }
+
+ .tree-node {
+ color: rgb(217, 217, 217);
+
+ .c-control-flow-title {
+ text-align: center;
+ background-color: #7b605b;
+ height: 14px;
+ > b {
+ transform: scale(0.75);
+ transform-origin: top;
+ text-shadow: 0px 0px 2px black;
+ display: block;
+ }
+ }
+
+ .tree-node-collapsed-icon {
+ transition: transform 0.01s;
+ margin-left: 4px;
+ filter: opacity(0.5);
+
+ & > svg {
+ width: 8px;
+ height: 8px;
+ }
+
+ &:hover {
+ filter: opacity(1);
+ }
+ }
+
+ .tree-node-icon {
+ transform: translateZ(0);
+ display: flex;
+ align-items: center;
+ margin-right: 5px;
+ margin-left: 5px;
+
+ & > svg {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ .tree-node-ignored-icon {
+ display: none;
+ position: absolute;
+ right: 8px;
+ top: 6px;
+ }
+
+ .tree-node-title {
+ font-size: var(--font-size-text);
+ padding: 0;
+ cursor: pointer;
+ background: var(--pane-bg-color);
+ display: flex;
+ align-items: center;
+ position: relative;
+ transform: translateZ(0);
+
+ .tree-node-title-inner {
+ flex: 1;
+ height: 26px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: flex;
+ align-items: center;
+ }
+
+ .tree-node-title-input {
+ flex: 1;
+ border: none;
+ background-color: var(--pane-bg-color);
+ color: var(--color-pane-label);
+ height: 24px;
+ line-height: 24px;
+ }
+
+ .tree-node-title-text {
+ flex: 1;
+ color: rgb(217, 217, 217);
+ // problem
+ //width: 100%;
+ //height: 100%;
+ display: flex;
+ align-items: center;
+
+ &.x-for-text {
+ color: #9370db;
+ }
+
+ &.x-if-text {
+ color: #ff6308;
+ }
+
+ .info {
+ margin-left: 10px;
+ }
+
+ .editable {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ }
+
+ &.expanded {
+ > .tree-node-title > .tree-node-collapsed-icon {
+ transform-origin: center;
+ transform: rotate(90deg);
+ }
+ //> .branches {
+ // > .tree-node > .tree-node-title > .tree-node-icon {
+ // margin-left: 9px;
+ // }
+ //}
+ }
+
+ &.hover {
+ & > .tree-node-title {
+ background: @title-selectedcolor * 1.6;
+
+ .tree-node-ignored-icon {
+ display: block;
+ }
+ }
+ }
+
+ // 忽略节点处理
+ &.ignored {
+ .tree-node-title-text {
+ color: #9b9b9b;
+ }
+
+ .tree-node-collapsed-icon,
+ .tree-node-ignored-icon {
+ display: block;
+ filter: opacity(0.5);
+ }
+ }
+
+ // 选中节点处理
+ &.selected {
+ & > .tree-node-title {
+ background: @title-selectedcolor;
+ }
+ }
+
+ // 处理拖入节点
+ &.dropping {
+ & > .tree-node-title {
+ background: @title-selectedcolor * 0.75;
+ }
+
+ & > .branches:before {
+ border-left: 1px solid var(--color-brand-light);
+ }
+ }
+
+ .branches {
+ padding-left: 12px;
+ position: relative;
+
+ &:before {
+ position: absolute;
+ display: block;
+ width: 0;
+ border-left: 0.5px solid rgba(149, 216, 160, 0.25);
+ height: 100%;
+ top: 0;
+ left: 10px;
+ content: ' ';
+ z-index: 2;
+ }
+
+ &.x-flow {
+ &:before {
+ border-left: 1px solid #ff6308;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/plugin-outline-pane/src/views/pane.tsx b/packages/plugin-outline-pane/src/views/pane.tsx
new file mode 100644
index 000000000..f698611be
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/pane.tsx
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { OutlineMain } from '../main';
+import { intl } from '../locale';
+import { observer } from '../../../globals/src';
+import './style.less';
+
+@observer
+export default class OutlinePane extends Component<{ editor: any }> {
+ private main = new OutlineMain(this.props.editor);
+
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ componentWillUnmount() {
+ this.main.purge();
+ }
+
+ render() {
+ if (!this.main.master) {
+ return (
+ {
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ const treeNode = this.props.treeNode;
+ const { expanded } = treeNode;
+
+ if (!expanded) {
+ return null;
+ }
+
+ const branchClassName = classNames({
+ branches: !isRootNode(treeNode.node),
+ // 'x-branch': treeNode.hasXIf() && treeNode.branchIndex !== treeNode.branchNode!.children.length - 1,
+ });
+
+ let children: any = [];
+
+ if (treeNode.hasChildren() /* || node.hasSlots() */) {
+ children = treeNode.children.map((child: TreeNode) => {
+ if (child.hasXIf()) {
+ if (child.flowIndex === 0) {
+ const conditionFlowContainer = classNames('condition-group-container', {
+ hidden: child.hidden,
+ });
+ return (
+
- {
return null;
}
+ let elems = elements.slice();
+ if (selector) {
+ const matched = getMatched(elems, selector);
+ if (!matched) {
+ return null;
+ }
+ elems = [matched];
+ }
let rects: DOMRect[] | undefined;
let last: { x: number; y: number; r: number; b: number } | undefined;
let computed = false;
- const elems = selector
- ? elements
- .map(elem => {
- if (isElement(elem)) {
- // TODO: if has selector use exact match
- if (elem.matches(selector)) {
- return elem;
- }
-
- return elem.querySelector(selector);
- }
- return null;
- })
- .filter(Boolean)
- : elements.slice();
while (true) {
if (!rects || rects.length < 1) {
const elem = elems.pop();
@@ -1057,3 +1049,19 @@ function isNearAfter(point: CanvasPoint, rect: Rect, inline: boolean) {
}
return Math.abs(point.canvasY - rect.top) > Math.abs(point.canvasY - rect.bottom);
}
+
+function getMatched(elements: Array, selector: string): Element | null {
+ let firstQueried: Element | null = null;
+ for (const elem of elements) {
+ if (isElement(elem)) {
+ if (elem.matches(selector)) {
+ return elem;
+ }
+
+ if (!firstQueried) {
+ firstQueried = elem.querySelector(selector);
+ }
+ }
+ }
+ return firstQueried;
+}
diff --git a/packages/designer/src/builtins/simulator/host/resource-consumer.ts b/packages/designer/src/builtins/simulator/host/resource-consumer.ts
index b68384812..8731e1afe 100644
--- a/packages/designer/src/builtins/simulator/host/resource-consumer.ts
+++ b/packages/designer/src/builtins/simulator/host/resource-consumer.ts
@@ -1,5 +1,5 @@
import { SimulatorRenderer } from '../renderer/renderer';
-import { autorun, obx } from '@recore/obx';
+import { autorun, obx } from '../../../../../globals';
import { SimulatorHost } from './host';
import { EventEmitter } from 'events';
@@ -34,7 +34,6 @@ export default class ResourceConsumer {
});
}
-
private _consuming?: () => void;
consume(consumerOrRenderer: SimulatorRenderer | ((data: T) => any)) {
if (this._consuming) {
@@ -48,7 +47,7 @@ export default class ResourceConsumer {
}
const rendererConsumer = this.consumer!;
- consumer = (data) => rendererConsumer(consumerOrRenderer, data);
+ consumer = data => rendererConsumer(consumerOrRenderer, data);
} else {
consumer = consumerOrRenderer;
}
@@ -76,14 +75,14 @@ export default class ResourceConsumer {
this.emitter.removeAllListeners();
}
- private _firstConsumed: boolean = false;
+ private _firstConsumed = false;
private resovleFirst?: () => void;
waitFirstConsume(): Promise {
if (this._firstConsumed) {
return Promise.resolve();
}
- return new Promise((resolve) => {
+ return new Promise(resolve => {
this.resovleFirst = resolve;
});
}
diff --git a/packages/designer/src/builtins/simulator/host/viewport.ts b/packages/designer/src/builtins/simulator/host/viewport.ts
index a22f87704..39208be2b 100644
--- a/packages/designer/src/builtins/simulator/host/viewport.ts
+++ b/packages/designer/src/builtins/simulator/host/viewport.ts
@@ -1,4 +1,4 @@
-import { obx, computed } from '@recore/obx';
+import { obx, computed } from '../../../../../globals';
import { Point } from '../../../designer/helper/location';
import { ScrollTarget } from '../../../designer/helper/scroller';
import { AutoFit, IViewport } from '../../../designer/simulator';
diff --git a/packages/designer/src/builtins/simulator/renderer/renderer.ts b/packages/designer/src/builtins/simulator/renderer/renderer.ts
index 26c246399..818825bf2 100644
--- a/packages/designer/src/builtins/simulator/renderer/renderer.ts
+++ b/packages/designer/src/builtins/simulator/renderer/renderer.ts
@@ -3,7 +3,6 @@ import { render as reactRender } from 'react-dom';
import { host } from './host';
import SimulatorRendererView from './renderer-view';
import { computed, obx } from '@recore/obx';
-import { RootSchema, NpmInfo } from '../../../designer/schema';
import { getClientRects } from '../../../utils/get-client-rects';
import { Asset } from '../utils/asset';
import loader from '../utils/loader';
@@ -13,6 +12,7 @@ import { NodeInstance } from '../../../designer/simulator';
import { isElement } from '../../../utils/is-element';
import cursor from '../../../designer/helper/cursor';
import { setNativeSelection } from '../../../designer/helper/navtive-selection';
+import { RootSchema, NpmInfo } from '../../../../../globals/src';
export class SimulatorRenderer {
readonly isSimulatorRenderer = true;
diff --git a/packages/designer/src/builtins/simulator/utils/parse-props.ts b/packages/designer/src/builtins/simulator/utils/parse-props.ts
index 5d314c8d1..90c0ddf06 100644
--- a/packages/designer/src/builtins/simulator/utils/parse-props.ts
+++ b/packages/designer/src/builtins/simulator/utils/parse-props.ts
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { isValidElement } from 'react';
import { isElement } from '../../../utils/is-element';
-import { PropType, PropConfig } from '../../../designer/prop-config';
+import { PropConfig } from '../../../../../globals';
export const primitiveTypes = [
'string',
diff --git a/packages/designer/src/designer/component-meta.ts b/packages/designer/src/designer/component-meta.ts
index 0ec9329f5..b2b86f1dc 100644
--- a/packages/designer/src/designer/component-meta.ts
+++ b/packages/designer/src/designer/component-meta.ts
@@ -1,96 +1,24 @@
-import { ReactNode, ReactElement, ComponentType, createElement } from 'react';
import Node, { NodeParent } from './document/node/node';
-import { NodeData, NodeSchema } from './schema';
-import { PropConfig } from './prop-config';
import Designer from './designer';
-import { Remove, Clone } from '../../../globals';
-import { computed } from '@recore/obx';
+import {
+ IconRemove,
+ IconClone,
+ IconPage,
+ IconContainer,
+ IconComponent,
+ ComponentMetadata,
+ NpmInfo,
+ NodeData,
+ NodeSchema,
+ ComponentAction,
+ TitleContent,
+ TransformedComponentMetadata,
+ getRegisteredMetadataTransducers,
+ registerMetadataTransducer,
+ computed,
+} from '../../../globals';
import { intl } from '../locale';
-export interface NestingRule {
- childWhitelist?: string[];
- parentWhitelist?: string[];
-}
-
-export interface Configure {
- props?: any[];
- styles?: object;
- events?: object;
- component?: {
- isContainer?: boolean;
- isModal?: boolean;
- descriptor?: string;
- nestingRule?: NestingRule;
- rectSelector?: string;
- // copy,move,delete
- disableBehaviors?: string[];
- actions?: ComponentAction[];
- };
-}
-
-export interface ContentObject {
- // 图标
- icon?: string | ComponentType | ReactElement;
- // 描述
- description?: string;
- // 执行动作
- action?: (node: Node) => void;
-}
-
-export interface ComponentAction {
- // behaviorName
- name: string;
- // 菜单名称
- content: string | ReactNode | ContentObject;
- // 子集
- items?: ComponentAction[];
- // 不显示
- condition?: boolean | ((node: Node) => boolean);
- // 显示在工具条上
- important?: boolean;
-}
-
-export function isContentObject(obj: any): obj is ContentObject {
- return obj && typeof obj === 'object';
-}
-
-export interface ComponentMetadata {
- componentName: string;
- /**
- * unique id
- */
- uri?: string;
- /**
- * title or description
- */
- title?: string;
- /**
- * svg icon for component
- */
- icon?: string | ReactNode;
- tags?: string[];
- description?: string;
- docUrl?: string;
- screenshot?: string;
- devMode?: 'procode' | 'lowcode';
- npm?: {
- package: string;
- exportName: string;
- subName: string;
- main: string;
- destructuring: boolean;
- version: string;
- };
- props?: PropConfig[];
- configure?: any[] | Configure;
-}
-
-interface TransformedComponentMetadata extends ComponentMetadata {
- configure: Configure & {
- combined?: any[];
- };
-}
-
function ensureAList(list?: string | string[]): string[] | null {
if (!list) {
return null;
@@ -136,22 +64,16 @@ function npmToURI(npm: {
return uri;
}
-export type MetadataTransducer = (prev: TransformedComponentMetadata) => TransformedComponentMetadata;
-const metadataTransducers: MetadataTransducer[] = [];
-
-// propsParser
-//
-
-export function registerMetadataTransducer(transducer: MetadataTransducer) {
- metadataTransducers.push(transducer);
-}
-
export class ComponentMeta {
readonly isComponentMeta = true;
private _uri?: string;
get uri(): string {
return this._uri!;
}
+ private _npm?: NpmInfo;
+ get npm() {
+ return this._npm;
+ }
private _componentName?: string;
get componentName(): string {
return this._componentName!;
@@ -172,10 +94,6 @@ export class ComponentMeta {
get rectSelector(): string | undefined {
return this._rectSelector;
}
- private _acceptable?: boolean;
- get acceptable(): boolean {
- return this._acceptable!;
- }
private _transformedMetadata?: TransformedComponentMetadata;
get configure() {
const config = this._transformedMetadata?.configure;
@@ -185,20 +103,30 @@ export class ComponentMeta {
private parentWhitelist?: string[] | null;
private childWhitelist?: string[] | null;
+ private _title?: TitleContent;
get title() {
- return this._metadata.title || this.componentName;
+ return this._title || this.componentName;
}
get icon() {
- return this._metadata.icon;
+ return (
+ this._transformedMetadata?.icon ||
+ (this.componentName === 'Page' ? IconPage : this.isContainer ? IconContainer : IconComponent)
+ );
}
- constructor(readonly designer: Designer, private _metadata: ComponentMetadata) {
- this.parseMetadata(_metadata);
+ private _acceptable?: boolean;
+ get acceptable(): boolean {
+ return this._acceptable!;
+ }
+
+ constructor(readonly designer: Designer, metadata: ComponentMetadata) {
+ this.parseMetadata(metadata);
}
private parseMetadata(metadta: ComponentMetadata) {
- const { componentName, uri, npm, props } = metadta;
+ const { componentName, uri, npm } = metadta;
+ this._npm = npm;
this._uri = uri || (npm ? npmToURI(npm) : componentName);
this._componentName = componentName;
@@ -206,6 +134,15 @@ export class ComponentMeta {
// 额外转换逻辑
this._transformedMetadata = this.transformMetadata(metadta);
+ const title = this._transformedMetadata.title;
+ if (title && typeof title === 'string') {
+ this._title = {
+ type: 'i18n',
+ 'en-US': this.componentName,
+ 'zh-CN': title,
+ };
+ }
+
const { configure = {} } = this._transformedMetadata;
this._acceptable = false;
@@ -227,7 +164,7 @@ export class ComponentMeta {
}
private transformMetadata(metadta: ComponentMetadata): TransformedComponentMetadata {
- const result = metadataTransducers.reduce((prevMetadata, current) => {
+ const result = getRegisteredMetadataTransducers().reduce((prevMetadata, current) => {
return current(prevMetadata);
}, preprocessMetadata(metadta));
@@ -253,13 +190,12 @@ export class ComponentMeta {
return actions;
}
- set metadata(metadata: ComponentMetadata) {
- this._metadata = metadata;
+ setMetadata(metadata: ComponentMetadata) {
this.parseMetadata(metadata);
}
- get metadata(): ComponentMetadata {
- return this._metadata;
+ getMetadata(): TransformedComponentMetadata {
+ return this._transformedMetadata!;
}
checkNestingUp(my: Node | NodeData, parent: NodeParent) {
@@ -340,7 +276,7 @@ const builtinComponentActions: ComponentAction[] = [
{
name: 'remove',
content: {
- icon: Remove,
+ icon: IconRemove,
description: intl('remove'),
action(node: Node) {
node.remove();
@@ -351,7 +287,7 @@ const builtinComponentActions: ComponentAction[] = [
{
name: 'copy',
content: {
- icon: Clone,
+ icon: IconClone,
description: intl('copy'),
action(node: Node) {
// node.remove();
diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts
index 732b48fe2..34eeeaca7 100644
--- a/packages/designer/src/designer/designer.ts
+++ b/packages/designer/src/designer/designer.ts
@@ -1,8 +1,6 @@
-import { ComponentType as ReactComponentType } from 'react';
-import { obx, computed, autorun } from '@recore/obx';
+import { ComponentType } from 'react';
import BuiltinSimulatorView from '../builtins/simulator';
import Project from './project';
-import { ProjectSchema, NpmInfo } from './schema';
import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './helper/dragon';
import ActiveTracker from './helper/active-tracker';
import Hovering from './helper/hovering';
@@ -10,11 +8,12 @@ import Location, { LocationData, isLocationChildrenDetail } from './helper/locat
import DocumentModel from './document/document-model';
import Node, { insertChildren } from './document/node/node';
import { isRootNode } from './document/node/root-node';
-import { ComponentMetadata, ComponentMeta, ComponentAction } from './component-meta';
+import { ComponentMeta } from './component-meta';
import Scroller, { IScrollable } from './helper/scroller';
import { INodeSelector } from './simulator';
import OffsetObserver, { createOffsetObserver } from './helper/offset-observer';
import { EventEmitter } from 'events';
+import { ProjectSchema, ComponentMetadata, ComponentAction, NpmInfo, obx, computed, autorun } from '../../../globals';
export interface DesignerProps {
className?: string;
@@ -22,8 +21,8 @@ export interface DesignerProps {
defaultSchema?: ProjectSchema;
hotkeys?: object;
simulatorProps?: object | ((document: DocumentModel) => object);
- simulatorComponent?: ReactComponentType;
- dragGhostComponent?: ReactComponentType;
+ simulatorComponent?: ComponentType;
+ dragGhostComponent?: ComponentType;
suspensed?: boolean;
componentMetadatas?: ComponentMetadata[];
eventPipe?: EventEmitter;
@@ -165,6 +164,9 @@ export default class Designer {
*/
createLocation(locationData: LocationData): Location {
const loc = new Location(locationData);
+ if (this._dropLocation && this._dropLocation.document !== loc.document) {
+ this._dropLocation.document.internalSetDropLocation(null);
+ }
this._dropLocation = loc;
loc.document.internalSetDropLocation(loc);
this.activeTracker.track({ node: loc.target, detail: loc.detail });
@@ -258,9 +260,9 @@ export default class Designer {
return this.props ? this.props[key] : null;
}
- @obx.ref private _simulatorComponent?: ReactComponentType;
+ @obx.ref private _simulatorComponent?: ComponentType;
- @computed get simulatorComponent(): ReactComponentType {
+ @computed get simulatorComponent(): ComponentType {
return this._simulatorComponent || BuiltinSimulatorView;
}
@@ -300,12 +302,12 @@ export default class Designer {
const key = data.componentName;
let meta = this._componentMetasMap.get(key);
if (meta) {
- meta.metadata = data;
+ meta.setMetadata(data);
} else {
meta = this._lostComponentMetasMap.get(key);
if (meta) {
- meta.metadata = data;
+ meta.setMetadata(data);
this._lostComponentMetasMap.delete(key);
} else {
meta = new ComponentMeta(this, data);
@@ -342,7 +344,9 @@ export default class Designer {
@computed get componentsMap(): { [key: string]: NpmInfo } {
const maps: any = {};
this._componentMetasMap.forEach((config, key) => {
- maps[key] = config.metadata.npm;
+ if (config.npm) {
+ maps[key] = config.npm;
+ }
});
return maps;
}
diff --git a/packages/designer/src/designer/document/document-model.ts b/packages/designer/src/designer/document/document-model.ts
index ca0726b76..7a244bd54 100644
--- a/packages/designer/src/designer/document/document-model.ts
+++ b/packages/designer/src/designer/document/document-model.ts
@@ -1,14 +1,22 @@
import Project from '../project';
-import { RootSchema, NodeData, isDOMText, isJSExpression, NodeSchema } from '../schema';
import Node, { isNodeParent, insertChildren, insertChild, NodeParent } from './node/node';
import { Selection } from './selection';
import RootNode from './node/root-node';
-import { ISimulator, Component } from '../simulator';
-import { computed, obx, autorun } from '@recore/obx';
+import { ISimulator } from '../simulator';
import Location from '../helper/location';
import { ComponentMeta } from '../component-meta';
import History from '../helper/history';
import Prop from './node/props/prop';
+import {
+ RootSchema,
+ NodeData,
+ isJSExpression,
+ isDOMText,
+ NodeSchema,
+ computed,
+ obx,
+ autorun,
+} from '../../../../globals';
export default class DocumentModel {
/**
diff --git a/packages/designer/src/designer/document/document-view.tsx b/packages/designer/src/designer/document/document-view.tsx
index f4fab1e7c..859d00186 100644
--- a/packages/designer/src/designer/document/document-view.tsx
+++ b/packages/designer/src/designer/document/document-view.tsx
@@ -1,6 +1,6 @@
import { Component } from 'react';
import DocumentModel from './document-model';
-import { observer } from '@recore/obx-react';
+import { observer } from '../../../../globals';
import classNames from 'classnames';
@observer
diff --git a/packages/designer/src/designer/document/node/node-children.ts b/packages/designer/src/designer/document/node/node-children.ts
index 7ae7b9d7b..232ef10fe 100644
--- a/packages/designer/src/designer/document/node/node-children.ts
+++ b/packages/designer/src/designer/document/node/node-children.ts
@@ -1,6 +1,5 @@
import Node, { NodeParent } from './node';
-import { NodeData, isNodeSchema } from '../../schema';
-import { obx, computed } from '@recore/obx';
+import { NodeData, isNodeSchema, obx, computed } from '../../../../../globals';
export default class NodeChildren {
@obx.val private children: Node[];
@@ -20,7 +19,7 @@ export default class NodeChildren {
return this.children.map(node => node.export(serialize));
}
- import(data?: NodeData | NodeData[], checkId: boolean = false) {
+ import(data?: NodeData | NodeData[], checkId = false) {
data = data ? (Array.isArray(data) ? data : [data]) : [];
const originChildren = this.children.slice();
@@ -59,10 +58,14 @@ export default class NodeChildren {
return this.size < 1;
}
+ @computed notEmpty() {
+ return this.size > 0;
+ }
+
/**
* 删除一个节点
*/
- delete(node: Node, purge: boolean = false): boolean {
+ delete(node: Node, purge = false): boolean {
const i = this.children.indexOf(node);
if (i < 0) {
return false;
diff --git a/packages/designer/src/designer/document/node/node.ts b/packages/designer/src/designer/document/node/node.ts
index 1c46e1f2e..035e68d77 100644
--- a/packages/designer/src/designer/document/node/node.ts
+++ b/packages/designer/src/designer/document/node/node.ts
@@ -1,10 +1,19 @@
-import { obx, computed } from '@recore/obx';
-import { NodeSchema, NodeData, PropsMap, PropsList, isDOMText, isJSExpression } from '../../schema';
import Props, { EXTRA_KEY_PREFIX } from './props/props';
import DocumentModel from '../document-model';
import NodeChildren from './node-children';
import Prop from './props/prop';
import { ComponentMeta } from '../../component-meta';
+import {
+ isDOMText,
+ isJSExpression,
+ NodeSchema,
+ PropsMap,
+ PropsList,
+ NodeData,
+ TitleContent,
+ obx,
+ computed,
+} from '../../../../../globals';
/**
* 基础节点
@@ -74,7 +83,7 @@ export default class Node {
return -1;
}
- @computed get title(): string {
+ @computed get title(): TitleContent {
let t = this.getExtraProp('title');
if (!t && this.componentMeta.descriptor) {
t = this.getProp(this.componentMeta.descriptor, false);
@@ -181,6 +190,30 @@ export default class Node {
return this.props.export(true).props || null;
}
+ isContainer() {
+ return this.isNodeParent && this.componentMeta.isContainer;
+ }
+
+ @computed isSlotContainer() {
+ for (const item of this.props) {
+ if (item.type === 'slot') {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ @computed get slots() {
+ // TODO: optimize recore/obx, array maked every time, donot as changed
+ const slots: Node[] = [];
+ this.props.forEach(item => {
+ if (item.type === 'slot') {
+ slots.push(item.slotNode!);
+ }
+ });
+ return slots;
+ }
+
private _conditionGroup: string | null = null;
/**
* 条件组
diff --git a/packages/designer/src/designer/document/node/props/prop-stash.ts b/packages/designer/src/designer/document/node/props/prop-stash.ts
index 84f0f8759..d7b63347f 100644
--- a/packages/designer/src/designer/document/node/props/prop-stash.ts
+++ b/packages/designer/src/designer/document/node/props/prop-stash.ts
@@ -1,4 +1,4 @@
-import { obx, autorun, untracked, computed } from '@recore/obx';
+import { obx, autorun, untracked, computed } from '../../../../../../globals';
import Prop, { IPropParent, UNSET } from './prop';
import Props from './props';
diff --git a/packages/designer/src/designer/document/node/props/prop.ts b/packages/designer/src/designer/document/node/props/prop.ts
index a8b941339..c8463c6cc 100644
--- a/packages/designer/src/designer/document/node/props/prop.ts
+++ b/packages/designer/src/designer/document/node/props/prop.ts
@@ -1,12 +1,20 @@
-import { untracked, computed, obx } from '@recore/obx';
import { valueToSource } from '../../../../utils/value-to-source';
-import { CompositeValue, isJSExpression, isJSSlot, NodeSchema, NodeData, isNodeSchema } from '../../../schema';
import PropStash from './prop-stash';
import { uniqueId } from '../../../../../../utils/unique-id';
import { isPlainObject } from '../../../../../../utils/is-plain-object';
import { hasOwnProperty } from '../../../../utils/has-own-property';
import Props from './props';
import Node from '../node';
+import {
+ CompositeValue,
+ isJSExpression,
+ isJSSlot,
+ NodeData,
+ isNodeSchema,
+ untracked,
+ computed,
+ obx,
+} from '../../../../../../globals';
export const UNSET = Symbol.for('unset');
export type UNSET = typeof UNSET;
@@ -197,6 +205,9 @@ export default class Prop implements IPropParent {
}
private _slotNode?: Node;
+ get slotNode() {
+ return this._slotNode;
+ }
setAsSlot(data: NodeData) {
this._type = 'slot';
if (
diff --git a/packages/designer/src/designer/document/node/props/props.ts b/packages/designer/src/designer/document/node/props/props.ts
index 328d1315b..d46b86789 100644
--- a/packages/designer/src/designer/document/node/props/props.ts
+++ b/packages/designer/src/designer/document/node/props/props.ts
@@ -1,9 +1,8 @@
-import { computed, obx } from '@recore/obx';
import { uniqueId } from '../../../../../../utils/unique-id';
-import { CompositeValue, PropsList, PropsMap } from '../../../schema';
import PropStash from './prop-stash';
import Prop, { IPropParent, UNSET } from './prop';
import Node from '../node';
+import { PropsMap, PropsList, CompositeValue, computed, obx } from '../../../../../../globals';
export const EXTRA_KEY_PREFIX = '__';
@@ -279,6 +278,12 @@ export default class Props implements IPropParent {
});
}
+ filter(fn: (item: Prop, key: number | string | undefined) => boolean) {
+ return this.items.filter(item => {
+ return fn(item, item.key);
+ });
+ }
+
private purged = false;
/**
* 回收销毁
diff --git a/packages/designer/src/designer/document/node/root-node.ts b/packages/designer/src/designer/document/node/root-node.ts
index 0bb809f33..042ecf821 100644
--- a/packages/designer/src/designer/document/node/root-node.ts
+++ b/packages/designer/src/designer/document/node/root-node.ts
@@ -1,8 +1,7 @@
import Node, { NodeParent } from './node';
-import { RootSchema } from '../../schema';
import DocumentModel from '../document-model';
import NodeChildren from './node-children';
-import Props from './props/props';
+import { RootSchema } from '../../../../../globals';
/**
* 根容器节点
diff --git a/packages/designer/src/designer/document/selection.ts b/packages/designer/src/designer/document/selection.ts
index c481b1bce..3ff2bc604 100644
--- a/packages/designer/src/designer/document/selection.ts
+++ b/packages/designer/src/designer/document/selection.ts
@@ -1,5 +1,5 @@
import Node, { comparePosition, PositionNO } from './node/node';
-import { obx } from '@recore/obx';
+import { obx } from '../../../../globals';
import DocumentModel from './document-model';
import { EventEmitter } from 'events';
diff --git a/packages/designer/src/designer/helper/dragon.ts b/packages/designer/src/designer/helper/dragon.ts
index 232fb66f4..ca748caee 100644
--- a/packages/designer/src/designer/helper/dragon.ts
+++ b/packages/designer/src/designer/helper/dragon.ts
@@ -1,13 +1,12 @@
import { EventEmitter } from 'events';
-import { obx } from '@recore/obx';
import Location from './location';
import DocumentModel from '../document/document-model';
-import { NodeSchema } from '../schema';
import { ISimulator, isSimulator, ComponentInstance } from '../simulator';
import Node from '../document/node/node';
import Designer from '../designer';
import { setNativeSelection } from './navtive-selection';
import cursor from './cursor';
+import { NodeSchema, obx } from '../../../../globals';
export interface LocateEvent {
readonly type: 'LocateEvent';
diff --git a/packages/designer/src/designer/helper/history.ts b/packages/designer/src/designer/helper/history.ts
index 8ab0fb624..f0a3a27d9 100644
--- a/packages/designer/src/designer/helper/history.ts
+++ b/packages/designer/src/designer/helper/history.ts
@@ -1,7 +1,5 @@
import { EventEmitter } from 'events';
-import Session from './session';
-import { autorun, Reaction, untracked } from '@recore/obx';
-import { NodeSchema } from '../schema';
+import { NodeSchema, autorun, Reaction, untracked } from '../../../../globals';
// TODO: cache to localStorage
@@ -176,3 +174,48 @@ export default class History {
this.records = [];
}
}
+
+class Session {
+ private _data: any;
+ private activedTimer: any;
+
+ get data() {
+ return this._data;
+ }
+
+ constructor(readonly cursor: number, data: any, private timeGap: number = 1000) {
+ this.setTimer();
+ this.log(data);
+ }
+
+ log(data: any) {
+ if (!this.isActive()) {
+ return;
+ }
+ this._data = data;
+ this.setTimer();
+ }
+
+ isActive() {
+ return this.activedTimer != null;
+ }
+
+ end() {
+ if (this.isActive()) {
+ this.clearTimer();
+ console.info('session end');
+ }
+ }
+
+ private setTimer() {
+ this.clearTimer();
+ this.activedTimer = setTimeout(() => this.end(), this.timeGap);
+ }
+
+ private clearTimer() {
+ if (this.activedTimer) {
+ clearTimeout(this.activedTimer);
+ }
+ this.activedTimer = null;
+ }
+}
diff --git a/packages/designer/src/designer/helper/hovering.ts b/packages/designer/src/designer/helper/hovering.ts
index a4f62abda..56e1efde8 100644
--- a/packages/designer/src/designer/helper/hovering.ts
+++ b/packages/designer/src/designer/helper/hovering.ts
@@ -1,9 +1,9 @@
-import { obx } from '@recore/obx';
import Node from '../document/node/node';
import DocumentModel from '../document/document-model';
+import { obx } from '../../../../globals';
export default class Hovering {
- @obx.ref private _enable: boolean = true;
+ @obx.ref private _enable = true;
get enable() {
return this._enable;
}
@@ -13,7 +13,7 @@ export default class Hovering {
this._current = null;
}
}
- @obx.ref xRayMode: boolean = false;
+ @obx.ref xRayMode = false;
@obx.ref private _current: Node | null = null;
get current() {
diff --git a/packages/designer/src/designer/helper/offset-observer.ts b/packages/designer/src/designer/helper/offset-observer.ts
index 798ec43a8..39f3c4e23 100644
--- a/packages/designer/src/designer/helper/offset-observer.ts
+++ b/packages/designer/src/designer/helper/offset-observer.ts
@@ -1,4 +1,4 @@
-import { obx, computed } from '@recore/obx';
+import { obx, computed } from '../../../../globals';
import { INodeSelector, IViewport } from '../simulator';
import { uniqueId } from '../../../../utils/unique-id';
import { isRootNode } from '../document/node/root-node';
diff --git a/packages/designer/src/designer/helper/session.ts b/packages/designer/src/designer/helper/session.ts
deleted file mode 100644
index 8095d525d..000000000
--- a/packages/designer/src/designer/helper/session.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export default class Session {
- private _data: any;
- private activedTimer: any;
-
- get data() {
- return this._data;
- }
-
- constructor(readonly cursor: number, data: any, private timeGap: number = 1000) {
- this.setTimer();
- this.log(data);
- }
-
- log(data: any) {
- if (!this.isActive()) {
- return;
- }
- this._data = data;
- this.setTimer();
- }
-
- isActive() {
- return this.activedTimer != null;
- }
-
- end() {
- if (this.isActive()) {
- this.clearTimer();
- console.info('session end');
- }
- }
-
- private setTimer() {
- this.clearTimer();
- this.activedTimer = setTimeout(() => this.end(), this.timeGap);
- }
-
- private clearTimer() {
- if (this.activedTimer) {
- clearTimeout(this.activedTimer);
- }
- this.activedTimer = null;
- }
-}
diff --git a/packages/designer/src/designer/project-view.tsx b/packages/designer/src/designer/project-view.tsx
index 52e11ee3b..284d9c0dc 100644
--- a/packages/designer/src/designer/project-view.tsx
+++ b/packages/designer/src/designer/project-view.tsx
@@ -1,7 +1,7 @@
import { Component } from 'react';
-import { observer } from '@recore/obx-react';
import Designer from './designer';
import DocumentView from './document/document-view';
+import { observer } from '../../../globals';
@observer
export default class ProjectView extends Component<{ designer: Designer }> {
diff --git a/packages/designer/src/designer/project.ts b/packages/designer/src/designer/project.ts
index 5b5ecde9e..e64610e2f 100644
--- a/packages/designer/src/designer/project.ts
+++ b/packages/designer/src/designer/project.ts
@@ -1,8 +1,7 @@
-import { obx, computed } from '@recore/obx';
-import { ProjectSchema, RootSchema } from './schema';
import { EventEmitter } from 'events';
import Designer from './designer';
import DocumentModel, { isDocumentModel } from './document/document-model';
+import { ProjectSchema, RootSchema, obx, computed } from '../../../globals';
export default class Project {
private emitter = new EventEmitter();
@@ -21,10 +20,12 @@ export default class Project {
componentsTree: [],
...schema,
};
- this.open(this.data.componentsTree[0] || {
- componentName: 'Page',
- fileName: '',
- });
+ this.open(
+ this.data.componentsTree[0] || {
+ componentName: 'Page',
+ fileName: '',
+ },
+ );
}
@computed get currentDocument() {
@@ -106,7 +107,7 @@ export default class Project {
}
checkExclusive(actived: DocumentModel) {
- this.documents.forEach((doc) => {
+ this.documents.forEach(doc => {
if (doc !== actived) {
doc.suspense();
}
@@ -115,7 +116,7 @@ export default class Project {
}
closeOthers(opened: DocumentModel) {
- this.documents.forEach((doc) => {
+ this.documents.forEach(doc => {
if (doc !== opened) {
doc.close();
}
@@ -131,5 +132,4 @@ export default class Project {
// 通知标记删除，需要告知服务端
// 项目角度编辑不是全量打开所有文档，是按需加载，哪个更新就通知更新谁，
// 哪个删除就
-
}
diff --git a/packages/designer/src/designer/schema.ts b/packages/designer/src/designer/schema.ts
deleted file mode 100644
index 1dab9fe82..000000000
--- a/packages/designer/src/designer/schema.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-// 表达式
-export interface JSExpression {
- type: 'JSExpression';
- /**
- * 表达式字符串
- */
- value: string;
- /**
- * 模拟值
- */
- mock?: any;
-}
-
-export interface JSSlot {
- type: 'JSSlot';
- value: NodeSchema;
-}
-
-// JSON 基本类型
-export type JSONValue = boolean | string | number | null | JSONArray | JSONObject;
-export type JSONArray = JSONValue[];
-export interface JSONObject {
- [key: string]: JSONValue;
-}
-
-// 复合类型
-export type CompositeValue = JSONValue | JSExpression | JSSlot | CompositeArray | CompositeObject;
-export type CompositeArray = CompositeValue[];
-export interface CompositeObject {
- [key: string]: CompositeValue;
-}
-
-export interface NpmInfo {
- componentName?: string;
- package: string;
- version: string;
- destructuring?: boolean;
- exportName?: string;
- subName?: string;
- main?: string;
-}
-
-export type ComponentsMap = NpmInfo[];
-
-export type UtilsMap = Array<
-| {
- name: string;
- type: 'npm';
- content: NpmInfo;
-}
-| {
- name: string;
- type: '';
-}
->;
-
-// lang "en-US" | "zh-CN" | "zh-TW" | ...
-export interface I18nMap {
- [lang: string]: { [key: string]: string };
-}
-
-export interface DataSourceConfig {
- id: string;
- isInit: boolean;
- type: string;
- options: {
- uri: string;
- [option: string]: CompositeValue;
- };
- [otherKey: string]: CompositeValue;
-}
-
-export interface NodeSchema {
- id?: string;
- componentName: string;
- props?: PropsMap | PropsList;
- leadingComponents?: string;
- condition?: CompositeValue;
- loop?: CompositeValue;
- loopArgs?: [string, string];
- children?: NodeData | NodeData[];
-}
-
-export type PropsMap = CompositeObject;
-export type PropsList = Array<{
- spread?: boolean;
- name?: string;
- value: CompositeValue;
-}>;
-
-export type NodeData = NodeSchema | JSExpression | DOMText;
-
-export function isJSExpression(data: any): data is JSExpression {
- return data && data.type === 'JSExpression';
-}
-
-export function isJSSlot(data: any): data is JSSlot {
- return data && data.type === 'JSSlot';
-}
-
-export function isDOMText(data: any): data is DOMText {
- return typeof data === 'string';
-}
-
-export type DOMText = string;
-
-export interface RootSchema extends NodeSchema {
- componentName: string; // 'Block' | 'Page' | 'Component';
- fileName: string;
- meta?: object;
- state?: {
- [key: string]: CompositeValue;
- };
- methods?: {
- [key: string]: JSExpression;
- };
- lifeCycles?: {
- [key: string]: JSExpression;
- };
- css?: string;
- dataSource?: {
- items: DataSourceConfig[];
- } | any;
- defaultProps?: CompositeObject;
-}
-
-export interface BlockSchema extends RootSchema {
- componentName: 'Block';
-}
-
-export interface PageSchema extends RootSchema {
- componentName: 'Page';
-}
-
-export interface ComponentSchema extends RootSchema {
- componentName: 'Component';
-}
-
-export interface ProjectSchema {
- version: string;
- componentsMap: ComponentsMap;
- componentsTree: RootSchema[];
- i18n?: I18nMap;
- utils?: UtilsMap;
- constants?: JSONObject;
- css?: string;
- dataSource?: {
- items: DataSourceConfig[];
- };
-}
-
-export function isNodeSchema(data: any): data is NodeSchema {
- return data && data.componentName;
-}
-
-export function isProjectSchema(data: any): data is ProjectSchema {
- return data && data.componentsTree;
-}
diff --git a/packages/designer/src/designer/simulator.ts b/packages/designer/src/designer/simulator.ts
index 99c73ad47..de27ceb7c 100644
--- a/packages/designer/src/designer/simulator.ts
+++ b/packages/designer/src/designer/simulator.ts
@@ -1,9 +1,9 @@
import { Component as ReactComponent, ComponentType } from 'react';
-import { LocateEvent, ISensor } from './helper/dragon';
+import { ISensor } from './helper/dragon';
import { Point } from './helper/location';
import Node from './document/node/node';
import { ScrollTarget, IScrollable } from './helper/scroller';
-import { ComponentMetadata } from './component-meta';
+import { ComponentMetadata } from '../../../globals';
export type AutoFit = '100%';
export const AutoFit = '100%';
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index 22e76df35..a16cd4b4e 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -8,7 +8,7 @@ import components from './config/components';
import utils from './config/utils';
import constants from './config/constants';
import './config/locale';
-import './config/setters';
+import '../../plugin-setters';
import './global.scss';
import './config/theme.scss';
diff --git a/packages/globals/README.md b/packages/globals/README.md
index 070f5ca3b..30c3e7d7d 100644
--- a/packages/globals/README.md
+++ b/packages/globals/README.md
@@ -1 +1,3 @@
shared globals
+
+ 发 CDN
diff --git a/packages/globals/package.json b/packages/globals/package.json
index 26761d9ba..cfedbc382 100644
--- a/packages/globals/package.json
+++ b/packages/globals/package.json
@@ -13,6 +13,8 @@
},
"dependencies": {
"@alifd/next": "^1.19.16",
+ "@recore/obx": "^1.0.8",
+ "@recore/obx-react": "^1.0.7",
"classnames": "^2.2.6",
"react": "^16",
"react-dom": "^16.7.0"
diff --git a/packages/globals/src/components/tip/embed-tip.tsx b/packages/globals/src/components/tip/embed-tip.tsx
index fd8b3d4f8..203c8acd0 100644
--- a/packages/globals/src/components/tip/embed-tip.tsx
+++ b/packages/globals/src/components/tip/embed-tip.tsx
@@ -1,13 +1,7 @@
import { uniqueId } from '../../../../utils/unique-id';
-import { Component, ReactNode } from 'react';
+import { Component } from 'react';
import { saveTips } from './tip-handler';
-
-export interface TipConfig {
- className?: string;
- children?: ReactNode;
- theme?: string;
- direction?: string; // 'n|s|w|e|top|bottom|left|right';
-}
+import { TipConfig } from '../../types';
export default class EmbedTip extends Component {
private id = uniqueId('tips$');
diff --git a/packages/globals/src/components/tip/tip-handler.ts b/packages/globals/src/components/tip/tip-handler.ts
index 2f71d2ab3..ed1cb908a 100644
--- a/packages/globals/src/components/tip/tip-handler.ts
+++ b/packages/globals/src/components/tip/tip-handler.ts
@@ -1,5 +1,5 @@
-import { TipConfig } from './embed-tip';
import { EventEmitter } from 'events';
+import { TipConfig } from '../../types';
export interface TipOptions extends TipConfig {
target: HTMLElement;
diff --git a/packages/globals/src/components/tip/tip.tsx b/packages/globals/src/components/tip/tip.tsx
index 6c91e1e97..20d6c7928 100644
--- a/packages/globals/src/components/tip/tip.tsx
+++ b/packages/globals/src/components/tip/tip.tsx
@@ -1,7 +1,8 @@
import { Component } from 'react';
import classNames from 'classnames';
import { resolvePosition } from './utils';
-import tipHandler from './tip-handler';
+import tipHandler, { TipOptions } from './tip-handler';
+import { intl } from '../../intl';
export default class Tip extends Component {
private dispose?: () => void;
@@ -100,7 +101,7 @@ export default class Tip extends Component {
}
render() {
- const tip: any = tipHandler.tip || {};
+ const tip: TipOptions = tipHandler.tip || ({} as any);
const className = classNames('lc-tip', tip.className, tip && tip.theme ? `lc-theme-${tip.theme}` : null);
this.originClassName = className;
@@ -113,7 +114,7 @@ export default class Tip extends Component {
}}
>
-
);
}
diff --git a/packages/globals/src/components/title/index.tsx b/packages/globals/src/components/title/index.tsx
index 226a5f15e..526b0ce23 100644
--- a/packages/globals/src/components/title/index.tsx
+++ b/packages/globals/src/components/title/index.tsx
@@ -1,27 +1,19 @@
-import { Component, isValidElement, ReactElement, ReactNode } from 'react';
-import { Icon } from '@alifd/next';
+import { Component, isValidElement } from 'react';
import classNames from 'classnames';
-import EmbedTip, { TipConfig } from '../tip/embed-tip';
+import EmbedTip from '../tip/embed-tip';
import './title.less';
-import { IconConfig, createIcon } from '../../utils';
+import { createIcon } from '../../utils';
+import { TitleContent, isI18nData } from '../../types';
+import { intl } from '../../intl';
-export interface TitleConfig {
- label?: ReactNode;
- tip?: string | ReactElement | TipConfig;
- icon?: string | ReactElement | IconConfig;
- className?: string;
-}
-
-export type TitleContent = string | ReactElement | TitleConfig;
-
-export class Title extends Component<{ title: TitleContent; onClick?: () => void }> {
+export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> {
render() {
- let { title } = this.props;
+ let { title, className, onClick } = this.props;
if (isValidElement(title)) {
return title;
}
- if (typeof title === 'string') {
- title = { label: title }; // tslint:disable-line
+ if (typeof title === 'string' || isI18nData(title)) {
+ title = { label: title };
}
const icon = title.icon ? createIcon(title.icon) : null;
@@ -32,22 +24,24 @@ export class Title extends Component<{ title: TitleContent; onClick?: () => void
tip = title.tip;
} else {
const tipProps =
- typeof title.tip === 'object' && !isValidElement(title.tip) ? title.tip : { children: title.tip };
+ typeof title.tip === 'object' && !(isValidElement(title.tip) || isI18nData(title.tip))
+ ? title.tip
+ : { children: title.tip };
tip =
+
);
diff --git a/packages/designer/src/builtins/simulator/host/auxilary/insertion.less b/packages/designer/src/builtins/simulator/host/bem-tools/insertion.less
similarity index 100%
rename from packages/designer/src/builtins/simulator/host/auxilary/insertion.less
rename to packages/designer/src/builtins/simulator/host/bem-tools/insertion.less
diff --git a/packages/designer/src/builtins/simulator/host/auxilary/insertion.tsx b/packages/designer/src/builtins/simulator/host/bem-tools/insertion.tsx
similarity index 97%
rename from packages/designer/src/builtins/simulator/host/auxilary/insertion.tsx
rename to packages/designer/src/builtins/simulator/host/bem-tools/insertion.tsx
index a61d2fc74..f36993253 100644
--- a/packages/designer/src/builtins/simulator/host/auxilary/insertion.tsx
+++ b/packages/designer/src/builtins/simulator/host/bem-tools/insertion.tsx
@@ -1,6 +1,5 @@
import { Component } from 'react';
-import { computed } from '@recore/obx';
-import { observer } from '@recore/obx-react';
+import { computed, observer } from '../../../../../../globals';
import { SimulatorContext } from '../context';
import { SimulatorHost } from '../host';
import Location, {
diff --git a/packages/designer/src/builtins/simulator/host/host-view.tsx b/packages/designer/src/builtins/simulator/host/host-view.tsx
index 0ab951d69..22e4e8044 100644
--- a/packages/designer/src/builtins/simulator/host/host-view.tsx
+++ b/packages/designer/src/builtins/simulator/host/host-view.tsx
@@ -1,9 +1,9 @@
import { Component } from 'react';
-import { observer } from '@recore/obx-react';
+import { observer } from '../../../../../globals';
import { SimulatorHost, SimulatorProps } from './host';
import DocumentModel from '../../../designer/document/document-model';
import { SimulatorContext } from './context';
-import { AuxiliaryView } from './auxilary';
+import { BemTools } from './bem-tools';
import './host.less';
/*
@@ -65,7 +65,7 @@ class Canvas extends Component {
return (
sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport">
-
{tip.children}
+ {intl(tip.children)}
- {icon ?
+
);
}
}
diff --git a/packages/globals/src/components/title/title.less b/packages/globals/src/components/title/title.less
index 049626e6c..822b4c138 100644
--- a/packages/globals/src/components/title/title.less
+++ b/packages/globals/src/components/title/title.less
@@ -13,7 +13,8 @@
text-decoration-style: dashed;
text-decoration-color: rgba(31, 56, 88, .3);
}
- padding: 2px 0;
+ line-height: initial !important;
+ word-break: break-all;
}
.actived .lc-title {
diff --git a/packages/globals/src/di/index.ts b/packages/globals/src/di/index.ts
new file mode 100644
index 000000000..734eff6fd
--- /dev/null
+++ b/packages/globals/src/di/index.ts
@@ -0,0 +1,2 @@
+export * from './setter';
+export * from './transducer';
diff --git a/packages/globals/src/di/setter.ts b/packages/globals/src/di/setter.ts
new file mode 100644
index 000000000..3e8abbd24
--- /dev/null
+++ b/packages/globals/src/di/setter.ts
@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { CustomView, isCustomView } from '../types/setter-config';
+import { createContent } from '../../../utils/create-content';
+import { TitleContent } from '../types';
+
+export type RegisteredSetter = {
+ component: CustomView;
+ defaultProps?: object;
+ title?: TitleContent;
+};
+
+const settersMap = new Map{icon}
: null}
- {title.label ? {title.label} : null}
+ {icon ? {icon} : null}
+ {title.label ? intl(title.label) : null}
{tip}
-
+
+ );
+ }
+
+ if (!this.main.master.currentTree) {
+ return (
+ {intl('Designer not found')}
+
+
+ );
+ }
+
+ return (
+ {intl('No opened document')}
+
+
+ );
+ }
+}
diff --git a/packages/plugin-outline-pane/src/views/tree-branches.tsx b/packages/plugin-outline-pane/src/views/tree-branches.tsx
new file mode 100644
index 000000000..c60df167a
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/tree-branches.tsx
@@ -0,0 +1,56 @@
+import { observer } from '../../../globals/src';
+
+@observer
+export default class TreeBranches extends Component this.main.mount(shell)}
+ className="lc-outline-tree-container"
+ >
+
+
+
+ );
+ } else {
+ return null;
+ }
+ }
+ return Condition Flow
+ {child.conditionGroup!.children.map(c => {
+ return tree.mountInsertion(ref)} className="insertion" />,
+ );
+ }
+
+ return children.length > 0 && {
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ const { treeNode } = this.props;
+ const className = classNames('tree-node', {
+ // 是否展开
+ expanded: treeNode.expanded,
+ // 是否悬停
+ hover: treeNode.hover,
+ // 是否选中
+ selected: treeNode.selected,
+ // 是否隐藏
+ hidden: treeNode.hidden,
+ // 是否忽略的
+ ignored: treeNode.ignored,
+ // 是否锁定的
+ locked: treeNode.locked,
+ // 是否投放响应
+ dropping: treeNode.dropIndex != null,
+ // 是否?
+ highlight: treeNode.isDropContainer() && treeNode.dropIndex == null,
+ });
+
+ return (
+ {
+
+ private inputRef = React.createRef();
+
+ constructor(props: TreeNodeProps) {
+ super(props);
+ this.state = {
+ editing: false,
+ };
+ }
+
+ toggleIgnored() {
+ const treeNode = this.props.treeNode;
+ const node = treeNode.node as ElementNode;
+ if (treeNode.ignored) {
+ node.getDirective('x-ignore').remove();
+ } else {
+ node.getDirective('x-ignore').value = true;
+ }
+ }
+
+ toggleExpanded() {
+ const treeNode = this.props.treeNode;
+ const { expanded } = treeNode;
+ treeNode.expanded = !expanded;
+ }
+
+ renderExpandIcon() {
+ const node = this.props.treeNode;
+
+ if (!node.expandable) {
+ return null;
+ }
+
+ return (
+ ) {
+ if (e.keyCode === 13) {
+ this.saveEdit();
+ }
+ if (e.keyCode === 27) {
+ this.cancelEdit();
+ }
+ }
+
+ componentDidUpdate() {
+ const { current } = this.inputRef;
+ if (current) {
+ current.select();
+ }
+ }
+
+ render() {
+ const { treeNode } = this.props;
+ const { editing } = this.state;
+ const { title } = treeNode;
+ const depth = treeNode.depth;
+ const indent = depth * 12;
+
+ const titleClassName = classNames('tree-node-title');
+ const titleTextClassName = classNames('tree-node-title-text', {
+ 'x-if-text': treeNode.hasXIf(),
+ 'x-for-text': treeNode.hasXFor(),
+ });
+ const xForValue = treeNode.xForValue;
+
+ return (
+ ();
+ private dispose?: () => void;
+
+ hover(e: any) {
+ const treeNode = tree.getTreeNodeByEvent(e);
+
+ if (!treeNode) {
+ return;
+ }
+
+ edging.watch(treeNode.node);
+ }
+
+ onClick(e: any) {
+ if (this.dragEvent && (this.dragEvent as any).shaken) {
+ return;
+ }
+
+ const isMulti = e.metaKey || e.ctrlKey;
+
+ const treeNode = tree.getTreeNodeByEvent(e);
+
+ if (!treeNode) {
+ return;
+ }
+
+ treeNode.select(isMulti);
+
+ // 通知主画板滚动到对应位置
+ activeTracker.track(treeNode.node);
+ }
+
+ onMouseOver(e: any) {
+ if (dragon.dragging) {
+ return;
+ }
+
+ this.hover(e);
+ }
+
+ onMouseUp(e: any) {
+ if (dragon.dragging) {
+ return;
+ }
+
+ this.hover(e);
+ }
+
+ onMouseLeave() {
+ edging.watch(null);
+ }
+
+ componentDidMount(): void {
+ if (this.ref.current) {
+ dragon.from(this.ref.current, (e: MouseEvent) => {
+ this.dragEvent = e;
+
+ const treeNode = tree.getTreeNodeByEvent(e);
+ if (treeNode) {
+ return {
+ type: DragTargetType.Nodes,
+ nodes: [treeNode.node],
+ };
+ }
+ return null;
+ });
+ }
+ }
+
+ render() {
+ const { tree } = this.props;
+ const root = tree.root;
+ return (
+ {node.title} );
+ items.unshift(
@@ -126,7 +125,4 @@ function selectNode(node: Node) {
node.select();
}
-registerSetter('ArraySetter', ArraySetter);
-registerSetter('ObjectSetter', ObjectSetter);
-
-export { registerSetter, createSetterContent, getSetter, createSettingFieldView };
+export { createSettingFieldView };
diff --git a/packages/plugin-settings/src/main.ts b/packages/plugin-settings/src/main.ts
index 2cd28bbfc..f08a70370 100644
--- a/packages/plugin-settings/src/main.ts
+++ b/packages/plugin-settings/src/main.ts
@@ -2,9 +2,7 @@ import { EventEmitter } from 'events';
import { uniqueId } from '../../utils/unique-id';
import { ComponentMeta } from '../../designer/src/designer/component-meta';
import Node from '../../designer/src/designer/document/node/node';
-import { TitleContent } from '../../globals';
-import { ReactElement, ComponentType as ReactComponentType, isValidElement } from 'react';
-import { isReactComponent } from '../../utils/is-react';
+import { TitleContent, FieldExtraProps, SetterType, CustomView, FieldConfig, isCustomView } from '../../globals';
import Designer from '../../designer/src/designer/designer';
import { Selection } from '../../designer/src/designer/document/selection';
@@ -61,99 +59,6 @@ export interface SettingTarget {
// 设置附属属性值
setExtraPropValue(propName: string, value: any): void;
-
- /*
- // 所有属性值数据
- readonly props: object;
- // 设置多个属性值，替换原有值
- setProps(data: object): void;
- // 设置多个属性值，和原有值合并
- mergeProps(data: object): void;
- // 绑定属性值发生变化时
- onPropsChange(fn: () => void): () => void;
- */
-}
-
-export type CustomView = ReactElement | ReactComponentType;
-
-export function isCustomView(obj: any): obj is CustomView {
- return obj && (isValidElement(obj) || isReactComponent(obj));
-}
-
-export type DynamicProps = (field: SettingField) => object;
-
-export interface SetterConfig {
- /**
- * if *string* passed must be a registered Setter Name
- */
- componentName: string | CustomView;
- /**
- * the props pass to Setter Component
- */
- props?: object | DynamicProps;
- children?: any;
- isRequired?: boolean;
- initialValue?: any | ((field: SettingField) => any);
-}
-
-/**
- * if *string* passed must be a registered Setter Name, future support blockSchema
- */
-export type SetterType = SetterConfig | string | CustomView;
-
-export interface FieldExtraProps {
- /**
- * 是否必填参数
- */
- isRequired?: boolean;
- /**
- * default value of target prop for setter use
- */
- defaultValue?: 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) => boolean;
- /**
- * default collapsed when display accordion
- */
- defaultCollapsed?: boolean;
- /**
- * important field
- */
- important?: boolean;
- /**
- * internal use
- */
- forceInline?: number;
-}
-
-export interface FieldConfig extends FieldExtraProps {
- type?: 'field' | 'group';
- /**
- * the name of this setting field, which used in quickEditor
- */
- name: string | number;
- /**
- * the field title
- * @default sameas .name
- */
- title?: TitleContent;
- /**
- * the field body contains when .type = 'field'
- */
- setter?: SetterType;
- /**
- * the setting items which group body contains when .type = 'group'
- */
- items?: FieldConfig[];
- /**
- * extra props for field
- */
- extraProps?: FieldExtraProps;
}
export class SettingField implements SettingTarget {
diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts
deleted file mode 100644
index 5c1ba15d7..000000000
--- a/packages/plugin-settings/src/register-transducer.ts
+++ /dev/null
@@ -1,469 +0,0 @@
-import {
- PropConfig,
- PropType,
- Shape,
- OneOf,
- ObjectOf,
- ArrayOf,
- OneOfType,
-} from '../../designer/src/designer/prop-config';
-import { SetterType, FieldConfig, SettingField } from './main';
-import { registerMetadataTransducer } from '../../designer/src/designer/component-meta';
-
-export function propConfigToFieldConfig(propConfig: PropConfig): FieldConfig {
- const { name, description } = propConfig;
- const title = {
- label: description?.slice(0, 10) || name,
- tip: description ? `${name} | ${description}` : undefined,
- };
- return {
- title,
- ...propConfig,
- setter: propTypeToSetter(propConfig.propType),
- };
-}
-
-export function propTypeToSetter(propType: PropType): SetterType {
- let typeName: string;
- let isRequired: boolean | undefined = false;
- if (typeof propType === 'string') {
- typeName = propType;
- } else {
- typeName = propType.type;
- isRequired = propType.isRequired;
- }
- // TODO: use mixinSetter wrapper
- switch (typeName) {
- case 'string':
- return {
- componentName: 'StringSetter',
- isRequired,
- initialValue: '',
- };
-
- case 'number':
- return {
- componentName: 'NumberSetter',
- isRequired,
- initialValue: 0,
- };
- case 'bool':
- return {
- componentName: 'NumberSetter',
- isRequired,
- initialValue: false,
- };
- case 'oneOf':
- const dataSource = ((propType as OneOf).value || []).map((value, index) => {
- const t = typeof value;
- return {
- label: t === 'string' || t === 'number' || t === 'boolean' ? String(value) : `value ${index}`,
- value,
- };
- });
- const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioGroupSetter';
- return {
- componentName,
- props: { dataSource },
- isRequired,
- initialValue: dataSource[0] ? dataSource[0].value : null,
- };
-
- case 'element':
- case 'node': // TODO: use Mixin
- return {
- // slotSetter
- componentName: 'NodeSetter',
- props: {
- mode: typeName,
- },
- isRequired,
- initialValue: {
- type: 'JSSlot',
- value: '',
- },
- };
- case 'shape':
- case 'exact':
- const items = (propType as Shape).value.map(item => propConfigToFieldConfig(item));
- return {
- componentName: 'ObjectSetter',
- props: {
- config: {
- items,
- extraSetter: typeName === 'shape' ? propTypeToSetter('any') : null,
- },
- },
- isRequired,
- initialValue: (field: any) => {
- const data: any = {};
- items.forEach(item => {
- let initial = item.defaultValue;
- if (initial == null && item.setter && typeof item.setter === 'object') {
- initial = (item.setter as any).initialValue;
- }
- data[item.name] = initial ? (typeof initial === 'function' ? initial(field) : initial) : null;
- });
- return data;
- },
- };
- case 'object':
- case 'objectOf':
- return {
- componentName: 'ObjectSetter',
- props: {
- config: {
- extraSetter: propTypeToSetter(typeName === 'objectOf' ? (propType as ObjectOf).value : 'any'),
- },
- },
- isRequired,
- };
- case 'array':
- case 'arrayOf':
- return {
- componentName: 'ArraySetter',
- props: {
- itemSetter: propTypeToSetter(typeName === 'arrayOf' ? (propType as ArrayOf).value : 'any'),
- },
- isRequired,
- initialValue: [],
- };
- case 'func':
- return {
- componentName: 'FunctionSetter',
- isRequired,
- initialValue: {
- type: 'JSFunction',
- value: 'function(){}',
- },
- };
- case 'oneOfType':
- return {
- componentName: 'MixinSetter',
- props: {
- // TODO:
- // setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
- },
- isRequired,
- };
- }
-
- return {
- componentName: 'MixinSetter',
- isRequired,
- };
-}
-
-const EVENT_RE = /^on[A-Z][\w]*$/;
-
-// parseProps
-registerMetadataTransducer(metadata => {
- const { configure } = metadata;
-
- if (!metadata.props) {
- return {
- ...metadata,
- configure: {
- ...configure,
- props: [],
- },
- };
- }
- const { props = [], component = {}, events = {}, styles = {} } = configure;
- const supportedEvents: any[] | null = (events as any).supportedEvents ? null : [];
-
- metadata.props.forEach(prop => {
- const { name, propType, description } = prop;
- if (
- name === 'children' &&
- (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
- ) {
- if (component.isContainer !== false) {
- component.isContainer = true;
- return;
- }
- }
-
- if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) {
- if (supportedEvents) {
- supportedEvents.push({
- name,
- description,
- });
- (events as any).supportedEvents = supportedEvents;
- }
- return;
- }
-
- if (name === 'className' && (propType === 'string' || propType === 'any')) {
- if ((styles as any).supportClassName == null) {
- (styles as any).supportClassName = true;
- }
- return;
- }
-
- if (name === 'style' && (propType === 'object' || propType === 'any')) {
- if ((styles as any).supportInlineStyle == null) {
- (styles as any).supportInlineStyle = true;
- }
- return;
- }
-
- props.push(propConfigToFieldConfig(prop));
- });
-
- return {
- ...metadata,
- configure: {
- ...configure,
- props,
- events,
- styles,
- component,
- },
- };
-});
-
-// addon/platform custom
-registerMetadataTransducer(metadata => {
- const { componentName, configure = {} } = metadata;
- if (componentName === 'Leaf') {
- return {
- ...metadata,
- configure: {
- ...configure,
- combined: [
- {
- name: 'children',
- title: '内容设置',
- setter: {
- componentName: 'MixinSetter',
- props: {
- // TODO:
- setters: [
- {
- componentName: 'StringSetter',
- props: {
- // TODO: textarea mode
- multiline: true,
- },
- initialValue: '',
- },
- {
- componentName: 'ExpressionSetter',
- initialValue: {
- type: 'JSExpression',
- value: '',
- },
- },
- ],
- },
- },
- },
- ],
- },
- };
- }
-
- const { props, events = {}, styles } = configure as any;
- const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
- const eventsDefinition: any[] = [];
- const supportedLifecycles = events.supportedLifecycles || (isRoot ? [
- {
- description: '初始化时',
- name: 'constructor',
- },
- {
- description: '装载后',
- name: 'componentDidMount',
- },
- {
- description: '更新时',
- name: 'componentDidMount',
- },
- {
- description: '卸载时',
- name: 'componentWillUnmount',
- },
- ] : null);
- if (supportedLifecycles) {
- eventsDefinition.push({
- type: 'lifeCycleEvent',
- title: '生命周期',
- list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
- });
- }
- if (events.supportedEvents) {
- eventsDefinition.push({
- type: 'events',
- title: '事件',
- list: (events.supportedEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
- });
- }
- // 通用设置
- const propsGroup = props || [];
- propsGroup.push({
- name: '#generals',
- title: '通用',
- items: [
- {
- name: 'id',
- title: 'ID',
- setter: 'StringSetter',
- },
- {
- name: 'key',
- title: 'Key',
- // todo: use Mixin
- setter: 'StringSetter',
- },
- {
- name: 'ref',
- title: 'Ref',
- setter: 'StringSetter',
- },
- {
- name: '!more',
- title: '更多',
- setter: 'PropertiesSetter',
- },
- ],
- });
- const combined = [
- {
- title: '属性',
- name: '#props',
- items: propsGroup,
- },
- ];
- const stylesGroup = [];
- if (styles?.supportClassName) {
- stylesGroup.push({
- name: 'className',
- title: '类名绑定',
- setter: 'ClassNameSetter',
- });
- }
- if (styles?.supportInlineStyle) {
- stylesGroup.push({
- name: 'style',
- title: '行内样式',
- setter: 'StyleSetter',
- });
- }
- if (stylesGroup.length > 0) {
- combined.push({
- name: '#styles',
- title: '样式',
- items: stylesGroup,
- });
- }
-
- if (eventsDefinition.length > 0) {
- combined.push({
- name: '#events',
- title: '事件',
- items: [
- {
- name: '!events',
- title: '事件设置',
- setter: {
- componentName: 'EventsSetter',
- props: {
- definition: eventsDefinition,
- },
- },
- getValue(field: SettingField, val?: any[]) {
- // todo:
- return val;
- },
-
- setValue(field: SettingField, eventDataList: any[]) {
- // todo:
- return;
- },
- },
- ],
- });
- }
-
- if (isRoot) {
- combined.push({
- name: '#advanced',
- title: '高级',
- items: [],
- });
- } else {
- combined.push({
- name: '#advanced',
- title: '高级',
- items: [
- {
- name: '__condition',
- title: '条件显示',
- setter: 'ExpressionSetter',
- },
- {
- name: '#loop',
- title: '循环',
- items: [
- {
- name: '__loop',
- title: '循环数据',
- setter: {
- componentName: 'MixinSetter',
- props: {
- // TODO:
- setters: [
- {
- componentName: 'JSONSetter',
- props: {
- mode: 'popup',
- placeholder: '编辑数据',
- },
- },
- {
- componentName: 'ExpressionSetter',
- props: {
- placeholder: '绑定数据',
- },
- },
- ],
- },
- },
- },
- {
- name: '__loopArgs.0',
- title: '迭代变量名',
- setter: {
- componentName: 'StringSetter',
- placeholder: '默认为 item',
- },
- },
- {
- name: '__loopArgs.1',
- title: '索引变量名',
- setter: {
- componentName: 'StringSetter',
- placeholder: '默认为 index',
- },
- },
- {
- name: 'key',
- title: 'Key',
- setter: 'ExpressionSetter',
- },
- ],
- },
- ],
- });
- }
-
- return {
- ...metadata,
- configure: {
- ...configure,
- combined,
- },
- };
-});
diff --git a/packages/plugin-settings/src/builtin-setters/array-setter/index.tsx b/packages/plugin-settings/src/setters/array-setter/index.tsx
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/array-setter/index.tsx
rename to packages/plugin-settings/src/setters/array-setter/index.tsx
diff --git a/packages/plugin-settings/src/builtin-setters/array-setter/sortable.less b/packages/plugin-settings/src/setters/array-setter/sortable.less
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/array-setter/sortable.less
rename to packages/plugin-settings/src/setters/array-setter/sortable.less
diff --git a/packages/plugin-settings/src/builtin-setters/array-setter/sortable.tsx b/packages/plugin-settings/src/setters/array-setter/sortable.tsx
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/array-setter/sortable.tsx
rename to packages/plugin-settings/src/setters/array-setter/sortable.tsx
diff --git a/packages/plugin-settings/src/builtin-setters/array-setter/style.less b/packages/plugin-settings/src/setters/array-setter/style.less
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/array-setter/style.less
rename to packages/plugin-settings/src/setters/array-setter/style.less
diff --git a/packages/plugin-settings/src/builtin-setters/object-setter/index.tsx b/packages/plugin-settings/src/setters/object-setter/index.tsx
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/object-setter/index.tsx
rename to packages/plugin-settings/src/setters/object-setter/index.tsx
diff --git a/packages/plugin-settings/src/builtin-setters/object-setter/style.less b/packages/plugin-settings/src/setters/object-setter/style.less
similarity index 100%
rename from packages/plugin-settings/src/builtin-setters/object-setter/style.less
rename to packages/plugin-settings/src/setters/object-setter/style.less
diff --git a/packages/plugin-settings/src/setters/register.ts b/packages/plugin-settings/src/setters/register.ts
new file mode 100644
index 000000000..08b246c58
--- /dev/null
+++ b/packages/plugin-settings/src/setters/register.ts
@@ -0,0 +1,6 @@
+import ArraySetter from './array-setter';
+import ObjectSetter from './object-setter';
+import { registerSetter } from '../../../globals';
+
+registerSetter('ArraySetter', ArraySetter);
+registerSetter('ObjectSetter', ObjectSetter);
diff --git a/packages/plugin-settings/src/settings-pane.tsx b/packages/plugin-settings/src/settings-pane.tsx
index 710210597..c721aa850 100644
--- a/packages/plugin-settings/src/settings-pane.tsx
+++ b/packages/plugin-settings/src/settings-pane.tsx
@@ -1,62 +1,15 @@
-import { Component, ReactNode } from 'react';
+import { Component } from 'react';
import { createContent } from '../../utils/create-content';
import { shallowEqual } from '../../utils/shallow-equal';
import {
SettingField,
- CustomView,
isSettingField,
SettingTarget,
- SetterConfig,
- isCustomView,
- DynamicProps,
} from './main';
import { Field, FieldGroup } from './field';
-import { TitleContent } from '../../globals';
+import { CustomView, DynamicProps, intl, shallowIntl, isSetterConfig, createSetterContent } from '../../globals';
import PopupService from './popup';
-export type RegisteredSetter = {
- component: CustomView;
- defaultProps?: object;
- title?: TitleContent;
-};
-
-const settersMap = new Map();
-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);
-}
-
-export function getSetter(type: string): RegisteredSetter | null {
- return settersMap.get(type) || null;
-}
-
-export function createSetterContent(setter: any, props: object): ReactNode {
- if (typeof setter === 'string') {
- setter = getSetter(setter);
- if (!setter) {
- return null;
- }
- if (setter.defaultProps) {
- props = {
- ...setter.defaultProps,
- ...props,
- };
- }
- setter = setter.component;
- }
-
- return createContent(setter, props);
-}
-
-function isSetterConfig(obj: any): obj is SetterConfig {
- return obj && typeof obj === 'object' && 'componentName' in obj && !isCustomView(obj);
-}
-
class SettingFieldView extends Component<{ field: SettingField }> {
state = {
visible: false,
@@ -98,7 +51,11 @@ class SettingFieldView extends Component<{ field: SettingField }> {
state.value = null;
state.setterProps.multiValue = true;
if (!('placeholder' in props)) {
- state.setterProps.placeholder = '多种值';
+ state.setterProps.placeholder = intl({
+ type: 'i18n',
+ 'zh-CN': '多种值',
+ 'en-US': 'Multiple Value'
+ });
}
}
// TODO: error handling
@@ -142,7 +99,8 @@ class SettingFieldView extends Component<{ field: SettingField }> {
return (
{createSetterContent(this.setterType, {
- ...setterProps,
+ // TODO: refresh intl
+ ...shallowIntl(setterProps),
forceInline: extraProps.forceInline,
key: field.id,
// === injection
diff --git a/packages/plugin-settings/src/style.less b/packages/plugin-settings/src/style.less
index 3255da07b..592dc3c9b 100644
--- a/packages/plugin-settings/src/style.less
+++ b/packages/plugin-settings/src/style.less
@@ -106,6 +106,7 @@
min-width: 0;
.next-tabs-tab-inner {
text-align: center;
+ padding: 12px 0;
}
}
}
diff --git a/packages/plugin-settings/src/transducers/addon-combine.ts b/packages/plugin-settings/src/transducers/addon-combine.ts
new file mode 100644
index 000000000..b354a0f31
--- /dev/null
+++ b/packages/plugin-settings/src/transducers/addon-combine.ts
@@ -0,0 +1,253 @@
+import { TransformedComponentMetadata, FieldConfig } from '../../../globals/src';
+import { SettingField } from '../main';
+
+export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata {
+ const { componentName, configure = {} } = metadata;
+ if (componentName === 'Leaf') {
+ return {
+ ...metadata,
+ configure: {
+ ...configure,
+ combined: [
+ {
+ name: 'children',
+ title: { type: 'i18n', 'zh-CN': '内容设置', 'en-US': 'Content' },
+ setter: {
+ componentName: 'MixinSetter',
+ props: {
+ // TODO:
+ setters: [
+ {
+ componentName: 'StringSetter',
+ props: {
+ // TODO: textarea mode
+ multiline: true,
+ },
+ initialValue: '',
+ },
+ {
+ componentName: 'ExpressionSetter',
+ initialValue: {
+ type: 'JSExpression',
+ value: '',
+ },
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ };
+ }
+
+ const { props, events = {}, styles } = configure as any;
+ const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
+ const eventsDefinition: any[] = [];
+ const supportedLifecycles =
+ events.supportedLifecycles ||
+ (isRoot
+ ? [
+ {
+ description: '初始化时',
+ name: 'constructor',
+ },
+ {
+ description: '装载后',
+ name: 'componentDidMount',
+ },
+ {
+ description: '更新时',
+ name: 'componentDidMount',
+ },
+ {
+ description: '卸载时',
+ name: 'componentWillUnmount',
+ },
+ ]
+ : null);
+ if (supportedLifecycles) {
+ eventsDefinition.push({
+ type: 'lifeCycleEvent',
+ title: '生命周期',
+ list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
+ });
+ }
+ if (events.supportedEvents) {
+ eventsDefinition.push({
+ type: 'events',
+ title: '事件',
+ list: (events.supportedEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
+ });
+ }
+ // 通用设置
+ const propsGroup = props || [];
+ propsGroup.push({
+ name: '#generals',
+ title: { type: 'i18n', 'zh-CN': '通用', 'en-US': 'General' },
+ items: [
+ {
+ name: 'id',
+ title: 'ID',
+ setter: 'StringSetter',
+ },
+ {
+ name: 'key',
+ title: 'Key',
+ // todo: use Mixin
+ setter: 'StringSetter',
+ },
+ {
+ name: 'ref',
+ title: 'Ref',
+ setter: 'StringSetter',
+ },
+ {
+ name: '!more',
+ title: '更多',
+ setter: 'PropertiesSetter',
+ },
+ ],
+ });
+ const combined: FieldConfig[] = [
+ {
+ title: { type: 'i18n', 'zh-CN': '属性', 'en-US': 'Props' },
+ name: '#props',
+ items: propsGroup,
+ },
+ ];
+ const stylesGroup: FieldConfig[] = [];
+ if (styles?.supportClassName) {
+ stylesGroup.push({
+ name: 'className',
+ title: { type: 'i18n', 'zh-CN': '类名绑定', 'en-US': 'ClassName' },
+ setter: 'ClassNameSetter',
+ });
+ }
+ if (styles?.supportInlineStyle) {
+ stylesGroup.push({
+ name: 'style',
+ title: { type: 'i18n', 'zh-CN': '行内样式', 'en-US': 'Style' },
+ setter: 'StyleSetter',
+ });
+ }
+ if (stylesGroup.length > 0) {
+ combined.push({
+ name: '#styles',
+ title: { type: 'i18n', 'zh-CN': '样式', 'en-US': 'Styles' },
+ items: stylesGroup,
+ });
+ }
+
+ if (eventsDefinition.length > 0) {
+ combined.push({
+ name: '#events',
+ title: { type: 'i18n', 'zh-CN': '事件', 'en-US': 'Events' },
+ items: [
+ {
+ name: '!events',
+ title: { type: 'i18n', 'zh-CN': '事件设置', 'en-US': 'Events' },
+ setter: {
+ componentName: 'EventsSetter',
+ props: {
+ definition: eventsDefinition,
+ },
+ },
+ getValue(field: SettingField, val?: any[]) {
+ // todo:
+ return val;
+ },
+
+ setValue(field: SettingField, eventDataList: any[]) {
+ // todo:
+ return;
+ },
+ },
+ ],
+ });
+ }
+
+ if (isRoot) {
+ combined.push({
+ name: '#advanced',
+ title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
+ items: [],
+ });
+ } else {
+ combined.push({
+ name: '#advanced',
+ title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
+ items: [
+ {
+ name: '__condition',
+ title: { type: 'i18n', 'zh-CN': '条件显示', 'en-US': 'Condition' },
+ setter: 'ExpressionSetter',
+ },
+ {
+ name: '#loop',
+ title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' },
+ items: [
+ {
+ name: '__loop',
+ title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
+ setter: {
+ componentName: 'MixinSetter',
+ props: {
+ // TODO:
+ setters: [
+ {
+ componentName: 'JSONSetter',
+ props: {
+ mode: 'popup',
+ placeholder: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data' },
+ },
+ },
+ {
+ componentName: 'ExpressionSetter',
+ props: {
+ placeholder: { type: 'i18n', 'zh-CN': '绑定数据', 'en-US': 'Bind Data' },
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ name: '__loopArgs.0',
+ title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' },
+ setter: {
+ componentName: 'StringSetter',
+ props: {
+ placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
+ }
+ },
+ },
+ {
+ name: '__loopArgs.1',
+ title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' },
+ setter: {
+ componentName: 'StringSetter',
+ props: {
+ placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
+ }
+ },
+ },
+ {
+ name: 'key',
+ title: 'Key',
+ setter: 'ExpressionSetter',
+ },
+ ],
+ },
+ ],
+ });
+ }
+
+ return {
+ ...metadata,
+ configure: {
+ ...configure,
+ combined,
+ },
+ };
+}
diff --git a/packages/plugin-settings/src/transducers/parse-props.ts b/packages/plugin-settings/src/transducers/parse-props.ts
new file mode 100644
index 000000000..abf54d5bf
--- /dev/null
+++ b/packages/plugin-settings/src/transducers/parse-props.ts
@@ -0,0 +1,222 @@
+import { FieldConfig, PropConfig, PropType, SetterType, OneOf, Shape, ObjectOf, ArrayOf, TransformedComponentMetadata } from '../../../globals/src';
+
+function propConfigToFieldConfig(propConfig: PropConfig): FieldConfig {
+ const { name, description } = propConfig;
+ const title = {
+ label: {
+ type: 'i18n',
+ 'en-US': name,
+ 'zh-CN': description?.slice(0, 10) || name,
+ },
+ tip: description ? `${name} | ${description}` : undefined,
+ };
+ return {
+ title,
+ ...propConfig,
+ setter: propTypeToSetter(propConfig.propType),
+ };
+}
+
+function propTypeToSetter(propType: PropType): SetterType {
+ let typeName: string;
+ let isRequired: boolean | undefined = false;
+ if (typeof propType === 'string') {
+ typeName = propType;
+ } else {
+ typeName = propType.type;
+ isRequired = propType.isRequired;
+ }
+ // TODO: use mixinSetter wrapper
+ switch (typeName) {
+ case 'string':
+ return {
+ componentName: 'StringSetter',
+ isRequired,
+ initialValue: '',
+ };
+
+ case 'number':
+ return {
+ componentName: 'NumberSetter',
+ isRequired,
+ initialValue: 0,
+ };
+ case 'bool':
+ return {
+ componentName: 'NumberSetter',
+ isRequired,
+ initialValue: false,
+ };
+ case 'oneOf':
+ const dataSource = ((propType as OneOf).value || []).map((value, index) => {
+ const t = typeof value;
+ return {
+ label: t === 'string' || t === 'number' || t === 'boolean' ? String(value) : `value ${index}`,
+ value,
+ };
+ });
+ const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioGroupSetter';
+ return {
+ componentName,
+ props: { dataSource },
+ isRequired,
+ initialValue: dataSource[0] ? dataSource[0].value : null,
+ };
+
+ case 'element':
+ case 'node': // TODO: use Mixin
+ return {
+ // slotSetter
+ componentName: 'NodeSetter',
+ props: {
+ mode: typeName,
+ },
+ isRequired,
+ initialValue: {
+ type: 'JSSlot',
+ value: '',
+ },
+ };
+ case 'shape':
+ case 'exact':
+ const items = (propType as Shape).value.map(item => propConfigToFieldConfig(item));
+ return {
+ componentName: 'ObjectSetter',
+ props: {
+ config: {
+ items,
+ extraSetter: typeName === 'shape' ? propTypeToSetter('any') : null,
+ },
+ },
+ isRequired,
+ initialValue: (field: any) => {
+ const data: any = {};
+ items.forEach(item => {
+ let initial = item.defaultValue;
+ if (initial == null && item.setter && typeof item.setter === 'object') {
+ initial = (item.setter as any).initialValue;
+ }
+ data[item.name] = initial ? (typeof initial === 'function' ? initial(field) : initial) : null;
+ });
+ return data;
+ },
+ };
+ case 'object':
+ case 'objectOf':
+ return {
+ componentName: 'ObjectSetter',
+ props: {
+ config: {
+ extraSetter: propTypeToSetter(typeName === 'objectOf' ? (propType as ObjectOf).value : 'any'),
+ },
+ },
+ isRequired,
+ };
+ case 'array':
+ case 'arrayOf':
+ return {
+ componentName: 'ArraySetter',
+ props: {
+ itemSetter: propTypeToSetter(typeName === 'arrayOf' ? (propType as ArrayOf).value : 'any'),
+ },
+ isRequired,
+ initialValue: [],
+ };
+ case 'func':
+ return {
+ componentName: 'FunctionSetter',
+ isRequired,
+ initialValue: {
+ type: 'JSFunction',
+ value: 'function(){}',
+ },
+ };
+ case 'oneOfType':
+ return {
+ componentName: 'MixinSetter',
+ props: {
+ // TODO:
+ // setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
+ },
+ isRequired,
+ };
+ }
+
+ return {
+ componentName: 'MixinSetter',
+ isRequired,
+ };
+}
+
+const EVENT_RE = /^on[A-Z][\w]*$/;
+
+export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata {
+ const { configure } = metadata;
+ if (configure.props) {
+ return metadata;
+ }
+
+ if (!metadata.props) {
+ return {
+ ...metadata,
+ configure: {
+ ...configure,
+ props: [],
+ },
+ };
+ }
+ const { component = {}, events = {}, styles = {} } = configure;
+ const supportedEvents: any[] | null = (events as any).supportedEvents ? null : [];
+ const props: FieldConfig[] = [];
+
+ metadata.props.forEach(prop => {
+ const { name, propType, description } = prop;
+ if (
+ name === 'children' &&
+ (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
+ ) {
+ if (component.isContainer !== false) {
+ component.isContainer = true;
+ return;
+ }
+ }
+
+ if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) {
+ if (supportedEvents) {
+ supportedEvents.push({
+ name,
+ description,
+ });
+ (events as any).supportedEvents = supportedEvents;
+ }
+ return;
+ }
+
+ if (name === 'className' && (propType === 'string' || propType === 'any')) {
+ if ((styles as any).supportClassName == null) {
+ (styles as any).supportClassName = true;
+ }
+ return;
+ }
+
+ if (name === 'style' && (propType === 'object' || propType === 'any')) {
+ if ((styles as any).supportInlineStyle == null) {
+ (styles as any).supportInlineStyle = true;
+ }
+ return;
+ }
+
+ props.push(propConfigToFieldConfig(prop));
+ });
+
+ return {
+ ...metadata,
+ configure: {
+ ...configure,
+ props,
+ events,
+ styles,
+ component,
+ },
+ };
+}
diff --git a/packages/plugin-settings/src/transducers/register.ts b/packages/plugin-settings/src/transducers/register.ts
new file mode 100644
index 000000000..81c6ae10d
--- /dev/null
+++ b/packages/plugin-settings/src/transducers/register.ts
@@ -0,0 +1,9 @@
+import { registerMetadataTransducer } from '../../../globals';
+import parseProps from './parse-props';
+import addonCombine from './addon-combine';
+
+// parseProps
+registerMetadataTransducer(parseProps);
+
+// addon/platform custom
+registerMetadataTransducer(addonCombine);
diff --git a/packages/protocal/README.md b/packages/protocal/README.md
deleted file mode 100644
index 6eaa97500..000000000
--- a/packages/protocal/README.md
+++ /dev/null
@@ -1 +0,0 @@
-通用协议层
{children}
;
+ }
+}
diff --git a/packages/plugin-outline-pane/src/views/tree-node-icon-view.tsx b/packages/plugin-outline-pane/src/views/tree-node-icon-view.tsx
new file mode 100644
index 000000000..6b87e60dc
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/tree-node-icon-view.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import DIVIcon from 'my-icons/container.svg';
+import IMGIcon from 'my-icons/image.svg';
+import { observer } from '@ali/recore';
+
+@observer
+export default class TreeNodeIconView extends React.Component<{ tagName: string }> {
+ shouldComponentUpdate(): boolean {
+ return false;
+ }
+
+ render() {
+ const { tagName } = this.props;
+ switch (tagName) {
+ case 'img': {
+ console.log('>>> tag:', tagName);
+ return
+
+ );
+ }
+}
+
+export function findTargetByEvent(e: MouseEvent): HTMLElement | null {
+ return (e.target as HTMLElement).closest('.tree-node') as HTMLElement;
+}
+
+export function getNodeIDFromTarget(target: HTMLElement): string | null {
+ return target.getAttribute('data-id');
+}
+
+export function getNodeIDByEvent(e: MouseEvent): string | null {
+ const target = findTargetByEvent(e);
+ if (target) {
+ return getNodeIDFromTarget(target);
+ }
+
+ return null;
+}
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
new file mode 100644
index 000000000..19125d7a6
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -0,0 +1,176 @@
+import { observer } from '@ali/recore';
+import React, { Component, KeyboardEvent } from 'react';
+import classNames from 'classnames';
+import ElementNode from '../../../../document/node/element-node';
+import { isElementNode } from '../../../../document/node';
+import { TreeNodeProps } from './tree-node';
+import TreeNodeIconView from './tree-node-icon-view';
+import CollapsedIcon from '../icons/caret-right.svg';
+import EyeCloseIcon from 'my-icons/eye-close.svg';
+
+interface IState {
+ editing: boolean;
+}
+
+@observer
+export default class TreeNodeTitle extends Component {
+ e.stopPropagation();
+ this.toggleExpanded();
+ }}
+ >
+
+ );
+ }
+
+ setTitle(xtitle: string = '') {
+ const { treeNode } = this.props;
+ const node = treeNode.node as ElementNode;
+ const title = node.getProp('x-title');
+ if (xtitle && xtitle !== node.tagName) {
+ title.code = `"${xtitle}"`;
+ } else {
+ title.remove();
+ }
+ }
+
+ enableEdit = () => {
+ this.setState({
+ editing: true,
+ });
+ }
+
+ cancelEdit() {
+ this.setState({
+ editing: false,
+ });
+ }
+
+ saveEdit = () => {
+ const { current } = this.inputRef;
+
+ if (current) {
+ this.setTitle(current.value);
+ }
+
+ this.cancelEdit();
+ }
+
+ handleKeyUp(e: KeyboardEvent treeNode.mount(ref)}
+ style={{ paddingLeft: indent, marginLeft: -indent }}
+ >
+ {this.renderExpandIcon()}
+
+ );
+ }
+}
diff --git a/packages/plugin-outline-pane/src/views/tree.tsx b/packages/plugin-outline-pane/src/views/tree.tsx
new file mode 100644
index 000000000..551147ea9
--- /dev/null
+++ b/packages/plugin-outline-pane/src/views/tree.tsx
@@ -0,0 +1,81 @@
+@observer
+export default class TreeView extends React.Component {
+ private ref = React.createRef
+
+
+ {
+ editing ?
+ {this.handleKeyUp(e)}}
+ ref={this.inputRef}
+ />
+ :
+
+
+ {title.label}
+ {xForValue && (
+
+ (x {xForValue.length})
+
+ )}
+ {treeNode.hasXIf() && (
+
+ {treeNode.flowHidden ? '' : '(visible)'}
+
+ )}
+
+ }
+
+
+ {isElementNode(treeNode.node) && !editing && (
+ {
+ e.stopPropagation();
+ this.toggleIgnored();
+ }}
+ />
+ )}
+
+
+
+ );
+ }
+}
diff --git a/packages/plugin-outline-pane/tsconfig.json b/packages/plugin-outline-pane/tsconfig.json
new file mode 100644
index 000000000..aad669598
--- /dev/null
+++ b/packages/plugin-outline-pane/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./node_modules/@recore/config/tsconfig",
+ "compilerOptions": {
+ "experimentalDecorators": true
+ },
+ "include": [
+ "./src/"
+ ]
+}
diff --git a/packages/plugin-setters/.eslintignore b/packages/plugin-setters/.eslintignore
new file mode 100644
index 000000000..1fb2edf7c
--- /dev/null
+++ b/packages/plugin-setters/.eslintignore
@@ -0,0 +1,6 @@
+.idea/
+.vscode/
+build/
+.*
+~*
+node_modules
diff --git a/packages/plugin-setters/.eslintrc b/packages/plugin-setters/.eslintrc
new file mode 100644
index 000000000..db78d35d1
--- /dev/null
+++ b/packages/plugin-setters/.eslintrc
@@ -0,0 +1,3 @@
+{
+ "extends": "./node_modules/@recore/config/.eslintrc"
+}
diff --git a/packages/plugin-setters/.prettierrc b/packages/plugin-setters/.prettierrc
new file mode 100644
index 000000000..8748c5ed3
--- /dev/null
+++ b/packages/plugin-setters/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "printWidth": 120,
+ "trailingComma": "all"
+}
diff --git a/packages/plugin-setters/package.json b/packages/plugin-setters/package.json
index 05ce25bac..5b11b4045 100644
--- a/packages/plugin-setters/package.json
+++ b/packages/plugin-setters/package.json
@@ -1,5 +1,21 @@
{
+ "name": "@ali/lowcode-plugin-setters",
+ "version": "0.0.0",
+ "description": "xxx for Ali lowCode engine",
+ "main": "src/index.tsx",
+ "files": [
+ "lib"
+ ],
+ "scripts": {
+ "build": "tsc",
+ "test": "ava",
+ "test:snapshot": "ava --update-snapshots"
+ },
"dependencies": {
+ "@alifd/next": "^1.19.16",
+ "classnames": "^2.2.6",
+ "react": "^16",
+ "react-dom": "^16.7.0",
"@ali/iceluna-comp-expression": "^1.0.6",
"@ali/iceluna-comp-form": "^1.0.20",
"@ali/iceluna-comp-list": "^1.0.26",
@@ -7,12 +23,32 @@
"@ali/iceluna-comp-object-button": "^1.0.23",
"@ali/iceluna-comp-react-node": "^1.0.5",
"@ali/iceluna-sdk": "^1.0.5-beta.24",
- "@alifd/next": "^1.19.16",
- "@alife/next": "^1.19.16",
"acorn": "^6.4.1",
"intl-messageformat": "^8.2.1",
"monaco-editor": "^0.20.0",
"qs": "^6.9.1",
"react-monaco-editor": "^0.34.0"
+ },
+ "devDependencies": {
+ "@recore/config": "^2.0.0",
+ "@types/classnames": "^2.2.7",
+ "@types/node": "^13.7.1",
+ "@types/react": "^16",
+ "@types/react-dom": "^16",
+ "eslint": "^6.5.1",
+ "prettier": "^1.18.2",
+ "tslib": "^1.9.3",
+ "typescript": "^3.1.3",
+ "ts-node": "^8.0.1"
+ },
+ "ava": {
+ "compileEnhancements": false,
+ "snapshotDir": "test/fixtures/__snapshots__",
+ "extensions": [
+ "ts"
+ ],
+ "require": [
+ "ts-node/register"
+ ]
}
}
diff --git a/packages/editor/src/config/setters.ts b/packages/plugin-setters/src/index.tsx
similarity index 54%
rename from packages/editor/src/config/setters.ts
rename to packages/plugin-setters/src/index.tsx
index 32a404a41..3806f59b0 100644
--- a/packages/editor/src/config/setters.ts
+++ b/packages/plugin-setters/src/index.tsx
@@ -1,22 +1,25 @@
-import { DatePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
-import ExpressionSetter from '../../../plugin-setters/src/expression-setter';
-import MixinSetter from '../../../plugin-setters/src/mixin-setter';
-import EventsSetter from '../../../plugin-setters/src/events-setter';
-import { registerSetter } from '../../../plugin-settings/src';
-import { createElement } from 'react';
+import { registerSetter } from '../../globals/src';
+import {
+ DatePicker,
+ Input,
+ Radio,
+ Select,
+ Switch,
+ NumberPicker,
+} from '@alifd/next';
+import ExpressionSetter from './expression-setter';
+import MixinSetter from './mixin-setter';
+import EventsSetter from './events-setter';
registerSetter('ClassNameSetter', () => {
- return createElement(
- 'div',
- {
- className: 'lc-block-setter'
- },
- '这里是类名绑定'
- );
+ return 这里是类名绑定
;
});
registerSetter('EventsSetter', EventsSetter);
-registerSetter('StringSetter', { component: Input, defaultProps: { placeholder: '请输入' } });
+registerSetter('StringSetter', {
+ component: Input,
+ defaultProps: { placeholder: '请输入' },
+});
registerSetter('NumberSetter', NumberPicker);
registerSetter('ExpressionSetter', ExpressionSetter);
registerSetter('MixinSetter', MixinSetter);
@@ -24,8 +27,8 @@ registerSetter('BoolSetter', Switch);
registerSetter('RadioGroupSetter', {
component: Radio.Group,
defaultProps: {
- shape: 'button'
- }
+ shape: 'button',
+ },
});
registerSetter('SelectSetter', Select);
diff --git a/packages/plugin-setters/tsconfig.json b/packages/plugin-setters/tsconfig.json
new file mode 100644
index 000000000..aad669598
--- /dev/null
+++ b/packages/plugin-setters/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./node_modules/@recore/config/tsconfig",
+ "compilerOptions": {
+ "experimentalDecorators": true
+ },
+ "include": [
+ "./src/"
+ ]
+}
diff --git a/packages/plugin-settings/src/index.tsx b/packages/plugin-settings/src/index.tsx
index 8ed11d15b..5f05461b2 100644
--- a/packages/plugin-settings/src/index.tsx
+++ b/packages/plugin-settings/src/index.tsx
@@ -1,13 +1,12 @@
import React, { Component } from 'react';
-import { Tab, Breadcrumb, Icon } from '@alifd/next';
+import { Tab, Breadcrumb } from '@alifd/next';
import { SettingsMain, SettingField, isSettingField } from './main';
import './style.less';
-import { Title, TipContainer } from '../../globals';
-import SettingsPane, { registerSetter, createSetterContent, getSetter, createSettingFieldView } from './settings-pane';
+import { Title, TipContainer, createIcon } from '../../globals';
+import SettingsPane, { createSettingFieldView } from './settings-pane';
import Node from '../../designer/src/designer/document/node/node';
-import ArraySetter from './builtin-setters/array-setter';
-import ObjectSetter from './builtin-setters/object-setter';
-import './register-transducer';
+import './transducers/register';
+import './setters/register';
export default class SettingsMainView extends Component {
private main: SettingsMain;
@@ -32,10 +31,9 @@ export default class SettingsMainView extends Component {
if (this.main.isMulti) {
return (
- {this.main.componentMeta!.icon ||
);
}
@@ -52,13 +50,13 @@ export default class SettingsMainView extends Component {
onMouseOut: hoverNode.bind(null, node, false),
onClick: selectNode.bind(null, node),
};
- items.unshift(
- {this.main.componentMeta!.icon || {items}
);
@@ -105,6 +103,7 @@ export default class SettingsMainView extends Component {