From 07a681511db4b6f1276c3be457e460355170253c Mon Sep 17 00:00:00 2001 From: kangwei Date: Sun, 15 Mar 2020 20:24:58 +0800 Subject: [PATCH] redo&undo ok --- packages/designer/src/designer/designer.ts | 4 ++++ .../src/designer/document/selection.ts | 4 ++-- .../designer/src/designer/helper/history.ts | 17 ++++++++------- packages/editor/src/config/skeleton.js | 6 ++++++ .../editor/src/plugins/undoRedo/index.tsx | 21 ++++++++----------- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index ddf6abd61..da7945afb 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -115,6 +115,7 @@ export default class Designer { selectionDispose(); selectionDispose = undefined; } + this.postEvent('selection-change', this.currentSelection); if (this.currentSelection) { const currentSelection = this.currentSelection; selectionDispose = currentSelection.onSelectionChange(() => { @@ -128,6 +129,7 @@ export default class Designer { historyDispose(); historyDispose = undefined; } + this.postEvent('history-change', this.currentHistory); if (this.currentHistory) { const currentHistory = this.currentHistory; historyDispose = currentHistory.onStateChange(() => { @@ -144,6 +146,8 @@ export default class Designer { }); setupSelection(); setupHistory(); + + this.postEvent('designer.ready', this); } postEvent(event: string, ...args: any[]) { diff --git a/packages/designer/src/designer/document/selection.ts b/packages/designer/src/designer/document/selection.ts index 7f648e258..117351ebf 100644 --- a/packages/designer/src/designer/document/selection.ts +++ b/packages/designer/src/designer/document/selection.ts @@ -87,7 +87,7 @@ export class Selection { * 移除选中 */ remove(id: string) { - let i = this._selected.indexOf(id); + const i = this._selected.indexOf(id); if (i > -1) { this._selected.splice(i, 1); this.emitter.emit('selectionchange', this._selected); @@ -154,7 +154,7 @@ export class Selection { } onSelectionChange(fn: () => void): () => void { - this.emitter.addListener('selectionchange', fn); + this.emitter.on('selectionchange', fn); return () => { this.emitter.removeListener('selectionchange', fn); }; diff --git a/packages/designer/src/designer/helper/history.ts b/packages/designer/src/designer/helper/history.ts index b17fc6439..8ab0fb624 100644 --- a/packages/designer/src/designer/helper/history.ts +++ b/packages/designer/src/designer/helper/history.ts @@ -26,21 +26,18 @@ export function setSerialization(serializion: Serialization) { export default class History { private session: Session; private records: Session[]; - private point: number = 0; + private point = 0; private emitter = new EventEmitter(); private obx: Reaction; - private justWokeup: boolean = false; + private justWokeup = false; - constructor( - logger: () => any, - private redoer: (data: NodeSchema) => void, - private timeGap: number = 1000, - ) { + constructor(logger: () => any, private redoer: (data: NodeSchema) => void, private timeGap: number = 1000) { this.session = new Session(0, null, this.timeGap); this.records = [this.session]; this.obx = autorun(() => { const data = logger(); + // TODO: remove this line console.info('log'); if (this.justWokeup) { this.justWokeup = false; @@ -49,6 +46,7 @@ export default class History { untracked(() => { const log = currentSerializion.serialize(data); if (this.session.cursor === 0 && this.session.isActive()) { + // first log this.session.log(log); this.session.end(); } else if (this.session) { @@ -56,10 +54,15 @@ export default class History { this.session.log(log); } else { this.session.end(); + const lastState = this.getState(); const cursor = this.session.cursor + 1; const session = new Session(cursor, log, this.timeGap); this.session = session; this.records.splice(cursor, this.records.length - cursor, session); + const currentState = this.getState(); + if (currentState !== lastState) { + this.emitter.emit('statechange', currentState); + } } } }); diff --git a/packages/editor/src/config/skeleton.js b/packages/editor/src/config/skeleton.js index e633f3a47..dbd82404b 100644 --- a/packages/editor/src/config/skeleton.js +++ b/packages/editor/src/config/skeleton.js @@ -335,6 +335,12 @@ export default { handleResourceDragStart: function(ev, tagName, schema) { // 物料面板中组件snippet的dragStart回调 // ev: 原始的domEvent；tagName: 组件的描述文案；schema: snippet的schema + if (editor.designer) { + editor.designer.dragon.boost({ + type: 'nodedata', + data: schema + }, ev.nativeEvent); + } } }); } diff --git a/packages/editor/src/plugins/undoRedo/index.tsx b/packages/editor/src/plugins/undoRedo/index.tsx index 0def89cfe..345a84356 100644 --- a/packages/editor/src/plugins/undoRedo/index.tsx +++ b/packages/editor/src/plugins/undoRedo/index.tsx @@ -4,6 +4,7 @@ import { PluginProps } from '../../framework/definitions'; import TopIcon from '../../skeleton/components/TopIcon/index'; export interface IProps { + editor: any; logo?: string; } @@ -26,7 +27,7 @@ export default class UndoRedo extends PureComponent { + props.editor.on('designer.ready', () => { this.init(); }); } @@ -34,17 +35,17 @@ export default class UndoRedo extends PureComponent { const { editor } = this.props; - this.history = editor.designer.currentHistory; - this.updateState(this.history.getState()); + + this.history = editor.designer?.currentHistory; + this.updateState(this.history?.getState() || 0); + editor.on('designer.history-change', (history): void => { this.history = history; - this.history.onStateChange(this.updateState); + this.updateState(this.history?.getState() || 0); }); - this.history.onStateChange(this.updateState); }; updateState = (state: number): void => { - console.log('++++', !!(state & 1), !!(state & 2)); this.setState({ undoEnable: !!(state & 1), redoEnable: !!(state & 2) @@ -52,15 +53,11 @@ export default class UndoRedo extends PureComponent { - if (this.history) { - this.history.back(); - } + this.history?.back(); }; handleRedoClick = (): void => { - if (this.history) { - this.history.forward(); - } + this.history?.forward(); }; render(): React.ReactNode {