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.
- package/dist/components/shared/Scrollbar.vue.d.ts +0 -2
- package/dist/index.js +154 -214
- package/dist/locale/en.d.ts +3 -2
- package/dist/mixins/0.helper.d.ts +5 -0
- package/dist/mixins/1.frame.d.ts +1 -3
- package/dist/mixins/4.2.element.d.ts +3 -3
- package/dist/plugins/clipboard.d.ts +1 -1
- package/dist/plugins/group.d.ts +6 -4
- package/dist/typed-plugins.d.ts +0 -2
- package/package.json +1 -1
- package/dist/mixins/4.1.lock.d.ts +0 -12
- package/dist/plugins/frame.d.ts +0 -14
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
|
|
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
|
-
"
|
|
1066
|
-
"
|
|
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
|
-
|
|
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
|
|
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 (
|
|
2275
|
-
|
|
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)) && !
|
|
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
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
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
|
|
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((
|
|
4655
|
-
const cloned =
|
|
4656
|
-
cloned.style.left =
|
|
4657
|
-
cloned.style.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, "
|
|
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: "
|
|
4704
|
-
{ command: "
|
|
4705
|
-
{ command: "
|
|
4641
|
+
{ command: "groupSelection", handle: () => group("Element") },
|
|
4642
|
+
{ command: "frameSelection", handle: () => group("Frame") },
|
|
4643
|
+
{ command: "ungroup", handle: ungroup }
|
|
4706
4644
|
],
|
|
4707
4645
|
hotkeys: [
|
|
4708
|
-
{ command: "
|
|
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
|
-
|
|
5118
|
-
|
|
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(
|
|
5125
|
-
{ command: "unlock", handle: () => selection.value.forEach(
|
|
5126
|
-
{ command: "lock/unlock", handle: () => selection.value.forEach((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: "
|
|
5223
|
-
{ key: "
|
|
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
|
|
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
|
-
|
|
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(() =>
|
|
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
|
|
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 -
|
|
7423
|
-
|
|
7356
|
+
emit("scroll", val - position.value);
|
|
7357
|
+
position.value = val;
|
|
7424
7358
|
}
|
|
7425
7359
|
function amount(val) {
|
|
7426
|
-
update(
|
|
7427
|
-
}
|
|
7428
|
-
const
|
|
7429
|
-
|
|
7430
|
-
|
|
7431
|
-
|
|
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
|
-
|
|
7448
|
-
|
|
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
|
-
|
|
7403
|
+
createElementVNode("div", {
|
|
7470
7404
|
ref: "thumbTplRef",
|
|
7471
7405
|
class: normalizeClass(["mce-scrollbar__thumb", {
|
|
7472
|
-
"mce-scrollbar__thumb--active":
|
|
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", "
|
|
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
|
-
|
|
7520
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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] && !
|
|
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
|
-
|
|
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
|
|
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
|
|
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",
|
package/dist/locale/en.d.ts
CHANGED
|
@@ -53,8 +53,9 @@ declare const _default: {
|
|
|
53
53
|
zoomToFit: string;
|
|
54
54
|
zoomToSelection: string;
|
|
55
55
|
object: string;
|
|
56
|
-
|
|
57
|
-
|
|
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
|
}
|
package/dist/mixins/1.frame.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type {
|
|
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
|
-
|
|
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: () =>
|
|
15
|
+
duplicate: () => void;
|
|
16
16
|
}
|
|
17
17
|
interface Editor {
|
|
18
18
|
copiedData: Ref<any | undefined>;
|
package/dist/plugins/group.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
declare global {
|
|
2
2
|
namespace Mce {
|
|
3
3
|
interface Commands {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
groupSelection: () => void;
|
|
5
|
+
frameSelection: () => void;
|
|
6
|
+
ungroup: () => void;
|
|
7
7
|
}
|
|
8
8
|
interface Hotkeys {
|
|
9
|
-
|
|
9
|
+
groupSelection: [event: KeyboardEvent];
|
|
10
|
+
frameSelection: [event: KeyboardEvent];
|
|
11
|
+
ungroup: [event: KeyboardEvent];
|
|
10
12
|
}
|
|
11
13
|
}
|
|
12
14
|
}
|
package/dist/typed-plugins.d.ts
CHANGED
|
@@ -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,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;
|
package/dist/plugins/frame.d.ts
DELETED
|
@@ -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;
|