mce 0.12.2 → 0.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,6 @@
1
1
  type __VLS_Props = {
2
- zoom: number;
3
2
  length: number;
4
3
  vertical?: boolean;
5
- infinite?: boolean;
6
4
  size: number;
7
5
  offset: number;
8
6
  };
package/dist/index.js CHANGED
@@ -9,7 +9,7 @@ import { merge, throttle, cloneDeep } from "lodash-es";
9
9
  import { measureText } from "modern-text";
10
10
  import { TextEditor } from "modern-text/web-components";
11
11
  import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
12
- import { vResizeObserver, vOnLongPress } from "@vueuse/components";
12
+ import { vResizeObserver } from "@vueuse/components";
13
13
  const _0_command = defineMixin((editor) => {
14
14
  const {
15
15
  emit
@@ -1003,8 +1003,20 @@ const _0_helper = defineMixin((editor) => {
1003
1003
  align: toPhysical(align, isRtl)
1004
1004
  };
1005
1005
  };
1006
+ function isFrame(node) {
1007
+ return node instanceof Element2D && node.meta?.inEditorIs === "Frame";
1008
+ }
1009
+ function isLocked(element) {
1010
+ return Boolean(element.meta.lock);
1011
+ }
1012
+ function setLock(element, lock) {
1013
+ element.meta.lock = lock;
1014
+ }
1006
1015
  Object.assign(editor, {
1007
- parseAnchor
1016
+ parseAnchor,
1017
+ isFrame,
1018
+ isLocked,
1019
+ setLock
1008
1020
  });
1009
1021
  });
1010
1022
  const en = {
@@ -1062,8 +1074,9 @@ const en = {
1062
1074
  "zoomToFit": "Zoom to fit",
1063
1075
  "zoomToSelection": "Zoom to selection",
1064
1076
  "object": "Object",
1065
- "frame/unframe": "Frame/Unframe",
1066
- "group/ungroup": "Group/Ungroup",
1077
+ "groupSelection": "Group Selection",
1078
+ "frameSelection": "Frame selection",
1079
+ "ungroup": "Ungroup",
1067
1080
  "flip": "Flip",
1068
1081
  "flipHorizontal": "Flip horizontal",
1069
1082
  "flipVertical": "Flip vertical",
@@ -1119,7 +1132,8 @@ const _0_locale = defineMixin((editor, options) => {
1119
1132
  });
1120
1133
  const _1_frame = defineMixin((editor) => {
1121
1134
  const {
1122
- root
1135
+ root,
1136
+ isFrame
1123
1137
  } = editor;
1124
1138
  const frames = computed(() => root.value.children.filter(isFrame) ?? []);
1125
1139
  const currentFrameIndex = ref(-1);
@@ -1129,9 +1143,6 @@ const _1_frame = defineMixin((editor) => {
1129
1143
  return { left, top, width, height };
1130
1144
  });
1131
1145
  const frameThumbs = ref([]);
1132
- function isFrame(node) {
1133
- return node instanceof Element2D && node.meta?.inEditorIs === "Frame";
1134
- }
1135
1146
  function getAncestorFrame(element) {
1136
1147
  return element?.findAncestor((node) => isFrame(node));
1137
1148
  }
@@ -1141,7 +1152,6 @@ const _1_frame = defineMixin((editor) => {
1141
1152
  currentFrameIndex,
1142
1153
  currentFrame,
1143
1154
  currentFrameAabb,
1144
- isFrame,
1145
1155
  getAncestorFrame
1146
1156
  });
1147
1157
  return () => {
@@ -2198,22 +2208,6 @@ const _4_0_text = defineMixin((editor) => {
2198
2208
  TextEditor.register();
2199
2209
  };
2200
2210
  });
2201
- const _4_1_lock = defineMixin((editor) => {
2202
- function isLock(element) {
2203
- return Boolean(element.meta.lock);
2204
- }
2205
- function lock(element) {
2206
- element.meta.lock = true;
2207
- }
2208
- function unlock(element) {
2209
- element.meta.lock = false;
2210
- }
2211
- Object.assign(editor, {
2212
- isLock,
2213
- lock,
2214
- unlock
2215
- });
2216
- });
2217
2211
  const _4_2_element = defineMixin((editor) => {
2218
2212
  const {
2219
2213
  doc,
@@ -2225,7 +2219,7 @@ const _4_2_element = defineMixin((editor) => {
2225
2219
  log,
2226
2220
  root,
2227
2221
  isFrame,
2228
- isLock,
2222
+ isLocked,
2229
2223
  getObbInDrawboard,
2230
2224
  config,
2231
2225
  getAncestorFrame,
@@ -2243,6 +2237,7 @@ const _4_2_element = defineMixin((editor) => {
2243
2237
  } = config.value;
2244
2238
  let {
2245
2239
  parent,
2240
+ index,
2246
2241
  sizeToFit,
2247
2242
  position,
2248
2243
  active,
@@ -2262,17 +2257,28 @@ const _4_2_element = defineMixin((editor) => {
2262
2257
  }
2263
2258
  }
2264
2259
  }
2260
+ const parentAabb = parent ? getAabb(parent) : void 0;
2265
2261
  const isArray = Array.isArray(value);
2266
- let offsetX = 0;
2262
+ let offsetIndex = index;
2267
2263
  const elements = doc.value.transact(() => {
2268
2264
  const values = isArray ? value : [value];
2269
2265
  const elements2 = values.map((element) => {
2270
2266
  const el = doc.value.addElement(element, {
2271
2267
  parentId: parent?.id,
2268
+ index: offsetIndex,
2272
2269
  regenId
2273
2270
  });
2274
- if (parent) {
2275
- const { width, height } = parent.style;
2271
+ if (offsetIndex !== void 0) {
2272
+ offsetIndex++;
2273
+ }
2274
+ if (el.text.isValid()) {
2275
+ if (!el.style.width)
2276
+ el.style.width = el.text.base.boundingBox.width;
2277
+ if (!el.style.height)
2278
+ el.style.height = el.text.base.boundingBox.height;
2279
+ }
2280
+ if (parentAabb && parentAabb.width && parentAabb.height) {
2281
+ const { width, height } = parentAabb;
2276
2282
  const halfWidth = width / 2;
2277
2283
  const halfHeight = height / 2;
2278
2284
  if (!el.style.width)
@@ -2294,12 +2300,9 @@ const _4_2_element = defineMixin((editor) => {
2294
2300
  );
2295
2301
  }
2296
2302
  }
2297
- el.style.left += offsetX;
2298
- offsetX += el.style.width;
2299
2303
  return el;
2300
2304
  });
2301
2305
  const aabb = getAabb(elements2);
2302
- const parentAabb = parent ? getAabb(parent) : void 0;
2303
2306
  let globalPosition;
2304
2307
  if (typeof position === "string") {
2305
2308
  switch (position) {
@@ -2453,7 +2456,7 @@ const _4_2_element = defineMixin((editor) => {
2453
2456
  }
2454
2457
  return [node];
2455
2458
  }).filter((node) => {
2456
- return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLock(node);
2459
+ return "isVisibleInTree" in node && node.isVisibleInTree() && isOverlappingObb(areaInDrawboard, getObbInDrawboard(node)) && !isLocked(node);
2457
2460
  }) ?? [];
2458
2461
  selection.value = selected;
2459
2462
  return selected;
@@ -2965,7 +2968,6 @@ const mixins = [
2965
2968
  _2_load,
2966
2969
  _3_view,
2967
2970
  _4_0_text,
2968
- _4_1_lock,
2969
2971
  _4_2_element,
2970
2972
  _4_3_frame,
2971
2973
  _4_4_doc,
@@ -4406,9 +4408,19 @@ const _clipboard = definePlugin((editor, options) => {
4406
4408
  }
4407
4409
  }
4408
4410
  };
4409
- async function duplicate() {
4410
- await copy();
4411
- await paste();
4411
+ function duplicate() {
4412
+ if (!selection.value.length) {
4413
+ return;
4414
+ }
4415
+ addElement(
4416
+ selection.value.map((v) => v.toJSON()),
4417
+ {
4418
+ parent: selection.value[0].parent,
4419
+ index: selection.value[0].getIndex(),
4420
+ active: true,
4421
+ regenId: true
4422
+ }
4423
+ );
4412
4424
  }
4413
4425
  Object.assign(editor, {
4414
4426
  copiedData
@@ -4522,82 +4534,6 @@ const _flip = definePlugin((editor) => {
4522
4534
  ]
4523
4535
  };
4524
4536
  });
4525
- const _frame = definePlugin((editor) => {
4526
- const {
4527
- deleteElement,
4528
- getAabb,
4529
- getObb,
4530
- selection,
4531
- addElement,
4532
- isFrame,
4533
- doc
4534
- } = editor;
4535
- function frame() {
4536
- const elements = selection.value;
4537
- if (elements.length === 0) {
4538
- return;
4539
- }
4540
- const aabb = getAabb(elements, "frame");
4541
- const children = elements.map((v) => {
4542
- const cloned = v.toJSON();
4543
- cloned.style.left = (cloned.style.left ?? 0) - aabb.left;
4544
- cloned.style.top = (cloned.style.top ?? 0) - aabb.top;
4545
- return cloned;
4546
- });
4547
- doc.value.transact(() => {
4548
- addElement({
4549
- style: { ...aabb },
4550
- children,
4551
- meta: {
4552
- inEditorIs: "Frame"
4553
- }
4554
- }, {
4555
- regenId: true,
4556
- active: true
4557
- });
4558
- elements.forEach((v) => deleteElement(v.id));
4559
- });
4560
- }
4561
- function unframe() {
4562
- const element = selection.value[0];
4563
- if (!element)
4564
- return;
4565
- const items = element.children.map((el) => {
4566
- const obb = getObb(el);
4567
- const cloned = el.toJSON();
4568
- cloned.style.left = obb.left;
4569
- cloned.style.top = obb.top;
4570
- return cloned;
4571
- });
4572
- doc.value.transact(() => {
4573
- deleteElement(element.id);
4574
- addElement(items, {
4575
- active: true,
4576
- regenId: true
4577
- });
4578
- });
4579
- }
4580
- function frameOrUnframe() {
4581
- if (selection.value.length === 1) {
4582
- if (isFrame(selection.value[0])) {
4583
- unframe();
4584
- }
4585
- } else if (selection.value.length > 1) {
4586
- frame();
4587
- }
4588
- }
4589
- return {
4590
- name: "mce:frame",
4591
- commands: [
4592
- { command: "frame", handle: frame },
4593
- { command: "unframe", handle: unframe },
4594
- { command: "frame/unframe", handle: frameOrUnframe }
4595
- ],
4596
- hotkeys: [
4597
- { command: "frame/unframe", key: "Alt+CmdOrCtrl+g" }
4598
- ]
4599
- };
4600
- });
4601
4537
  const _gif = definePlugin((editor, options) => {
4602
4538
  const {
4603
4539
  fonts,
@@ -4645,26 +4581,32 @@ const _group = definePlugin((editor) => {
4645
4581
  deleteElement,
4646
4582
  doc
4647
4583
  } = editor;
4648
- function group() {
4584
+ function group(inEditorIs) {
4649
4585
  const elements = selection.value;
4650
- if (elements.length === 0) {
4586
+ if (!elements.length) {
4651
4587
  return;
4652
4588
  }
4589
+ const element = elements[0];
4590
+ const parent = element.parent;
4653
4591
  const aabb = getAabb(elements, "parent");
4654
- const children = elements.map((v) => {
4655
- const cloned = v.toJSON();
4656
- cloned.style.left = (cloned.style.left ?? 0) - aabb.left;
4657
- cloned.style.top = (cloned.style.top ?? 0) - aabb.top;
4592
+ const children = elements.map((child) => {
4593
+ const cloned = child.toJSON();
4594
+ cloned.style.left = child.style.left - aabb.left;
4595
+ cloned.style.top = child.style.top - aabb.top;
4658
4596
  return cloned;
4659
4597
  });
4660
4598
  doc.value.transact(() => {
4661
4599
  addElement({
4600
+ name: inEditorIs === "Frame" ? "Frame" : "Group",
4662
4601
  style: { ...aabb },
4663
4602
  children,
4664
4603
  meta: {
4665
- inPptIs: "GroupShape"
4604
+ inPptIs: "GroupShape",
4605
+ inEditorIs
4666
4606
  }
4667
4607
  }, {
4608
+ parent,
4609
+ index: parent ? element.getIndex() : void 0,
4668
4610
  active: true,
4669
4611
  regenId: true
4670
4612
  });
@@ -4673,39 +4615,37 @@ const _group = definePlugin((editor) => {
4673
4615
  }
4674
4616
  function ungroup() {
4675
4617
  const element = selection.value[0];
4676
- if (!element)
4618
+ if (!element || !element.children.length)
4677
4619
  return;
4620
+ const parent = getObb(element, "parent");
4678
4621
  const items = element.children.map((child) => {
4679
- const obb = getObb(child, "frame");
4622
+ const obb = getObb(child, "parent");
4680
4623
  const cloned = child.toJSON();
4681
- cloned.style.left = obb.left;
4682
- cloned.style.top = obb.top;
4624
+ cloned.style.left = obb.left + parent.left;
4625
+ cloned.style.top = obb.top + parent.top;
4683
4626
  return cloned;
4684
4627
  });
4685
4628
  doc.value.transact(() => {
4686
4629
  addElement(items, {
4630
+ parent: element.parent,
4631
+ index: element.getIndex(),
4687
4632
  active: true,
4688
4633
  regenId: true
4689
4634
  });
4690
4635
  deleteElement(element.id);
4691
4636
  });
4692
4637
  }
4693
- function groupOrUngroup() {
4694
- if (selection.value.length === 1) {
4695
- ungroup();
4696
- } else if (selection.value.length > 1) {
4697
- group();
4698
- }
4699
- }
4700
4638
  return {
4701
4639
  name: "mce:group",
4702
4640
  commands: [
4703
- { command: "group", handle: group },
4704
- { command: "ungroup", handle: ungroup },
4705
- { command: "group/ungroup", handle: groupOrUngroup }
4641
+ { command: "groupSelection", handle: () => group("Element") },
4642
+ { command: "frameSelection", handle: () => group("Frame") },
4643
+ { command: "ungroup", handle: ungroup }
4706
4644
  ],
4707
4645
  hotkeys: [
4708
- { command: "group/ungroup", key: "CmdOrCtrl+g" }
4646
+ { command: "groupSelection", key: "CmdOrCtrl+g" },
4647
+ { command: "frameSelection", key: "Alt+CmdOrCtrl+g" },
4648
+ { command: "ungroup", key: "CmdOrCtrl+Backspace" }
4709
4649
  ]
4710
4650
  };
4711
4651
  });
@@ -5114,16 +5054,15 @@ const _layerPosition = definePlugin((editor) => {
5114
5054
  const _lock = definePlugin((editor) => {
5115
5055
  const {
5116
5056
  selection,
5117
- lock,
5118
- unlock,
5119
- isLock
5057
+ isLocked,
5058
+ setLock
5120
5059
  } = editor;
5121
5060
  return {
5122
5061
  name: "mce:lock",
5123
5062
  commands: [
5124
- { command: "lock", handle: () => selection.value.forEach(lock) },
5125
- { command: "unlock", handle: () => selection.value.forEach(unlock) },
5126
- { command: "lock/unlock", handle: () => selection.value.forEach((el) => isLock(el) ? unlock(el) : lock(el)) }
5063
+ { command: "lock", handle: () => selection.value.forEach((el) => setLock(el, true)) },
5064
+ { command: "unlock", handle: () => selection.value.forEach((el) => setLock(el, false)) },
5065
+ { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLocked(el))) }
5127
5066
  ],
5128
5067
  hotkeys: [
5129
5068
  { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
@@ -5219,8 +5158,9 @@ const _menu = definePlugin((editor, options) => {
5219
5158
  ]
5220
5159
  }));
5221
5160
  const objectMenu1 = computed(() => [
5222
- { key: "group/ungroup", disabled: !hasSelected.value },
5223
- { key: "frame/unframe", disabled: !hasSelected.value }
5161
+ { key: "groupSelection", disabled: !hasSelected.value },
5162
+ { key: "frameSelection", disabled: !hasSelected.value },
5163
+ { key: "ungroup", disabled: !(hasSelected.value && selection.value[0]?.children.length) }
5224
5164
  ]);
5225
5165
  const layerOrderMenu = computed(() => ({
5226
5166
  key: "layerOrder",
@@ -5696,7 +5636,6 @@ const plugins = [
5696
5636
  _copyAs,
5697
5637
  _delete,
5698
5638
  _flip,
5699
- _frame,
5700
5639
  _gif,
5701
5640
  _group,
5702
5641
  _history,
@@ -7373,15 +7312,11 @@ const _hoisted_1$a = {
7373
7312
  ref: "trackTplRef",
7374
7313
  class: "mce-scrollbar__track"
7375
7314
  };
7376
- const AMOUNT_STEP = 50;
7377
- const AMOUNT_REPEAR_DELAY = 50;
7378
7315
  const _sfc_main$j = /* @__PURE__ */ defineComponent({
7379
7316
  __name: "Scrollbar",
7380
7317
  props: /* @__PURE__ */ mergeModels({
7381
- zoom: {},
7382
7318
  length: {},
7383
7319
  vertical: { type: Boolean },
7384
- infinite: { type: Boolean },
7385
7320
  size: {},
7386
7321
  offset: {}
7387
7322
  }, {
@@ -7392,66 +7327,65 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
7392
7327
  setup(__props, { emit: __emit }) {
7393
7328
  const props = __props;
7394
7329
  const emit = __emit;
7395
- const lerp = (a, b, t) => a * (1 - t) + b * t;
7396
- const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
7397
- const offset2 = useModel(__props, "modelValue");
7330
+ const position = useModel(__props, "modelValue");
7398
7331
  const track = useTemplateRef("trackTplRef");
7399
7332
  const thumb = useTemplateRef("thumbTplRef");
7400
7333
  const trackLength = ref(0);
7401
- const contentLength = computed(
7402
- () => props.infinite ? props.length * props.zoom + trackLength.value + Math.abs(offset2.value) * 2 : offset2.value > 0 ? offset2.value + props.length * props.zoom : Math.max(trackLength.value - offset2.value, props.length * props.zoom)
7403
- );
7404
- const scrollOffset = computed(
7405
- () => props.infinite ? Math.abs(offset2.value) - offset2.value : offset2.value > 0 ? 0 : -offset2.value
7406
- );
7334
+ const contentLength = computed(() => {
7335
+ return props.length + trackLength.value + Math.abs(position.value) * 2;
7336
+ });
7407
7337
  const thumbLength = computed(() => {
7408
7338
  return Math.max(0.05, Math.min(1, trackLength.value / contentLength.value));
7409
7339
  });
7410
- const thumbPosition = computed(() => scrollOffset.value / (contentLength.value - trackLength.value) * (1 - thumbLength.value));
7340
+ const thumbPosition = computed(() => {
7341
+ return (Math.abs(position.value) + position.value) / (contentLength.value - trackLength.value) * (1 - thumbLength.value);
7342
+ });
7411
7343
  const resize = useDebounceFn(() => {
7412
7344
  const box = track.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
7413
7345
  trackLength.value = props.vertical ? box.height : box.width;
7414
7346
  }, 50);
7415
- const start = computed(() => props.infinite ? thumbToTrack(thumbLength.value, thumbPosition.value) : thumbPosition.value);
7347
+ const lerp = (a, b, t) => a * (1 - t) + b * t;
7348
+ const thumbToTrack = (thumbLength2, thumbPosition2) => lerp(thumbLength2 / 2, 1 - thumbLength2 / 2, thumbPosition2);
7349
+ const start = computed(() => thumbToTrack(thumbLength.value, thumbPosition.value));
7416
7350
  const end = computed(() => 1 - start.value - thumbLength.value);
7417
7351
  const thumbTop = computed(() => props.vertical ? `${start.value * 100}%` : "0%");
7418
7352
  const thumbBottom = computed(() => props.vertical ? `${end.value * 100}%` : "50%");
7419
7353
  const thumbLeft = computed(() => props.vertical ? "0%" : `${start.value * 100}%`);
7420
7354
  const thumbRight = computed(() => props.vertical ? "50%" : `${end.value * 100}%`);
7421
7355
  function update(val) {
7422
- emit("scroll", val - offset2.value);
7423
- offset2.value = val;
7356
+ emit("scroll", val - position.value);
7357
+ position.value = val;
7424
7358
  }
7425
7359
  function amount(val) {
7426
- update(offset2.value + val);
7427
- }
7428
- const actived = ref(false);
7429
- let clearId;
7430
- function startAmount(e) {
7431
- const el = e.target;
7432
- let direction = 0;
7433
- if (thumb.value?.contains(el)) {
7434
- stopAmount();
7435
- return;
7436
- } else if (track.value?.contains(el)) {
7437
- const point = (props.vertical ? e.offsetY : e.offsetX) / trackLength.value;
7438
- if (point < start.value) {
7439
- direction = 1;
7440
- } else if (point > 1 - end.value) {
7441
- direction = -1;
7442
- } else {
7443
- stopAmount();
7360
+ update(position.value + val);
7361
+ }
7362
+ const isActive = ref(false);
7363
+ watch(track, (track2, oldTrack) => {
7364
+ function onMousedown(event) {
7365
+ if (!thumb.value?.contains(event.target)) {
7444
7366
  return;
7445
7367
  }
7368
+ isActive.value = true;
7369
+ let last = event;
7370
+ event.stopPropagation();
7371
+ function onMousemove(event2) {
7372
+ const offset2 = {
7373
+ x: last.clientX - event2.clientX,
7374
+ y: last.clientY - event2.clientY
7375
+ };
7376
+ last = event2;
7377
+ amount((props.vertical ? offset2.y : offset2.x) / (trackLength.value * (1 - thumbLength.value)) * contentLength.value * -1);
7378
+ }
7379
+ function onMouseup() {
7380
+ isActive.value = false;
7381
+ window.removeEventListener("mousemove", onMousemove);
7382
+ window.removeEventListener("mouseup", onMouseup);
7383
+ }
7384
+ window.addEventListener("mousemove", onMousemove);
7385
+ window.addEventListener("mouseup", onMouseup);
7446
7386
  }
7447
- amount(AMOUNT_STEP * direction);
7448
- clearId = setTimeout(() => startAmount(e), AMOUNT_REPEAR_DELAY);
7449
- }
7450
- function stopAmount() {
7451
- clearTimeout(clearId);
7452
- }
7453
- onBeforeUnmount(() => {
7454
- stopAmount();
7387
+ oldTrack?.removeEventListener("mousedown", onMousedown);
7388
+ track2?.addEventListener("mousedown", onMousedown);
7455
7389
  });
7456
7390
  return (_ctx, _cache) => {
7457
7391
  return withDirectives((openBlock(), createElementBlock("div", {
@@ -7466,10 +7400,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
7466
7400
  })
7467
7401
  }, [
7468
7402
  createElementVNode("div", _hoisted_1$a, [
7469
- withDirectives(createElementVNode("div", {
7403
+ createElementVNode("div", {
7470
7404
  ref: "thumbTplRef",
7471
7405
  class: normalizeClass(["mce-scrollbar__thumb", {
7472
- "mce-scrollbar__thumb--active": actived.value
7406
+ "mce-scrollbar__thumb--active": isActive.value
7473
7407
  }]),
7474
7408
  style: normalizeStyle({
7475
7409
  top: thumbTop.value,
@@ -7477,13 +7411,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
7477
7411
  left: thumbLeft.value,
7478
7412
  right: thumbRight.value
7479
7413
  })
7480
- }, null, 6), [
7481
- [vShow, props.infinite || thumbLength.value < 1]
7482
- ])
7414
+ }, null, 6)
7483
7415
  ], 512)
7484
7416
  ], 6)), [
7485
- [unref(vResizeObserver), unref(resize)],
7486
- [unref(vOnLongPress), [startAmount, { delay: AMOUNT_REPEAR_DELAY, onMouseUp: stopAmount }]]
7417
+ [unref(vResizeObserver), unref(resize)]
7487
7418
  ]);
7488
7419
  };
7489
7420
  }
@@ -7509,16 +7440,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
7509
7440
  createVNode(_sfc_main$j, mergeProps(props, {
7510
7441
  modelValue: unref(camera).position.y,
7511
7442
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
7512
- zoom: unref(camera).zoom.y,
7513
7443
  vertical: "",
7514
- length: unref(viewAabb).height
7515
- }), null, 16, ["modelValue", "zoom", "length"]),
7444
+ length: unref(viewAabb).height * unref(camera).zoom.y
7445
+ }), null, 16, ["modelValue", "length"]),
7516
7446
  createVNode(_sfc_main$j, mergeProps(props, {
7517
7447
  modelValue: unref(camera).position.x,
7518
7448
  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
7519
- zoom: unref(camera).zoom.x,
7520
- length: unref(viewAabb).width
7521
- }), null, 16, ["modelValue", "zoom", "length"])
7449
+ length: unref(viewAabb).width * unref(camera).zoom.x
7450
+ }), null, 16, ["modelValue", "length"])
7522
7451
  ], 64);
7523
7452
  };
7524
7453
  }
@@ -8003,7 +7932,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
8003
7932
  registerCommand,
8004
7933
  unregisterCommand,
8005
7934
  isFrame,
8006
- isLock,
7935
+ isLocked,
8007
7936
  config
8008
7937
  } = useEditor();
8009
7938
  const transformable = useTemplateRef("transformableRef");
@@ -8126,7 +8055,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
8126
8055
  modelValue: selectionObb.value,
8127
8056
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionObb.value = $event),
8128
8057
  visibility: unref(state) !== "selecting" ? "auto" : "none",
8129
- moveable: unref(selection)[0] && !unref(isLock)(unref(selection)[0]),
8058
+ moveable: unref(selection)[0] && !unref(isLocked)(unref(selection)[0]),
8130
8059
  "resize-strategy": props.resizeStrategy,
8131
8060
  "handle-shape": unref(config).handleShape,
8132
8061
  class: "mce-selection-obb",
@@ -8820,7 +8749,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
8820
8749
  isFrame,
8821
8750
  selectArea,
8822
8751
  exec,
8823
- isLock,
8752
+ isLocked,
8824
8753
  selection,
8825
8754
  getAabbInDrawboard,
8826
8755
  drawboardAabb,
@@ -9005,7 +8934,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
9005
8934
  }
9006
8935
  selection.value = selected;
9007
8936
  if (ctxState) {
9008
- if (selected[0] && !isLock(selected[0])) {
8937
+ if (selected[0] && !isLocked(selected[0])) {
9009
8938
  switch (ctxState) {
9010
8939
  case "typing": {
9011
8940
  await exec("startTyping", _event);
@@ -9141,7 +9070,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
9141
9070
  root,
9142
9071
  selection,
9143
9072
  exec,
9144
- zoomTo
9073
+ zoomTo,
9074
+ isFrame
9145
9075
  } = useEditor();
9146
9076
  const rootRef = ref();
9147
9077
  const hover = ref();
@@ -9185,9 +9115,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
9185
9115
  function onClickExpand() {
9186
9116
  opened.value = !opened.value;
9187
9117
  }
9188
- function onClickContent() {
9118
+ function onClickContent(e) {
9189
9119
  if (props.node instanceof Element2D) {
9190
- selection.value = [props.node];
9120
+ if (e.shiftKey) {
9121
+ selection.value = [
9122
+ ...selection.value.filter((v) => !v.equal(props.node)),
9123
+ props.node
9124
+ ];
9125
+ } else {
9126
+ selection.value = [props.node];
9127
+ }
9191
9128
  }
9192
9129
  }
9193
9130
  function onDblclickThumbnail(e) {
@@ -9207,10 +9144,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
9207
9144
  dom: itemRef.value
9208
9145
  };
9209
9146
  }
9147
+ function onContextmenu(e) {
9148
+ if (props.node instanceof Element2D) {
9149
+ if (!selection.value.some((v) => v.equal(props.node))) {
9150
+ selection.value = [props.node];
9151
+ }
9152
+ exec("openContextMenu", e);
9153
+ }
9154
+ }
9210
9155
  return () => {
9211
9156
  function thumbnail() {
9212
9157
  const node = props.node;
9213
- if (node.meta.inEditorIs === "Frame") {
9158
+ if (isFrame(node)) {
9214
9159
  return createVNode(_sfc_main$w, { icon: "$frame" });
9215
9160
  }
9216
9161
  if (node.children.length > 0) {
@@ -9243,12 +9188,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
9243
9188
  },
9244
9189
  ref: itemRef,
9245
9190
  onMouseenter,
9246
- onContextmenu: (e) => {
9247
- if (props.node instanceof Element2D) {
9248
- selection.value = [props.node];
9249
- exec("openContextMenu", e);
9250
- }
9251
- }
9191
+ onContextmenu
9252
9192
  }, [
9253
9193
  createElementVNode("div", {
9254
9194
  class: "mce-layer-item__expand",
@@ -53,8 +53,9 @@ declare const _default: {
53
53
  zoomToFit: string;
54
54
  zoomToSelection: string;
55
55
  object: string;
56
- 'frame/unframe': string;
57
- 'group/ungroup': string;
56
+ groupSelection: string;
57
+ frameSelection: string;
58
+ ungroup: string;
58
59
  flip: string;
59
60
  flipHorizontal: string;
60
61
  flipVertical: string;
@@ -1,3 +1,5 @@
1
+ import type { Node } from 'modern-canvas';
2
+ import { Element2D } from 'modern-canvas';
1
3
  declare global {
2
4
  namespace Mce {
3
5
  type Tblock = 'top' | 'bottom';
@@ -15,6 +17,9 @@ declare global {
15
17
  };
16
18
  interface Editor {
17
19
  parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
20
+ isFrame: (node: Node) => node is Element2D;
21
+ isLocked: (element: Element2D) => boolean;
22
+ setLock: (element: Element2D, lock: boolean) => void;
18
23
  }
19
24
  }
20
25
  }
@@ -1,7 +1,6 @@
1
- import type { Node } from 'modern-canvas';
1
+ import type { Element2D } from 'modern-canvas';
2
2
  import type { ComputedRef, Ref } from 'vue';
3
3
  import type { AxisAlignedBoundingBox } from '../types';
4
- import { Element2D } from 'modern-canvas';
5
4
  declare global {
6
5
  namespace Mce {
7
6
  interface FrameThumb {
@@ -15,7 +14,6 @@ declare global {
15
14
  currentFrameIndex: Ref<number>;
16
15
  currentFrame: ComputedRef<Element2D | undefined>;
17
16
  currentFrameAabb: ComputedRef<AxisAlignedBoundingBox>;
18
- isFrame: (node: Node) => node is Element2D;
19
17
  getAncestorFrame: (element?: Element2D) => Element2D | undefined;
20
18
  }
21
19
  }
@@ -1,13 +1,13 @@
1
- import type { Element2D, Vector2Data } from 'modern-canvas';
1
+ import type { Element2D, Node, Vector2Data } from 'modern-canvas';
2
2
  import type { Element } from 'modern-idoc';
3
3
  import type { AxisAlignedBoundingBox } from '../types';
4
4
  declare global {
5
5
  namespace Mce {
6
6
  type AddElementPosition = Vector2Data | Anchor | 'screenCenter' | 'pointer';
7
7
  interface AddElementOptions {
8
- parent?: Element2D;
9
8
  position?: AddElementPosition;
10
- append?: boolean;
9
+ parent?: Node;
10
+ index?: number;
11
11
  sizeToFit?: boolean;
12
12
  active?: boolean;
13
13
  regenId?: boolean;
@@ -12,7 +12,7 @@ declare global {
12
12
  copy: (data?: any) => Promise<void>;
13
13
  cut: () => Promise<void>;
14
14
  paste: (source?: PasteSource) => Promise<void>;
15
- duplicate: () => Promise<void>;
15
+ duplicate: () => void;
16
16
  }
17
17
  interface Editor {
18
18
  copiedData: Ref<any | undefined>;
@@ -1,12 +1,14 @@
1
1
  declare global {
2
2
  namespace Mce {
3
3
  interface Commands {
4
- 'group': () => void;
5
- 'ungroup': () => void;
6
- 'group/ungroup': () => void;
4
+ groupSelection: () => void;
5
+ frameSelection: () => void;
6
+ ungroup: () => void;
7
7
  }
8
8
  interface Hotkeys {
9
- 'group/ungroup': [event: KeyboardEvent];
9
+ groupSelection: [event: KeyboardEvent];
10
+ frameSelection: [event: KeyboardEvent];
11
+ ungroup: [event: KeyboardEvent];
10
12
  }
11
13
  }
12
14
  }
@@ -20,7 +20,6 @@ import './mixins/2.export'
20
20
  import './mixins/2.load'
21
21
  import './mixins/3.view'
22
22
  import './mixins/4.0.text'
23
- import './mixins/4.1.lock'
24
23
  import './mixins/4.2.element'
25
24
  import './mixins/4.3.frame'
26
25
  import './mixins/4.4.doc'
@@ -32,7 +31,6 @@ import './plugins/clipboard'
32
31
  import './plugins/copyAs'
33
32
  import './plugins/delete'
34
33
  import './plugins/flip'
35
- import './plugins/frame'
36
34
  import './plugins/gif'
37
35
  import './plugins/group'
38
36
  import './plugins/history'
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mce",
3
3
  "type": "module",
4
- "version": "0.12.2",
4
+ "version": "0.12.3",
5
5
  "description": "The headless canvas editor framework. only the ESM.",
6
6
  "author": "wxm",
7
7
  "license": "MIT",
@@ -1,12 +0,0 @@
1
- import type { Element2D } from 'modern-canvas';
2
- declare global {
3
- namespace Mce {
4
- interface Editor {
5
- isLock: (element: Element2D) => boolean;
6
- lock: (element: Element2D) => void;
7
- unlock: (element: Element2D) => void;
8
- }
9
- }
10
- }
11
- declare const _default: import("..").Mixin;
12
- export default _default;
@@ -1,14 +0,0 @@
1
- declare global {
2
- namespace Mce {
3
- interface Commands {
4
- 'frame': () => void;
5
- 'unframe': () => void;
6
- 'frame/unframe': () => void;
7
- }
8
- interface Hotkeys {
9
- 'frame/unframe': [event: KeyboardEvent];
10
- }
11
- }
12
- }
13
- declare const _default: import("..").Plugin;
14
- export default _default;