feat(editor): supporting time-traveling

Author: elliothux

package-lock.json

@@ -45,7 +45,6 @@
     "json-schema": "^0.2.5",
     "json-schema-defaults": "^0.4.0",
     "lodash.template": "^4.5.0",
-    "mmlpx": "^4.0.2",
     "mobx": "^5.15.4",
     "mobx-react": "^6.1.8",
     "promise-timeout": "^1.3.0",

package.json

@@ -52,7 +52,7 @@ module.exports = {
       javascriptEnabled: true,
     }),
     setOutputPublicPath('/editor/'),
-    addWebpackPlugin(new BundleAnalyzerPlugin()),
+    // addWebpackPlugin(new BundleAnalyzerPlugin()),
     process.env.NODE_ENV === 'production'
       ? addWebpackPlugin(
           new SentryWebpackPlugin({

packages/editor/config-overrides.js

@@ -13,6 +13,7 @@ const DEBUG_USER = {
   createdTime: new Date(),
   bizs: [],
   isAdmin: 1,
+  isDeveloper: 0,
 };
 
 export async function getCurrentUser() {

packages/editor/src/api/user.ts

@@ -5,7 +5,6 @@ export function createMouseEventFromIframe(e: React.MouseEvent): MouseEvent {
   e.persist();
 
   const [deltaX, deltaY] = getSimulatorNodeOffset();
-  console.log(deltaX, deltaY);
   const event = document.createEvent('MouseEvent');
   event.initMouseEvent(
     e.type,

packages/editor/src/components/ContextMenu/utils.ts

@@ -32,7 +32,7 @@
   height: 36px;
   left: calc(50vw - 140px);
   bottom: 18px;
-  z-index: 999;
+  z-index: 998;
 
   & > div {
     cursor: pointer;

packages/editor/src/components/Simulator/index.scss

@@ -196,7 +196,6 @@ export const zh = {
     'Universal triggers': '通用触发',
     'Hotarea Manager': '热区管理',
     Home: '主页',
-    Intro: '总览',
     Pages: '页面',
     Templates: '模板',
     Materials: '物料',

packages/editor/src/i18n/resources/zh.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import { App } from './App';
-import { initSentryReport } from './utils/report';
+import { isDev, initSentryReport } from './utils';
 import './styles/index.scss';
 import './styles/override.less';
 
 function bootstrap() {
-  initSentryReport();
+  if (!isDev()) {
+    initSentryReport();
+  }
   return render(<App />, document.getElementById('main-entry'));
 }
 

packages/editor/src/index.tsx

@@ -0,0 +1,78 @@
+import { walkAndSerialize } from './utils';
+import { runInAction } from 'mobx';
+
+const recordStates: { [key: string]: object } = {};
+const stacks: typeof recordStates[] = [];
+let cursor = 0;
+
+(window as any).stacks = stacks;
+(window as any).undo = undo;
+(window as any).redo = redo;
+
+export function undo() {
+  if (stacks.length <= 1 || cursor === 0) {
+    return;
+  }
+  const snapshot = stacks[--cursor];
+  return restoreSnapshot(snapshot);
+}
+
+export function redo() {
+  if (stacks.length <= 1 || cursor === stacks.length) {
+    return;
+  }
+  const snapshot = stacks[++cursor];
+  return restoreSnapshot(snapshot);
+}
+
+function restoreSnapshot(snapshot: typeof recordStates) {
+  return runInAction(() => {
+    Object.entries(snapshot).forEach(([key, v]) => {
+      Object.assign(recordStates[key], v);
+    });
+  });
+}
+
+export function recordHistory(states: typeof recordStates) {
+  Object.assign(recordStates, states);
+  updateSnapshots(true);
+}
+
+let inReaction = false;
+export const withHistory = (
+  target: { [key: string]: any },
+  propertyKey: string,
+  descriptor?: PropertyDescriptor,
+): void => {
+  const { initializer } = descriptor as any;
+  descriptor!.value = function(...args: Parameters<ReturnType<typeof initializer>>) {
+    const reaction = inReaction;
+    if (!reaction) {
+      inReaction = true;
+    }
+    const result = initializer.apply(this).apply(this, args);
+    if (!reaction) {
+      setTimeout(async () => {
+        if (result instanceof Promise) {
+          await result;
+        }
+        updateSnapshots();
+        inReaction = false;
+      }, 0);
+    }
+    return result;
+  };
+};
+
+function updateSnapshots(assign = false) {
+  const snapshot = Object.entries(recordStates).reduce<{ [key: string]: object }>((accu, [k, v]) => {
+    accu[k] = walkAndSerialize(v);
+    return accu;
+  }, {});
+  if (assign && stacks.length) {
+    Object.assign(stacks[stacks.length - 1], snapshot);
+  } else {
+    stacks.push(snapshot);
+  }
+  cursor = stacks.length - 1;
+}

packages/editor/src/libs/history/index.ts

@@ -0,0 +1,51 @@
+import { isFunction } from '../../utils';
+
+export type Snapshot = {
+  [propName: string]: any;
+};
+
+function isObject(obj: any) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+function isMap(obj: any) {
+  return (
+    Object.prototype.toString.call(obj) === '[object Map]' ||
+    (obj && isFunction(obj.delete) && isFunction(obj.get) && isFunction(obj.set))
+  );
+}
+function isArray(obj: any) {
+  return obj && Array.isArray(obj);
+}
+
+export function walkAndSerialize(model: any) {
+  if (isArray(model)) {
+    return model.length ? model.map(walkAndSerialize) : [];
+  }
+
+  if (isMap(model)) {
+    if (model.size) {
+      const map: { [key: string]: any } = {};
+      model.forEach((value: any, key: string) => {
+        map[key] = walkAndSerialize(value);
+      });
+      return map;
+    }
+    return {};
+  }
+
+  if (isObject(model)) {
+    return Object.keys(model).reduce((acc, stateName) => {
+      const value = walkAndSerialize(model[stateName]);
+      if (value !== undefined) {
+        acc[stateName] = value;
+      }
+      return acc;
+    }, {} as Snapshot);
+  }
+
+  if (isFunction(model)) {
+    return undefined;
+  }
+
+  return model;
+}