microboard-temp 0.5.143 → 0.5.145
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/cjs/browser.js +140 -349
- package/dist/cjs/index.js +140 -349
- package/dist/cjs/node.js +140 -349
- package/dist/esm/browser.js +140 -349
- package/dist/esm/index.js +140 -349
- package/dist/esm/node.js +140 -349
- package/dist/types/Items/Transformation/TransformationOperations.d.ts +7 -2
- package/dist/types/Selection/Selection.d.ts +4 -4
- package/dist/types/Selection/Transformer/TransformerHelpers/handleMultipleItemsResize.d.ts +2 -2
- package/dist/types/Selection/Transformer/TransformerHelpers/transformShape.d.ts +2 -2
- package/dist/types/drawMbrOnCanvas.d.ts +3 -3
- package/package.json +1 -1
package/dist/esm/browser.js
CHANGED
|
@@ -7138,17 +7138,29 @@ class TransformationCommand {
|
|
|
7138
7138
|
switch (this.operation.method) {
|
|
7139
7139
|
case "applyMatrix": {
|
|
7140
7140
|
const op2 = this.operation;
|
|
7141
|
-
return
|
|
7142
|
-
|
|
7143
|
-
|
|
7144
|
-
|
|
7145
|
-
|
|
7146
|
-
|
|
7147
|
-
|
|
7148
|
-
|
|
7149
|
-
|
|
7150
|
-
|
|
7151
|
-
|
|
7141
|
+
return this.transformation.map((t3) => {
|
|
7142
|
+
const itemOp = op2.items.find((i) => i.id === t3.getId());
|
|
7143
|
+
if (!itemOp)
|
|
7144
|
+
return { item: t3, operation: op2 };
|
|
7145
|
+
return {
|
|
7146
|
+
item: t3,
|
|
7147
|
+
operation: {
|
|
7148
|
+
class: "Transformation",
|
|
7149
|
+
method: "applyMatrix",
|
|
7150
|
+
items: [{
|
|
7151
|
+
id: t3.getId(),
|
|
7152
|
+
matrix: {
|
|
7153
|
+
translateX: -itemOp.matrix.translateX,
|
|
7154
|
+
translateY: -itemOp.matrix.translateY,
|
|
7155
|
+
scaleX: 1 / itemOp.matrix.scaleX,
|
|
7156
|
+
scaleY: 1 / itemOp.matrix.scaleY,
|
|
7157
|
+
shearX: 0,
|
|
7158
|
+
shearY: 0
|
|
7159
|
+
}
|
|
7160
|
+
}]
|
|
7161
|
+
}
|
|
7162
|
+
};
|
|
7163
|
+
});
|
|
7152
7164
|
}
|
|
7153
7165
|
case "translateTo":
|
|
7154
7166
|
return mapItemsByOperation(this.transformation, (transformation) => {
|
|
@@ -7230,60 +7242,25 @@ class TransformationCommand {
|
|
|
7230
7242
|
const { operation, transformation } = this;
|
|
7231
7243
|
return transformation.map((currTrans) => {
|
|
7232
7244
|
const op2 = operation.items[currTrans.getId()];
|
|
7233
|
-
|
|
7234
|
-
|
|
7235
|
-
|
|
7236
|
-
|
|
7237
|
-
|
|
7238
|
-
|
|
7239
|
-
|
|
7240
|
-
|
|
7241
|
-
|
|
7242
|
-
|
|
7243
|
-
|
|
7244
|
-
|
|
7245
|
-
|
|
7246
|
-
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
y: -op2.translate.y
|
|
7253
|
-
}
|
|
7254
|
-
};
|
|
7255
|
-
} else if (op2.method === "translateTo") {
|
|
7256
|
-
reverseOp = {
|
|
7257
|
-
...op2,
|
|
7258
|
-
x: currTrans.getTranslation().x,
|
|
7259
|
-
y: currTrans.getTranslation().y
|
|
7260
|
-
};
|
|
7261
|
-
} else if (op2.method === "translateBy") {
|
|
7262
|
-
reverseOp = {
|
|
7263
|
-
...op2,
|
|
7264
|
-
x: -op2.x,
|
|
7265
|
-
y: -op2.y
|
|
7266
|
-
};
|
|
7267
|
-
} else if (op2.method === "scaleTo") {
|
|
7268
|
-
reverseOp = {
|
|
7269
|
-
...op2,
|
|
7270
|
-
x: currTrans.getScale().x,
|
|
7271
|
-
y: currTrans.getScale().y
|
|
7272
|
-
};
|
|
7273
|
-
} else if (op2.method === "scaleBy") {
|
|
7274
|
-
reverseOp = {
|
|
7275
|
-
...op2,
|
|
7276
|
-
x: 1 / op2.x,
|
|
7277
|
-
y: 1 / op2.y
|
|
7278
|
-
};
|
|
7279
|
-
} else {
|
|
7280
|
-
reverseOp = {
|
|
7281
|
-
...op2,
|
|
7282
|
-
x: 1,
|
|
7283
|
-
y: 1
|
|
7284
|
-
};
|
|
7285
|
-
}
|
|
7286
|
-
return { item: currTrans, operation: reverseOp };
|
|
7245
|
+
const m = op2.method === "applyMatrix" ? op2.matrix : op2.method === "scaleByTranslateBy" ? { translateX: -op2.translate.x, translateY: -op2.translate.y, scaleX: 1 / op2.scale.x, scaleY: 1 / op2.scale.y, shearX: 0, shearY: 0 } : { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 };
|
|
7246
|
+
return {
|
|
7247
|
+
item: currTrans,
|
|
7248
|
+
operation: {
|
|
7249
|
+
class: "Transformation",
|
|
7250
|
+
method: "applyMatrix",
|
|
7251
|
+
items: [{
|
|
7252
|
+
id: currTrans.getId(),
|
|
7253
|
+
matrix: {
|
|
7254
|
+
translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
|
|
7255
|
+
translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
|
|
7256
|
+
scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
|
|
7257
|
+
scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
|
|
7258
|
+
shearX: 0,
|
|
7259
|
+
shearY: 0
|
|
7260
|
+
}
|
|
7261
|
+
}]
|
|
7262
|
+
}
|
|
7263
|
+
};
|
|
7287
7264
|
});
|
|
7288
7265
|
}
|
|
7289
7266
|
case "locked": {
|
|
@@ -7414,10 +7391,14 @@ class Transformation {
|
|
|
7414
7391
|
apply(op) {
|
|
7415
7392
|
this.previous = this.matrix.copy();
|
|
7416
7393
|
switch (op.method) {
|
|
7417
|
-
case "applyMatrix":
|
|
7418
|
-
|
|
7419
|
-
|
|
7394
|
+
case "applyMatrix": {
|
|
7395
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
7396
|
+
if (itemOp) {
|
|
7397
|
+
this.matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
|
|
7398
|
+
this.matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
|
|
7399
|
+
}
|
|
7420
7400
|
break;
|
|
7401
|
+
}
|
|
7421
7402
|
case "translateTo":
|
|
7422
7403
|
this.applyTranslateTo(op.x, op.y);
|
|
7423
7404
|
break;
|
|
@@ -7552,8 +7533,7 @@ class Transformation {
|
|
|
7552
7533
|
this.emit({
|
|
7553
7534
|
class: "Transformation",
|
|
7554
7535
|
method: "applyMatrix",
|
|
7555
|
-
|
|
7556
|
-
matrix,
|
|
7536
|
+
items: [{ id: this.id, matrix }],
|
|
7557
7537
|
timeStamp
|
|
7558
7538
|
});
|
|
7559
7539
|
}
|
|
@@ -19548,7 +19528,7 @@ function createCommand(board, operation) {
|
|
|
19548
19528
|
}
|
|
19549
19529
|
default: {
|
|
19550
19530
|
const itemType = operation.class;
|
|
19551
|
-
const itemIdList = "item" in operation ? Array.isArray(operation.item) ? operation.item : [operation.item] : ("items" in operation) ? Object.keys(operation.items) : operation.itemsOps.map((itemOp) => itemOp.item);
|
|
19531
|
+
const itemIdList = "item" in operation ? Array.isArray(operation.item) ? operation.item : [operation.item] : ("items" in operation) ? Array.isArray(operation.items) ? operation.items.map((i) => i.id) : Object.keys(operation.items) : operation.itemsOps.map((itemOp) => itemOp.item);
|
|
19552
19532
|
const items = itemIdList.map((itemId) => board.items.findById(itemId) ?? itemId).filter((item) => {
|
|
19553
19533
|
if (typeof item === "string") {
|
|
19554
19534
|
console.warn(`Item with ID ${item} not found for operation ${operation.class}.${operation.method}`);
|
|
@@ -21790,7 +21770,8 @@ class RichText extends BaseItem {
|
|
|
21790
21770
|
this.transformation.subject.subscribe((tr, op) => {
|
|
21791
21771
|
this.prevMbr = this.getMbr();
|
|
21792
21772
|
if (op.method === "applyMatrix") {
|
|
21793
|
-
|
|
21773
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
21774
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
21794
21775
|
this.setAINodeShirkWidth();
|
|
21795
21776
|
if (!this.isInShape) {
|
|
21796
21777
|
this.transformCanvas();
|
|
@@ -21800,8 +21781,6 @@ class RichText extends BaseItem {
|
|
|
21800
21781
|
} else {
|
|
21801
21782
|
this.transformCanvas();
|
|
21802
21783
|
}
|
|
21803
|
-
} else if (op.method === "transformMany") {
|
|
21804
|
-
this.transformCanvas();
|
|
21805
21784
|
} else if (op.method === "deserialize") {
|
|
21806
21785
|
this.setAINodeShirkWidth();
|
|
21807
21786
|
this.updateElement();
|
|
@@ -35744,19 +35723,15 @@ class AINode extends BaseItem {
|
|
|
35744
35723
|
this.text = new RichText(this.board, new Mbr, this.id, this.transformation, this.linkTo, " ", false, false, "AINode");
|
|
35745
35724
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
35746
35725
|
if (op.method === "applyMatrix") {
|
|
35747
|
-
|
|
35726
|
+
const itemOp = op.items.find((i) => i.id === this.getId());
|
|
35727
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
35748
35728
|
this.prevMbr = this.path?.getMbr();
|
|
35749
35729
|
this.text.handleInshapeScale();
|
|
35750
|
-
} else {
|
|
35751
|
-
this.text.transformCanvas();
|
|
35752
|
-
}
|
|
35753
|
-
} else if (op.method === "transformMany") {
|
|
35754
|
-
const currItemOp = op.items[this.getId()];
|
|
35755
|
-
this.prevMbr = this.path?.getMbr();
|
|
35756
|
-
if (currItemOp.method === "applyMatrix" && currItemOp.matrix.scaleX === 1 && currItemOp.matrix.scaleY === 1) {
|
|
35730
|
+
} else if (itemOp) {
|
|
35757
35731
|
this.text.transformCanvas();
|
|
35758
35732
|
} else {
|
|
35759
|
-
this.
|
|
35733
|
+
this.prevMbr = this.path?.getMbr();
|
|
35734
|
+
this.text.updateElement();
|
|
35760
35735
|
}
|
|
35761
35736
|
} else {
|
|
35762
35737
|
this.prevMbr = this.path?.getMbr();
|
|
@@ -36968,13 +36943,9 @@ class Connector2 extends BaseItem {
|
|
|
36968
36943
|
this.endPointer = getEndPointer(this.endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.3);
|
|
36969
36944
|
this.middlePoint = null;
|
|
36970
36945
|
this.transformation.subject.subscribe((_sub, op) => {
|
|
36971
|
-
if (op.method === "
|
|
36972
|
-
const
|
|
36973
|
-
if (
|
|
36974
|
-
if (operation.matrix.scaleX !== 1 || operation.matrix.scaleY !== 1) {
|
|
36975
|
-
this.scalePoints();
|
|
36976
|
-
}
|
|
36977
|
-
} else if (operation.method === "scaleByTranslateBy" && (operation.scale.x !== 1 || operation.scale.y !== 1)) {
|
|
36946
|
+
if (op.method === "applyMatrix") {
|
|
36947
|
+
const itemOp = op.items.find((i) => i.id === this.getId());
|
|
36948
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
36978
36949
|
this.scalePoints();
|
|
36979
36950
|
}
|
|
36980
36951
|
}
|
|
@@ -39265,8 +39236,13 @@ class Shape extends BaseItem {
|
|
|
39265
39236
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
39266
39237
|
this.transformPath();
|
|
39267
39238
|
this.updateMbr();
|
|
39268
|
-
if (op.method === "applyMatrix"
|
|
39269
|
-
|
|
39239
|
+
if (op.method === "applyMatrix") {
|
|
39240
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
39241
|
+
if (itemOp && itemOp.matrix.scaleX === 1 && itemOp.matrix.scaleY === 1) {
|
|
39242
|
+
this.text.transformCanvas();
|
|
39243
|
+
} else {
|
|
39244
|
+
this.text.updateElement();
|
|
39245
|
+
}
|
|
39270
39246
|
} else {
|
|
39271
39247
|
this.text.updateElement();
|
|
39272
39248
|
}
|
|
@@ -39793,27 +39769,13 @@ class Sticker extends BaseItem {
|
|
|
39793
39769
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
39794
39770
|
this.transformPath();
|
|
39795
39771
|
if (op.method === "applyMatrix") {
|
|
39796
|
-
|
|
39797
|
-
|
|
39798
|
-
if (op.matrix.scaleX !== op.matrix.scaleY) {
|
|
39799
|
-
this.text.applyAutoSizeScale(this.text.calcAutoSize());
|
|
39800
|
-
} else {
|
|
39801
|
-
this.text.scaleAutoSizeScale(op.matrix.scaleX);
|
|
39802
|
-
}
|
|
39803
|
-
this.text.recoordinate();
|
|
39804
|
-
this.text.transformCanvas();
|
|
39805
|
-
} else {
|
|
39806
|
-
this.text.handleInshapeScale();
|
|
39807
|
-
}
|
|
39808
|
-
}
|
|
39809
|
-
} else if (op.method === "transformMany") {
|
|
39810
|
-
const transformOp = op.items[this.id];
|
|
39811
|
-
if (transformOp.method === "applyMatrix" && (transformOp.matrix.scaleX !== 1 || transformOp.matrix.scaleY !== 1)) {
|
|
39772
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
39773
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
39812
39774
|
if (this.text.isAutosize()) {
|
|
39813
|
-
if (
|
|
39775
|
+
if (itemOp.matrix.scaleX !== itemOp.matrix.scaleY) {
|
|
39814
39776
|
this.text.applyAutoSizeScale(this.text.calcAutoSize());
|
|
39815
39777
|
} else {
|
|
39816
|
-
this.text.scaleAutoSizeScale(
|
|
39778
|
+
this.text.scaleAutoSizeScale(itemOp.matrix.scaleX);
|
|
39817
39779
|
}
|
|
39818
39780
|
this.text.recoordinate();
|
|
39819
39781
|
this.text.transformCanvas();
|
|
@@ -44993,7 +44955,7 @@ function createCanvasDrawer(board) {
|
|
|
44993
44955
|
context.setCamera(camera);
|
|
44994
44956
|
context.ctx.setTransform(board2.camera.getMatrix().scaleX, 0, 0, board2.camera.getMatrix().scaleY, 0, 0);
|
|
44995
44957
|
context.matrix.applyToContext(context.ctx);
|
|
44996
|
-
const items =
|
|
44958
|
+
const items = translation.map((i) => i.id).map((id) => {
|
|
44997
44959
|
const item = board2.items.getById(id);
|
|
44998
44960
|
if (item) {
|
|
44999
44961
|
if (item.itemType !== "Frame") {
|
|
@@ -45083,7 +45045,7 @@ function createCanvasDrawer(board) {
|
|
|
45083
45045
|
matrix = new Matrix2;
|
|
45084
45046
|
}
|
|
45085
45047
|
function updateCanvasAndKeys(sumMbr, translation, resizingMatrix, actualMbr) {
|
|
45086
|
-
const translationKeys =
|
|
45048
|
+
const translationKeys = translation.map((i) => i.id);
|
|
45087
45049
|
if (lastCreatedCanvas && lastTranslationKeys?.length === translationKeys.length && lastTranslationKeys?.every((key) => translationKeys.includes(key))) {
|
|
45088
45050
|
recoordinateCanvas(sumMbr);
|
|
45089
45051
|
if (resizingMatrix) {
|
|
@@ -45101,7 +45063,7 @@ function createCanvasDrawer(board) {
|
|
|
45101
45063
|
cnvs.style.pointerEvents = "none";
|
|
45102
45064
|
document.body.appendChild(cnvs);
|
|
45103
45065
|
lastCreatedCanvas = cnvs;
|
|
45104
|
-
lastTranslationKeys =
|
|
45066
|
+
lastTranslationKeys = translation.map((i) => i.id);
|
|
45105
45067
|
lastTranslationKeys.forEach((id) => {
|
|
45106
45068
|
const item = board.items.getById(id);
|
|
45107
45069
|
if (item) {
|
|
@@ -45114,7 +45076,7 @@ function createCanvasDrawer(board) {
|
|
|
45114
45076
|
}
|
|
45115
45077
|
}
|
|
45116
45078
|
function countSumMbr(translation) {
|
|
45117
|
-
return
|
|
45079
|
+
return translation.map((i) => i.id).reduce((mbr, id) => {
|
|
45118
45080
|
const item = board.items.getById(id);
|
|
45119
45081
|
if (item) {
|
|
45120
45082
|
if (!mbr) {
|
|
@@ -46051,14 +46013,7 @@ class AlignmentHelper {
|
|
|
46051
46013
|
this.board.selection.transformMany(translation, timeStamp);
|
|
46052
46014
|
} else {
|
|
46053
46015
|
const id = item.getId();
|
|
46054
|
-
|
|
46055
|
-
transformMap[id] = {
|
|
46056
|
-
class: "Transformation",
|
|
46057
|
-
item: [id],
|
|
46058
|
-
method: "applyMatrix",
|
|
46059
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
46060
|
-
};
|
|
46061
|
-
this.board.selection.transformMany(transformMap, timeStamp);
|
|
46016
|
+
this.board.selection.transformMany([{ id, matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } }], timeStamp);
|
|
46062
46017
|
}
|
|
46063
46018
|
}
|
|
46064
46019
|
translateCanvas(x, y, timeStamp) {
|
|
@@ -46469,7 +46424,7 @@ class Select extends Tool {
|
|
|
46469
46424
|
return false;
|
|
46470
46425
|
}
|
|
46471
46426
|
const translation = selection.getManyItemsTranslation(x, y);
|
|
46472
|
-
const translationKeys =
|
|
46427
|
+
const translationKeys = translation.map((i) => i.id);
|
|
46473
46428
|
const commentsSet = new Set(this.board.items.getComments().map((comment2) => comment2.getId()));
|
|
46474
46429
|
if (translationKeys.filter((item) => !commentsSet.has(item)).length > 10) {
|
|
46475
46430
|
const selectedMbr = this.board.selection.getMbr()?.copy();
|
|
@@ -47907,7 +47862,7 @@ class Card extends BaseItem {
|
|
|
47907
47862
|
this.board.bringToFront(this);
|
|
47908
47863
|
}, 1000);
|
|
47909
47864
|
this.transformation.subject.subscribe((_, op) => {
|
|
47910
|
-
if (this.parent === "Board" && op.method === "applyMatrix" && op.matrix.scaleX === 1 && op.matrix.scaleY === 1) {
|
|
47865
|
+
if (this.parent === "Board" && op.method === "applyMatrix" && op.items.find((i) => i.id === this.id)?.matrix.scaleX === 1 && op.items.find((i) => i.id === this.id)?.matrix.scaleY === 1) {
|
|
47911
47866
|
this.throttledBringToFront();
|
|
47912
47867
|
}
|
|
47913
47868
|
this.updateMbr();
|
|
@@ -51662,7 +51617,7 @@ function handleMultipleItemsResize({
|
|
|
51662
51617
|
isShiftPressed
|
|
51663
51618
|
}) {
|
|
51664
51619
|
const { matrix } = resize;
|
|
51665
|
-
const
|
|
51620
|
+
const result = [];
|
|
51666
51621
|
const items = itemsToResize ? itemsToResize : board.selection.items.list();
|
|
51667
51622
|
board.items.getComments().forEach((comment2) => {
|
|
51668
51623
|
if (items.some((item) => item.getId() === comment2.getItemToFollow())) {
|
|
@@ -51681,25 +51636,25 @@ function handleMultipleItemsResize({
|
|
|
51681
51636
|
const deltaY = itemY - initMbr.top;
|
|
51682
51637
|
const translateY = deltaY * matrix.scaleY - deltaY + matrix.translateY;
|
|
51683
51638
|
if (item instanceof RichText) {
|
|
51684
|
-
|
|
51639
|
+
result.push(getRichTextTranslation({
|
|
51685
51640
|
item,
|
|
51686
51641
|
isWidth,
|
|
51687
51642
|
isHeight,
|
|
51688
51643
|
matrix,
|
|
51689
51644
|
translateX,
|
|
51690
51645
|
translateY
|
|
51691
|
-
});
|
|
51646
|
+
}));
|
|
51692
51647
|
} else if (item instanceof AINode) {
|
|
51693
|
-
|
|
51648
|
+
result.push(getAINodeTranslation({
|
|
51694
51649
|
item,
|
|
51695
51650
|
isWidth,
|
|
51696
51651
|
isHeight,
|
|
51697
51652
|
matrix,
|
|
51698
51653
|
translateX,
|
|
51699
51654
|
translateY
|
|
51700
|
-
});
|
|
51655
|
+
}));
|
|
51701
51656
|
} else {
|
|
51702
|
-
|
|
51657
|
+
result.push(getItemTranslation({
|
|
51703
51658
|
item,
|
|
51704
51659
|
isWidth,
|
|
51705
51660
|
isHeight,
|
|
@@ -51707,10 +51662,10 @@ function handleMultipleItemsResize({
|
|
|
51707
51662
|
translateX,
|
|
51708
51663
|
translateY,
|
|
51709
51664
|
isShiftPressed
|
|
51710
|
-
});
|
|
51665
|
+
}));
|
|
51711
51666
|
}
|
|
51712
51667
|
}
|
|
51713
|
-
return
|
|
51668
|
+
return result;
|
|
51714
51669
|
}
|
|
51715
51670
|
function getRichTextTranslation({
|
|
51716
51671
|
item,
|
|
@@ -51722,26 +51677,11 @@ function getRichTextTranslation({
|
|
|
51722
51677
|
}) {
|
|
51723
51678
|
if (isWidth) {
|
|
51724
51679
|
item.editor.setMaxWidth(item.getWidth() / item.transformation.getScale().x * matrix.scaleX);
|
|
51725
|
-
return {
|
|
51726
|
-
class: "Transformation",
|
|
51727
|
-
method: "applyMatrix",
|
|
51728
|
-
item: [item.getId()],
|
|
51729
|
-
matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51730
|
-
};
|
|
51680
|
+
return { id: item.getId(), matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51731
51681
|
} else if (isHeight) {
|
|
51732
|
-
return {
|
|
51733
|
-
class: "Transformation",
|
|
51734
|
-
method: "applyMatrix",
|
|
51735
|
-
item: [item.getId()],
|
|
51736
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51737
|
-
};
|
|
51682
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51738
51683
|
} else {
|
|
51739
|
-
return {
|
|
51740
|
-
class: "Transformation",
|
|
51741
|
-
method: "applyMatrix",
|
|
51742
|
-
item: [item.getId()],
|
|
51743
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51744
|
-
};
|
|
51684
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51745
51685
|
}
|
|
51746
51686
|
}
|
|
51747
51687
|
function getAINodeTranslation({
|
|
@@ -51754,26 +51694,11 @@ function getAINodeTranslation({
|
|
|
51754
51694
|
}) {
|
|
51755
51695
|
if (isWidth) {
|
|
51756
51696
|
item.text.editor.setMaxWidth(item.text.getWidth() / item.transformation.getScale().x * matrix.scaleX);
|
|
51757
|
-
return {
|
|
51758
|
-
class: "Transformation",
|
|
51759
|
-
method: "applyMatrix",
|
|
51760
|
-
item: [item.getId()],
|
|
51761
|
-
matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51762
|
-
};
|
|
51697
|
+
return { id: item.getId(), matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51763
51698
|
} else if (isHeight) {
|
|
51764
|
-
return {
|
|
51765
|
-
class: "Transformation",
|
|
51766
|
-
method: "applyMatrix",
|
|
51767
|
-
item: [item.getId()],
|
|
51768
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51769
|
-
};
|
|
51699
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51770
51700
|
} else {
|
|
51771
|
-
return {
|
|
51772
|
-
class: "Transformation",
|
|
51773
|
-
method: "applyMatrix",
|
|
51774
|
-
item: [item.getId()],
|
|
51775
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51776
|
-
};
|
|
51701
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51777
51702
|
}
|
|
51778
51703
|
}
|
|
51779
51704
|
function getItemTranslation({
|
|
@@ -51786,22 +51711,12 @@ function getItemTranslation({
|
|
|
51786
51711
|
isShiftPressed
|
|
51787
51712
|
}) {
|
|
51788
51713
|
if (item instanceof Sticker && (isWidth || isHeight)) {
|
|
51789
|
-
return {
|
|
51790
|
-
class: "Transformation",
|
|
51791
|
-
method: "applyMatrix",
|
|
51792
|
-
item: [item.getId()],
|
|
51793
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51794
|
-
};
|
|
51714
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51795
51715
|
} else {
|
|
51796
51716
|
if (item instanceof Frame2 && item.getCanChangeRatio() && isShiftPressed && item.getFrameType() !== "Custom") {
|
|
51797
51717
|
item.setFrameType("Custom");
|
|
51798
51718
|
}
|
|
51799
|
-
return {
|
|
51800
|
-
class: "Transformation",
|
|
51801
|
-
method: "applyMatrix",
|
|
51802
|
-
item: [item.getId()],
|
|
51803
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleY, shearX: 0, shearY: 0 }
|
|
51804
|
-
};
|
|
51719
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleY, shearX: 0, shearY: 0 } };
|
|
51805
51720
|
}
|
|
51806
51721
|
}
|
|
51807
51722
|
|
|
@@ -52138,7 +52053,7 @@ function transformItems({
|
|
|
52138
52053
|
isShiftPressed
|
|
52139
52054
|
});
|
|
52140
52055
|
selection.transformMany(translation, beginTimeStamp);
|
|
52141
|
-
if (
|
|
52056
|
+
if (translation.length > 10) {
|
|
52142
52057
|
canvasDrawer.updateCanvasAndKeys(resize.mbr, translation, resize.matrix);
|
|
52143
52058
|
debounceUpd.setFalse();
|
|
52144
52059
|
debounceUpd.setTimeoutUpdate(1000);
|
|
@@ -53166,53 +53081,41 @@ class BoardSelection {
|
|
|
53166
53081
|
this.shouldPublish = false;
|
|
53167
53082
|
this.emit({
|
|
53168
53083
|
class: "Transformation",
|
|
53169
|
-
method: "
|
|
53084
|
+
method: "applyMatrix",
|
|
53170
53085
|
items,
|
|
53171
53086
|
timeStamp
|
|
53172
53087
|
});
|
|
53173
53088
|
this.shouldPublish = true;
|
|
53174
53089
|
}
|
|
53175
53090
|
getManyItemsTranslation(x, y, unselectedItem) {
|
|
53176
|
-
const
|
|
53177
|
-
|
|
53178
|
-
|
|
53179
|
-
|
|
53180
|
-
|
|
53181
|
-
item: [itemId],
|
|
53182
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
53183
|
-
};
|
|
53184
|
-
}
|
|
53185
|
-
function tryToAddFrameChildrenToTranslation(selectedItem) {
|
|
53091
|
+
const items = [];
|
|
53092
|
+
const addItem = (itemId) => {
|
|
53093
|
+
items.push({ id: itemId, matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } });
|
|
53094
|
+
};
|
|
53095
|
+
const tryToAddFrameChildren = (selectedItem) => {
|
|
53186
53096
|
if (!("index" in selectedItem) || !selectedItem.index) {
|
|
53187
53097
|
return;
|
|
53188
53098
|
}
|
|
53189
53099
|
for (const childId of selectedItem.getChildrenIds()) {
|
|
53190
|
-
|
|
53100
|
+
addItem(childId);
|
|
53191
53101
|
}
|
|
53192
|
-
}
|
|
53193
|
-
const
|
|
53102
|
+
};
|
|
53103
|
+
const addWithComments = (item) => {
|
|
53104
|
+
addItem(item.getId());
|
|
53105
|
+
tryToAddFrameChildren(item);
|
|
53194
53106
|
const followedComments = this.board.items.getComments().filter((comment2) => comment2.getItemToFollow() === item.getId());
|
|
53195
53107
|
for (const comment2 of followedComments) {
|
|
53196
|
-
|
|
53197
|
-
class: "Transformation",
|
|
53198
|
-
method: "applyMatrix",
|
|
53199
|
-
item: [comment2.getId()],
|
|
53200
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
53201
|
-
};
|
|
53108
|
+
addItem(comment2.getId());
|
|
53202
53109
|
}
|
|
53203
53110
|
};
|
|
53204
53111
|
if (unselectedItem) {
|
|
53205
|
-
|
|
53206
|
-
|
|
53207
|
-
createTranslationWithComments(unselectedItem);
|
|
53208
|
-
return translation;
|
|
53112
|
+
addWithComments(unselectedItem);
|
|
53113
|
+
return items;
|
|
53209
53114
|
}
|
|
53210
53115
|
for (const selectedItem of this.board.selection.list()) {
|
|
53211
|
-
|
|
53212
|
-
tryToAddFrameChildrenToTranslation(selectedItem);
|
|
53213
|
-
createTranslationWithComments(selectedItem);
|
|
53116
|
+
addWithComments(selectedItem);
|
|
53214
53117
|
}
|
|
53215
|
-
return
|
|
53118
|
+
return items;
|
|
53216
53119
|
}
|
|
53217
53120
|
setStrokeStyle(borderStyle) {
|
|
53218
53121
|
const shapes = this.items.getIdsByItemTypes(["Shape"]);
|
|
@@ -54755,32 +54658,40 @@ function mergeOperations(opA, opB) {
|
|
|
54755
54658
|
return;
|
|
54756
54659
|
}
|
|
54757
54660
|
function mergeTransformationOperations(opA, opB) {
|
|
54758
|
-
if (
|
|
54661
|
+
if (opA.timeStamp && opB.timeStamp && opA.timeStamp !== opB.timeStamp) {
|
|
54759
54662
|
return;
|
|
54760
54663
|
}
|
|
54761
|
-
if (opA.
|
|
54664
|
+
if (opA.method === "applyMatrix" && opB.method === "applyMatrix") {
|
|
54665
|
+
if (opA.items.length !== opB.items.length)
|
|
54666
|
+
return;
|
|
54667
|
+
const idsA = new Set(opA.items.map((i) => i.id));
|
|
54668
|
+
if (!opB.items.every((b) => idsA.has(b.id)))
|
|
54669
|
+
return;
|
|
54670
|
+
return {
|
|
54671
|
+
class: "Transformation",
|
|
54672
|
+
method: "applyMatrix",
|
|
54673
|
+
items: opB.items.map((b) => {
|
|
54674
|
+
const a2 = opA.items.find((i) => i.id === b.id);
|
|
54675
|
+
return {
|
|
54676
|
+
id: b.id,
|
|
54677
|
+
matrix: {
|
|
54678
|
+
translateX: a2.matrix.translateX + b.matrix.translateX,
|
|
54679
|
+
translateY: a2.matrix.translateY + b.matrix.translateY,
|
|
54680
|
+
scaleX: a2.matrix.scaleX * b.matrix.scaleX,
|
|
54681
|
+
scaleY: a2.matrix.scaleY * b.matrix.scaleY,
|
|
54682
|
+
shearX: 0,
|
|
54683
|
+
shearY: 0
|
|
54684
|
+
}
|
|
54685
|
+
};
|
|
54686
|
+
}),
|
|
54687
|
+
timeStamp: opB.timeStamp
|
|
54688
|
+
};
|
|
54689
|
+
}
|
|
54690
|
+
if (!areItemsTheSame(opA, opB)) {
|
|
54762
54691
|
return;
|
|
54763
54692
|
}
|
|
54764
54693
|
const method = opA.method;
|
|
54765
54694
|
switch (method) {
|
|
54766
|
-
case "applyMatrix":
|
|
54767
|
-
if (opB.method !== method) {
|
|
54768
|
-
return;
|
|
54769
|
-
}
|
|
54770
|
-
return {
|
|
54771
|
-
class: "Transformation",
|
|
54772
|
-
method: "applyMatrix",
|
|
54773
|
-
item: opA.item,
|
|
54774
|
-
matrix: {
|
|
54775
|
-
translateX: opA.matrix.translateX + opB.matrix.translateX,
|
|
54776
|
-
translateY: opA.matrix.translateY + opB.matrix.translateY,
|
|
54777
|
-
scaleX: opA.matrix.scaleX * opB.matrix.scaleX,
|
|
54778
|
-
scaleY: opA.matrix.scaleY * opB.matrix.scaleY,
|
|
54779
|
-
shearX: 0,
|
|
54780
|
-
shearY: 0
|
|
54781
|
-
},
|
|
54782
|
-
timeStamp: opB.timeStamp
|
|
54783
|
-
};
|
|
54784
54695
|
case "translateBy":
|
|
54785
54696
|
if (opB.method !== method) {
|
|
54786
54697
|
return;
|
|
@@ -54834,130 +54745,10 @@ function mergeTransformationOperations(opA, opB) {
|
|
|
54834
54745
|
},
|
|
54835
54746
|
timeStamp: opB.timeStamp
|
|
54836
54747
|
};
|
|
54837
|
-
case "transformMany":
|
|
54838
|
-
const items = mergeItems(opA, opB);
|
|
54839
|
-
if (opB.method !== method) {
|
|
54840
|
-
return;
|
|
54841
|
-
}
|
|
54842
|
-
return {
|
|
54843
|
-
class: "Transformation",
|
|
54844
|
-
method: "transformMany",
|
|
54845
|
-
items,
|
|
54846
|
-
timeStamp: opB.timeStamp
|
|
54847
|
-
};
|
|
54848
54748
|
default:
|
|
54849
54749
|
return;
|
|
54850
54750
|
}
|
|
54851
54751
|
}
|
|
54852
|
-
function mergeItems(opA, opB) {
|
|
54853
|
-
if (opA.method === "transformMany" && opB.method === "transformMany") {
|
|
54854
|
-
const resolve2 = (currScale, currTranslate, opB2) => {
|
|
54855
|
-
switch (opB2.method) {
|
|
54856
|
-
case "scaleByTranslateBy":
|
|
54857
|
-
return {
|
|
54858
|
-
scale: {
|
|
54859
|
-
x: currScale ? currScale.x * opB2.scale.x : opB2.scale.x,
|
|
54860
|
-
y: currScale ? currScale.y * opB2.scale.y : opB2.scale.y
|
|
54861
|
-
},
|
|
54862
|
-
translate: {
|
|
54863
|
-
x: currTranslate ? currTranslate.x + opB2.translate.x : opB2.translate.x,
|
|
54864
|
-
y: currTranslate ? currTranslate.y + opB2.translate.y : opB2.translate.y
|
|
54865
|
-
}
|
|
54866
|
-
};
|
|
54867
|
-
case "scaleBy":
|
|
54868
|
-
return {
|
|
54869
|
-
scale: {
|
|
54870
|
-
x: currScale ? currScale.x * opB2.x : opB2.x,
|
|
54871
|
-
y: currScale ? currScale.y * opB2.y : opB2.y
|
|
54872
|
-
},
|
|
54873
|
-
translate: {
|
|
54874
|
-
x: currTranslate ? currTranslate.x : 0,
|
|
54875
|
-
y: currTranslate ? currTranslate.y : 0
|
|
54876
|
-
}
|
|
54877
|
-
};
|
|
54878
|
-
case "translateBy":
|
|
54879
|
-
return {
|
|
54880
|
-
scale: {
|
|
54881
|
-
x: currScale ? currScale.x : 1,
|
|
54882
|
-
y: currScale ? currScale.y : 1
|
|
54883
|
-
},
|
|
54884
|
-
translate: {
|
|
54885
|
-
x: currTranslate ? currTranslate.x + opB2.x : opB2.x,
|
|
54886
|
-
y: currTranslate ? currTranslate.y + opB2.y : opB2.y
|
|
54887
|
-
}
|
|
54888
|
-
};
|
|
54889
|
-
}
|
|
54890
|
-
return;
|
|
54891
|
-
};
|
|
54892
|
-
const items = {};
|
|
54893
|
-
Object.keys(opB.items).forEach((itemId) => {
|
|
54894
|
-
if (opA.items[itemId] !== undefined) {
|
|
54895
|
-
if (opA.items[itemId].method === "applyMatrix" && opB.items[itemId].method === "applyMatrix") {
|
|
54896
|
-
const a2 = opA.items[itemId].matrix;
|
|
54897
|
-
const b = opB.items[itemId].matrix;
|
|
54898
|
-
items[itemId] = {
|
|
54899
|
-
class: "Transformation",
|
|
54900
|
-
method: "applyMatrix",
|
|
54901
|
-
item: [itemId],
|
|
54902
|
-
matrix: {
|
|
54903
|
-
translateX: a2.translateX + b.translateX,
|
|
54904
|
-
translateY: a2.translateY + b.translateY,
|
|
54905
|
-
scaleX: a2.scaleX * b.scaleX,
|
|
54906
|
-
scaleY: a2.scaleY * b.scaleY,
|
|
54907
|
-
shearX: 0,
|
|
54908
|
-
shearY: 0
|
|
54909
|
-
}
|
|
54910
|
-
};
|
|
54911
|
-
} else if (opA.items[itemId].method === "scaleByTranslateBy") {
|
|
54912
|
-
const newTransformation = resolve2(opA.items[itemId].scale, opA.items[itemId].translate, opB.items[itemId]);
|
|
54913
|
-
if (!newTransformation) {
|
|
54914
|
-
items[itemId] = opB.items[itemId];
|
|
54915
|
-
} else {
|
|
54916
|
-
items[itemId] = {
|
|
54917
|
-
class: "Transformation",
|
|
54918
|
-
method: "scaleByTranslateBy",
|
|
54919
|
-
item: [itemId],
|
|
54920
|
-
scale: newTransformation.scale,
|
|
54921
|
-
translate: newTransformation.translate
|
|
54922
|
-
};
|
|
54923
|
-
}
|
|
54924
|
-
} else if (opA.items[itemId].method === "scaleBy") {
|
|
54925
|
-
const newTransformation = resolve2({ x: opA.items[itemId].x, y: opA.items[itemId].y }, undefined, opB.items[itemId]);
|
|
54926
|
-
if (!newTransformation) {
|
|
54927
|
-
items[itemId] = opB.items[itemId];
|
|
54928
|
-
} else {
|
|
54929
|
-
items[itemId] = {
|
|
54930
|
-
class: "Transformation",
|
|
54931
|
-
method: "scaleByTranslateBy",
|
|
54932
|
-
item: [itemId],
|
|
54933
|
-
scale: newTransformation.scale,
|
|
54934
|
-
translate: newTransformation.translate
|
|
54935
|
-
};
|
|
54936
|
-
}
|
|
54937
|
-
} else if (opA.items[itemId].method === "translateBy") {
|
|
54938
|
-
const newTransformation = resolve2(undefined, { x: opA.items[itemId].x, y: opA.items[itemId].y }, opB.items[itemId]);
|
|
54939
|
-
if (!newTransformation) {
|
|
54940
|
-
items[itemId] = opB.items[itemId];
|
|
54941
|
-
} else {
|
|
54942
|
-
items[itemId] = {
|
|
54943
|
-
class: "Transformation",
|
|
54944
|
-
method: "scaleByTranslateBy",
|
|
54945
|
-
item: [itemId],
|
|
54946
|
-
scale: newTransformation.scale,
|
|
54947
|
-
translate: newTransformation.translate
|
|
54948
|
-
};
|
|
54949
|
-
}
|
|
54950
|
-
} else {
|
|
54951
|
-
items[itemId] = opB.items[itemId];
|
|
54952
|
-
}
|
|
54953
|
-
} else {
|
|
54954
|
-
items[itemId] = opB.items[itemId];
|
|
54955
|
-
}
|
|
54956
|
-
});
|
|
54957
|
-
return items;
|
|
54958
|
-
}
|
|
54959
|
-
return;
|
|
54960
|
-
}
|
|
54961
54752
|
function mergeRichTextOperations(opA, opB) {
|
|
54962
54753
|
if (!areItemsTheSame(opA, opB)) {
|
|
54963
54754
|
return;
|