microboard-temp 0.13.30 → 0.13.32
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 +55 -46
- package/dist/cjs/index.js +55 -46
- package/dist/cjs/node.js +55 -46
- package/dist/esm/browser.js +55 -46
- package/dist/esm/index.js +55 -46
- package/dist/esm/node.js +55 -46
- package/dist/types/Items/BaseItem/BaseItem.d.ts +1 -0
- package/dist/types/Items/RichText/RichTextOperations.d.ts +1 -1
- package/dist/types/Selection/Selection.d.ts +1 -0
- package/dist/types/SessionStorage.d.ts +2 -2
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -7268,11 +7268,11 @@ class SessionStorage {
|
|
|
7268
7268
|
getFontHighlight(itemType) {
|
|
7269
7269
|
return this.get(`fontHighlightColor_${itemType}`);
|
|
7270
7270
|
}
|
|
7271
|
-
|
|
7272
|
-
this.set(`
|
|
7271
|
+
setHorisontalAlignment(itemType, horisontalAlignment) {
|
|
7272
|
+
this.set(`fontHorisontalAlignment_${itemType}`, horisontalAlignment);
|
|
7273
7273
|
}
|
|
7274
|
-
|
|
7275
|
-
return this.get(`
|
|
7274
|
+
getHorisontalAlignment(itemType) {
|
|
7275
|
+
return this.get(`fontHorisontalAlignment_${itemType}`);
|
|
7276
7276
|
}
|
|
7277
7277
|
setVerticalAlignment(itemType, verticalAlignment) {
|
|
7278
7278
|
this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
|
|
@@ -17211,7 +17211,7 @@ class EditorContainer {
|
|
|
17211
17211
|
break;
|
|
17212
17212
|
case "setSelectionFontHighlight":
|
|
17213
17213
|
case "setSelectionFontStyle":
|
|
17214
|
-
case "
|
|
17214
|
+
case "setSelectionHorisontalAlignment":
|
|
17215
17215
|
this.applySelectionOp(op);
|
|
17216
17216
|
break;
|
|
17217
17217
|
case "setFontStyle":
|
|
@@ -21273,10 +21273,6 @@ class Items {
|
|
|
21273
21273
|
const unmodifiedSize = size;
|
|
21274
21274
|
size = 16;
|
|
21275
21275
|
const tolerated = this.index.getEnclosedOrCrossed(x - size, y - size, x + size, y + size);
|
|
21276
|
-
const groups = tolerated.filter((item) => item.itemType === "Group");
|
|
21277
|
-
if (groups.length > 0) {
|
|
21278
|
-
return groups;
|
|
21279
|
-
}
|
|
21280
21276
|
let enclosed = tolerated.some((item) => item instanceof Connector2) ? tolerated : this.index.getEnclosedOrCrossed(x, y, x, y);
|
|
21281
21277
|
const underPointer = this.getUnderPoint(new Point(x, y), size);
|
|
21282
21278
|
if (enclosed.length === 0) {
|
|
@@ -21816,6 +21812,20 @@ class BaseItem extends Mbr {
|
|
|
21816
21812
|
parentMatrix.apply(c);
|
|
21817
21813
|
return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
|
|
21818
21814
|
}
|
|
21815
|
+
hasAncestor(itemId) {
|
|
21816
|
+
let parentId = this.parent;
|
|
21817
|
+
while (parentId && parentId !== "Board") {
|
|
21818
|
+
if (parentId === itemId) {
|
|
21819
|
+
return true;
|
|
21820
|
+
}
|
|
21821
|
+
const parent = this.board.items.getById(parentId);
|
|
21822
|
+
if (!parent || parent.parent === parentId) {
|
|
21823
|
+
break;
|
|
21824
|
+
}
|
|
21825
|
+
parentId = parent.parent;
|
|
21826
|
+
}
|
|
21827
|
+
return false;
|
|
21828
|
+
}
|
|
21819
21829
|
applyAddChildren(childIds) {
|
|
21820
21830
|
if (!this.index) {
|
|
21821
21831
|
return;
|
|
@@ -21823,7 +21833,7 @@ class BaseItem extends Mbr {
|
|
|
21823
21833
|
const containerNestingMatrix = this.getNestingMatrix();
|
|
21824
21834
|
childIds.forEach((childId) => {
|
|
21825
21835
|
const foundItem = this.board.items.getById(childId);
|
|
21826
|
-
if (this.parent !== childId && this.getId() !== childId) {
|
|
21836
|
+
if (this.parent !== childId && this.getId() !== childId && !this.hasAncestor(childId)) {
|
|
21827
21837
|
if (!this.index?.getById(childId) && foundItem) {
|
|
21828
21838
|
const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
|
|
21829
21839
|
this.board.items.index.remove(foundItem);
|
|
@@ -22288,7 +22298,7 @@ class RichText extends BaseItem {
|
|
|
22288
22298
|
return this.editor.maxWidth || this.container.getWidth();
|
|
22289
22299
|
}
|
|
22290
22300
|
if (this.isContainerSet) {
|
|
22291
|
-
return this.
|
|
22301
|
+
return this.getTransformedContainer().getWidth();
|
|
22292
22302
|
} else {
|
|
22293
22303
|
return this.containerMaxWidth || this.editor.maxWidth;
|
|
22294
22304
|
}
|
|
@@ -22318,12 +22328,14 @@ class RichText extends BaseItem {
|
|
|
22318
22328
|
top = container.top;
|
|
22319
22329
|
}
|
|
22320
22330
|
const point3 = new Point(left, top);
|
|
22321
|
-
this.
|
|
22331
|
+
if (!this.isInShape || this.autoSize) {
|
|
22332
|
+
this.getParentWorldMatrix().apply(point3);
|
|
22333
|
+
}
|
|
22322
22334
|
return {
|
|
22323
22335
|
point: point3,
|
|
22324
22336
|
width,
|
|
22325
22337
|
height,
|
|
22326
|
-
maxWidth: maxWidth ? maxWidth
|
|
22338
|
+
maxWidth: maxWidth ? maxWidth : undefined,
|
|
22327
22339
|
maxHeight,
|
|
22328
22340
|
textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
|
|
22329
22341
|
};
|
|
@@ -40011,6 +40023,7 @@ class Shape extends BaseItem {
|
|
|
40011
40023
|
this.text.deserialize(data.text);
|
|
40012
40024
|
}
|
|
40013
40025
|
this.transformPath();
|
|
40026
|
+
this.text.updateElement();
|
|
40014
40027
|
this.subject.publish(this);
|
|
40015
40028
|
return this;
|
|
40016
40029
|
}
|
|
@@ -40303,16 +40316,10 @@ class Shape extends BaseItem {
|
|
|
40303
40316
|
div.setAttribute("stroke-width", this.borderWidth.toString());
|
|
40304
40317
|
const textElement = this.text.renderHTML(documentFactory);
|
|
40305
40318
|
textElement.id = `${this.getId()}_text`;
|
|
40306
|
-
textElement.style.maxWidth = `${width}px`;
|
|
40307
40319
|
textElement.style.overflow = "auto";
|
|
40308
40320
|
positionRelatively(textElement, div);
|
|
40309
40321
|
resetElementScale(textElement);
|
|
40310
40322
|
scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
|
|
40311
|
-
const [dx, dy] = [
|
|
40312
|
-
(width - parseInt(textElement.style.width)) / scaleX / 2 - 1,
|
|
40313
|
-
(height - parseInt(textElement.style.height)) / scaleY / 2 - 1
|
|
40314
|
-
];
|
|
40315
|
-
translateElementBy(textElement, dx, dy);
|
|
40316
40323
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
40317
40324
|
if (this.getLinkTo()) {
|
|
40318
40325
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -43514,6 +43521,7 @@ class Group extends BaseItem {
|
|
|
43514
43521
|
constructor(board, events, children = [], id = "") {
|
|
43515
43522
|
super(board, id, undefined, true);
|
|
43516
43523
|
this.events = events;
|
|
43524
|
+
this.canBeNested = true;
|
|
43517
43525
|
this.linkTo = new LinkTo(this.id, this.events);
|
|
43518
43526
|
this.transformation = new Transformation(this.id, this.events);
|
|
43519
43527
|
this.transformation.subject.subscribe(() => {
|
|
@@ -46942,7 +46950,8 @@ class Select extends Tool {
|
|
|
46942
46950
|
this.beginTimeStamp = Date.now();
|
|
46943
46951
|
const selectionMbr = selection.getMbr();
|
|
46944
46952
|
const selectionItems = selection.list();
|
|
46945
|
-
|
|
46953
|
+
const selectableHover = hover.map((item) => this.board.selection.getSelectableItem(item));
|
|
46954
|
+
this.isDownOnSelection = selectionMbr !== undefined && selectionMbr.isUnderPoint(pointer.point) && selectableHover.every((hovered) => hovered && selectionItems.some((selected) => selected.getId() === hovered.getId()));
|
|
46946
46955
|
this.isDraggingSelection = this.isDownOnSelection;
|
|
46947
46956
|
if (this.isDraggingSelection) {
|
|
46948
46957
|
this.board.selection.transformationRenderBlock = true;
|
|
@@ -47268,7 +47277,7 @@ class Select extends Tool {
|
|
|
47268
47277
|
const hovered = this.board.items.getUnderPointer();
|
|
47269
47278
|
this.board.pointer.subject.publish(this.board.pointer);
|
|
47270
47279
|
if (isCtrl || isShift) {
|
|
47271
|
-
const underPointer = hovered[0];
|
|
47280
|
+
const underPointer = this.board.selection.getSelectableItem(hovered[0]);
|
|
47272
47281
|
const isEmptySelection = this.board.selection.items.list().length === 0;
|
|
47273
47282
|
if (!underPointer && !isEmptySelection && isShift) {
|
|
47274
47283
|
this.board.selection.add(this.board.selection.items.list());
|
|
@@ -47284,14 +47293,6 @@ class Select extends Tool {
|
|
|
47284
47293
|
const isNotInSelection = this.board.selection.items.findById(underPointer.getId()) === null;
|
|
47285
47294
|
if (isNotInSelection) {
|
|
47286
47295
|
this.board.selection.add(underPointer);
|
|
47287
|
-
if ("index" in underPointer && underPointer.index) {
|
|
47288
|
-
const { left, right, top, bottom } = underPointer.getMbr();
|
|
47289
|
-
const childrenIds = underPointer.getChildrenIds();
|
|
47290
|
-
console.log("UNDERPOINTER", underPointer);
|
|
47291
|
-
console.log("CHILDREN", childrenIds);
|
|
47292
|
-
const itemsInFrame = this.board.items.getEnclosedOrCrossed(left, top, right, bottom).filter((item) => childrenIds && childrenIds.includes(item.getId()));
|
|
47293
|
-
this.board.selection.add(itemsInFrame);
|
|
47294
|
-
}
|
|
47295
47296
|
this.board.selection.setContext("EditUnderPointer");
|
|
47296
47297
|
} else {
|
|
47297
47298
|
this.board.selection.remove(underPointer);
|
|
@@ -47308,10 +47309,6 @@ class Select extends Tool {
|
|
|
47308
47309
|
} else {
|
|
47309
47310
|
this.board.selection.editUnderPointer();
|
|
47310
47311
|
}
|
|
47311
|
-
if (topItem2 instanceof Group) {
|
|
47312
|
-
const groupChildren = topItem2.getChildren();
|
|
47313
|
-
this.board.selection.add(groupChildren);
|
|
47314
|
-
}
|
|
47315
47312
|
this.board.tools.publish();
|
|
47316
47313
|
this.clear();
|
|
47317
47314
|
return false;
|
|
@@ -53347,10 +53344,23 @@ class BoardSelection {
|
|
|
53347
53344
|
getMbr() {
|
|
53348
53345
|
return this.items.getMbr();
|
|
53349
53346
|
}
|
|
53347
|
+
getSelectableItem(item) {
|
|
53348
|
+
if (!item) {
|
|
53349
|
+
return null;
|
|
53350
|
+
}
|
|
53351
|
+
if (!(item instanceof BaseItem) || item.parent === "Board") {
|
|
53352
|
+
return item;
|
|
53353
|
+
}
|
|
53354
|
+
const parent = this.board.items.getById(item.parent);
|
|
53355
|
+
if (parent instanceof Group) {
|
|
53356
|
+
return parent;
|
|
53357
|
+
}
|
|
53358
|
+
return item;
|
|
53359
|
+
}
|
|
53350
53360
|
selectUnderPointer() {
|
|
53351
53361
|
this.removeAll();
|
|
53352
53362
|
const stack = this.board.items.getUnderPointer();
|
|
53353
|
-
const top = stack.pop();
|
|
53363
|
+
const top = this.getSelectableItem(stack.pop());
|
|
53354
53364
|
if (top) {
|
|
53355
53365
|
this.add(top);
|
|
53356
53366
|
this.setTextToEdit(undefined);
|
|
@@ -53404,7 +53414,7 @@ class BoardSelection {
|
|
|
53404
53414
|
editUnderPointer() {
|
|
53405
53415
|
this.removeAll();
|
|
53406
53416
|
const stack = this.board.items.getUnderPointer();
|
|
53407
|
-
const item = stack.pop();
|
|
53417
|
+
const item = this.getSelectableItem(stack.pop());
|
|
53408
53418
|
if (item) {
|
|
53409
53419
|
this.add(item);
|
|
53410
53420
|
this.setTextToEdit(undefined);
|
|
@@ -53438,7 +53448,7 @@ class BoardSelection {
|
|
|
53438
53448
|
const textSize = tempStorage.getFontSize(item.itemType);
|
|
53439
53449
|
const highlightColor = tempStorage.getFontHighlight(item.itemType);
|
|
53440
53450
|
const styles = tempStorage.getFontStyles(item.itemType);
|
|
53441
|
-
const
|
|
53451
|
+
const horisontalAlignment = tempStorage.getHorisontalAlignment(item.itemType);
|
|
53442
53452
|
const verticalAlignment = tempStorage.getVerticalAlignment(item.itemType);
|
|
53443
53453
|
if (textColor) {
|
|
53444
53454
|
text5.setSelectionFontColor(textColor, "None");
|
|
@@ -53459,8 +53469,8 @@ class BoardSelection {
|
|
|
53459
53469
|
const stylesArr = styles;
|
|
53460
53470
|
text5.setSelectionFontStyle(stylesArr, "None");
|
|
53461
53471
|
}
|
|
53462
|
-
if (
|
|
53463
|
-
text5.setSelectionHorisontalAlignment(
|
|
53472
|
+
if (horisontalAlignment && !(item instanceof Sticker)) {
|
|
53473
|
+
text5.setSelectionHorisontalAlignment(horisontalAlignment);
|
|
53464
53474
|
}
|
|
53465
53475
|
if (verticalAlignment && !(item instanceof Sticker)) {
|
|
53466
53476
|
this.setVerticalAlignment(verticalAlignment);
|
|
@@ -53473,7 +53483,7 @@ class BoardSelection {
|
|
|
53473
53483
|
editTextUnderPointer() {
|
|
53474
53484
|
this.removeAll();
|
|
53475
53485
|
const stack = this.board.items.getUnderPointer();
|
|
53476
|
-
const top = stack.pop();
|
|
53486
|
+
const top = this.getSelectableItem(stack.pop());
|
|
53477
53487
|
if (top) {
|
|
53478
53488
|
this.add(top);
|
|
53479
53489
|
this.setContext("EditTextUnderPointer");
|
|
@@ -54083,7 +54093,7 @@ class BoardSelection {
|
|
|
54083
54093
|
selection: text5.editor.getSelection(),
|
|
54084
54094
|
ops
|
|
54085
54095
|
});
|
|
54086
|
-
tempStorage.
|
|
54096
|
+
tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
|
|
54087
54097
|
}
|
|
54088
54098
|
this.emitApplied({
|
|
54089
54099
|
class: "RichText",
|
|
@@ -55020,9 +55030,10 @@ class Board {
|
|
|
55020
55030
|
if (!item || !(item instanceof Group)) {
|
|
55021
55031
|
return;
|
|
55022
55032
|
}
|
|
55023
|
-
item.getChildren()
|
|
55024
|
-
|
|
55025
|
-
|
|
55033
|
+
const children = [...item.getChildren()];
|
|
55034
|
+
item.applyRemoveChildren(children.map((child) => child.getId()));
|
|
55035
|
+
children.forEach((child) => {
|
|
55036
|
+
child.transformation.isLocked = false;
|
|
55026
55037
|
});
|
|
55027
55038
|
item.transformation.isLocked = false;
|
|
55028
55039
|
const removedItems = [];
|
|
@@ -55037,9 +55048,7 @@ class Board {
|
|
|
55037
55048
|
if (!item || !(item instanceof Group)) {
|
|
55038
55049
|
return;
|
|
55039
55050
|
}
|
|
55040
|
-
item.
|
|
55041
|
-
item2.parent = "Board";
|
|
55042
|
-
});
|
|
55051
|
+
item.applyRemoveChildren(item.getChildrenIds());
|
|
55043
55052
|
const removedItems = [];
|
|
55044
55053
|
this.findItemAndApply(op.item, (item2) => {
|
|
55045
55054
|
this.index.remove(item2);
|
package/dist/esm/node.js
CHANGED
|
@@ -8052,11 +8052,11 @@ class SessionStorage {
|
|
|
8052
8052
|
getFontHighlight(itemType) {
|
|
8053
8053
|
return this.get(`fontHighlightColor_${itemType}`);
|
|
8054
8054
|
}
|
|
8055
|
-
|
|
8056
|
-
this.set(`
|
|
8055
|
+
setHorisontalAlignment(itemType, horisontalAlignment) {
|
|
8056
|
+
this.set(`fontHorisontalAlignment_${itemType}`, horisontalAlignment);
|
|
8057
8057
|
}
|
|
8058
|
-
|
|
8059
|
-
return this.get(`
|
|
8058
|
+
getHorisontalAlignment(itemType) {
|
|
8059
|
+
return this.get(`fontHorisontalAlignment_${itemType}`);
|
|
8060
8060
|
}
|
|
8061
8061
|
setVerticalAlignment(itemType, verticalAlignment) {
|
|
8062
8062
|
this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
|
|
@@ -19746,7 +19746,7 @@ class EditorContainer {
|
|
|
19746
19746
|
break;
|
|
19747
19747
|
case "setSelectionFontHighlight":
|
|
19748
19748
|
case "setSelectionFontStyle":
|
|
19749
|
-
case "
|
|
19749
|
+
case "setSelectionHorisontalAlignment":
|
|
19750
19750
|
this.applySelectionOp(op);
|
|
19751
19751
|
break;
|
|
19752
19752
|
case "setFontStyle":
|
|
@@ -23740,10 +23740,6 @@ class Items {
|
|
|
23740
23740
|
const unmodifiedSize = size;
|
|
23741
23741
|
size = 16;
|
|
23742
23742
|
const tolerated = this.index.getEnclosedOrCrossed(x - size, y - size, x + size, y + size);
|
|
23743
|
-
const groups = tolerated.filter((item) => item.itemType === "Group");
|
|
23744
|
-
if (groups.length > 0) {
|
|
23745
|
-
return groups;
|
|
23746
|
-
}
|
|
23747
23743
|
let enclosed = tolerated.some((item) => item instanceof Connector2) ? tolerated : this.index.getEnclosedOrCrossed(x, y, x, y);
|
|
23748
23744
|
const underPointer = this.getUnderPoint(new Point(x, y), size);
|
|
23749
23745
|
if (enclosed.length === 0) {
|
|
@@ -24283,6 +24279,20 @@ class BaseItem extends Mbr {
|
|
|
24283
24279
|
parentMatrix.apply(c);
|
|
24284
24280
|
return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
|
|
24285
24281
|
}
|
|
24282
|
+
hasAncestor(itemId) {
|
|
24283
|
+
let parentId = this.parent;
|
|
24284
|
+
while (parentId && parentId !== "Board") {
|
|
24285
|
+
if (parentId === itemId) {
|
|
24286
|
+
return true;
|
|
24287
|
+
}
|
|
24288
|
+
const parent = this.board.items.getById(parentId);
|
|
24289
|
+
if (!parent || parent.parent === parentId) {
|
|
24290
|
+
break;
|
|
24291
|
+
}
|
|
24292
|
+
parentId = parent.parent;
|
|
24293
|
+
}
|
|
24294
|
+
return false;
|
|
24295
|
+
}
|
|
24286
24296
|
applyAddChildren(childIds) {
|
|
24287
24297
|
if (!this.index) {
|
|
24288
24298
|
return;
|
|
@@ -24290,7 +24300,7 @@ class BaseItem extends Mbr {
|
|
|
24290
24300
|
const containerNestingMatrix = this.getNestingMatrix();
|
|
24291
24301
|
childIds.forEach((childId) => {
|
|
24292
24302
|
const foundItem = this.board.items.getById(childId);
|
|
24293
|
-
if (this.parent !== childId && this.getId() !== childId) {
|
|
24303
|
+
if (this.parent !== childId && this.getId() !== childId && !this.hasAncestor(childId)) {
|
|
24294
24304
|
if (!this.index?.getById(childId) && foundItem) {
|
|
24295
24305
|
const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
|
|
24296
24306
|
this.board.items.index.remove(foundItem);
|
|
@@ -24755,7 +24765,7 @@ class RichText extends BaseItem {
|
|
|
24755
24765
|
return this.editor.maxWidth || this.container.getWidth();
|
|
24756
24766
|
}
|
|
24757
24767
|
if (this.isContainerSet) {
|
|
24758
|
-
return this.
|
|
24768
|
+
return this.getTransformedContainer().getWidth();
|
|
24759
24769
|
} else {
|
|
24760
24770
|
return this.containerMaxWidth || this.editor.maxWidth;
|
|
24761
24771
|
}
|
|
@@ -24785,12 +24795,14 @@ class RichText extends BaseItem {
|
|
|
24785
24795
|
top = container.top;
|
|
24786
24796
|
}
|
|
24787
24797
|
const point3 = new Point(left, top);
|
|
24788
|
-
this.
|
|
24798
|
+
if (!this.isInShape || this.autoSize) {
|
|
24799
|
+
this.getParentWorldMatrix().apply(point3);
|
|
24800
|
+
}
|
|
24789
24801
|
return {
|
|
24790
24802
|
point: point3,
|
|
24791
24803
|
width,
|
|
24792
24804
|
height,
|
|
24793
|
-
maxWidth: maxWidth ? maxWidth
|
|
24805
|
+
maxWidth: maxWidth ? maxWidth : undefined,
|
|
24794
24806
|
maxHeight,
|
|
24795
24807
|
textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
|
|
24796
24808
|
};
|
|
@@ -42479,6 +42491,7 @@ class Shape extends BaseItem {
|
|
|
42479
42491
|
this.text.deserialize(data.text);
|
|
42480
42492
|
}
|
|
42481
42493
|
this.transformPath();
|
|
42494
|
+
this.text.updateElement();
|
|
42482
42495
|
this.subject.publish(this);
|
|
42483
42496
|
return this;
|
|
42484
42497
|
}
|
|
@@ -42771,16 +42784,10 @@ class Shape extends BaseItem {
|
|
|
42771
42784
|
div.setAttribute("stroke-width", this.borderWidth.toString());
|
|
42772
42785
|
const textElement = this.text.renderHTML(documentFactory);
|
|
42773
42786
|
textElement.id = `${this.getId()}_text`;
|
|
42774
|
-
textElement.style.maxWidth = `${width}px`;
|
|
42775
42787
|
textElement.style.overflow = "auto";
|
|
42776
42788
|
positionRelatively(textElement, div);
|
|
42777
42789
|
resetElementScale(textElement);
|
|
42778
42790
|
scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
|
|
42779
|
-
const [dx, dy] = [
|
|
42780
|
-
(width - parseInt(textElement.style.width)) / scaleX / 2 - 1,
|
|
42781
|
-
(height - parseInt(textElement.style.height)) / scaleY / 2 - 1
|
|
42782
|
-
];
|
|
42783
|
-
translateElementBy(textElement, dx, dy);
|
|
42784
42791
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
42785
42792
|
if (this.getLinkTo()) {
|
|
42786
42793
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -45982,6 +45989,7 @@ class Group extends BaseItem {
|
|
|
45982
45989
|
constructor(board, events, children = [], id = "") {
|
|
45983
45990
|
super(board, id, undefined, true);
|
|
45984
45991
|
this.events = events;
|
|
45992
|
+
this.canBeNested = true;
|
|
45985
45993
|
this.linkTo = new LinkTo(this.id, this.events);
|
|
45986
45994
|
this.transformation = new Transformation(this.id, this.events);
|
|
45987
45995
|
this.transformation.subject.subscribe(() => {
|
|
@@ -49410,7 +49418,8 @@ class Select extends Tool {
|
|
|
49410
49418
|
this.beginTimeStamp = Date.now();
|
|
49411
49419
|
const selectionMbr = selection.getMbr();
|
|
49412
49420
|
const selectionItems = selection.list();
|
|
49413
|
-
|
|
49421
|
+
const selectableHover = hover.map((item) => this.board.selection.getSelectableItem(item));
|
|
49422
|
+
this.isDownOnSelection = selectionMbr !== undefined && selectionMbr.isUnderPoint(pointer.point) && selectableHover.every((hovered) => hovered && selectionItems.some((selected) => selected.getId() === hovered.getId()));
|
|
49414
49423
|
this.isDraggingSelection = this.isDownOnSelection;
|
|
49415
49424
|
if (this.isDraggingSelection) {
|
|
49416
49425
|
this.board.selection.transformationRenderBlock = true;
|
|
@@ -49736,7 +49745,7 @@ class Select extends Tool {
|
|
|
49736
49745
|
const hovered = this.board.items.getUnderPointer();
|
|
49737
49746
|
this.board.pointer.subject.publish(this.board.pointer);
|
|
49738
49747
|
if (isCtrl || isShift) {
|
|
49739
|
-
const underPointer = hovered[0];
|
|
49748
|
+
const underPointer = this.board.selection.getSelectableItem(hovered[0]);
|
|
49740
49749
|
const isEmptySelection = this.board.selection.items.list().length === 0;
|
|
49741
49750
|
if (!underPointer && !isEmptySelection && isShift) {
|
|
49742
49751
|
this.board.selection.add(this.board.selection.items.list());
|
|
@@ -49752,14 +49761,6 @@ class Select extends Tool {
|
|
|
49752
49761
|
const isNotInSelection = this.board.selection.items.findById(underPointer.getId()) === null;
|
|
49753
49762
|
if (isNotInSelection) {
|
|
49754
49763
|
this.board.selection.add(underPointer);
|
|
49755
|
-
if ("index" in underPointer && underPointer.index) {
|
|
49756
|
-
const { left, right, top, bottom } = underPointer.getMbr();
|
|
49757
|
-
const childrenIds = underPointer.getChildrenIds();
|
|
49758
|
-
console.log("UNDERPOINTER", underPointer);
|
|
49759
|
-
console.log("CHILDREN", childrenIds);
|
|
49760
|
-
const itemsInFrame = this.board.items.getEnclosedOrCrossed(left, top, right, bottom).filter((item) => childrenIds && childrenIds.includes(item.getId()));
|
|
49761
|
-
this.board.selection.add(itemsInFrame);
|
|
49762
|
-
}
|
|
49763
49764
|
this.board.selection.setContext("EditUnderPointer");
|
|
49764
49765
|
} else {
|
|
49765
49766
|
this.board.selection.remove(underPointer);
|
|
@@ -49776,10 +49777,6 @@ class Select extends Tool {
|
|
|
49776
49777
|
} else {
|
|
49777
49778
|
this.board.selection.editUnderPointer();
|
|
49778
49779
|
}
|
|
49779
|
-
if (topItem2 instanceof Group) {
|
|
49780
|
-
const groupChildren = topItem2.getChildren();
|
|
49781
|
-
this.board.selection.add(groupChildren);
|
|
49782
|
-
}
|
|
49783
49780
|
this.board.tools.publish();
|
|
49784
49781
|
this.clear();
|
|
49785
49782
|
return false;
|
|
@@ -55815,10 +55812,23 @@ class BoardSelection {
|
|
|
55815
55812
|
getMbr() {
|
|
55816
55813
|
return this.items.getMbr();
|
|
55817
55814
|
}
|
|
55815
|
+
getSelectableItem(item) {
|
|
55816
|
+
if (!item) {
|
|
55817
|
+
return null;
|
|
55818
|
+
}
|
|
55819
|
+
if (!(item instanceof BaseItem) || item.parent === "Board") {
|
|
55820
|
+
return item;
|
|
55821
|
+
}
|
|
55822
|
+
const parent = this.board.items.getById(item.parent);
|
|
55823
|
+
if (parent instanceof Group) {
|
|
55824
|
+
return parent;
|
|
55825
|
+
}
|
|
55826
|
+
return item;
|
|
55827
|
+
}
|
|
55818
55828
|
selectUnderPointer() {
|
|
55819
55829
|
this.removeAll();
|
|
55820
55830
|
const stack = this.board.items.getUnderPointer();
|
|
55821
|
-
const top = stack.pop();
|
|
55831
|
+
const top = this.getSelectableItem(stack.pop());
|
|
55822
55832
|
if (top) {
|
|
55823
55833
|
this.add(top);
|
|
55824
55834
|
this.setTextToEdit(undefined);
|
|
@@ -55872,7 +55882,7 @@ class BoardSelection {
|
|
|
55872
55882
|
editUnderPointer() {
|
|
55873
55883
|
this.removeAll();
|
|
55874
55884
|
const stack = this.board.items.getUnderPointer();
|
|
55875
|
-
const item = stack.pop();
|
|
55885
|
+
const item = this.getSelectableItem(stack.pop());
|
|
55876
55886
|
if (item) {
|
|
55877
55887
|
this.add(item);
|
|
55878
55888
|
this.setTextToEdit(undefined);
|
|
@@ -55906,7 +55916,7 @@ class BoardSelection {
|
|
|
55906
55916
|
const textSize = tempStorage.getFontSize(item.itemType);
|
|
55907
55917
|
const highlightColor = tempStorage.getFontHighlight(item.itemType);
|
|
55908
55918
|
const styles = tempStorage.getFontStyles(item.itemType);
|
|
55909
|
-
const
|
|
55919
|
+
const horisontalAlignment = tempStorage.getHorisontalAlignment(item.itemType);
|
|
55910
55920
|
const verticalAlignment = tempStorage.getVerticalAlignment(item.itemType);
|
|
55911
55921
|
if (textColor) {
|
|
55912
55922
|
text5.setSelectionFontColor(textColor, "None");
|
|
@@ -55927,8 +55937,8 @@ class BoardSelection {
|
|
|
55927
55937
|
const stylesArr = styles;
|
|
55928
55938
|
text5.setSelectionFontStyle(stylesArr, "None");
|
|
55929
55939
|
}
|
|
55930
|
-
if (
|
|
55931
|
-
text5.setSelectionHorisontalAlignment(
|
|
55940
|
+
if (horisontalAlignment && !(item instanceof Sticker)) {
|
|
55941
|
+
text5.setSelectionHorisontalAlignment(horisontalAlignment);
|
|
55932
55942
|
}
|
|
55933
55943
|
if (verticalAlignment && !(item instanceof Sticker)) {
|
|
55934
55944
|
this.setVerticalAlignment(verticalAlignment);
|
|
@@ -55941,7 +55951,7 @@ class BoardSelection {
|
|
|
55941
55951
|
editTextUnderPointer() {
|
|
55942
55952
|
this.removeAll();
|
|
55943
55953
|
const stack = this.board.items.getUnderPointer();
|
|
55944
|
-
const top = stack.pop();
|
|
55954
|
+
const top = this.getSelectableItem(stack.pop());
|
|
55945
55955
|
if (top) {
|
|
55946
55956
|
this.add(top);
|
|
55947
55957
|
this.setContext("EditTextUnderPointer");
|
|
@@ -56551,7 +56561,7 @@ class BoardSelection {
|
|
|
56551
56561
|
selection: text5.editor.getSelection(),
|
|
56552
56562
|
ops
|
|
56553
56563
|
});
|
|
56554
|
-
tempStorage.
|
|
56564
|
+
tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
|
|
56555
56565
|
}
|
|
56556
56566
|
this.emitApplied({
|
|
56557
56567
|
class: "RichText",
|
|
@@ -57488,9 +57498,10 @@ class Board {
|
|
|
57488
57498
|
if (!item || !(item instanceof Group)) {
|
|
57489
57499
|
return;
|
|
57490
57500
|
}
|
|
57491
|
-
item.getChildren()
|
|
57492
|
-
|
|
57493
|
-
|
|
57501
|
+
const children = [...item.getChildren()];
|
|
57502
|
+
item.applyRemoveChildren(children.map((child) => child.getId()));
|
|
57503
|
+
children.forEach((child) => {
|
|
57504
|
+
child.transformation.isLocked = false;
|
|
57494
57505
|
});
|
|
57495
57506
|
item.transformation.isLocked = false;
|
|
57496
57507
|
const removedItems = [];
|
|
@@ -57505,9 +57516,7 @@ class Board {
|
|
|
57505
57516
|
if (!item || !(item instanceof Group)) {
|
|
57506
57517
|
return;
|
|
57507
57518
|
}
|
|
57508
|
-
item.
|
|
57509
|
-
item2.parent = "Board";
|
|
57510
|
-
});
|
|
57519
|
+
item.applyRemoveChildren(item.getChildrenIds());
|
|
57511
57520
|
const removedItems = [];
|
|
57512
57521
|
this.findItemAndApply(op.item, (item2) => {
|
|
57513
57522
|
this.index.remove(item2);
|
|
@@ -88,6 +88,7 @@ export declare class BaseItem extends Mbr implements Geometry {
|
|
|
88
88
|
* through the world matrix to produce the correct world-space bounds.
|
|
89
89
|
*/
|
|
90
90
|
getWorldMbr(): Mbr;
|
|
91
|
+
private hasAncestor;
|
|
91
92
|
applyAddChildren(childIds: string[]): void;
|
|
92
93
|
applyRemoveChildren(childIds: string[]): void;
|
|
93
94
|
updateMbr(): void;
|
|
@@ -39,7 +39,7 @@ interface SetMaxWidth extends RichTextBaseOp {
|
|
|
39
39
|
method: 'setMaxWidth';
|
|
40
40
|
maxWidth: number | undefined;
|
|
41
41
|
}
|
|
42
|
-
export type SelectionMethod = '
|
|
42
|
+
export type SelectionMethod = 'setSelectionHorisontalAlignment' | 'setSelectionFontHighlight' | 'setSelectionFontSize' | 'setSelectionFontFamily' | 'setSelectionFontStyle' | 'setSelectionFontColor' | 'setSelectionBlockType' | 'edit';
|
|
43
43
|
export interface SelectionOp extends RichTextBaseOp {
|
|
44
44
|
method: SelectionMethod;
|
|
45
45
|
selection: BaseSelection;
|
|
@@ -66,6 +66,7 @@ export declare class BoardSelection {
|
|
|
66
66
|
disable(): void;
|
|
67
67
|
setContext(context: SelectionContext): void;
|
|
68
68
|
getMbr(): Mbr | undefined;
|
|
69
|
+
getSelectableItem(item: Item | null | undefined): Item | null;
|
|
69
70
|
selectUnderPointer(): void;
|
|
70
71
|
editSelected(): void;
|
|
71
72
|
editText(shouldReplace?: string, moveCursorToEnd?: boolean, shouldSelect?: boolean): void;
|
|
@@ -44,8 +44,8 @@ export declare class SessionStorage {
|
|
|
44
44
|
getFontColor(itemType: string): string | undefined;
|
|
45
45
|
setFontHighlight(itemType: string, highlightColor: string): void;
|
|
46
46
|
getFontHighlight(itemType: string): string | undefined;
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
setHorisontalAlignment(itemType: string, horisontalAlignment: 'left' | 'center' | 'right'): void;
|
|
48
|
+
getHorisontalAlignment(itemType: string): 'left' | 'center' | 'right' | undefined;
|
|
49
49
|
setVerticalAlignment(itemType: string, verticalAlignment: 'top' | 'center' | 'bottom'): void;
|
|
50
50
|
getVerticalAlignment(itemType: string): 'top' | 'center' | 'bottom' | undefined;
|
|
51
51
|
setLastAIRequest(request: string): void;
|