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/index.js
CHANGED
|
@@ -7131,17 +7131,29 @@ class TransformationCommand {
|
|
|
7131
7131
|
switch (this.operation.method) {
|
|
7132
7132
|
case "applyMatrix": {
|
|
7133
7133
|
const op2 = this.operation;
|
|
7134
|
-
return
|
|
7135
|
-
|
|
7136
|
-
|
|
7137
|
-
|
|
7138
|
-
|
|
7139
|
-
|
|
7140
|
-
|
|
7141
|
-
|
|
7142
|
-
|
|
7143
|
-
|
|
7144
|
-
|
|
7134
|
+
return this.transformation.map((t3) => {
|
|
7135
|
+
const itemOp = op2.items.find((i) => i.id === t3.getId());
|
|
7136
|
+
if (!itemOp)
|
|
7137
|
+
return { item: t3, operation: op2 };
|
|
7138
|
+
return {
|
|
7139
|
+
item: t3,
|
|
7140
|
+
operation: {
|
|
7141
|
+
class: "Transformation",
|
|
7142
|
+
method: "applyMatrix",
|
|
7143
|
+
items: [{
|
|
7144
|
+
id: t3.getId(),
|
|
7145
|
+
matrix: {
|
|
7146
|
+
translateX: -itemOp.matrix.translateX,
|
|
7147
|
+
translateY: -itemOp.matrix.translateY,
|
|
7148
|
+
scaleX: 1 / itemOp.matrix.scaleX,
|
|
7149
|
+
scaleY: 1 / itemOp.matrix.scaleY,
|
|
7150
|
+
shearX: 0,
|
|
7151
|
+
shearY: 0
|
|
7152
|
+
}
|
|
7153
|
+
}]
|
|
7154
|
+
}
|
|
7155
|
+
};
|
|
7156
|
+
});
|
|
7145
7157
|
}
|
|
7146
7158
|
case "translateTo":
|
|
7147
7159
|
return mapItemsByOperation(this.transformation, (transformation) => {
|
|
@@ -7223,60 +7235,25 @@ class TransformationCommand {
|
|
|
7223
7235
|
const { operation, transformation } = this;
|
|
7224
7236
|
return transformation.map((currTrans) => {
|
|
7225
7237
|
const op2 = operation.items[currTrans.getId()];
|
|
7226
|
-
|
|
7227
|
-
|
|
7228
|
-
|
|
7229
|
-
|
|
7230
|
-
|
|
7231
|
-
|
|
7232
|
-
|
|
7233
|
-
|
|
7234
|
-
|
|
7235
|
-
|
|
7236
|
-
|
|
7237
|
-
|
|
7238
|
-
|
|
7239
|
-
|
|
7240
|
-
|
|
7241
|
-
|
|
7242
|
-
|
|
7243
|
-
|
|
7244
|
-
|
|
7245
|
-
y: -op2.translate.y
|
|
7246
|
-
}
|
|
7247
|
-
};
|
|
7248
|
-
} else if (op2.method === "translateTo") {
|
|
7249
|
-
reverseOp = {
|
|
7250
|
-
...op2,
|
|
7251
|
-
x: currTrans.getTranslation().x,
|
|
7252
|
-
y: currTrans.getTranslation().y
|
|
7253
|
-
};
|
|
7254
|
-
} else if (op2.method === "translateBy") {
|
|
7255
|
-
reverseOp = {
|
|
7256
|
-
...op2,
|
|
7257
|
-
x: -op2.x,
|
|
7258
|
-
y: -op2.y
|
|
7259
|
-
};
|
|
7260
|
-
} else if (op2.method === "scaleTo") {
|
|
7261
|
-
reverseOp = {
|
|
7262
|
-
...op2,
|
|
7263
|
-
x: currTrans.getScale().x,
|
|
7264
|
-
y: currTrans.getScale().y
|
|
7265
|
-
};
|
|
7266
|
-
} else if (op2.method === "scaleBy") {
|
|
7267
|
-
reverseOp = {
|
|
7268
|
-
...op2,
|
|
7269
|
-
x: 1 / op2.x,
|
|
7270
|
-
y: 1 / op2.y
|
|
7271
|
-
};
|
|
7272
|
-
} else {
|
|
7273
|
-
reverseOp = {
|
|
7274
|
-
...op2,
|
|
7275
|
-
x: 1,
|
|
7276
|
-
y: 1
|
|
7277
|
-
};
|
|
7278
|
-
}
|
|
7279
|
-
return { item: currTrans, operation: reverseOp };
|
|
7238
|
+
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 };
|
|
7239
|
+
return {
|
|
7240
|
+
item: currTrans,
|
|
7241
|
+
operation: {
|
|
7242
|
+
class: "Transformation",
|
|
7243
|
+
method: "applyMatrix",
|
|
7244
|
+
items: [{
|
|
7245
|
+
id: currTrans.getId(),
|
|
7246
|
+
matrix: {
|
|
7247
|
+
translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
|
|
7248
|
+
translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
|
|
7249
|
+
scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
|
|
7250
|
+
scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
|
|
7251
|
+
shearX: 0,
|
|
7252
|
+
shearY: 0
|
|
7253
|
+
}
|
|
7254
|
+
}]
|
|
7255
|
+
}
|
|
7256
|
+
};
|
|
7280
7257
|
});
|
|
7281
7258
|
}
|
|
7282
7259
|
case "locked": {
|
|
@@ -7407,10 +7384,14 @@ class Transformation {
|
|
|
7407
7384
|
apply(op) {
|
|
7408
7385
|
this.previous = this.matrix.copy();
|
|
7409
7386
|
switch (op.method) {
|
|
7410
|
-
case "applyMatrix":
|
|
7411
|
-
|
|
7412
|
-
|
|
7387
|
+
case "applyMatrix": {
|
|
7388
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
7389
|
+
if (itemOp) {
|
|
7390
|
+
this.matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
|
|
7391
|
+
this.matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
|
|
7392
|
+
}
|
|
7413
7393
|
break;
|
|
7394
|
+
}
|
|
7414
7395
|
case "translateTo":
|
|
7415
7396
|
this.applyTranslateTo(op.x, op.y);
|
|
7416
7397
|
break;
|
|
@@ -7545,8 +7526,7 @@ class Transformation {
|
|
|
7545
7526
|
this.emit({
|
|
7546
7527
|
class: "Transformation",
|
|
7547
7528
|
method: "applyMatrix",
|
|
7548
|
-
|
|
7549
|
-
matrix,
|
|
7529
|
+
items: [{ id: this.id, matrix }],
|
|
7550
7530
|
timeStamp
|
|
7551
7531
|
});
|
|
7552
7532
|
}
|
|
@@ -19541,7 +19521,7 @@ function createCommand(board, operation) {
|
|
|
19541
19521
|
}
|
|
19542
19522
|
default: {
|
|
19543
19523
|
const itemType = operation.class;
|
|
19544
|
-
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);
|
|
19524
|
+
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);
|
|
19545
19525
|
const items = itemIdList.map((itemId) => board.items.findById(itemId) ?? itemId).filter((item) => {
|
|
19546
19526
|
if (typeof item === "string") {
|
|
19547
19527
|
console.warn(`Item with ID ${item} not found for operation ${operation.class}.${operation.method}`);
|
|
@@ -21783,7 +21763,8 @@ class RichText extends BaseItem {
|
|
|
21783
21763
|
this.transformation.subject.subscribe((tr, op) => {
|
|
21784
21764
|
this.prevMbr = this.getMbr();
|
|
21785
21765
|
if (op.method === "applyMatrix") {
|
|
21786
|
-
|
|
21766
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
21767
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
21787
21768
|
this.setAINodeShirkWidth();
|
|
21788
21769
|
if (!this.isInShape) {
|
|
21789
21770
|
this.transformCanvas();
|
|
@@ -21793,8 +21774,6 @@ class RichText extends BaseItem {
|
|
|
21793
21774
|
} else {
|
|
21794
21775
|
this.transformCanvas();
|
|
21795
21776
|
}
|
|
21796
|
-
} else if (op.method === "transformMany") {
|
|
21797
|
-
this.transformCanvas();
|
|
21798
21777
|
} else if (op.method === "deserialize") {
|
|
21799
21778
|
this.setAINodeShirkWidth();
|
|
21800
21779
|
this.updateElement();
|
|
@@ -35737,19 +35716,15 @@ class AINode extends BaseItem {
|
|
|
35737
35716
|
this.text = new RichText(this.board, new Mbr, this.id, this.transformation, this.linkTo, " ", false, false, "AINode");
|
|
35738
35717
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
35739
35718
|
if (op.method === "applyMatrix") {
|
|
35740
|
-
|
|
35719
|
+
const itemOp = op.items.find((i) => i.id === this.getId());
|
|
35720
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
35741
35721
|
this.prevMbr = this.path?.getMbr();
|
|
35742
35722
|
this.text.handleInshapeScale();
|
|
35743
|
-
} else {
|
|
35744
|
-
this.text.transformCanvas();
|
|
35745
|
-
}
|
|
35746
|
-
} else if (op.method === "transformMany") {
|
|
35747
|
-
const currItemOp = op.items[this.getId()];
|
|
35748
|
-
this.prevMbr = this.path?.getMbr();
|
|
35749
|
-
if (currItemOp.method === "applyMatrix" && currItemOp.matrix.scaleX === 1 && currItemOp.matrix.scaleY === 1) {
|
|
35723
|
+
} else if (itemOp) {
|
|
35750
35724
|
this.text.transformCanvas();
|
|
35751
35725
|
} else {
|
|
35752
|
-
this.
|
|
35726
|
+
this.prevMbr = this.path?.getMbr();
|
|
35727
|
+
this.text.updateElement();
|
|
35753
35728
|
}
|
|
35754
35729
|
} else {
|
|
35755
35730
|
this.prevMbr = this.path?.getMbr();
|
|
@@ -36961,13 +36936,9 @@ class Connector2 extends BaseItem {
|
|
|
36961
36936
|
this.endPointer = getEndPointer(this.endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.3);
|
|
36962
36937
|
this.middlePoint = null;
|
|
36963
36938
|
this.transformation.subject.subscribe((_sub, op) => {
|
|
36964
|
-
if (op.method === "
|
|
36965
|
-
const
|
|
36966
|
-
if (
|
|
36967
|
-
if (operation.matrix.scaleX !== 1 || operation.matrix.scaleY !== 1) {
|
|
36968
|
-
this.scalePoints();
|
|
36969
|
-
}
|
|
36970
|
-
} else if (operation.method === "scaleByTranslateBy" && (operation.scale.x !== 1 || operation.scale.y !== 1)) {
|
|
36939
|
+
if (op.method === "applyMatrix") {
|
|
36940
|
+
const itemOp = op.items.find((i) => i.id === this.getId());
|
|
36941
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
36971
36942
|
this.scalePoints();
|
|
36972
36943
|
}
|
|
36973
36944
|
}
|
|
@@ -39258,8 +39229,13 @@ class Shape extends BaseItem {
|
|
|
39258
39229
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
39259
39230
|
this.transformPath();
|
|
39260
39231
|
this.updateMbr();
|
|
39261
|
-
if (op.method === "applyMatrix"
|
|
39262
|
-
|
|
39232
|
+
if (op.method === "applyMatrix") {
|
|
39233
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
39234
|
+
if (itemOp && itemOp.matrix.scaleX === 1 && itemOp.matrix.scaleY === 1) {
|
|
39235
|
+
this.text.transformCanvas();
|
|
39236
|
+
} else {
|
|
39237
|
+
this.text.updateElement();
|
|
39238
|
+
}
|
|
39263
39239
|
} else {
|
|
39264
39240
|
this.text.updateElement();
|
|
39265
39241
|
}
|
|
@@ -39786,27 +39762,13 @@ class Sticker extends BaseItem {
|
|
|
39786
39762
|
this.transformation.subject.subscribe((_subject, op) => {
|
|
39787
39763
|
this.transformPath();
|
|
39788
39764
|
if (op.method === "applyMatrix") {
|
|
39789
|
-
|
|
39790
|
-
|
|
39791
|
-
if (op.matrix.scaleX !== op.matrix.scaleY) {
|
|
39792
|
-
this.text.applyAutoSizeScale(this.text.calcAutoSize());
|
|
39793
|
-
} else {
|
|
39794
|
-
this.text.scaleAutoSizeScale(op.matrix.scaleX);
|
|
39795
|
-
}
|
|
39796
|
-
this.text.recoordinate();
|
|
39797
|
-
this.text.transformCanvas();
|
|
39798
|
-
} else {
|
|
39799
|
-
this.text.handleInshapeScale();
|
|
39800
|
-
}
|
|
39801
|
-
}
|
|
39802
|
-
} else if (op.method === "transformMany") {
|
|
39803
|
-
const transformOp = op.items[this.id];
|
|
39804
|
-
if (transformOp.method === "applyMatrix" && (transformOp.matrix.scaleX !== 1 || transformOp.matrix.scaleY !== 1)) {
|
|
39765
|
+
const itemOp = op.items.find((i) => i.id === this.id);
|
|
39766
|
+
if (itemOp && (itemOp.matrix.scaleX !== 1 || itemOp.matrix.scaleY !== 1)) {
|
|
39805
39767
|
if (this.text.isAutosize()) {
|
|
39806
|
-
if (
|
|
39768
|
+
if (itemOp.matrix.scaleX !== itemOp.matrix.scaleY) {
|
|
39807
39769
|
this.text.applyAutoSizeScale(this.text.calcAutoSize());
|
|
39808
39770
|
} else {
|
|
39809
|
-
this.text.scaleAutoSizeScale(
|
|
39771
|
+
this.text.scaleAutoSizeScale(itemOp.matrix.scaleX);
|
|
39810
39772
|
}
|
|
39811
39773
|
this.text.recoordinate();
|
|
39812
39774
|
this.text.transformCanvas();
|
|
@@ -44986,7 +44948,7 @@ function createCanvasDrawer(board) {
|
|
|
44986
44948
|
context.setCamera(camera);
|
|
44987
44949
|
context.ctx.setTransform(board2.camera.getMatrix().scaleX, 0, 0, board2.camera.getMatrix().scaleY, 0, 0);
|
|
44988
44950
|
context.matrix.applyToContext(context.ctx);
|
|
44989
|
-
const items =
|
|
44951
|
+
const items = translation.map((i) => i.id).map((id) => {
|
|
44990
44952
|
const item = board2.items.getById(id);
|
|
44991
44953
|
if (item) {
|
|
44992
44954
|
if (item.itemType !== "Frame") {
|
|
@@ -45076,7 +45038,7 @@ function createCanvasDrawer(board) {
|
|
|
45076
45038
|
matrix = new Matrix2;
|
|
45077
45039
|
}
|
|
45078
45040
|
function updateCanvasAndKeys(sumMbr, translation, resizingMatrix, actualMbr) {
|
|
45079
|
-
const translationKeys =
|
|
45041
|
+
const translationKeys = translation.map((i) => i.id);
|
|
45080
45042
|
if (lastCreatedCanvas && lastTranslationKeys?.length === translationKeys.length && lastTranslationKeys?.every((key) => translationKeys.includes(key))) {
|
|
45081
45043
|
recoordinateCanvas(sumMbr);
|
|
45082
45044
|
if (resizingMatrix) {
|
|
@@ -45094,7 +45056,7 @@ function createCanvasDrawer(board) {
|
|
|
45094
45056
|
cnvs.style.pointerEvents = "none";
|
|
45095
45057
|
document.body.appendChild(cnvs);
|
|
45096
45058
|
lastCreatedCanvas = cnvs;
|
|
45097
|
-
lastTranslationKeys =
|
|
45059
|
+
lastTranslationKeys = translation.map((i) => i.id);
|
|
45098
45060
|
lastTranslationKeys.forEach((id) => {
|
|
45099
45061
|
const item = board.items.getById(id);
|
|
45100
45062
|
if (item) {
|
|
@@ -45107,7 +45069,7 @@ function createCanvasDrawer(board) {
|
|
|
45107
45069
|
}
|
|
45108
45070
|
}
|
|
45109
45071
|
function countSumMbr(translation) {
|
|
45110
|
-
return
|
|
45072
|
+
return translation.map((i) => i.id).reduce((mbr, id) => {
|
|
45111
45073
|
const item = board.items.getById(id);
|
|
45112
45074
|
if (item) {
|
|
45113
45075
|
if (!mbr) {
|
|
@@ -46044,14 +46006,7 @@ class AlignmentHelper {
|
|
|
46044
46006
|
this.board.selection.transformMany(translation, timeStamp);
|
|
46045
46007
|
} else {
|
|
46046
46008
|
const id = item.getId();
|
|
46047
|
-
|
|
46048
|
-
transformMap[id] = {
|
|
46049
|
-
class: "Transformation",
|
|
46050
|
-
item: [id],
|
|
46051
|
-
method: "applyMatrix",
|
|
46052
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
46053
|
-
};
|
|
46054
|
-
this.board.selection.transformMany(transformMap, timeStamp);
|
|
46009
|
+
this.board.selection.transformMany([{ id, matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } }], timeStamp);
|
|
46055
46010
|
}
|
|
46056
46011
|
}
|
|
46057
46012
|
translateCanvas(x, y, timeStamp) {
|
|
@@ -46462,7 +46417,7 @@ class Select extends Tool {
|
|
|
46462
46417
|
return false;
|
|
46463
46418
|
}
|
|
46464
46419
|
const translation = selection.getManyItemsTranslation(x, y);
|
|
46465
|
-
const translationKeys =
|
|
46420
|
+
const translationKeys = translation.map((i) => i.id);
|
|
46466
46421
|
const commentsSet = new Set(this.board.items.getComments().map((comment2) => comment2.getId()));
|
|
46467
46422
|
if (translationKeys.filter((item) => !commentsSet.has(item)).length > 10) {
|
|
46468
46423
|
const selectedMbr = this.board.selection.getMbr()?.copy();
|
|
@@ -47900,7 +47855,7 @@ class Card extends BaseItem {
|
|
|
47900
47855
|
this.board.bringToFront(this);
|
|
47901
47856
|
}, 1000);
|
|
47902
47857
|
this.transformation.subject.subscribe((_, op) => {
|
|
47903
|
-
if (this.parent === "Board" && op.method === "applyMatrix" && op.matrix.scaleX === 1 && op.matrix.scaleY === 1) {
|
|
47858
|
+
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) {
|
|
47904
47859
|
this.throttledBringToFront();
|
|
47905
47860
|
}
|
|
47906
47861
|
this.updateMbr();
|
|
@@ -51655,7 +51610,7 @@ function handleMultipleItemsResize({
|
|
|
51655
51610
|
isShiftPressed
|
|
51656
51611
|
}) {
|
|
51657
51612
|
const { matrix } = resize;
|
|
51658
|
-
const
|
|
51613
|
+
const result = [];
|
|
51659
51614
|
const items = itemsToResize ? itemsToResize : board.selection.items.list();
|
|
51660
51615
|
board.items.getComments().forEach((comment2) => {
|
|
51661
51616
|
if (items.some((item) => item.getId() === comment2.getItemToFollow())) {
|
|
@@ -51674,25 +51629,25 @@ function handleMultipleItemsResize({
|
|
|
51674
51629
|
const deltaY = itemY - initMbr.top;
|
|
51675
51630
|
const translateY = deltaY * matrix.scaleY - deltaY + matrix.translateY;
|
|
51676
51631
|
if (item instanceof RichText) {
|
|
51677
|
-
|
|
51632
|
+
result.push(getRichTextTranslation({
|
|
51678
51633
|
item,
|
|
51679
51634
|
isWidth,
|
|
51680
51635
|
isHeight,
|
|
51681
51636
|
matrix,
|
|
51682
51637
|
translateX,
|
|
51683
51638
|
translateY
|
|
51684
|
-
});
|
|
51639
|
+
}));
|
|
51685
51640
|
} else if (item instanceof AINode) {
|
|
51686
|
-
|
|
51641
|
+
result.push(getAINodeTranslation({
|
|
51687
51642
|
item,
|
|
51688
51643
|
isWidth,
|
|
51689
51644
|
isHeight,
|
|
51690
51645
|
matrix,
|
|
51691
51646
|
translateX,
|
|
51692
51647
|
translateY
|
|
51693
|
-
});
|
|
51648
|
+
}));
|
|
51694
51649
|
} else {
|
|
51695
|
-
|
|
51650
|
+
result.push(getItemTranslation({
|
|
51696
51651
|
item,
|
|
51697
51652
|
isWidth,
|
|
51698
51653
|
isHeight,
|
|
@@ -51700,10 +51655,10 @@ function handleMultipleItemsResize({
|
|
|
51700
51655
|
translateX,
|
|
51701
51656
|
translateY,
|
|
51702
51657
|
isShiftPressed
|
|
51703
|
-
});
|
|
51658
|
+
}));
|
|
51704
51659
|
}
|
|
51705
51660
|
}
|
|
51706
|
-
return
|
|
51661
|
+
return result;
|
|
51707
51662
|
}
|
|
51708
51663
|
function getRichTextTranslation({
|
|
51709
51664
|
item,
|
|
@@ -51715,26 +51670,11 @@ function getRichTextTranslation({
|
|
|
51715
51670
|
}) {
|
|
51716
51671
|
if (isWidth) {
|
|
51717
51672
|
item.editor.setMaxWidth(item.getWidth() / item.transformation.getScale().x * matrix.scaleX);
|
|
51718
|
-
return {
|
|
51719
|
-
class: "Transformation",
|
|
51720
|
-
method: "applyMatrix",
|
|
51721
|
-
item: [item.getId()],
|
|
51722
|
-
matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51723
|
-
};
|
|
51673
|
+
return { id: item.getId(), matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51724
51674
|
} else if (isHeight) {
|
|
51725
|
-
return {
|
|
51726
|
-
class: "Transformation",
|
|
51727
|
-
method: "applyMatrix",
|
|
51728
|
-
item: [item.getId()],
|
|
51729
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51730
|
-
};
|
|
51675
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51731
51676
|
} else {
|
|
51732
|
-
return {
|
|
51733
|
-
class: "Transformation",
|
|
51734
|
-
method: "applyMatrix",
|
|
51735
|
-
item: [item.getId()],
|
|
51736
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51737
|
-
};
|
|
51677
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51738
51678
|
}
|
|
51739
51679
|
}
|
|
51740
51680
|
function getAINodeTranslation({
|
|
@@ -51747,26 +51687,11 @@ function getAINodeTranslation({
|
|
|
51747
51687
|
}) {
|
|
51748
51688
|
if (isWidth) {
|
|
51749
51689
|
item.text.editor.setMaxWidth(item.text.getWidth() / item.transformation.getScale().x * matrix.scaleX);
|
|
51750
|
-
return {
|
|
51751
|
-
class: "Transformation",
|
|
51752
|
-
method: "applyMatrix",
|
|
51753
|
-
item: [item.getId()],
|
|
51754
|
-
matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51755
|
-
};
|
|
51690
|
+
return { id: item.getId(), matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51756
51691
|
} else if (isHeight) {
|
|
51757
|
-
return {
|
|
51758
|
-
class: "Transformation",
|
|
51759
|
-
method: "applyMatrix",
|
|
51760
|
-
item: [item.getId()],
|
|
51761
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51762
|
-
};
|
|
51692
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51763
51693
|
} else {
|
|
51764
|
-
return {
|
|
51765
|
-
class: "Transformation",
|
|
51766
|
-
method: "applyMatrix",
|
|
51767
|
-
item: [item.getId()],
|
|
51768
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
|
|
51769
|
-
};
|
|
51694
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 } };
|
|
51770
51695
|
}
|
|
51771
51696
|
}
|
|
51772
51697
|
function getItemTranslation({
|
|
@@ -51779,22 +51704,12 @@ function getItemTranslation({
|
|
|
51779
51704
|
isShiftPressed
|
|
51780
51705
|
}) {
|
|
51781
51706
|
if (item instanceof Sticker && (isWidth || isHeight)) {
|
|
51782
|
-
return {
|
|
51783
|
-
class: "Transformation",
|
|
51784
|
-
method: "applyMatrix",
|
|
51785
|
-
item: [item.getId()],
|
|
51786
|
-
matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
51787
|
-
};
|
|
51707
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } };
|
|
51788
51708
|
} else {
|
|
51789
51709
|
if (item instanceof Frame2 && item.getCanChangeRatio() && isShiftPressed && item.getFrameType() !== "Custom") {
|
|
51790
51710
|
item.setFrameType("Custom");
|
|
51791
51711
|
}
|
|
51792
|
-
return {
|
|
51793
|
-
class: "Transformation",
|
|
51794
|
-
method: "applyMatrix",
|
|
51795
|
-
item: [item.getId()],
|
|
51796
|
-
matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleY, shearX: 0, shearY: 0 }
|
|
51797
|
-
};
|
|
51712
|
+
return { id: item.getId(), matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleY, shearX: 0, shearY: 0 } };
|
|
51798
51713
|
}
|
|
51799
51714
|
}
|
|
51800
51715
|
|
|
@@ -52131,7 +52046,7 @@ function transformItems({
|
|
|
52131
52046
|
isShiftPressed
|
|
52132
52047
|
});
|
|
52133
52048
|
selection.transformMany(translation, beginTimeStamp);
|
|
52134
|
-
if (
|
|
52049
|
+
if (translation.length > 10) {
|
|
52135
52050
|
canvasDrawer.updateCanvasAndKeys(resize.mbr, translation, resize.matrix);
|
|
52136
52051
|
debounceUpd.setFalse();
|
|
52137
52052
|
debounceUpd.setTimeoutUpdate(1000);
|
|
@@ -53159,53 +53074,41 @@ class BoardSelection {
|
|
|
53159
53074
|
this.shouldPublish = false;
|
|
53160
53075
|
this.emit({
|
|
53161
53076
|
class: "Transformation",
|
|
53162
|
-
method: "
|
|
53077
|
+
method: "applyMatrix",
|
|
53163
53078
|
items,
|
|
53164
53079
|
timeStamp
|
|
53165
53080
|
});
|
|
53166
53081
|
this.shouldPublish = true;
|
|
53167
53082
|
}
|
|
53168
53083
|
getManyItemsTranslation(x, y, unselectedItem) {
|
|
53169
|
-
const
|
|
53170
|
-
|
|
53171
|
-
|
|
53172
|
-
|
|
53173
|
-
|
|
53174
|
-
item: [itemId],
|
|
53175
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
53176
|
-
};
|
|
53177
|
-
}
|
|
53178
|
-
function tryToAddFrameChildrenToTranslation(selectedItem) {
|
|
53084
|
+
const items = [];
|
|
53085
|
+
const addItem = (itemId) => {
|
|
53086
|
+
items.push({ id: itemId, matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } });
|
|
53087
|
+
};
|
|
53088
|
+
const tryToAddFrameChildren = (selectedItem) => {
|
|
53179
53089
|
if (!("index" in selectedItem) || !selectedItem.index) {
|
|
53180
53090
|
return;
|
|
53181
53091
|
}
|
|
53182
53092
|
for (const childId of selectedItem.getChildrenIds()) {
|
|
53183
|
-
|
|
53093
|
+
addItem(childId);
|
|
53184
53094
|
}
|
|
53185
|
-
}
|
|
53186
|
-
const
|
|
53095
|
+
};
|
|
53096
|
+
const addWithComments = (item) => {
|
|
53097
|
+
addItem(item.getId());
|
|
53098
|
+
tryToAddFrameChildren(item);
|
|
53187
53099
|
const followedComments = this.board.items.getComments().filter((comment2) => comment2.getItemToFollow() === item.getId());
|
|
53188
53100
|
for (const comment2 of followedComments) {
|
|
53189
|
-
|
|
53190
|
-
class: "Transformation",
|
|
53191
|
-
method: "applyMatrix",
|
|
53192
|
-
item: [comment2.getId()],
|
|
53193
|
-
matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
|
|
53194
|
-
};
|
|
53101
|
+
addItem(comment2.getId());
|
|
53195
53102
|
}
|
|
53196
53103
|
};
|
|
53197
53104
|
if (unselectedItem) {
|
|
53198
|
-
|
|
53199
|
-
|
|
53200
|
-
createTranslationWithComments(unselectedItem);
|
|
53201
|
-
return translation;
|
|
53105
|
+
addWithComments(unselectedItem);
|
|
53106
|
+
return items;
|
|
53202
53107
|
}
|
|
53203
53108
|
for (const selectedItem of this.board.selection.list()) {
|
|
53204
|
-
|
|
53205
|
-
tryToAddFrameChildrenToTranslation(selectedItem);
|
|
53206
|
-
createTranslationWithComments(selectedItem);
|
|
53109
|
+
addWithComments(selectedItem);
|
|
53207
53110
|
}
|
|
53208
|
-
return
|
|
53111
|
+
return items;
|
|
53209
53112
|
}
|
|
53210
53113
|
setStrokeStyle(borderStyle) {
|
|
53211
53114
|
const shapes = this.items.getIdsByItemTypes(["Shape"]);
|
|
@@ -54748,32 +54651,40 @@ function mergeOperations(opA, opB) {
|
|
|
54748
54651
|
return;
|
|
54749
54652
|
}
|
|
54750
54653
|
function mergeTransformationOperations(opA, opB) {
|
|
54751
|
-
if (
|
|
54654
|
+
if (opA.timeStamp && opB.timeStamp && opA.timeStamp !== opB.timeStamp) {
|
|
54752
54655
|
return;
|
|
54753
54656
|
}
|
|
54754
|
-
if (opA.
|
|
54657
|
+
if (opA.method === "applyMatrix" && opB.method === "applyMatrix") {
|
|
54658
|
+
if (opA.items.length !== opB.items.length)
|
|
54659
|
+
return;
|
|
54660
|
+
const idsA = new Set(opA.items.map((i) => i.id));
|
|
54661
|
+
if (!opB.items.every((b) => idsA.has(b.id)))
|
|
54662
|
+
return;
|
|
54663
|
+
return {
|
|
54664
|
+
class: "Transformation",
|
|
54665
|
+
method: "applyMatrix",
|
|
54666
|
+
items: opB.items.map((b) => {
|
|
54667
|
+
const a2 = opA.items.find((i) => i.id === b.id);
|
|
54668
|
+
return {
|
|
54669
|
+
id: b.id,
|
|
54670
|
+
matrix: {
|
|
54671
|
+
translateX: a2.matrix.translateX + b.matrix.translateX,
|
|
54672
|
+
translateY: a2.matrix.translateY + b.matrix.translateY,
|
|
54673
|
+
scaleX: a2.matrix.scaleX * b.matrix.scaleX,
|
|
54674
|
+
scaleY: a2.matrix.scaleY * b.matrix.scaleY,
|
|
54675
|
+
shearX: 0,
|
|
54676
|
+
shearY: 0
|
|
54677
|
+
}
|
|
54678
|
+
};
|
|
54679
|
+
}),
|
|
54680
|
+
timeStamp: opB.timeStamp
|
|
54681
|
+
};
|
|
54682
|
+
}
|
|
54683
|
+
if (!areItemsTheSame(opA, opB)) {
|
|
54755
54684
|
return;
|
|
54756
54685
|
}
|
|
54757
54686
|
const method = opA.method;
|
|
54758
54687
|
switch (method) {
|
|
54759
|
-
case "applyMatrix":
|
|
54760
|
-
if (opB.method !== method) {
|
|
54761
|
-
return;
|
|
54762
|
-
}
|
|
54763
|
-
return {
|
|
54764
|
-
class: "Transformation",
|
|
54765
|
-
method: "applyMatrix",
|
|
54766
|
-
item: opA.item,
|
|
54767
|
-
matrix: {
|
|
54768
|
-
translateX: opA.matrix.translateX + opB.matrix.translateX,
|
|
54769
|
-
translateY: opA.matrix.translateY + opB.matrix.translateY,
|
|
54770
|
-
scaleX: opA.matrix.scaleX * opB.matrix.scaleX,
|
|
54771
|
-
scaleY: opA.matrix.scaleY * opB.matrix.scaleY,
|
|
54772
|
-
shearX: 0,
|
|
54773
|
-
shearY: 0
|
|
54774
|
-
},
|
|
54775
|
-
timeStamp: opB.timeStamp
|
|
54776
|
-
};
|
|
54777
54688
|
case "translateBy":
|
|
54778
54689
|
if (opB.method !== method) {
|
|
54779
54690
|
return;
|
|
@@ -54827,130 +54738,10 @@ function mergeTransformationOperations(opA, opB) {
|
|
|
54827
54738
|
},
|
|
54828
54739
|
timeStamp: opB.timeStamp
|
|
54829
54740
|
};
|
|
54830
|
-
case "transformMany":
|
|
54831
|
-
const items = mergeItems(opA, opB);
|
|
54832
|
-
if (opB.method !== method) {
|
|
54833
|
-
return;
|
|
54834
|
-
}
|
|
54835
|
-
return {
|
|
54836
|
-
class: "Transformation",
|
|
54837
|
-
method: "transformMany",
|
|
54838
|
-
items,
|
|
54839
|
-
timeStamp: opB.timeStamp
|
|
54840
|
-
};
|
|
54841
54741
|
default:
|
|
54842
54742
|
return;
|
|
54843
54743
|
}
|
|
54844
54744
|
}
|
|
54845
|
-
function mergeItems(opA, opB) {
|
|
54846
|
-
if (opA.method === "transformMany" && opB.method === "transformMany") {
|
|
54847
|
-
const resolve2 = (currScale, currTranslate, opB2) => {
|
|
54848
|
-
switch (opB2.method) {
|
|
54849
|
-
case "scaleByTranslateBy":
|
|
54850
|
-
return {
|
|
54851
|
-
scale: {
|
|
54852
|
-
x: currScale ? currScale.x * opB2.scale.x : opB2.scale.x,
|
|
54853
|
-
y: currScale ? currScale.y * opB2.scale.y : opB2.scale.y
|
|
54854
|
-
},
|
|
54855
|
-
translate: {
|
|
54856
|
-
x: currTranslate ? currTranslate.x + opB2.translate.x : opB2.translate.x,
|
|
54857
|
-
y: currTranslate ? currTranslate.y + opB2.translate.y : opB2.translate.y
|
|
54858
|
-
}
|
|
54859
|
-
};
|
|
54860
|
-
case "scaleBy":
|
|
54861
|
-
return {
|
|
54862
|
-
scale: {
|
|
54863
|
-
x: currScale ? currScale.x * opB2.x : opB2.x,
|
|
54864
|
-
y: currScale ? currScale.y * opB2.y : opB2.y
|
|
54865
|
-
},
|
|
54866
|
-
translate: {
|
|
54867
|
-
x: currTranslate ? currTranslate.x : 0,
|
|
54868
|
-
y: currTranslate ? currTranslate.y : 0
|
|
54869
|
-
}
|
|
54870
|
-
};
|
|
54871
|
-
case "translateBy":
|
|
54872
|
-
return {
|
|
54873
|
-
scale: {
|
|
54874
|
-
x: currScale ? currScale.x : 1,
|
|
54875
|
-
y: currScale ? currScale.y : 1
|
|
54876
|
-
},
|
|
54877
|
-
translate: {
|
|
54878
|
-
x: currTranslate ? currTranslate.x + opB2.x : opB2.x,
|
|
54879
|
-
y: currTranslate ? currTranslate.y + opB2.y : opB2.y
|
|
54880
|
-
}
|
|
54881
|
-
};
|
|
54882
|
-
}
|
|
54883
|
-
return;
|
|
54884
|
-
};
|
|
54885
|
-
const items = {};
|
|
54886
|
-
Object.keys(opB.items).forEach((itemId) => {
|
|
54887
|
-
if (opA.items[itemId] !== undefined) {
|
|
54888
|
-
if (opA.items[itemId].method === "applyMatrix" && opB.items[itemId].method === "applyMatrix") {
|
|
54889
|
-
const a2 = opA.items[itemId].matrix;
|
|
54890
|
-
const b = opB.items[itemId].matrix;
|
|
54891
|
-
items[itemId] = {
|
|
54892
|
-
class: "Transformation",
|
|
54893
|
-
method: "applyMatrix",
|
|
54894
|
-
item: [itemId],
|
|
54895
|
-
matrix: {
|
|
54896
|
-
translateX: a2.translateX + b.translateX,
|
|
54897
|
-
translateY: a2.translateY + b.translateY,
|
|
54898
|
-
scaleX: a2.scaleX * b.scaleX,
|
|
54899
|
-
scaleY: a2.scaleY * b.scaleY,
|
|
54900
|
-
shearX: 0,
|
|
54901
|
-
shearY: 0
|
|
54902
|
-
}
|
|
54903
|
-
};
|
|
54904
|
-
} else if (opA.items[itemId].method === "scaleByTranslateBy") {
|
|
54905
|
-
const newTransformation = resolve2(opA.items[itemId].scale, opA.items[itemId].translate, opB.items[itemId]);
|
|
54906
|
-
if (!newTransformation) {
|
|
54907
|
-
items[itemId] = opB.items[itemId];
|
|
54908
|
-
} else {
|
|
54909
|
-
items[itemId] = {
|
|
54910
|
-
class: "Transformation",
|
|
54911
|
-
method: "scaleByTranslateBy",
|
|
54912
|
-
item: [itemId],
|
|
54913
|
-
scale: newTransformation.scale,
|
|
54914
|
-
translate: newTransformation.translate
|
|
54915
|
-
};
|
|
54916
|
-
}
|
|
54917
|
-
} else if (opA.items[itemId].method === "scaleBy") {
|
|
54918
|
-
const newTransformation = resolve2({ x: opA.items[itemId].x, y: opA.items[itemId].y }, undefined, opB.items[itemId]);
|
|
54919
|
-
if (!newTransformation) {
|
|
54920
|
-
items[itemId] = opB.items[itemId];
|
|
54921
|
-
} else {
|
|
54922
|
-
items[itemId] = {
|
|
54923
|
-
class: "Transformation",
|
|
54924
|
-
method: "scaleByTranslateBy",
|
|
54925
|
-
item: [itemId],
|
|
54926
|
-
scale: newTransformation.scale,
|
|
54927
|
-
translate: newTransformation.translate
|
|
54928
|
-
};
|
|
54929
|
-
}
|
|
54930
|
-
} else if (opA.items[itemId].method === "translateBy") {
|
|
54931
|
-
const newTransformation = resolve2(undefined, { x: opA.items[itemId].x, y: opA.items[itemId].y }, opB.items[itemId]);
|
|
54932
|
-
if (!newTransformation) {
|
|
54933
|
-
items[itemId] = opB.items[itemId];
|
|
54934
|
-
} else {
|
|
54935
|
-
items[itemId] = {
|
|
54936
|
-
class: "Transformation",
|
|
54937
|
-
method: "scaleByTranslateBy",
|
|
54938
|
-
item: [itemId],
|
|
54939
|
-
scale: newTransformation.scale,
|
|
54940
|
-
translate: newTransformation.translate
|
|
54941
|
-
};
|
|
54942
|
-
}
|
|
54943
|
-
} else {
|
|
54944
|
-
items[itemId] = opB.items[itemId];
|
|
54945
|
-
}
|
|
54946
|
-
} else {
|
|
54947
|
-
items[itemId] = opB.items[itemId];
|
|
54948
|
-
}
|
|
54949
|
-
});
|
|
54950
|
-
return items;
|
|
54951
|
-
}
|
|
54952
|
-
return;
|
|
54953
|
-
}
|
|
54954
54745
|
function mergeRichTextOperations(opA, opB) {
|
|
54955
54746
|
if (!areItemsTheSame(opA, opB)) {
|
|
54956
54747
|
return;
|