mce 0.15.37 → 0.15.38

package/dist/index.css

@@ -55,9 +55,9 @@
   transform-origin: left bottom;
   font-size: 0.75rem;
   line-height: 1.5;
-  white-space: nowrap;
   pointer-events: auto;
   user-select: none;
+  max-width: 100%;
 }
 .mce-frame__name > div {
   position: relative;
@@ -65,6 +65,10 @@
   box-sizing: content-box;
   color: rgb(var(--mce-theme-on-surface));
   opacity: 0.5;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .mce-frame__name > input {
   position: absolute;
@@ -755,13 +759,15 @@
   border-style: dashed;
   color: rgba(var(--mce-theme-primary), 1);
   opacity: 0.5;
+  border-color: currentColor;
 }
-.mce-selection__area {
+.mce-selection__marquee {
   position: absolute;
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
   background-color: rgba(var(--mce-theme-primary), 0.1);
+  border-color: currentcolor;
 }
 .mce-selection__transform {
   position: absolute;
@@ -772,6 +778,7 @@
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
+  border-color: currentcolor;
 }.mce-smart-guides {
   position: absolute;
   overflow: hidden;

package/dist/index.js

@@ -895,7 +895,7 @@ const _0_context = defineMixin((editor) => {
   const nodes = ref([]);
   const nodeIndexMap = reactive(/* @__PURE__ */ new Map());
   const selection = ref([]);
-  const selectionArea = ref(new Aabb2D());
+  const selectionMarquee = ref(new Aabb2D());
   const elementSelection = computed({
     get: () => selection.value.filter((v) => isElement(v)),
     set: (val) => selection.value = val
@@ -973,7 +973,7 @@ const _0_context = defineMixin((editor) => {
     nodes,
     nodeIndexMap,
     selection,
-    selectionArea,
+    selectionMarquee,
     elementSelection,
     textSelection,
     hoverElement,
@@ -1725,7 +1725,7 @@ function parseKey(key) {
       default:
         return String.fromCharCode(getCharCode(v));
     }
-  }).filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+  }).filter(Boolean).sort().join("+");
 }
 function parseKeyboardEvent(event) {
   if (event.key.toLowerCase() === "capslock") {
@@ -1741,7 +1741,7 @@ function parseKeyboardEvent(event) {
     event.altKey && "Alt",
     event.shiftKey && "Shift",
     !["Meta", "Control", "Alt", "Shift"].includes(event.key) && String.fromCharCode(key)
-  ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+  ].filter(Boolean).sort().join("+");
 }
 const _1_hotkey = defineMixin((editor) => {
   const {
@@ -3167,17 +3167,16 @@ const _4_1_text = defineMixin((editor) => {
     textSelection,
     fonts
   } = editor;
-  const element = computed(() => elementSelection.value[0]);
   const hasTextSelectionRange = computed(() => {
     return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
   });
   const isTextAllSelected = computed(() => {
     return textSelection.value?.[0].isFirst && textSelection.value?.[1].isLast && textSelection.value?.[1].isLastSelected;
   });
-  function textFontSizeToFit(element2, scale) {
-    function _handle(element3) {
+  function textFontSizeToFit(element, scale) {
+    function _handle(element2) {
       if (!scale) {
-        const chars = element3.text.base.characters;
+        const chars = element2.text.base.characters;
         let pos = 0;
         let char;
         chars.forEach((_char) => {
@@ -3199,7 +3198,7 @@ const _4_1_text = defineMixin((editor) => {
         const { boundingBox } = measureText({
           fonts,
           style: {
-            ...element3.style.toJSON(),
+            ...element2.style.toJSON(),
             width: "auto"
           },
           content: [
@@ -3210,8 +3209,8 @@ const _4_1_text = defineMixin((editor) => {
             }
           ]
         });
-        const fontSize = (element3.style.fontSize || 12) / 2;
-        scale = (element3.style.width ?? 0) / (boundingBox.width + fontSize);
+        const fontSize = (element2.style.fontSize || 12) / 2;
+        scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
       }
       function _scaleStyle(style) {
         if (style.fontSize)
@@ -3219,39 +3218,39 @@ const _4_1_text = defineMixin((editor) => {
         if (style.letterSpacing)
           style.letterSpacing = style.letterSpacing * scale;
       }
-      _scaleStyle(element3.style);
-      if (element3.text?.isValid?.() && Array.isArray(element3.text?.content)) {
-        element3.text.content.forEach((p) => {
+      _scaleStyle(element2.style);
+      if (element2.text?.isValid?.() && Array.isArray(element2.text?.content)) {
+        element2.text.content.forEach((p) => {
           _scaleStyle(p);
           p.fragments.forEach((f) => {
             _scaleStyle(f);
           });
         });
       }
-      element3.requestRender();
+      element2.requestRender();
     }
-    _handle(element2);
-    element2.findOne((descendant) => {
+    _handle(element);
+    element.findOne((descendant) => {
       if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
     });
   }
-  function textToFit(element2, typography) {
+  function textToFit(element, typography) {
     const strategy = typography ?? config.value.typographyStrategy;
     if (strategy === "fixedWidthHeight") {
       return;
     } else if (strategy === "autoFontSize") {
-      textFontSizeToFit(element2);
+      textFontSizeToFit(element);
       return;
     }
-    function _handle(element3) {
-      if (!element3.text?.isValid?.() || typeof element3.text?.content !== "object") {
+    function _handle(element2) {
+      if (!element2.text?.isValid?.() || typeof element2.text?.content !== "object") {
         return;
       }
-      const isVertical = element3.text.base.isVertical;
-      const style = element3.style.toJSON();
+      const isVertical = element2.text.base.isVertical;
+      const style = element2.style.toJSON();
       switch (strategy) {
         case "autoWidth":
           if (isVertical) {
@@ -3271,16 +3270,16 @@ const _4_1_text = defineMixin((editor) => {
       const { boundingBox } = measureText({
         fonts,
         style,
-        content: element3.text.content
+        content: element2.text.content
       });
-      if (element3.style.width !== boundingBox.width || element3.style.height !== boundingBox.height) {
-        element3.style.width = boundingBox.width;
-        element3.style.height = boundingBox.height;
-        element3.requestRender();
+      if (element2.style.width !== boundingBox.width || element2.style.height !== boundingBox.height) {
+        element2.style.width = boundingBox.width;
+        element2.style.height = boundingBox.height;
+        element2.requestRender();
       }
     }
-    _handle(element2);
-    element2.findOne((descendant) => {
+    _handle(element);
+    element.findOne((descendant) => {
       if (isElement(descendant)) {
         _handle(descendant);
       }
@@ -3289,7 +3288,7 @@ const _4_1_text = defineMixin((editor) => {
   }
   function handleTextSelection([start, end], cb) {
     let flag = true;
-    element.value?.text?.content.forEach((p, pIndex, pItems) => {
+    elementSelection.value[0]?.text?.content.forEach((p, pIndex, pItems) => {
       if (!flag)
         return;
       p.fragments.forEach((f, fIndex, fItems) => {
@@ -3315,13 +3314,21 @@ const _4_1_text = defineMixin((editor) => {
     });
   }
   function getTextStyle(key) {
-    const el = element.value;
+    const el = elementSelection.value[0];
     if (!el) {
       return void 0;
     }
-    let value = el.style[key];
-    const content = el.text.content;
-    if (hasTextSelectionRange.value) {
+    let value;
+    switch (key) {
+      case "fill":
+      case "outline":
+        value = el.text[key];
+        break;
+      default:
+        value = el.style[key];
+        break;
+    }
+    if (hasTextSelectionRange.value && !isTextAllSelected.value) {
       const selection = textSelection.value;
       if (selection && selection[0] && selection[1]) {
         handleTextSelection(selection, ({ selected, fStyle }) => {
@@ -3333,6 +3340,7 @@ const _4_1_text = defineMixin((editor) => {
         });
       }
     } else {
+      const content = el.text.content;
       switch (key) {
         case "fontSize":
           return content?.reduce((prev, p) => {
@@ -3349,7 +3357,7 @@ const _4_1_text = defineMixin((editor) => {
     return value;
   }
   function setTextContentByEachFragment(handler) {
-    const el = element.value;
+    const el = elementSelection.value[0];
     if (!el) {
       return;
     }
@@ -3392,7 +3400,7 @@ const _4_1_text = defineMixin((editor) => {
     }
   }
   function setTextStyle(key, value) {
-    const el = element.value;
+    const el = elementSelection.value[0];
     if (!el) {
       return;
     }
@@ -3436,7 +3444,7 @@ const _4_1_text = defineMixin((editor) => {
     }
   }
   function getTextFill() {
-    const el = element.value;
+    const el = elementSelection.value[0];
     if (!el) {
       return void 0;
     }
@@ -3451,7 +3459,7 @@ const _4_1_text = defineMixin((editor) => {
     return fill;
   }
   function setTextFill(value) {
-    const el = element.value;
+    const el = elementSelection.value[0];
     if (!el) {
       return void 0;
     }
@@ -3536,11 +3544,7 @@ const _4_3_element = defineMixin((editor) => {
     textFontSizeToFit,
     textToFit,
     log,
-    root,
     isElement,
-    inEditorIs,
-    isLock,
-    getObb,
     config,
     getAabb,
     getGlobalPointer,
@@ -3735,24 +3739,10 @@ const _4_3_element = defineMixin((editor) => {
     options.textToFit && textToFit(el);
     options.textFontSizeToFit && textFontSizeToFit(el, scaleX);
   }
-  function selectArea(areaInDrawboard) {
-    const area2 = new Obb2D(areaInDrawboard);
-    const selected = root.value?.children.flatMap((node) => {
-      if (inEditorIs(node, "Frame") && node.parent?.equal(root.value)) {
-        return node.children;
-      }
-      return [node];
-    }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlap(area2) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
-    }) ?? [];
-    selection.value = selected;
-    return selected;
-  }
   Object.assign(editor, {
     addElement,
     addElements: addElement,
-    resizeElement,
-    selectArea
+    resizeElement
   });
 });
 const _4_4_doc = defineMixin((editor, options) => {
@@ -13067,7 +13057,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       state,
       resizeElement,
       selection,
-      selectionArea,
+      selectionMarquee,
       elementSelection,
       selectionObb,
       selectionObbInDrawboard,
@@ -13296,29 +13286,20 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key: index,
             class: "mce-selection__parent",
-            style: normalizeStyle$1({
-              borderColor: "currentColor",
-              ...style
-            })
+            style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)),
         unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
             class: "mce-selection__node",
-            style: normalizeStyle$1({
-              borderColor: "currentcolor",
-              ...style
-            })
+            style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)) : createCommentVNode("", true),
         unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: "mce-selection__area",
-          style: normalizeStyle$1({
-            borderColor: "currentcolor",
-            ...unref(selectionArea).toCssStyle()
-          })
+          class: "mce-selection__marquee",
+          style: normalizeStyle$1(unref(selectionMarquee).toCssStyle())
         }, null, 4)) : createCommentVNode("", true),
         transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
           key: 2,
@@ -13363,6 +13344,7 @@ const _selection = definePlugin((editor) => {
   const {
     isElement,
     selection,
+    selectionMarquee,
     elementSelection,
     getObb,
     getAabb,
@@ -13370,6 +13352,7 @@ const _selection = definePlugin((editor) => {
     root,
     findSibling,
     inEditorIs,
+    isTopFrame,
     addElement,
     addElements,
     obbToFit,
@@ -13406,9 +13389,9 @@ const _selection = definePlugin((editor) => {
       }
       case "previousSibling":
       case "nextSibling": {
-        const value = findSibling(target === "previousSibling" ? "previous" : "next");
-        if (value) {
-          selection.value = [value];
+        const sibling = findSibling(target === "previousSibling" ? "previous" : "next");
+        if (sibling) {
+          selection.value = [sibling];
           exec("zoomTo", "selection", {
             intoView: true,
             behavior: "smooth"
@@ -13421,6 +13404,17 @@ const _selection = definePlugin((editor) => {
         break;
     }
   }
+  function marqueeSelect(marquee = selectionMarquee.value) {
+    const area2 = new Obb2D(marquee);
+    selection.value = root.value?.children.flatMap((node) => {
+      if (isTopFrame(node) && !area2.contains(getObb(node, "drawboard"))) {
+        return node.children;
+      }
+      return [node];
+    }).filter((node) => {
+      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlap(area2) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
+    }) ?? [];
+  }
   function groupSelection(inEditorIs2) {
     const elements = elementSelection.value;
     if (!elements.length) {
@@ -13514,6 +13508,7 @@ const _selection = definePlugin((editor) => {
     name: "mce:selection",
     commands: [
       { command: "select", handle: select },
+      { command: "marqueeSelect", handle: marqueeSelect },
       { command: "selectAll", handle: () => select("all") },
       { command: "selectInverse", handle: () => select("inverse") },
       { command: "selectNone", handle: () => select("none") },
@@ -17076,12 +17071,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement,
       state,
       setCursor,
-      selectArea,
       exec,
       isLock,
       t,
       selectionAabbInDrawboard,
-      selectionArea,
+      selectionMarquee,
       elementSelection,
       drawboardAabb,
       drawboardPointer,
@@ -17211,11 +17205,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         if (state.value !== "selecting") {
           state.value = "selecting";
         }
-        selectionArea.value.x = Math.min(start.x, current.x) - drawboardAabb.value.left;
-        selectionArea.value.y = Math.min(start.y, current.y) - drawboardAabb.value.top;
-        selectionArea.value.width = Math.abs(start.x - current.x);
-        selectionArea.value.height = Math.abs(start.y - current.y);
-        selected = selectArea(selectionArea.value);
+        selectionMarquee.value.x = Math.min(start.x, current.x) - drawboardAabb.value.left;
+        selectionMarquee.value.y = Math.min(start.y, current.y) - drawboardAabb.value.top;
+        selectionMarquee.value.width = Math.abs(start.x - current.x);
+        selectionMarquee.value.height = Math.abs(start.y - current.y);
+        exec("marqueeSelect");
+        selected = elementSelection.value;
       }
       function onActivate() {
         const result = props.activeStrategy({

package/dist/mixins/0.context.d.ts

@@ -38,7 +38,7 @@ declare global {
             nodes: Ref<Node[]>;
             nodeIndexMap: Map<string, number>;
             selection: Ref<Node[]>;
-            selectionArea: Ref<Aabb2D>;
+            selectionMarquee: Ref<Aabb2D>;
             elementSelection: Ref<Element2D[]>;
             textSelection: Ref<IndexCharacter[] | undefined>;
             hoverElement: Ref<Element2D | undefined>;

package/dist/mixins/4.3.element.d.ts

@@ -1,4 +1,4 @@
-import type { Aabb2D, Element2D, Node, Vector2Like } from 'modern-canvas';
+import type { Element2D, Node, Vector2Like } from 'modern-canvas';
 import type { Element } from 'modern-idoc';
 declare global {
     namespace Mce {
@@ -20,7 +20,6 @@ declare global {
             addElement: (element: Element, options?: AddElementOptions) => Element2D;
             addElements: (element: Element[], options?: AddElementOptions) => Element2D[];
             resizeElement: (element: Element2D, newWidth: number, newHeight: number, options?: ResizeElementOptions) => void;
-            selectArea: (areaInDrawboard: Aabb2D) => Element2D[];
         }
     }
 }

package/dist/plugins/selection.d.ts

@@ -1,9 +1,10 @@
-import type { Element2D, Node } from 'modern-canvas';
+import type { Aabb2D, Element2D, Node } from 'modern-canvas';
 declare global {
     namespace Mce {
         type SelectTarget = 'none' | 'all' | 'inverse' | 'children' | 'parent' | 'previousSibling' | 'nextSibling' | Node[];
         interface Commands {
             select: (target: SelectTarget) => void;
+            marqueeSelect: (marquee?: Aabb2D) => void;
             selectAll: () => void;
             selectInverse: () => void;
             selectNone: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.37",
+  "version": "0.15.38",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",