@tmagic/editor 1.0.0-rc.1 → 1.0.0-rc.4

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,12 +26,16 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
-  if (typeof window.global === "undefined") {
+  if (typeof global === "undefined") {
     window.global = window;
   }
+  if (typeof globalThis === "undefined") {
+    window.globalThis = window;
+  }
 
   var _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
@@ -328,11 +332,7 @@
         const options = {
           value: values.value,
           language: props.language,
-          tabSize: 2,
           theme: "vs-dark",
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 14,
-          formatOnPaste: true,
           ...props.options
         };
         if (props.type === "diff") {
@@ -346,6 +346,7 @@
         codeEditor.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
+            e.stopPropagation();
             emit("save", getEditorValue());
           }
         });
@@ -962,6 +963,13 @@
       } else {
         historyService.empty();
       }
+      if (node?.id) {
+        this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+          node,
+          page,
+          parent
+        }, utils.getNodePath(node.id, this.get("root").items));
+      }
       this.emit("select", node);
       return node;
     }
@@ -1150,6 +1158,9 @@
           ...position
         };
       }
+      if (utils.isPage(config)) {
+        config.name = generatePageNameByApp(this.get("root"));
+      }
       return await this.add(config);
     }
     async alignCenter(config2) {
@@ -1159,7 +1170,17 @@
       if (layout === Layout.RELATIVE) {
         return;
       }
-      if (parent.style?.width && node.style?.width) {
+      if (!node.style)
+        return;
+      const stage = this.get("stage");
+      const doc = stage?.renderer.contentWindow?.document;
+      if (doc) {
+        const parentEl = doc.getElementById(`${parent.id}`);
+        const el = doc.getElementById(`${node.id}`);
+        if (parentEl && el) {
+          node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        }
+      } else if (parent.style && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
       await this.update(node);
@@ -1571,1215 +1592,6 @@
   }
   var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
-  /*
-  Copyright (c) 2018 Daybrush
-  @name: @daybrush/utils
-  license: MIT
-  author: Daybrush
-  repository: https://github.com/daybrush/utils
-  @version 1.6.0
-  */
-  /**
-  * get string "object"
-  * @memberof Consts
-  * @example
-  import {OBJECT} from "@daybrush/utils";
-
-  console.log(OBJECT); // "object"
-  */
-
-  var OBJECT = "object";
-  /**
-  * Check the type that the value is object.
-  * @memberof Utils
-  * @param {string} value - Value to check the type
-  * @return {} true if the type is correct, false otherwise
-  * @example
-  import {isObject} from "@daybrush/utils";
-
-  console.log(isObject({})); // true
-  console.log(isObject(undefined)); // false
-  console.log(isObject("")); // false
-  console.log(isObject(null)); // false
-  */
-
-  function isObject(value) {
-    return value && typeof value === OBJECT;
-  }
-  /**
-  * Date.now() method
-  * @memberof CrossBrowser
-  * @return {number} milliseconds
-  * @example
-  import {now} from "@daybrush/utils";
-
-  console.log(now()); // 12121324241(milliseconds)
-  */
-
-  function now() {
-    return Date.now ? Date.now() : new Date().getTime();
-  }
-  /**
-  * Returns the index of the first element in the array that satisfies the provided testing function.
-  * @function
-  * @memberof CrossBrowser
-  * @param - The array `findIndex` was called upon.
-  * @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
-  * @param - Returns defaultIndex if not found by the function.
-  * @example
-  import { findIndex } from "@daybrush/utils";
-
-  findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1
-  */
-
-  function findIndex(arr, callback, defaultIndex) {
-    if (defaultIndex === void 0) {
-      defaultIndex = -1;
-    }
-
-    var length = arr.length;
-
-    for (var i = 0; i < length; ++i) {
-      if (callback(arr[i], i, arr)) {
-        return i;
-      }
-    }
-
-    return defaultIndex;
-  }
-  /**
-  * Sets up a function that will be called whenever the specified event is delivered to the target
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent} from "@daybrush/utils";
-
-  addEvent(el, "click", e => {
-    console.log(e);
-  });
-  */
-
-  function addEvent(el, type, listener, options) {
-    el.addEventListener(type, listener, options);
-  }
-  /**
-  * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
-  * @memberof DOM
-  * @param - event target
-  * @param - A case-sensitive string representing the event type to listen for.
-  * @param - The EventListener function of the event handler to remove from the event target.
-  * @param - An options object that specifies characteristics about the event listener.
-  * @example
-  import {addEvent, removeEvent} from "@daybrush/utils";
-  const listener = e => {
-    console.log(e);
-  };
-  addEvent(el, "click", listener);
-  removeEvent(el, "click", listener);
-  */
-
-  function removeEvent(el, type, listener, options) {
-    el.removeEventListener(type, listener, options);
-  }
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: @scena/event-emitter
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesture.git
-  version: 1.0.5
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-  var __assign$1 = function () {
-    __assign$1 = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign$1.apply(this, arguments);
-  };
-  function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-
-    for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-    return r;
-  }
-
-  /**
-   * Implement EventEmitter on object or component.
-   */
-
-  var EventEmitter =
-  /*#__PURE__*/
-  function () {
-    function EventEmitter() {
-      this._events = {};
-    }
-    /**
-     * Add a listener to the registered event.
-     * @param - Name of the event to be added
-     * @param - listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add listener in "a" event
-     * emitter.on("a", () => {
-     * });
-     * // Add listeners
-     * emitter.on({
-     *  a: () => {},
-     *  b: () => {},
-     * });
-     */
-
-
-    var __proto = EventEmitter.prototype;
-
-    __proto.on = function (eventName, listener) {
-      if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.on(name, eventName[name]);
-        }
-      } else {
-        this._addEvent(eventName, listener, {});
-      }
-
-      return this;
-    };
-    /**
-     * Remove listeners registered in the event target.
-     * @param - Name of the event to be removed
-     * @param - listener function of the event to be removed
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Remove all listeners.
-     * emitter.off();
-     *
-     * // Remove all listeners in "A" event.
-     * emitter.off("a");
-     *
-     *
-     * // Remove "listener" listener in "a" event.
-     * emitter.off("a", listener);
-     */
-
-
-    __proto.off = function (eventName, listener) {
-      if (!eventName) {
-        this._events = {};
-      } else if (isObject(eventName)) {
-        for (var name in eventName) {
-          this.off(name);
-        }
-      } else if (!listener) {
-        this._events[eventName] = [];
-      } else {
-        var events = this._events[eventName];
-
-        if (events) {
-          var index = findIndex(events, function (e) {
-            return e.listener === listener;
-          });
-
-          if (index > -1) {
-            events.splice(index, 1);
-          }
-        }
-      }
-
-      return this;
-    };
-    /**
-     * Add a disposable listener and Use promise to the registered event.
-     * @param - Name of the event to be added
-     * @param - disposable listener function of the event to be added
-     * @example
-     * import EventEmitter from "@scena/event-emitter";
-     * cosnt emitter = new EventEmitter();
-     *
-     * // Add a disposable listener in "a" event
-     * emitter.once("a", () => {
-     * });
-     *
-     * // Use Promise
-     * emitter.once("a").then(e => {
-     * });
-     */
-
-
-    __proto.once = function (eventName, listener) {
-      var _this = this;
-
-      if (listener) {
-        this._addEvent(eventName, listener, {
-          once: true
-        });
-      }
-
-      return new Promise(function (resolve) {
-        _this._addEvent(eventName, resolve, {
-          once: true
-        });
-      });
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-
-    __proto.emit = function (eventName, param) {
-      var _this = this;
-
-      if (param === void 0) {
-        param = {};
-      }
-
-      var events = this._events[eventName];
-
-      if (!eventName || !events) {
-        return true;
-      }
-
-      var isStop = false;
-      param.eventType = eventName;
-
-      param.stop = function () {
-        isStop = true;
-      };
-
-      param.currentTarget = this;
-
-      __spreadArrays(events).forEach(function (info) {
-        info.listener(param);
-
-        if (info.once) {
-          _this.off(eventName, info.listener);
-        }
-      });
-
-      return !isStop;
-    };
-    /**
-     * Fires an event to call listeners.
-     * @param - Event name
-     * @param - Event parameter
-     * @return If false, stop the event.
-     * @example
-     *
-     * import EventEmitter from "@scena/event-emitter";
-     *
-     *
-     * const emitter = new EventEmitter();
-     *
-     * emitter.on("a", e => {
-     * });
-     *
-     *
-     * emitter.emit("a", {
-     *   a: 1,
-     * });
-     */
-
-    /**
-    * Fires an event to call listeners.
-    * @param - Event name
-    * @param - Event parameter
-    * @return If false, stop the event.
-    * @example
-    *
-    * import EventEmitter from "@scena/event-emitter";
-    *
-    *
-    * const emitter = new EventEmitter();
-    *
-    * emitter.on("a", e => {
-    * });
-    *
-    * // emit
-    * emitter.trigger("a", {
-    *   a: 1,
-    * });
-    */
-
-
-    __proto.trigger = function (eventName, param) {
-      if (param === void 0) {
-        param = {};
-      }
-
-      return this.emit(eventName, param);
-    };
-
-    __proto._addEvent = function (eventName, listener, options) {
-      var events = this._events;
-      events[eventName] = events[eventName] || [];
-      var listeners = events[eventName];
-      listeners.push(__assign$1({
-        listener: listener
-      }, options));
-    };
-
-    return EventEmitter;
-  }();
-
-  var EventEmitter$1 = EventEmitter;
-
-  /*
-  Copyright (c) 2019 Daybrush
-  name: gesto
-  license: MIT
-  author: Daybrush
-  repository: git+https://github.com/daybrush/gesto.git
-  version: 1.7.0
-  */
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */
-
-  /* global Reflect, Promise */
-  var extendStatics = function (d, b) {
-    extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-    };
-
-    return extendStatics(d, b);
-  };
-
-  function __extends(d, b) {
-    extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
-  var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-
-      return t;
-    };
-
-    return __assign.apply(this, arguments);
-  };
-
-  function getRad(pos1, pos2) {
-    var distX = pos2[0] - pos1[0];
-    var distY = pos2[1] - pos1[1];
-    var rad = Math.atan2(distY, distX);
-    return rad >= 0 ? rad : rad + Math.PI * 2;
-  }
-  function getRotatiion(touches) {
-    return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
-  }
-  function isMultiTouch(e) {
-    return e.touches && e.touches.length >= 2;
-  }
-  function getEventClients(e) {
-    if (e.touches) {
-      return getClients(e.touches);
-    } else {
-      return [getClient(e)];
-    }
-  }
-  function getPosition(clients, prevClients, startClients) {
-    var length = startClients.length;
-
-    var _a = getAverageClient(clients, length),
-        clientX = _a.clientX,
-        clientY = _a.clientY,
-        originalClientX = _a.originalClientX,
-        originalClientY = _a.originalClientY;
-
-    var _b = getAverageClient(prevClients, length),
-        prevX = _b.clientX,
-        prevY = _b.clientY;
-
-    var _c = getAverageClient(startClients, length),
-        startX = _c.clientX,
-        startY = _c.clientY;
-
-    var deltaX = clientX - prevX;
-    var deltaY = clientY - prevY;
-    var distX = clientX - startX;
-    var distY = clientY - startY;
-    return {
-      clientX: originalClientX,
-      clientY: originalClientY,
-      deltaX: deltaX,
-      deltaY: deltaY,
-      distX: distX,
-      distY: distY
-    };
-  }
-  function getDist(clients) {
-    return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
-  }
-  function getClients(touches) {
-    var length = Math.min(touches.length, 2);
-    var clients = [];
-
-    for (var i = 0; i < length; ++i) {
-      clients.push(getClient(touches[i]));
-    }
-
-    return clients;
-  }
-  function getClient(e) {
-    return {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
-  }
-  function getAverageClient(clients, length) {
-    if (length === void 0) {
-      length = clients.length;
-    }
-
-    var sumClient = {
-      clientX: 0,
-      clientY: 0,
-      originalClientX: 0,
-      originalClientY: 0
-    };
-
-    for (var i = 0; i < length; ++i) {
-      var client = clients[i];
-      sumClient.originalClientX += "originalClientX" in client ? client.originalClientX : client.clientX;
-      sumClient.originalClientY += "originalClientY" in client ? client.originalClientY : client.clientY;
-      sumClient.clientX += client.clientX;
-      sumClient.clientY += client.clientY;
-    }
-
-    if (!length) {
-      return sumClient;
-    }
-
-    return {
-      clientX: sumClient.clientX / length,
-      clientY: sumClient.clientY / length,
-      originalClientX: sumClient.originalClientX / length,
-      originalClientY: sumClient.originalClientY / length
-    };
-  }
-
-  var ClientStore =
-  /*#__PURE__*/
-  function () {
-    function ClientStore(clients) {
-      this.prevClients = [];
-      this.startClients = [];
-      this.movement = 0;
-      this.length = 0;
-      this.startClients = clients;
-      this.prevClients = clients;
-      this.length = clients.length;
-    }
-
-    var __proto = ClientStore.prototype;
-
-    __proto.getAngle = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients);
-    };
-
-    __proto.getRotation = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getRotatiion(clients) - getRotatiion(this.startClients);
-    };
-
-    __proto.getPosition = function (clients, isAdd) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var position = getPosition(clients || this.prevClients, this.prevClients, this.startClients);
-      var deltaX = position.deltaX,
-          deltaY = position.deltaY;
-      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      this.prevClients = clients;
-      return position;
-    };
-
-    __proto.getPositions = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var prevClients = this.prevClients;
-      return this.startClients.map(function (startClient, i) {
-        return getPosition([clients[i]], [prevClients[i]], [startClient]);
-      });
-    };
-
-    __proto.getMovement = function (clients) {
-      var movement = this.movement;
-
-      if (!clients) {
-        return movement;
-      }
-
-      var currentClient = getAverageClient(clients, this.length);
-      var prevClient = getAverageClient(this.prevClients, this.length);
-      var deltaX = currentClient.clientX - prevClient.clientX;
-      var deltaY = currentClient.clientY - prevClient.clientY;
-      return Math.sqrt(deltaX * deltaX + deltaY * deltaY) + movement;
-    };
-
-    __proto.getDistance = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients);
-    };
-
-    __proto.getScale = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      return getDist(clients) / getDist(this.startClients);
-    };
-
-    __proto.move = function (deltaX, deltaY) {
-      this.startClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
-    };
-
-    return ClientStore;
-  }();
-
-  var INPUT_TAGNAMES = ["textarea", "input"];
-  /**
-   * You can set up drag, pinch events in any browser.
-   */
-
-  var Gesto =
-  /*#__PURE__*/
-  function (_super) {
-    __extends(Gesto, _super);
-    /**
-     *
-     */
-
-
-    function Gesto(targets, options) {
-      if (options === void 0) {
-        options = {};
-      }
-
-      var _this = _super.call(this) || this;
-
-      _this.options = {};
-      _this.flag = false;
-      _this.pinchFlag = false;
-      _this.datas = {};
-      _this.isDrag = false;
-      _this.isPinch = false;
-      _this.isMouse = false;
-      _this.isTouch = false;
-      _this.clientStores = [];
-      _this.targets = [];
-      _this.prevTime = 0;
-      _this.doubleFlag = false;
-      _this._dragFlag = false;
-
-      _this.onDragStart = function (e, isTrusted) {
-        if (isTrusted === void 0) {
-          isTrusted = true;
-        }
-
-        if (!_this.flag && e.cancelable === false) {
-          return;
-        }
-
-        var _a = _this.options,
-            container = _a.container,
-            pinchOutside = _a.pinchOutside,
-            preventRightClick = _a.preventRightClick,
-            preventDefault = _a.preventDefault,
-            checkInput = _a.checkInput;
-        var isTouch = _this.isTouch;
-        var isDragStart = !_this.flag;
-
-        if (isDragStart) {
-          var activeElement = document.activeElement;
-          var target = e.target;
-          var tagName = target.tagName.toLowerCase();
-          var hasInput = INPUT_TAGNAMES.indexOf(tagName) > -1;
-          var hasContentEditable = target.isContentEditable;
-
-          if (hasInput || hasContentEditable) {
-            if (checkInput || activeElement === target) {
-              // force false or already focused.
-              return false;
-            } // no focus
-
-
-            if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
-              return false;
-            }
-          } else if ((preventDefault || e.type === "touchstart") && activeElement) {
-            var activeTagName = activeElement.tagName;
-
-            if (activeElement.isContentEditable || INPUT_TAGNAMES.indexOf(activeTagName) > -1) {
-              activeElement.blur();
-            }
-          }
-
-          _this.clientStores = [new ClientStore(getEventClients(e))];
-          _this.flag = true;
-          _this.isDrag = false;
-          _this._dragFlag = true;
-          _this.datas = {};
-
-          if (preventRightClick && (e.which === 3 || e.button === 2)) {
-            _this.initDrag();
-
-            return false;
-          }
-
-          _this.doubleFlag = now() - _this.prevTime < 200;
-
-          var result = _this.emit("dragStart", __assign({
-            datas: _this.datas,
-            inputEvent: e,
-            isTrusted: isTrusted,
-            isDouble: _this.doubleFlag
-          }, _this.getCurrentStore().getPosition(), {
-            preventDefault: function () {
-              e.preventDefault();
-            },
-            preventDrag: function () {
-              _this._dragFlag = false;
-            }
-          }));
-
-          if (result === false) {
-            _this.initDrag();
-          }
-
-          _this.flag && preventDefault && e.preventDefault();
-        }
-
-        if (!_this.flag) {
-          return false;
-        }
-
-        var timer = 0;
-
-        if (isDragStart && isTouch && pinchOutside) {
-          timer = setTimeout(function () {
-            addEvent(container, "touchstart", _this.onDragStart, {
-              passive: false
-            });
-          });
-        }
-
-        if (!isDragStart && isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        if (_this.flag && isMultiTouch(e)) {
-          clearTimeout(timer);
-
-          if (isDragStart && e.touches.length !== e.changedTouches.length) {
-            return;
-          }
-
-          if (!_this.pinchFlag) {
-            _this.onPinchStart(e);
-          }
-        }
-      };
-
-      _this.onDrag = function (e, isScroll) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var clients = getEventClients(e);
-
-        var result = _this.moveClients(clients, e, false);
-
-        if (_this._dragFlag) {
-          if (_this.pinchFlag || result.deltaX || result.deltaY) {
-            var dragResult = _this.emit("drag", __assign({}, result, {
-              isScroll: !!isScroll,
-              inputEvent: e
-            }));
-
-            if (dragResult === false) {
-              _this.stop();
-
-              return;
-            }
-          }
-
-          if (_this.pinchFlag) {
-            _this.onPinch(e, clients);
-          }
-        }
-
-        _this.getCurrentStore().getPosition(clients, true);
-      };
-
-      _this.onDragEnd = function (e) {
-        if (!_this.flag) {
-          return;
-        }
-
-        var _a = _this.options,
-            pinchOutside = _a.pinchOutside,
-            container = _a.container;
-
-        if (_this.isTouch && pinchOutside) {
-          removeEvent(container, "touchstart", _this.onDragStart);
-        }
-
-        _this.flag = false;
-
-        var position = _this._getPosition();
-
-        var currentTime = now();
-        var isDouble = !_this.isDrag && _this.doubleFlag;
-        _this.prevTime = _this.isDrag || isDouble ? 0 : currentTime;
-
-        _this.emit("dragEnd", __assign({
-          datas: _this.datas,
-          isDouble: isDouble,
-          isDrag: _this.isDrag,
-          isClick: !_this.isDrag,
-          inputEvent: e
-        }, position));
-
-        if (_this.pinchFlag) {
-          _this.onPinchEnd(e);
-        }
-
-        _this.clientStores = [];
-      };
-
-      _this.onBlur = function () {
-        _this.onDragEnd();
-      };
-
-      var elements = [].concat(targets);
-      _this.options = __assign({
-        checkInput: false,
-        container: elements.length > 1 ? window : elements[0],
-        preventRightClick: true,
-        preventDefault: true,
-        checkWindowBlur: false,
-        pinchThreshold: 0,
-        events: ["touch", "mouse"]
-      }, options);
-      var _a = _this.options,
-          container = _a.container,
-          events = _a.events,
-          checkWindowBlur = _a.checkWindowBlur;
-      _this.isTouch = events.indexOf("touch") > -1;
-      _this.isMouse = events.indexOf("mouse") > -1;
-      _this.targets = elements;
-
-      if (_this.isMouse) {
-        elements.forEach(function (el) {
-          addEvent(el, "mousedown", _this.onDragStart);
-        });
-        addEvent(container, "mousemove", _this.onDrag);
-        addEvent(container, "mouseup", _this.onDragEnd);
-        addEvent(container, "contextmenu", _this.onDragEnd);
-      }
-
-      if (checkWindowBlur) {
-        addEvent(window, "blur", _this.onBlur);
-      }
-
-      if (_this.isTouch) {
-        var passive_1 = {
-          passive: false
-        };
-        elements.forEach(function (el) {
-          addEvent(el, "touchstart", _this.onDragStart, passive_1);
-        });
-        addEvent(container, "touchmove", _this.onDrag, passive_1);
-        addEvent(container, "touchend", _this.onDragEnd, passive_1);
-        addEvent(container, "touchcancel", _this.onDragEnd, passive_1);
-      }
-
-      return _this;
-    }
-    /**
-     * Stop Gesto's drag events.
-     */
-
-
-    var __proto = Gesto.prototype;
-
-    __proto.stop = function () {
-      this.isDrag = false;
-      this.flag = false;
-      this.clientStores = [];
-      this.datas = {};
-    };
-    /**
-     * The total moved distance
-     */
-
-
-    __proto.getMovement = function (clients) {
-      return this.getCurrentStore().getMovement(clients) + this.clientStores.slice(1).reduce(function (prev, cur) {
-        return prev + cur.movement;
-      }, 0);
-    };
-    /**
-     * Whether to drag
-     */
-
-
-    __proto.isDragging = function () {
-      return this.isDrag;
-    };
-    /**
-     * Whether to start drag
-     */
-
-
-    __proto.isFlag = function () {
-      return this.flag;
-    };
-    /**
-     * Whether to start pinch
-     */
-
-
-    __proto.isPinchFlag = function () {
-      return this.pinchFlag;
-    };
-    /**
-    * Whether to start double click
-    */
-
-
-    __proto.isDoubleFlag = function () {
-      return this.doubleFlag;
-    };
-    /**
-     * Whether to pinch
-     */
-
-
-    __proto.isPinching = function () {
-      return this.isPinch;
-    };
-    /**
-     * If a scroll event occurs, it is corrected by the scroll distance.
-     */
-
-
-    __proto.scrollBy = function (deltaX, deltaY, e, isCallDrag) {
-      if (isCallDrag === void 0) {
-        isCallDrag = true;
-      }
-
-      if (!this.flag) {
-        return;
-      }
-
-      this.clientStores[0].move(deltaX, deltaY);
-      isCallDrag && this.onDrag(e, true);
-    };
-    /**
-     * Create a virtual drag event.
-     */
-
-
-    __proto.move = function (_a, inputEvent) {
-      var deltaX = _a[0],
-          deltaY = _a[1];
-      var store = this.getCurrentStore();
-      var nextClients = store.prevClients;
-      return this.moveClients(nextClients.map(function (_a) {
-        var clientX = _a.clientX,
-            clientY = _a.clientY;
-        return {
-          clientX: clientX + deltaX,
-          clientY: clientY + deltaY,
-          originalClientX: clientX,
-          originalClientY: clientY
-        };
-      }), inputEvent, true);
-    };
-    /**
-     * The dragStart event is triggered by an external event.
-     */
-
-
-    __proto.triggerDragStart = function (e) {
-      this.onDragStart(e, false);
-    };
-    /**
-     * Set the event data while dragging.
-     */
-
-
-    __proto.setEventDatas = function (datas) {
-      var currentDatas = this.datas;
-
-      for (var name in datas) {
-        currentDatas[name] = datas[name];
-      }
-
-      return this;
-    };
-    /**
-     * Get the current event state while dragging.
-     */
-
-
-    __proto.getCurrentEvent = function (inputEvent) {
-      return __assign({
-        datas: this.datas
-      }, this._getPosition(), {
-        movement: this.getMovement(),
-        isDrag: this.isDrag,
-        isPinch: this.isPinch,
-        isScroll: false,
-        inputEvent: inputEvent
-      });
-    };
-    /**
-     * Get & Set the event data while dragging.
-     */
-
-
-    __proto.getEventDatas = function () {
-      return this.datas;
-    };
-    /**
-     * Unset Gesto
-     */
-
-
-    __proto.unset = function () {
-      var _this = this;
-
-      var targets = this.targets;
-      var container = this.options.container;
-      this.off();
-      removeEvent(window, "blur", this.onBlur);
-
-      if (this.isMouse) {
-        targets.forEach(function (target) {
-          removeEvent(target, "mousedown", _this.onDragStart);
-        });
-        removeEvent(container, "mousemove", this.onDrag);
-        removeEvent(container, "mouseup", this.onDragEnd);
-        removeEvent(container, "contextmenu", this.onDragEnd);
-      }
-
-      if (this.isTouch) {
-        targets.forEach(function (target) {
-          removeEvent(target, "touchstart", _this.onDragStart);
-        });
-        removeEvent(container, "touchstart", this.onDragStart);
-        removeEvent(container, "touchmove", this.onDrag);
-        removeEvent(container, "touchend", this.onDragEnd);
-        removeEvent(container, "touchcancel", this.onDragEnd);
-      }
-    };
-
-    __proto.onPinchStart = function (e) {
-      var pinchThreshold = this.options.pinchThreshold;
-
-      if (this.isDrag && this.getMovement() > pinchThreshold) {
-        return;
-      }
-
-      var store = new ClientStore(getEventClients(e));
-      this.pinchFlag = true;
-      this.clientStores.splice(0, 0, store);
-      var result = this.emit("pinchStart", __assign({
-        datas: this.datas,
-        angle: store.getAngle(),
-        touches: this.getCurrentStore().getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-
-      if (result === false) {
-        this.pinchFlag = false;
-      }
-    };
-
-    __proto.onPinch = function (e, clients) {
-      if (!this.flag || !this.pinchFlag || clients.length < 2) {
-        return;
-      }
-
-      var store = this.getCurrentStore();
-      this.isPinch = true;
-      this.emit("pinch", __assign({
-        datas: this.datas,
-        movement: this.getMovement(clients),
-        angle: store.getAngle(clients),
-        rotation: store.getRotation(clients),
-        touches: store.getPositions(clients),
-        scale: store.getScale(clients),
-        distance: store.getDistance(clients)
-      }, store.getPosition(clients), {
-        inputEvent: e
-      }));
-    };
-
-    __proto.onPinchEnd = function (e) {
-      if (!this.pinchFlag) {
-        return;
-      }
-
-      var isPinch = this.isPinch;
-      this.isPinch = false;
-      this.pinchFlag = false;
-      var store = this.getCurrentStore();
-      this.emit("pinchEnd", __assign({
-        datas: this.datas,
-        isPinch: isPinch,
-        touches: store.getPositions()
-      }, store.getPosition(), {
-        inputEvent: e
-      }));
-      this.isPinch = false;
-      this.pinchFlag = false;
-    };
-
-    __proto.initDrag = function () {
-      this.clientStores = [];
-      this.pinchFlag = false;
-      this.doubleFlag = false;
-      this.prevTime = 0;
-      this.flag = false;
-    };
-
-    __proto.getCurrentStore = function () {
-      return this.clientStores[0];
-    };
-
-    __proto.moveClients = function (clients, inputEvent, isAdd) {
-      var position = this._getPosition(clients, isAdd);
-
-      if (position.deltaX || position.deltaY) {
-        this.isDrag = true;
-      }
-
-      return __assign({
-        datas: this.datas
-      }, position, {
-        movement: this.getMovement(clients),
-        isDrag: this.isDrag,
-        isPinch: this.isPinch,
-        isScroll: false,
-        inputEvent: inputEvent
-      });
-    };
-
-    __proto._getPosition = function (clients, isAdd) {
-      var store = this.getCurrentStore();
-      var position = store.getPosition(clients, isAdd);
-
-      var _a = this.clientStores.slice(1).reduce(function (prev, cur) {
-        var storePosition = cur.getPosition();
-        prev.distX += storePosition.distX;
-        prev.distY += storePosition.distY;
-        return prev;
-      }, position),
-          distX = _a.distX,
-          distY = _a.distY;
-
-      return __assign({}, position, {
-        distX: distX,
-        distY: distY
-      });
-    };
-
-    return Gesto;
-  }(EventEmitter$1);
-
-  var Gesto$1 = Gesto;
-
   const _sfc_main$h = vue.defineComponent({
     name: "m-editor-resize",
     props: {
@@ -2794,7 +1606,7 @@
       vue.onMounted(() => {
         if (!target.value)
           return;
-        getso = new Gesto$1(target.value, {
+        getso = new Gesto__default["default"](target.value, {
           container: window,
           pinchOutside: true
         }).on("drag", (e) => {
@@ -2838,6 +1650,12 @@
       AddPageBox,
       Resizer
     },
+    props: {
+      codeOptions: {
+        type: Object,
+        default: () => ({})
+      }
+    },
     setup() {
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
@@ -2872,8 +1690,9 @@
         key: 0,
         class: "m-editor-content",
         "init-values": _ctx.root,
+        options: _ctx.codeOptions,
         onSave: _ctx.saveCode
-      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+      }, null, 8, ["init-values", "options", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
         vue.createElementVNode("div", {
           class: "m-editor-framework-left",
           style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -3321,13 +2140,13 @@
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
       class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
-      "popper-class": "m-editor-props-panel-popper",
+      "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
       ref: "configForm",
       size: _ctx.propsPanelSize,
       "init-values": _ctx.values,
       config: _ctx.curFormConfig,
       onChange: _ctx.submit
-    }, null, 8, ["class", "size", "init-values", "config", "onChange"]);
+    }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"]);
   }
   var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
@@ -3507,7 +2326,7 @@
   function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     const _component_content_menu = vue.resolveComponent("content-menu", true);
-    return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    return _ctx.menuData.length && _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "magic-editor-content-menu",
       ref: "menu",
@@ -3531,9 +2350,7 @@
           "menu-data": _ctx.subMenuData
         }, null, 8, ["menu-data"])
       ]))
-    ], 4)), [
-      [vue.vShow, _ctx.visible]
-    ]) : vue.createCommentVNode("", true);
+    ], 4)) : vue.createCommentVNode("", true);
   }
   var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -3833,7 +2650,7 @@
     components: { MIcon },
     props: {
       data: {
-        type: Object
+        type: [Object, String]
       }
     },
     setup(props) {
@@ -4436,8 +3253,17 @@
             text: "\u7C98\u8D34",
             display: () => canPaste.value,
             handler: () => {
-              const top = menu.value?.$el.offsetTop || 0;
-              const left = menu.value?.$el.offsetLeft || 0;
+              const stage = editorService?.get("stage");
+              const rect = menu.value?.$el.getBoundingClientRect();
+              const parentRect = stage?.container?.getBoundingClientRect();
+              let left = (rect?.left || 0) - (parentRect?.left || 0);
+              let top = (rect?.top || 0) - (parentRect?.top || 0);
+              if (node.value?.items && stage) {
+                const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
+                const parentElRect = parentEl?.getBoundingClientRect();
+                left = left - (parentElRect?.left || 0);
+                top = top - (parentElRect?.top || 0);
+              }
               editorService?.paste({ left, top });
             }
           },
@@ -4532,6 +3358,7 @@
         type: Function
       },
       runtimeUrl: String,
+      autoScrollIntoView: Boolean,
       canSelect: {
         type: Function,
         default: (el) => Boolean(el.id)
@@ -4567,6 +3394,7 @@
           render: props.render,
           runtimeUrl: props.runtimeUrl,
           zoom: zoom.value,
+          autoScrollIntoView: props.autoScrollIntoView,
           canSelect: (el, event, stop) => {
             const elCanSelect = props.canSelect(el);
             if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -4656,6 +3484,7 @@
             const { scrollTop, scrollLeft } = stage.mask;
             if (layout === Layout.ABSOLUTE) {
               config.style = {
+                ...config.style || {},
                 position: "absolute",
                 top: e.clientY - containerRect.top + scrollTop,
                 left: e.clientX - containerRect.left + scrollLeft
@@ -4703,6 +3532,7 @@
     },
     props: {
       runtimeUrl: String,
+      autoScrollIntoView: Boolean,
       render: {
         type: Function
       },
@@ -4721,8 +3551,12 @@
       const mouseenterHandler = () => {
         workspace.value?.focus();
       };
+      const mouseleaveHandler = () => {
+        workspace.value?.blur();
+      };
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
         keycon = new KeyController__default["default"](workspace.value);
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
@@ -4731,6 +3565,11 @@
           if (!node.value || utils.isPage(node.value))
             return;
           services?.editorService.remove(node.value);
+        }).keyup("backspace", (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.remove(node.value);
         }).keydown([ctrl, "c"], (e) => {
           e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
@@ -4782,13 +3621,20 @@
         }).keydown([ctrl, "="], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(0.1);
+        }).keydown([ctrl, "numpadplus"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
         }).keydown([ctrl, "-"], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
+        }).keydown([ctrl, "numpad-"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
         });
       });
       vue.onUnmounted(() => {
         workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
         keycon.destroy();
       });
       return {
@@ -4809,10 +3655,11 @@
       (vue.openBlock(), vue.createBlock(_component_magic_stage, {
         key: _ctx.page?.id,
         "runtime-url": _ctx.runtimeUrl,
+        "auto-scroll-into-view": _ctx.autoScrollIntoView,
         render: _ctx.render,
         "moveable-options": _ctx.moveableOptions,
         "can-select": _ctx.canSelect
-      }, null, 8, ["runtime-url", "render", "moveable-options", "can-select"])),
+      }, null, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [
@@ -4989,6 +3836,7 @@
         type: Function
       },
       runtimeUrl: String,
+      autoScrollIntoView: Boolean,
       propsConfigs: {
         type: Object,
         default: () => ({})
@@ -5012,6 +3860,10 @@
       },
       stageRect: {
         type: [String, Object]
+      },
+      codeOptions: {
+        type: Object,
+        default: () => ({})
       }
     },
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -5070,7 +3922,7 @@
     const _component_workspace = vue.resolveComponent("workspace");
     const _component_props_panel = vue.resolveComponent("props-panel");
     const _component_framework = vue.resolveComponent("framework");
-    return vue.openBlock(), vue.createBlock(_component_framework, null, {
+    return vue.openBlock(), vue.createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
       nav: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
@@ -5085,6 +3937,7 @@
         vue.renderSlot(_ctx.$slots, "workspace", {}, () => [
           vue.createVNode(_component_workspace, {
             "runtime-url": _ctx.runtimeUrl,
+            "auto-scroll-into-view": _ctx.autoScrollIntoView,
             render: _ctx.render,
             "moveable-options": _ctx.moveableOptions,
             "can-select": _ctx.canSelect
@@ -5099,7 +3952,7 @@
               vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
             ]),
             _: 3
-          }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+          }, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])
         ])
       ]),
       propsPanel: vue.withCtx(() => [
@@ -5114,7 +3967,7 @@
         vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
       ]),
       _: 3
-    });
+    }, 8, ["code-options"]);
   }
   var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);