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

package/dist/tmagic-editor.es.js

@@ -1,19 +1,23 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
 import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import { NodeType } from '@tmagic/schema';
 import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
-import { EventEmitter as EventEmitter$2 } from 'events';
+import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
-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;
@@ -310,11 +314,7 @@ const _sfc_main$j = defineComponent({
       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") {
@@ -328,6 +328,7 @@ const _sfc_main$j = defineComponent({
       codeEditor.value.addEventListener("keydown", (e) => {
         if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
+          e.stopPropagation();
           emit("save", getEditorValue());
         }
       });
@@ -483,7 +484,7 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
     throw error;
   }
 };
-class BaseService extends EventEmitter$2 {
+class BaseService extends EventEmitter {
   constructor(methods = [], serialMethods = []) {
     super();
     this.pluginOptionsList = {};
@@ -944,6 +945,13 @@ class Editor$1 extends BaseService {
     } else {
       historyService.empty();
     }
+    if (node?.id) {
+      this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+        node,
+        page,
+        parent
+      }, getNodePath(node.id, this.get("root").items));
+    }
     this.emit("select", node);
     return node;
   }
@@ -1132,6 +1140,9 @@ class Editor$1 extends BaseService {
         ...position
       };
     }
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get("root"));
+    }
     return await this.add(config);
   }
   async alignCenter(config2) {
@@ -1141,7 +1152,17 @@ class Editor$1 extends BaseService {
     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 && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
     await this.update(node);
@@ -1553,1215 +1574,6 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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 = defineComponent({
   name: "m-editor-resize",
   props: {
@@ -2776,7 +1588,7 @@ const _sfc_main$h = defineComponent({
     onMounted(() => {
       if (!target.value)
         return;
-      getso = new Gesto$1(target.value, {
+      getso = new Gesto(target.value, {
         container: window,
         pinchOutside: true
       }).on("drag", (e) => {
@@ -2820,6 +1632,12 @@ const _sfc_main$g = defineComponent({
     AddPageBox,
     Resizer
   },
+  props: {
+    codeOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   setup() {
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
@@ -2854,8 +1672,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       class: "m-editor-content",
       "init-values": _ctx.root,
+      options: _ctx.codeOptions,
       onSave: _ctx.saveCode
-    }, null, 8, ["init-values", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
+    }, null, 8, ["init-values", "options", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
       createElementVNode("div", {
         class: "m-editor-framework-left",
         style: normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
@@ -3303,13 +2122,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: 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]]);
 
@@ -3489,7 +2308,7 @@ const _sfc_main$a = defineComponent({
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   const _component_content_menu = resolveComponent("content-menu", true);
-  return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+  return _ctx.menuData.length && _ctx.visible ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "magic-editor-content-menu",
     ref: "menu",
@@ -3513,9 +2332,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         "menu-data": _ctx.subMenuData
       }, null, 8, ["menu-data"])
     ]))
-  ], 4)), [
-    [vShow, _ctx.visible]
-  ]) : createCommentVNode("", true);
+  ], 4)) : createCommentVNode("", true);
 }
 var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -3815,7 +2632,7 @@ const _sfc_main$7 = defineComponent({
   components: { MIcon },
   props: {
     data: {
-      type: Object
+      type: [Object, String]
     }
   },
   setup(props) {
@@ -4418,8 +3235,17 @@ const _sfc_main$3 = defineComponent({
           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 });
           }
         },
@@ -4514,6 +3340,7 @@ const _sfc_main$2 = defineComponent({
       type: Function
     },
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     canSelect: {
       type: Function,
       default: (el) => Boolean(el.id)
@@ -4549,6 +3376,7 @@ const _sfc_main$2 = defineComponent({
         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") {
@@ -4638,6 +3466,7 @@ const _sfc_main$2 = defineComponent({
           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
@@ -4685,6 +3514,7 @@ const _sfc_main$1 = defineComponent({
   },
   props: {
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     render: {
       type: Function
     },
@@ -4703,8 +3533,12 @@ const _sfc_main$1 = defineComponent({
     const mouseenterHandler = () => {
       workspace.value?.focus();
     };
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
     onMounted(() => {
       workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
       keycon = new KeyController(workspace.value);
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
@@ -4713,6 +3547,11 @@ const _sfc_main$1 = defineComponent({
         if (!node.value || isPage(node.value))
           return;
         services?.editorService.remove(node.value);
+      }).keyup("backspace", (e) => {
+        e.inputEvent.preventDefault();
+        if (!node.value || isPage(node.value))
+          return;
+        services?.editorService.remove(node.value);
       }).keydown([ctrl, "c"], (e) => {
         e.inputEvent.preventDefault();
         node.value && services?.editorService.copy(node.value);
@@ -4764,13 +3603,20 @@ const _sfc_main$1 = defineComponent({
       }).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);
       });
     });
     onUnmounted(() => {
       workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
       keycon.destroy();
     });
     return {
@@ -4791,10 +3637,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(), 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"])),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -4971,6 +3818,7 @@ const _sfc_main = defineComponent({
       type: Function
     },
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     propsConfigs: {
       type: Object,
       default: () => ({})
@@ -4994,6 +3842,10 @@ const _sfc_main = defineComponent({
     },
     stageRect: {
       type: [String, Object]
+    },
+    codeOptions: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["props-panel-mounted", "update:modelValue"],
@@ -5052,7 +3904,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_workspace = resolveComponent("workspace");
   const _component_props_panel = resolveComponent("props-panel");
   const _component_framework = resolveComponent("framework");
-  return openBlock(), createBlock(_component_framework, null, {
+  return openBlock(), createBlock(_component_framework, { "code-options": _ctx.codeOptions }, {
     nav: withCtx(() => [
       renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
         createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
@@ -5067,6 +3919,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "workspace", {}, () => [
         createVNode(_component_workspace, {
           "runtime-url": _ctx.runtimeUrl,
+          "auto-scroll-into-view": _ctx.autoScrollIntoView,
           render: _ctx.render,
           "moveable-options": _ctx.moveableOptions,
           "can-select": _ctx.canSelect
@@ -5081,7 +3934,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             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: withCtx(() => [
@@ -5096,7 +3949,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
     ]),
     _: 3
-  });
+  }, 8, ["code-options"]);
 }
 var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);