From 573f91507c64adf620dd34b98ac3012f935caa79 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 16 Mar 2020 15:50:16 +0800 Subject: [PATCH 1/7] fix outlines&events --- .../host/auxilary/outline-selecting.tsx | 27 +++- .../simulator/host/auxilary/outlines.less | 3 +- .../src/builtins/simulator/host/host.ts | 149 +++++++++++------- .../src/builtins/simulator/host/viewport.ts | 11 +- packages/designer/src/designer/designer.less | 4 +- packages/designer/src/designer/designer.ts | 10 +- .../src/designer/document/node/node.ts | 24 +-- .../src/designer/document/selection.ts | 6 +- .../src/register-transducer.ts | 1 - 9 files changed, 148 insertions(+), 87 deletions(-) diff --git a/packages/designer/src/builtins/simulator/host/auxilary/outline-selecting.tsx b/packages/designer/src/builtins/simulator/host/auxilary/outline-selecting.tsx index 0273daf07..9618de6ae 100644 --- a/packages/designer/src/builtins/simulator/host/auxilary/outline-selecting.tsx +++ b/packages/designer/src/builtins/simulator/host/auxilary/outline-selecting.tsx @@ -8,17 +8,17 @@ import OffsetObserver from '../../../../designer/helper/offset-observer'; import Node from '../../../../designer/document/node/node'; @observer -export class OutlineSelectingInstance extends Component<{ observed: OffsetObserver; highlight?: boolean }> { - shouldComponentUpdate() { - return false; - } - +export class OutlineSelectingInstance extends Component<{ + observed: OffsetObserver; + highlight?: boolean; + dragging?: boolean; +}> { componentWillUnmount() { this.props.observed.purge(); } render() { - const { observed, highlight } = this.props; + const { observed, highlight, dragging } = this.props; if (!observed.hasOffset) { return null; } @@ -33,6 +33,7 @@ export class OutlineSelectingInstance extends Component<{ observed: OffsetObserv const className = classNames('lc-outlines lc-outlines-selecting', { highlight, + dragging, }); return ( @@ -51,6 +52,10 @@ export class OutlineSelectingForNode extends Component<{ node: Node }> { return this.context; } + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + @computed get instances() { return this.host.getComponentInstances(this.props.node); } @@ -77,7 +82,7 @@ export class OutlineSelectingForNode extends Component<{ node: Node }> { if (!observed) { return null; } - return ; + return ; })} ); @@ -92,12 +97,17 @@ export class OutlineSelecting extends Component { return this.context; } + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + @computed get selecting() { const doc = this.host.document; if (doc.suspensed) { return null; } - return doc.selection.getNodes(); + const selection = doc.selection; + return this.dragging ? selection.getTopNodes() : selection.getNodes(); } shouldComponentUpdate() { @@ -106,6 +116,7 @@ export class OutlineSelecting extends Component { render() { const selecting = this.selecting; + console.info(selecting); if (!selecting || selecting.length < 1) { // DIRTY FIX, recore has a bug! return ; diff --git a/packages/designer/src/builtins/simulator/host/auxilary/outlines.less b/packages/designer/src/builtins/simulator/host/auxilary/outlines.less index fc3e1042e..1bf8c163d 100644 --- a/packages/designer/src/builtins/simulator/host/auxilary/outlines.less +++ b/packages/designer/src/builtins/simulator/host/auxilary/outlines.less @@ -22,7 +22,7 @@ &&-hovering { z-index: 1; border-style: dashed; - background: rgba(95, 240, 114, 0.04); + background: rgba(0,121,242,.04); &.x-loop { border-color: rgba(138, 93, 226, 0.8); @@ -44,6 +44,7 @@ &&-selecting { z-index: 2; + border-width: 2px; &.x-loop { border-color: rgba(147, 112, 219, 1.0); diff --git a/packages/designer/src/builtins/simulator/host/host.ts b/packages/designer/src/builtins/simulator/host/host.ts index ab64b23c9..a3620245d 100644 --- a/packages/designer/src/builtins/simulator/host/host.ts +++ b/packages/designer/src/builtins/simulator/host/host.ts @@ -145,9 +145,6 @@ export class SimulatorHost implements ISimulator { readonly scroller = this.designer.createScroller(this.viewport); mountViewport(viewport: Element | null) { - if (!viewport) { - return; - } this.viewport.mount(viewport); } @@ -174,10 +171,12 @@ export class SimulatorHost implements ISimulator { readonly libraryMap: { [key: string]: string } = {}; + private _iframe?: HTMLIFrameElement; async mountContentFrame(iframe: HTMLIFrameElement | null) { - if (!iframe) { + if (!iframe || this._iframe === iframe) { return; } + this._iframe = iframe; this._contentWindow = iframe.contentWindow!; @@ -234,63 +233,89 @@ export class SimulatorHost implements ISimulator { // TODO: think of lock when edit a node // 事件路由 - doc.addEventListener('mousedown', (downEvent: MouseEvent) => { - const nodeInst = this.getNodeInstanceFromElement(downEvent.target as Element); - const node = nodeInst?.node || this.document.rootNode; - const isMulti = downEvent.metaKey || downEvent.ctrlKey; - const isLeftButton = downEvent.which === 1 || downEvent.button === 0; - const checkSelect = (e: MouseEvent) => { - doc.removeEventListener('mouseup', checkSelect, true); - if (!isShaken(downEvent, e)) { - const id = node.id; - designer.activeTracker.track(node); - if (isMulti && !isRootNode(node) && selection.has(id)) { - selection.remove(id); - } else { - selection.select(id); - } - } - }; + doc.addEventListener( + 'mousedown', + (downEvent: MouseEvent) => { + // stop response document focus event + downEvent.stopPropagation(); + downEvent.preventDefault(); - if (isLeftButton && !isRootNode(node)) { - let nodes: Node[] = [node]; - let ignoreUpSelected = false; - // 排除根节点拖拽 - selection.remove(this.document.rootNode.id); - if (isMulti) { - // multi select mode, directily add - if (!selection.has(node.id)) { + const nodeInst = this.getNodeInstanceFromElement(downEvent.target as Element); + const node = nodeInst?.node || this.document.rootNode; + const isMulti = downEvent.metaKey || downEvent.ctrlKey; + const isLeftButton = downEvent.which === 1 || downEvent.button === 0; + const checkSelect = (e: MouseEvent) => { + doc.removeEventListener('mouseup', checkSelect, true); + if (!isShaken(downEvent, e)) { + const id = node.id; designer.activeTracker.track(node); - selection.add(node.id); - ignoreUpSelected = true; + if (isMulti && !isRootNode(node) && selection.has(id)) { + selection.remove(id); + } else { + selection.select(id); + } } - // 获得顶层 nodes - nodes = selection.getTopNodes(); - } else if (selection.containsNode(node)) { - nodes = selection.getTopNodes(); - } else { - // will clear current selection & select dragment in dragstart - } - designer.dragon.boost( - { - type: DragObjectType.Node, - nodes, - }, - downEvent, - ); - if (ignoreUpSelected) { - // multi select mode has add selected, should return - return; - } - } + }; - doc.addEventListener('mouseup', checkSelect, true); - }); + if (isLeftButton && !isRootNode(node)) { + let nodes: Node[] = [node]; + let ignoreUpSelected = false; + // 排除根节点拖拽 + selection.remove(this.document.rootNode.id); + if (isMulti) { + // multi select mode, directily add + if (!selection.has(node.id)) { + designer.activeTracker.track(node); + selection.add(node.id); + ignoreUpSelected = true; + } + // 获得顶层 nodes + nodes = selection.getTopNodes(); + } else if (selection.containsNode(node)) { + nodes = selection.getTopNodes(); + } else { + // will clear current selection & select dragment in dragstart + } + designer.dragon.boost( + { + type: DragObjectType.Node, + nodes, + }, + downEvent, + ); + if (ignoreUpSelected) { + // multi select mode has add selected, should return + return; + } + } + + doc.addEventListener('mouseup', checkSelect, true); + }, + true, + ); + + doc.addEventListener( + 'click', + e => { + // stop response document click event + e.preventDefault(); + e.stopPropagation(); + // todo: catch link redirect + }, + true, + ); // cause edit - doc.addEventListener('dblclick', (e: MouseEvent) => { - // TODO: - }); + doc.addEventListener( + 'dblclick', + (e: MouseEvent) => { + // stop response document dblclick event + e.stopPropagation(); + e.preventDefault(); + // todo: quick editing + }, + true, + ); } private disableHovering?: () => void; @@ -443,18 +468,28 @@ export class SimulatorHost implements ISimulator { let last: { x: number; y: number; r: number; b: number } | undefined; let computed = false; const elems = elements.slice(); + const commonParent: Element | null = null; while (true) { if (!rects || rects.length < 1) { const elem = elems.pop(); if (!elem) { break; } + /* + if (!commonParent) { + commonParent = elem.parentElement; + } else if (elem.parentElement !== commonParent) { + continue; + }*/ rects = renderer.getClientRects(elem); } const rect = rects.pop(); if (!rect) { break; } + if (rect.width === 0 && rect.height === 0) { + continue; + } if (!last) { last = { x: rect.left, @@ -677,8 +712,10 @@ export class SimulatorHost implements ISimulator { } const target = dropTarget; - const targetInstance = e.targetInstance as ReactInstance; + // FIXME: e.target is #document, etc., does not has e.targetInstance + + const targetInstance = e.targetInstance as ReactInstance; const parentInstance = this.getClosestNodeInstance(targetInstance, target.id); const edge = this.computeComponentInstanceRect(parentInstance?.instance as any); diff --git a/packages/designer/src/builtins/simulator/host/viewport.ts b/packages/designer/src/builtins/simulator/host/viewport.ts index 3ae3d41df..a22f87704 100644 --- a/packages/designer/src/builtins/simulator/host/viewport.ts +++ b/packages/designer/src/builtins/simulator/host/viewport.ts @@ -25,7 +25,7 @@ export default class Viewport implements IViewport { private viewportElement?: Element; mount(viewportElement: Element | null) { - if (!viewportElement) { + if (!viewportElement || this.viewportElement === viewportElement) { return; } this.viewportElement = viewportElement; @@ -54,7 +54,7 @@ export default class Viewport implements IViewport { /** * 缩放比例 */ - get scale(): number { + @computed get scale(): number { if (!this.rect || this.contentWidth === AutoFit) { return 1; } @@ -63,14 +63,14 @@ export default class Viewport implements IViewport { @obx.ref private _contentWidth: number | AutoFit = AutoFit; - get contentHeight(): number | AutoFit { + @computed get contentHeight(): number | AutoFit { if (!this.rect || this.scale === 1) { return AutoFit; } return this.height / this.scale; } - get contentWidth(): number | AutoFit { + @computed get contentWidth(): number | AutoFit { if (!this.rect || (this._contentWidth !== AutoFit && this._contentWidth <= this.width)) { return AutoFit; } @@ -98,7 +98,7 @@ export default class Viewport implements IViewport { return this._scrollTarget; } - @obx private _scrolling: boolean = false; + @obx private _scrolling = false; get scrolling(): boolean { return this._scrolling; } @@ -120,6 +120,7 @@ export default class Viewport implements IViewport { this._scrolling = false; }, 80); }); + target.addEventListener('resize', () => this.touch()); this._scrollTarget = scrollTarget; } diff --git a/packages/designer/src/designer/designer.less b/packages/designer/src/designer/designer.less index 7f73d92b1..9c3a7dfa9 100644 --- a/packages/designer/src/designer/designer.less +++ b/packages/designer/src/designer/designer.less @@ -8,7 +8,9 @@ --font-size-btn-medium: @fontSize-4; --font-size-btn-small: @fontSize-5; - --color-brand-light: rgb(102, 188, 92); + --color-brand: #006cff; + --color-brand-light: #197aff; + --color-brand-dark: #0060e5; --color-icon: rgba(255, 255, 255, 0.8); --color-visited: rgba(179, 182, 201, 0.4); --color-actived: #498ee6; diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 10b802d98..73c479f26 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -61,9 +61,13 @@ export default class Designer { this.dragon.onDragstart(e => { this.hovering.enable = false; const { dragObject } = e; - if (isDragNodeObject(dragObject) && dragObject.nodes.length === 1) { - // ensure current selecting - dragObject.nodes[0].select(); + if (isDragNodeObject(dragObject)) { + if (dragObject.nodes.length === 1) { + // ensure current selecting + dragObject.nodes[0].select(); + } + } else { + this.currentSelection?.clear(); } if (this.props?.onDragstart) { this.props.onDragstart(e); diff --git a/packages/designer/src/designer/document/node/node.ts b/packages/designer/src/designer/document/node/node.ts index 2bdc4106e..1c46e1f2e 100644 --- a/packages/designer/src/designer/document/node/node.ts +++ b/packages/designer/src/designer/document/node/node.ts @@ -374,7 +374,7 @@ export default class Node { * 2 thisNode before or after otherNode * 0 thisNode same as otherNode */ - comparePosition(otherNode: Node): number { + comparePosition(otherNode: Node): PositionNO { return comparePosition(this, otherNode); } @@ -455,31 +455,37 @@ export function contains(node1: Node, node2: Node): boolean { // 8 node1 contained_by node2 // 2 node1 before or after node2 // 0 node1 same as node2 -export function comparePosition(node1: Node, node2: Node): number { +export enum PositionNO { + Contains = 16, + ContainedBy = 8, + BeforeOrAfter = 2, + TheSame = 0, +} +export function comparePosition(node1: Node, node2: Node): PositionNO { if (node1 === node2) { - return 0; + return PositionNO.TheSame; } const l1 = node1.zLevel; const l2 = node2.zLevel; if (l1 === l2) { - return 2; + return PositionNO.BeforeOrAfter; } let p: any; - if (l1 > l2) { + if (l1 < l2) { p = getZLevelTop(node2, l1); if (p && p === node1) { - return 16; + return PositionNO.Contains; } - return 2; + return PositionNO.BeforeOrAfter; } p = getZLevelTop(node1, l2); if (p && p === node2) { - return 8; + return PositionNO.ContainedBy; } - return 2; + return PositionNO.BeforeOrAfter; } export function insertChild(container: NodeParent, thing: Node | NodeData, at?: number | null, copy?: boolean): Node { diff --git a/packages/designer/src/designer/document/selection.ts b/packages/designer/src/designer/document/selection.ts index 117351ebf..14bddac12 100644 --- a/packages/designer/src/designer/document/selection.ts +++ b/packages/designer/src/designer/document/selection.ts @@ -1,4 +1,4 @@ -import Node, { comparePosition } from './node/node'; +import Node, { comparePosition, PositionNO } from './node/node'; import { obx } from '@recore/obx'; import DocumentModel from './document-model'; import { EventEmitter } from 'events'; @@ -136,12 +136,12 @@ export class Selection { while (i-- > 0) { const n = comparePosition(nodes[i], node); // nodes[i] contains node - if (n === 16 || n === 0) { + if (n === PositionNO.Contains || n === PositionNO.TheSame) { isTop = false; break; } // node contains nodes[i], delete nodes[i] - if (n === 8) { + if (n === PositionNO.ContainedBy) { nodes.splice(i, 1); } } diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index 165ec1c3c..ebd2de72c 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -209,7 +209,6 @@ registerMetadataTransducer(metadata => { props.push(propConfigToFieldConfig(prop)); }); - return { ...metadata, configure: { From 0a57c777575428671b92c0b63988c15892c8d89e Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 16 Mar 2020 16:03:01 +0800 Subject: [PATCH 2/7] add event get/set value --- .../src/builtin-setters/events-setter/index.tsx | 17 +++++++++++++---- .../plugin-settings/src/register-transducer.ts | 12 +++++++----- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx index 34e7f482d..4bda733a5 100644 --- a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx +++ b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx @@ -1,5 +1,6 @@ import { Component, isValidElement, ReactElement, ReactNode } from 'react'; import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next'; +import {SettingField} from './main'; import nativeEvents from './native-events'; import './style.less'; @@ -19,7 +20,9 @@ const DEFINITION_EVENT_TYPE = { LIFE_CYCLE_EVENT: 'lifeCycleEvent', }; -export default class EventsSetter extends Component<{}> { +export default class EventsSetter extends Component<{ + field:SettingField +}> { state = { showEventList: false, eventBtns: [], @@ -34,6 +37,7 @@ export default class EventsSetter extends Component<{}> { }; componentWillMount() { + this.props.field.getValue() this.initEventBtns(); this.initEventList(); } @@ -229,14 +233,19 @@ export default class EventsSetter extends Component<{}> { }; submitDialog = (relatedEventName: String) => { - const { bindEventName } = this.state; - const { eventDataList } = this.state; + const { bindEventName,eventDataList} = this.state; + const {field} = this.props; eventDataList.map(item => { if (item.name === bindEventName) { item.relatedEventName = relatedEventName; } }); + debugger; + + field.setValue(eventDataList); + + this.closeDialog(); }; @@ -270,7 +279,7 @@ export default class EventsSetter extends Component<{}> { {selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && ( {showEventList.map((item, index) => ( - + {item.name} ))} diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index ebd2de72c..a4bd12693 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -403,11 +403,11 @@ registerMetadataTransducer((metadata) => { type: 'events', // 组件自定义的 list: [{ name:'onClick', - title:'点击回调' + description:'点击回调' }, { name:'onChange', - title:'变更回调' + description:'变更回调' }, { name:'onSubmit' @@ -415,10 +415,12 @@ registerMetadataTransducer((metadata) => { }], getValue(field: SettingField) { - return []; + let data = field.getPropValue('eventDataList'); + debugger + return data; }, - setValue(field: SettingField) { - + setValue(field: SettingField,eventDataList:Array) { + field.setPropValue('eventDataList',eventDataList); } }] }); From c44481f9a46268aa6bf18e62b0a3bb83010f25eb Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 16 Mar 2020 16:07:10 +0800 Subject: [PATCH 3/7] joint events-setter --- .../src/register-transducer.ts | 336 +++++++++--------- 1 file changed, 175 insertions(+), 161 deletions(-) diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index ebd2de72c..864e6461e 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -178,7 +178,10 @@ registerMetadataTransducer(metadata => { metadata.props.forEach(prop => { const { name, propType } = prop; - if (name === 'children' && (component.isContainer || (propType === 'node' || propType === 'element' || propType === 'any'))) { + if ( + name === 'children' && + (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any') + ) { if (component.isContainer !== false) { component.isContainer = true; return; @@ -221,7 +224,7 @@ registerMetadataTransducer(metadata => { }; }); -registerMetadataTransducer((metadata) => { +registerMetadataTransducer(metadata => { const { configure = {}, componentName } = metadata; const { component = {} } = configure as any; if (!component.nestingRule) { @@ -261,107 +264,135 @@ registerMetadataTransducer((metadata) => { }; }); -registerMetadataTransducer((metadata) => { +registerMetadataTransducer(metadata => { const { componentName, configure = {} } = metadata; if (componentName === 'Leaf') { return { ...metadata, configure: { ...configure, - combined: [{ - name: 'children', - title: '内容设置', - setter: { - componentName: 'MixinSetter', - props: { - setters: [{ - componentName: 'StringSetter', - props: { - // todo: - multiline: true, - }, - initialValue: '', - }, { - componentName: 'ExpressionSetter', - initialValue: { - type: 'JSExpression', - value: '', - }, - }], + combined: [ + { + name: 'children', + title: '内容设置', + setter: { + componentName: 'MixinSetter', + props: { + setters: [ + { + componentName: 'StringSetter', + props: { + // todo: + multiline: true, + }, + initialValue: '', + }, + { + componentName: 'ExpressionSetter', + initialValue: { + type: 'JSExpression', + value: '', + }, + }, + ], + }, }, }, - }], + ], }, }; } const { props, events, styles } = configure as any; - let supportEvents: any; + let eventsDefinition: any; let isRoot: boolean = false; if (componentName === 'Page' || componentName === 'Component') { isRoot = true; - supportEvents = [{ - description: '初始化时', - name: 'constructor' - }, { - description: '装载后', - name: 'componentDidMount' - }, { - description: '更新时', - name: 'componentDidMount' - }, { - description: '卸载时', - name: 'componentWillUnmount' - }] + // 平台配置的，一般只有根节点才会配置 + eventsDefinition = { + type: 'lifeCycleEvent', + title: '生命周期', + list: [ + { + description: '初始化时', + name: 'constructor', + }, + { + description: '装载后', + name: 'componentDidMount', + }, + { + description: '更新时', + name: 'componentDidMount', + }, + { + description: '卸载时', + name: 'componentWillUnmount', + }, + ] + }; } else { - supportEvents = (events?.supportEvents || []).map((event: any) => { - return typeof event === 'string' ? { - name: event, - } : event; - }); + eventsDefinition = { + type: 'events', + title: '事件', + list: (events?.supportEvents || []).map((event: any) => { + return 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' - }] + 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 combined = [ + { + title: '属性', + name: '#props', + items: propsGroup, + }, + ]; const stylesGroup = []; if (styles?.supportClassName) { stylesGroup.push({ name: 'className', title: '类名绑定', - setter: 'ClassNameSetter' + setter: 'ClassNameSetter', }); } if (styles?.supportInlineStyle) { stylesGroup.push({ name: 'style', title: '行内样式', - setter: 'StyleSetter' + setter: 'StyleSetter', }); } if (stylesGroup.length > 0) { @@ -372,55 +403,27 @@ registerMetadataTransducer((metadata) => { }); } - if (supportEvents) { + if (eventsDefinition) { combined.push({ name: '#events', title: '事件', - items: [{ - name: '!events', - title: '事件设置', - setter: { - componentName: 'EventsSetter', - props: { - definition: [] - } + items: [ + { + name: '!events', + title: '事件设置', + setter: { + componentName: 'EventsSetter', + props: { + definition: eventsDefinition, + }, + }, + + getValue(field: SettingField) { + return []; + }, + setValue(field: SettingField) {}, }, - - // 先简单mock一下 - definition:[ - // { - // type: 'lifeCycleEvent', // 平台配置的，一般只有根节点才会配置 - // title: '生命周期', - // list: [{ - // title: '装载时', - // name: 'componentDidMount' - // },{ - // title: '卸载时', - // name: 'componentWillUnmount' - // }] - // }, - { - type: 'events', // 组件自定义的 - list: [{ - name:'onClick', - title:'点击回调' - }, - { - name:'onChange', - title:'变更回调' - }, - { - name:'onSubmit' - }] - }], - - getValue(field: SettingField) { - return []; - }, - setValue(field: SettingField) { - - } - }] + ], }); } @@ -429,60 +432,71 @@ registerMetadataTransducer((metadata) => { combined.push({ name: '#advanced', title: '高级', - items: [] + items: [], }); } else { combined.push({ name: '#advanced', title: '高级', - items: [{ - name: '__condition', - title: '条件显示', - setter: 'ExpressionSetter' - }, { - name: '#loop', - title: '循环', - items: [{ - name: '__loop', - title: '循环数据', - setter: { - componentName: 'MixinSetter', - props: { - 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', + items: [ + { + name: '__condition', + title: '条件显示', setter: 'ExpressionSetter', - }] - }] - }) + }, + { + name: '#loop', + title: '循环', + items: [ + { + name: '__loop', + title: '循环数据', + setter: { + componentName: 'MixinSetter', + props: { + 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 { From 5a0ea768e8bdee7a127f95c6914e1a56700f6118 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 16 Mar 2020 17:39:12 +0800 Subject: [PATCH 4/7] events-setter setvalue update --- .../src/builtin-setters/events-setter/index.tsx | 9 +++++---- .../plugin-settings/src/register-transducer.ts | 15 +++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx index 76fc1736e..9a29b7900 100644 --- a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx +++ b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx @@ -37,7 +37,9 @@ export default class EventsSetter extends Component<{ }; componentWillMount() { - this.props.field.getValue() + // this.props.field.getValue() + console.log(this.props); + this.initEventBtns(); this.initEventList(); } @@ -233,16 +235,15 @@ export default class EventsSetter extends Component<{ submitDialog = (relatedEventName: String) => { const { bindEventName,eventDataList} = this.state; - const {field} = this.props; eventDataList.map(item => { if (item.name === bindEventName) { item.relatedEventName = relatedEventName; } }); - debugger; - field.setValue(eventDataList); + this.props.onChange(eventDataList); + // field.setValue(eventDataList); this.closeDialog(); diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index 9668ad079..c13225133 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -342,6 +342,21 @@ registerMetadataTransducer(metadata => { } : event; }), + + // mock data + list:[ + { + name:'onClick', + description:'点击回调' + }, + { + name:'onChange', + description:'变更回调' + }, + { + name:'onSubmit' + } + ] }]; } // 通用设置 From 33ea4d380323f3ce7c2590d8d6313b973dbad178 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 16 Mar 2020 17:50:39 +0800 Subject: [PATCH 5/7] fix click select --- .../src/builtins/simulator/host/host.ts | 5 +- .../src/designer/document/selection.ts | 10 ++- packages/editor/src/config/assets.js | 78 ++++++++++++++++++- .../src/register-transducer.ts | 1 + 4 files changed, 87 insertions(+), 7 deletions(-) diff --git a/packages/designer/src/builtins/simulator/host/host.ts b/packages/designer/src/builtins/simulator/host/host.ts index a3620245d..9fab87841 100644 --- a/packages/designer/src/builtins/simulator/host/host.ts +++ b/packages/designer/src/builtins/simulator/host/host.ts @@ -260,8 +260,6 @@ export class SimulatorHost implements ISimulator { if (isLeftButton && !isRootNode(node)) { let nodes: Node[] = [node]; let ignoreUpSelected = false; - // 排除根节点拖拽 - selection.remove(this.document.rootNode.id); if (isMulti) { // multi select mode, directily add if (!selection.has(node.id)) { @@ -269,9 +267,10 @@ export class SimulatorHost implements ISimulator { selection.add(node.id); ignoreUpSelected = true; } + selection.remove(this.document.rootNode.id); // 获得顶层 nodes nodes = selection.getTopNodes(); - } else if (selection.containsNode(node)) { + } else if (selection.containsNode(node, true)) { nodes = selection.getTopNodes(); } else { // will clear current selection & select dragment in dragstart diff --git a/packages/designer/src/designer/document/selection.ts b/packages/designer/src/designer/document/selection.ts index 14bddac12..c481b1bce 100644 --- a/packages/designer/src/designer/document/selection.ts +++ b/packages/designer/src/designer/document/selection.ts @@ -97,9 +97,12 @@ export class Selection { /** * 选区是否包含节点 */ - containsNode(node: Node) { + containsNode(node: Node, excludeRoot = false) { for (const id of this._selected) { const parent = this.doc.getNode(id); + if (excludeRoot && parent === this.doc.rootNode) { + continue; + } if (parent?.contains(node)) { return true; } @@ -124,11 +127,12 @@ export class Selection { /** * 获取顶层选区节点, 场景：拖拽时，建立蒙层，只蒙在最上层 */ - getTopNodes() { + getTopNodes(includeRoot = false) { const nodes = []; for (const id of this._selected) { const node = this.doc.getNode(id); - if (!node) { + // 排除根节点 + if (!node || (!includeRoot && node === this.doc.rootNode)) { continue; } let i = nodes.length; diff --git a/packages/editor/src/config/assets.js b/packages/editor/src/config/assets.js index b4fa7e612..954ac79e6 100644 --- a/packages/editor/src/config/assets.js +++ b/packages/editor/src/config/assets.js @@ -28,6 +28,10 @@ export default { name: 'type', propType: 'string' }, + { + name: 'onClick', + propType: 'func' + }, { name: 'children', propType: 'string' @@ -66,6 +70,22 @@ export default { { name: 'placeholder', propType: 'string' + }, + { + name: 'onChange', + propType: 'func' + }, + { + name: 'onKeyDown', + propType: 'func' + }, + { + name: 'onFocus', + propType: 'func' + }, + { + name: 'onBlur', + propType: 'func' } ], }, @@ -83,7 +103,11 @@ export default { { name: 'device', propType: 'string' - } + }, + { + name: 'onChange', + propType: 'func' + }, ], }, 'Form.Item': { @@ -126,6 +150,26 @@ export default { { name: 'defaultValue', propType: 'number' + }, + { + name: 'onChange', + propType: 'func' + }, + { + name: 'onKeyDown', + propType: 'func' + }, + { + name: 'onFocus', + propType: 'func' + }, + { + name: 'onBlur', + propType: 'func' + }, + { + name: 'onCorrect', + propType: 'func' } ], }, @@ -151,6 +195,38 @@ export default { { name: 'placeholder', propType: 'string' + }, + { + name: 'onChange', + propType: 'func' + }, + { + name: 'onVisibleChange', + propType: 'func' + }, + { + name: 'onToggleHighlightItem', + propType: 'func' + }, + { + name: 'onSearch', + propType: 'func' + }, + { + name: 'onSearchClear', + propType: 'func' + }, + { + name: 'onRemove', + propType: 'func' + }, + { + name: 'onFocus', + propType: 'func' + }, + { + name: 'onBlur', + propType: 'func' } ], } diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index 9668ad079..2fbde2084 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -191,6 +191,7 @@ registerMetadataTransducer(metadata => { if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) { if (supportEvents) { supportEvents.push(name); + (events as any).supportEvents = supportEvents; } return; } From 176a708f75321946b5d65f8b8ae680d5740aa350 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 16 Mar 2020 18:19:42 +0800 Subject: [PATCH 6/7] add events definition --- .../document/node/props/prop-stash.ts | 2 +- .../src/designer/document/node/props/prop.ts | 4 + .../builtin-setters/events-setter/index.tsx | 6 +- packages/plugin-settings/src/main.ts | 4 +- .../src/register-transducer.ts | 84 ++++++++----------- 5 files changed, 42 insertions(+), 58 deletions(-) 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 2618cd804..84f0f8759 100644 --- a/packages/designer/src/designer/document/node/props/prop-stash.ts +++ b/packages/designer/src/designer/document/node/props/prop-stash.ts @@ -23,7 +23,7 @@ export default class PropStash implements IPropParent { } const pending: Prop[] = []; for (const prop of this.space) { - if (!prop.isUnset()) { + if (!prop.isUnset() && !prop.isVirtual()) { this.space.delete(prop); pending.push(prop); } diff --git a/packages/designer/src/designer/document/node/props/prop.ts b/packages/designer/src/designer/document/node/props/prop.ts index a657216f0..2162cd3ea 100644 --- a/packages/designer/src/designer/document/node/props/prop.ts +++ b/packages/designer/src/designer/document/node/props/prop.ts @@ -225,6 +225,10 @@ export default class Prop implements IPropParent { return this._type === 'unset'; } + isVirtual() { + return typeof this.key === 'string' && this.key.charAt(0) === '!'; + } + // TODO: improve this logic compare(other: Prop | null): number { if (!other || other.isUnset()) { diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx index 9a29b7900..fa1fa4ec1 100644 --- a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx +++ b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx @@ -21,7 +21,8 @@ const DEFINITION_EVENT_TYPE = { }; export default class EventsSetter extends Component<{ - field:SettingField + value: any[]; + onChange: (eventList: any[]) => void; }> { state = { showEventList: false, @@ -37,9 +38,6 @@ export default class EventsSetter extends Component<{ }; componentWillMount() { - // this.props.field.getValue() - console.log(this.props); - this.initEventBtns(); this.initEventList(); } diff --git a/packages/plugin-settings/src/main.ts b/packages/plugin-settings/src/main.ts index 02aca389b..63e7bc58e 100644 --- a/packages/plugin-settings/src/main.ts +++ b/packages/plugin-settings/src/main.ts @@ -159,7 +159,7 @@ export interface FieldConfig extends FieldExtraProps { export class SettingField implements SettingTarget { readonly isSettingField = true; readonly id = uniqueId('field'); - readonly type: 'field' | 'virtual-field' | 'group'; + readonly type: 'field' | 'group'; readonly isRequired: boolean = false; readonly isGroup: boolean; private _name: string | number; @@ -193,8 +193,6 @@ export class SettingField implements SettingTarget { const c = typeof name === 'string' ? name.substr(0, 1) : ''; if (c === '#') { this.type = 'group'; - } else if (c === '!') { - this.type = 'virtual-field'; } else { this.type = 'field'; } diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index d7d26e6a6..7740b75d9 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -310,55 +310,38 @@ registerMetadataTransducer(metadata => { if (componentName === 'Page' || componentName === 'Component') { isRoot = true; // 平台配置的，一般只有根节点才会配置 - eventsDefinition = [{ - type: 'lifeCycleEvent', - title: '生命周期', - list: [ - { - description: '初始化时', - name: 'constructor', - }, - { - description: '装载后', - name: 'componentDidMount', - }, - { - description: '更新时', - name: 'componentDidMount', - }, - { - description: '卸载时', - name: 'componentWillUnmount', - }, - ] - }]; + eventsDefinition = [ + { + type: 'lifeCycleEvent', + title: '生命周期', + list: [ + { + description: '初始化时', + name: 'constructor', + }, + { + description: '装载后', + name: 'componentDidMount', + }, + { + description: '更新时', + name: 'componentDidMount', + }, + { + description: '卸载时', + name: 'componentWillUnmount', + }, + ], + }, + ]; } else { - eventsDefinition = [{ - type: 'events', - title: '事件', - list: (events?.supportEvents || []).map((event: any) => { - return typeof event === 'string' - ? { - name: event, - } - : event; - }), - - // mock data - list:[ - { - name:'onClick', - description:'点击回调' - }, - { - name:'onChange', - description:'变更回调' - }, - { - name:'onSubmit' - } - ] - }]; + eventsDefinition = [ + { + type: 'events', + title: '事件', + list: (events?.supportEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)), + }, + ]; } // 通用设置 const propsGroup = props || []; @@ -439,8 +422,9 @@ registerMetadataTransducer(metadata => { return data; }, setValue(field: SettingField, eventDataList: any[]) { - field.setPropValue('eventDataList', eventDataList); - } + console.info(eventDataList); + field.setPropValue('eventDataList', eventDataList); + }, }, ], }); From 34333c96cb6515baa46d2f66609fe99bd1545453 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 16 Mar 2020 18:52:10 +0800 Subject: [PATCH 7/7] event-setter setvalue debug --- .../src/builtin-setters/events-setter/index.tsx | 3 ++- .../plugin-settings/src/register-transducer.ts | 14 +++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx index fa1fa4ec1..6de0defb7 100644 --- a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx +++ b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx @@ -38,6 +38,7 @@ export default class EventsSetter extends Component<{ }; componentWillMount() { + console.log(this.props); this.initEventBtns(); this.initEventList(); } @@ -239,7 +240,7 @@ export default class EventsSetter extends Component<{ } }); - + debugger; this.props.onChange(eventDataList); // field.setValue(eventDataList); diff --git a/packages/plugin-settings/src/register-transducer.ts b/packages/plugin-settings/src/register-transducer.ts index 7740b75d9..c8c3ef273 100644 --- a/packages/plugin-settings/src/register-transducer.ts +++ b/packages/plugin-settings/src/register-transducer.ts @@ -417,13 +417,17 @@ registerMetadataTransducer(metadata => { }, }, - getValue(field: SettingField) { - let data = field.getPropValue('eventDataList'); - return data; + getValue(field: SettingField,val?:any[]) { + //console.log(value); + //return value; + return field.parent.getPropValue('eventDataList'); + //return val; }, + setValue(field: SettingField, eventDataList: any[]) { - console.info(eventDataList); - field.setPropValue('eventDataList', eventDataList); + //return; + //console.info(eventDataList); + field.parent.setPropValue('eventDataList', eventDataList); }, }, ],