microboard-temp 0.5.33 → 0.5.35
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 +20 -12
- package/dist/cjs/index.js +20 -12
- package/dist/cjs/node.js +20 -12
- package/dist/esm/browser.js +20 -12
- package/dist/esm/index.js +20 -12
- package/dist/esm/node.js +20 -12
- package/package.json +1 -1
package/dist/cjs/browser.js
CHANGED
|
@@ -9049,11 +9049,11 @@ var decodeHtml = (htmlString) => {
|
|
|
9049
9049
|
};
|
|
9050
9050
|
function getTransformationData(el) {
|
|
9051
9051
|
const transformStyle = el.style.transform;
|
|
9052
|
-
const transformMatch = transformStyle.match(/
|
|
9052
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
9053
9053
|
if (transformMatch) {
|
|
9054
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
9054
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
9055
9055
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
9056
|
-
return { ...matrix, rotate, isLocked: false };
|
|
9056
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
9057
9057
|
}
|
|
9058
9058
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
9059
9059
|
}
|
|
@@ -42259,7 +42259,7 @@ class ImageItem extends BaseItem {
|
|
|
42259
42259
|
renderHTML(documentFactory) {
|
|
42260
42260
|
const div = documentFactory.createElement("image-item");
|
|
42261
42261
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
42262
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
42262
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
42263
42263
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
42264
42264
|
div.id = this.getId();
|
|
42265
42265
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -42268,6 +42268,7 @@ class ImageItem extends BaseItem {
|
|
|
42268
42268
|
div.style.transform = transform;
|
|
42269
42269
|
div.style.position = "absolute";
|
|
42270
42270
|
div.style.backgroundSize = "cover";
|
|
42271
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
42271
42272
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
42272
42273
|
if (this.getLinkTo()) {
|
|
42273
42274
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -47937,7 +47938,7 @@ class Card extends BaseItem {
|
|
|
47937
47938
|
renderHTML(documentFactory) {
|
|
47938
47939
|
const div = super.renderHTML(documentFactory);
|
|
47939
47940
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
47940
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
47941
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
47941
47942
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
47942
47943
|
div.id = this.getId();
|
|
47943
47944
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -47946,6 +47947,7 @@ class Card extends BaseItem {
|
|
|
47946
47947
|
div.style.transform = transform;
|
|
47947
47948
|
div.style.position = "absolute";
|
|
47948
47949
|
div.style.backgroundSize = "cover";
|
|
47950
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
47949
47951
|
return div;
|
|
47950
47952
|
}
|
|
47951
47953
|
updateMbr() {
|
|
@@ -51252,13 +51254,19 @@ class ConnectorTransformer extends Tool {
|
|
|
51252
51254
|
this.snap.connector = connector;
|
|
51253
51255
|
this.snap.pointerMove();
|
|
51254
51256
|
const point5 = this.snap.getControlPoint();
|
|
51255
|
-
|
|
51256
|
-
start:
|
|
51257
|
-
|
|
51258
|
-
|
|
51259
|
-
|
|
51260
|
-
|
|
51261
|
-
|
|
51257
|
+
switch (this.statePointer) {
|
|
51258
|
+
case "start":
|
|
51259
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
51260
|
+
this.selection.subject.publish(this.selection);
|
|
51261
|
+
break;
|
|
51262
|
+
case "end":
|
|
51263
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
51264
|
+
this.selection.subject.publish(this.selection);
|
|
51265
|
+
break;
|
|
51266
|
+
case "middle":
|
|
51267
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
51268
|
+
break;
|
|
51269
|
+
}
|
|
51262
51270
|
this.selection.subject.publish(this.selection);
|
|
51263
51271
|
}
|
|
51264
51272
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -9049,11 +9049,11 @@ var decodeHtml = (htmlString) => {
|
|
|
9049
9049
|
};
|
|
9050
9050
|
function getTransformationData(el) {
|
|
9051
9051
|
const transformStyle = el.style.transform;
|
|
9052
|
-
const transformMatch = transformStyle.match(/
|
|
9052
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
9053
9053
|
if (transformMatch) {
|
|
9054
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
9054
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
9055
9055
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
9056
|
-
return { ...matrix, rotate, isLocked: false };
|
|
9056
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
9057
9057
|
}
|
|
9058
9058
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
9059
9059
|
}
|
|
@@ -42259,7 +42259,7 @@ class ImageItem extends BaseItem {
|
|
|
42259
42259
|
renderHTML(documentFactory) {
|
|
42260
42260
|
const div = documentFactory.createElement("image-item");
|
|
42261
42261
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
42262
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
42262
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
42263
42263
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
42264
42264
|
div.id = this.getId();
|
|
42265
42265
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -42268,6 +42268,7 @@ class ImageItem extends BaseItem {
|
|
|
42268
42268
|
div.style.transform = transform;
|
|
42269
42269
|
div.style.position = "absolute";
|
|
42270
42270
|
div.style.backgroundSize = "cover";
|
|
42271
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
42271
42272
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
42272
42273
|
if (this.getLinkTo()) {
|
|
42273
42274
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -47937,7 +47938,7 @@ class Card extends BaseItem {
|
|
|
47937
47938
|
renderHTML(documentFactory) {
|
|
47938
47939
|
const div = super.renderHTML(documentFactory);
|
|
47939
47940
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
47940
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
47941
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
47941
47942
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
47942
47943
|
div.id = this.getId();
|
|
47943
47944
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -47946,6 +47947,7 @@ class Card extends BaseItem {
|
|
|
47946
47947
|
div.style.transform = transform;
|
|
47947
47948
|
div.style.position = "absolute";
|
|
47948
47949
|
div.style.backgroundSize = "cover";
|
|
47950
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
47949
47951
|
return div;
|
|
47950
47952
|
}
|
|
47951
47953
|
updateMbr() {
|
|
@@ -51252,13 +51254,19 @@ class ConnectorTransformer extends Tool {
|
|
|
51252
51254
|
this.snap.connector = connector;
|
|
51253
51255
|
this.snap.pointerMove();
|
|
51254
51256
|
const point5 = this.snap.getControlPoint();
|
|
51255
|
-
|
|
51256
|
-
start:
|
|
51257
|
-
|
|
51258
|
-
|
|
51259
|
-
|
|
51260
|
-
|
|
51261
|
-
|
|
51257
|
+
switch (this.statePointer) {
|
|
51258
|
+
case "start":
|
|
51259
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
51260
|
+
this.selection.subject.publish(this.selection);
|
|
51261
|
+
break;
|
|
51262
|
+
case "end":
|
|
51263
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
51264
|
+
this.selection.subject.publish(this.selection);
|
|
51265
|
+
break;
|
|
51266
|
+
case "middle":
|
|
51267
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
51268
|
+
break;
|
|
51269
|
+
}
|
|
51262
51270
|
this.selection.subject.publish(this.selection);
|
|
51263
51271
|
}
|
|
51264
51272
|
}
|
package/dist/cjs/node.js
CHANGED
|
@@ -10086,11 +10086,11 @@ var decodeHtml = (htmlString) => {
|
|
|
10086
10086
|
};
|
|
10087
10087
|
function getTransformationData(el) {
|
|
10088
10088
|
const transformStyle = el.style.transform;
|
|
10089
|
-
const transformMatch = transformStyle.match(/
|
|
10089
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
10090
10090
|
if (transformMatch) {
|
|
10091
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
10091
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
10092
10092
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
10093
|
-
return { ...matrix, rotate, isLocked: false };
|
|
10093
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
10094
10094
|
}
|
|
10095
10095
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
10096
10096
|
}
|
|
@@ -44732,7 +44732,7 @@ class ImageItem extends BaseItem {
|
|
|
44732
44732
|
renderHTML(documentFactory) {
|
|
44733
44733
|
const div = documentFactory.createElement("image-item");
|
|
44734
44734
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
44735
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
44735
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
44736
44736
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
44737
44737
|
div.id = this.getId();
|
|
44738
44738
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -44741,6 +44741,7 @@ class ImageItem extends BaseItem {
|
|
|
44741
44741
|
div.style.transform = transform;
|
|
44742
44742
|
div.style.position = "absolute";
|
|
44743
44743
|
div.style.backgroundSize = "cover";
|
|
44744
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
44744
44745
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
44745
44746
|
if (this.getLinkTo()) {
|
|
44746
44747
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -50410,7 +50411,7 @@ class Card extends BaseItem {
|
|
|
50410
50411
|
renderHTML(documentFactory) {
|
|
50411
50412
|
const div = super.renderHTML(documentFactory);
|
|
50412
50413
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
50413
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
50414
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
50414
50415
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
50415
50416
|
div.id = this.getId();
|
|
50416
50417
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -50419,6 +50420,7 @@ class Card extends BaseItem {
|
|
|
50419
50420
|
div.style.transform = transform;
|
|
50420
50421
|
div.style.position = "absolute";
|
|
50421
50422
|
div.style.backgroundSize = "cover";
|
|
50423
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
50422
50424
|
return div;
|
|
50423
50425
|
}
|
|
50424
50426
|
updateMbr() {
|
|
@@ -53725,13 +53727,19 @@ class ConnectorTransformer extends Tool {
|
|
|
53725
53727
|
this.snap.connector = connector;
|
|
53726
53728
|
this.snap.pointerMove();
|
|
53727
53729
|
const point5 = this.snap.getControlPoint();
|
|
53728
|
-
|
|
53729
|
-
start:
|
|
53730
|
-
|
|
53731
|
-
|
|
53732
|
-
|
|
53733
|
-
|
|
53734
|
-
|
|
53730
|
+
switch (this.statePointer) {
|
|
53731
|
+
case "start":
|
|
53732
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
53733
|
+
this.selection.subject.publish(this.selection);
|
|
53734
|
+
break;
|
|
53735
|
+
case "end":
|
|
53736
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
53737
|
+
this.selection.subject.publish(this.selection);
|
|
53738
|
+
break;
|
|
53739
|
+
case "middle":
|
|
53740
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
53741
|
+
break;
|
|
53742
|
+
}
|
|
53735
53743
|
this.selection.subject.publish(this.selection);
|
|
53736
53744
|
}
|
|
53737
53745
|
}
|
package/dist/esm/browser.js
CHANGED
|
@@ -8886,11 +8886,11 @@ var decodeHtml = (htmlString) => {
|
|
|
8886
8886
|
};
|
|
8887
8887
|
function getTransformationData(el) {
|
|
8888
8888
|
const transformStyle = el.style.transform;
|
|
8889
|
-
const transformMatch = transformStyle.match(/
|
|
8889
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
8890
8890
|
if (transformMatch) {
|
|
8891
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
8891
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
8892
8892
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
8893
|
-
return { ...matrix, rotate, isLocked: false };
|
|
8893
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
8894
8894
|
}
|
|
8895
8895
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
8896
8896
|
}
|
|
@@ -42105,7 +42105,7 @@ class ImageItem extends BaseItem {
|
|
|
42105
42105
|
renderHTML(documentFactory) {
|
|
42106
42106
|
const div = documentFactory.createElement("image-item");
|
|
42107
42107
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
42108
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
42108
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
42109
42109
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
42110
42110
|
div.id = this.getId();
|
|
42111
42111
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -42114,6 +42114,7 @@ class ImageItem extends BaseItem {
|
|
|
42114
42114
|
div.style.transform = transform;
|
|
42115
42115
|
div.style.position = "absolute";
|
|
42116
42116
|
div.style.backgroundSize = "cover";
|
|
42117
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
42117
42118
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
42118
42119
|
if (this.getLinkTo()) {
|
|
42119
42120
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -47783,7 +47784,7 @@ class Card extends BaseItem {
|
|
|
47783
47784
|
renderHTML(documentFactory) {
|
|
47784
47785
|
const div = super.renderHTML(documentFactory);
|
|
47785
47786
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
47786
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
47787
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
47787
47788
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
47788
47789
|
div.id = this.getId();
|
|
47789
47790
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -47792,6 +47793,7 @@ class Card extends BaseItem {
|
|
|
47792
47793
|
div.style.transform = transform;
|
|
47793
47794
|
div.style.position = "absolute";
|
|
47794
47795
|
div.style.backgroundSize = "cover";
|
|
47796
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
47795
47797
|
return div;
|
|
47796
47798
|
}
|
|
47797
47799
|
updateMbr() {
|
|
@@ -51098,13 +51100,19 @@ class ConnectorTransformer extends Tool {
|
|
|
51098
51100
|
this.snap.connector = connector;
|
|
51099
51101
|
this.snap.pointerMove();
|
|
51100
51102
|
const point5 = this.snap.getControlPoint();
|
|
51101
|
-
|
|
51102
|
-
start:
|
|
51103
|
-
|
|
51104
|
-
|
|
51105
|
-
|
|
51106
|
-
|
|
51107
|
-
|
|
51103
|
+
switch (this.statePointer) {
|
|
51104
|
+
case "start":
|
|
51105
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
51106
|
+
this.selection.subject.publish(this.selection);
|
|
51107
|
+
break;
|
|
51108
|
+
case "end":
|
|
51109
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
51110
|
+
this.selection.subject.publish(this.selection);
|
|
51111
|
+
break;
|
|
51112
|
+
case "middle":
|
|
51113
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
51114
|
+
break;
|
|
51115
|
+
}
|
|
51108
51116
|
this.selection.subject.publish(this.selection);
|
|
51109
51117
|
}
|
|
51110
51118
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -8879,11 +8879,11 @@ var decodeHtml = (htmlString) => {
|
|
|
8879
8879
|
};
|
|
8880
8880
|
function getTransformationData(el) {
|
|
8881
8881
|
const transformStyle = el.style.transform;
|
|
8882
|
-
const transformMatch = transformStyle.match(/
|
|
8882
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
8883
8883
|
if (transformMatch) {
|
|
8884
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
8884
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
8885
8885
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
8886
|
-
return { ...matrix, rotate, isLocked: false };
|
|
8886
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
8887
8887
|
}
|
|
8888
8888
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
8889
8889
|
}
|
|
@@ -42098,7 +42098,7 @@ class ImageItem extends BaseItem {
|
|
|
42098
42098
|
renderHTML(documentFactory) {
|
|
42099
42099
|
const div = documentFactory.createElement("image-item");
|
|
42100
42100
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
42101
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
42101
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
42102
42102
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
42103
42103
|
div.id = this.getId();
|
|
42104
42104
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -42107,6 +42107,7 @@ class ImageItem extends BaseItem {
|
|
|
42107
42107
|
div.style.transform = transform;
|
|
42108
42108
|
div.style.position = "absolute";
|
|
42109
42109
|
div.style.backgroundSize = "cover";
|
|
42110
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
42110
42111
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
42111
42112
|
if (this.getLinkTo()) {
|
|
42112
42113
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -47776,7 +47777,7 @@ class Card extends BaseItem {
|
|
|
47776
47777
|
renderHTML(documentFactory) {
|
|
47777
47778
|
const div = super.renderHTML(documentFactory);
|
|
47778
47779
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
47779
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
47780
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
47780
47781
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
47781
47782
|
div.id = this.getId();
|
|
47782
47783
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -47785,6 +47786,7 @@ class Card extends BaseItem {
|
|
|
47785
47786
|
div.style.transform = transform;
|
|
47786
47787
|
div.style.position = "absolute";
|
|
47787
47788
|
div.style.backgroundSize = "cover";
|
|
47789
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
47788
47790
|
return div;
|
|
47789
47791
|
}
|
|
47790
47792
|
updateMbr() {
|
|
@@ -51091,13 +51093,19 @@ class ConnectorTransformer extends Tool {
|
|
|
51091
51093
|
this.snap.connector = connector;
|
|
51092
51094
|
this.snap.pointerMove();
|
|
51093
51095
|
const point5 = this.snap.getControlPoint();
|
|
51094
|
-
|
|
51095
|
-
start:
|
|
51096
|
-
|
|
51097
|
-
|
|
51098
|
-
|
|
51099
|
-
|
|
51100
|
-
|
|
51096
|
+
switch (this.statePointer) {
|
|
51097
|
+
case "start":
|
|
51098
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
51099
|
+
this.selection.subject.publish(this.selection);
|
|
51100
|
+
break;
|
|
51101
|
+
case "end":
|
|
51102
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
51103
|
+
this.selection.subject.publish(this.selection);
|
|
51104
|
+
break;
|
|
51105
|
+
case "middle":
|
|
51106
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
51107
|
+
break;
|
|
51108
|
+
}
|
|
51101
51109
|
this.selection.subject.publish(this.selection);
|
|
51102
51110
|
}
|
|
51103
51111
|
}
|
package/dist/esm/node.js
CHANGED
|
@@ -9663,11 +9663,11 @@ var decodeHtml = (htmlString) => {
|
|
|
9663
9663
|
};
|
|
9664
9664
|
function getTransformationData(el) {
|
|
9665
9665
|
const transformStyle = el.style.transform;
|
|
9666
|
-
const transformMatch = transformStyle.match(/
|
|
9666
|
+
const transformMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)\s*scale\(([^,]+),\s*([^)]+)\)/);
|
|
9667
9667
|
if (transformMatch) {
|
|
9668
|
-
const [, translateX, translateY, scaleX, scaleY
|
|
9668
|
+
const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
|
|
9669
9669
|
const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
|
|
9670
|
-
return { ...matrix, rotate, isLocked: false };
|
|
9670
|
+
return { ...matrix, rotate: Number(el.getAttribute("rotation")) || 0, isLocked: false };
|
|
9671
9671
|
}
|
|
9672
9672
|
return { ...new Matrix2, rotate: 0, isLocked: false };
|
|
9673
9673
|
}
|
|
@@ -44566,7 +44566,7 @@ class ImageItem extends BaseItem {
|
|
|
44566
44566
|
renderHTML(documentFactory) {
|
|
44567
44567
|
const div = documentFactory.createElement("image-item");
|
|
44568
44568
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
44569
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
44569
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
44570
44570
|
div.style.backgroundImage = `url(${this.storageLink})`;
|
|
44571
44571
|
div.id = this.getId();
|
|
44572
44572
|
div.style.width = `${this.imageDimension.width}px`;
|
|
@@ -44575,6 +44575,7 @@ class ImageItem extends BaseItem {
|
|
|
44575
44575
|
div.style.transform = transform;
|
|
44576
44576
|
div.style.position = "absolute";
|
|
44577
44577
|
div.style.backgroundSize = "cover";
|
|
44578
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
44578
44579
|
div.setAttribute("data-link-to", this.linkTo.serialize() || "");
|
|
44579
44580
|
if (this.getLinkTo()) {
|
|
44580
44581
|
const linkElement = this.linkTo.renderHTML(documentFactory);
|
|
@@ -50244,7 +50245,7 @@ class Card extends BaseItem {
|
|
|
50244
50245
|
renderHTML(documentFactory) {
|
|
50245
50246
|
const div = super.renderHTML(documentFactory);
|
|
50246
50247
|
const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
|
|
50247
|
-
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})
|
|
50248
|
+
const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
|
|
50248
50249
|
div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
|
|
50249
50250
|
div.id = this.getId();
|
|
50250
50251
|
div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
|
|
@@ -50253,6 +50254,7 @@ class Card extends BaseItem {
|
|
|
50253
50254
|
div.style.transform = transform;
|
|
50254
50255
|
div.style.position = "absolute";
|
|
50255
50256
|
div.style.backgroundSize = "cover";
|
|
50257
|
+
div.setAttribute("rotation", this.transformation.getRotation().toString());
|
|
50256
50258
|
return div;
|
|
50257
50259
|
}
|
|
50258
50260
|
updateMbr() {
|
|
@@ -53559,13 +53561,19 @@ class ConnectorTransformer extends Tool {
|
|
|
53559
53561
|
this.snap.connector = connector;
|
|
53560
53562
|
this.snap.pointerMove();
|
|
53561
53563
|
const point5 = this.snap.getControlPoint();
|
|
53562
|
-
|
|
53563
|
-
start:
|
|
53564
|
-
|
|
53565
|
-
|
|
53566
|
-
|
|
53567
|
-
|
|
53568
|
-
|
|
53564
|
+
switch (this.statePointer) {
|
|
53565
|
+
case "start":
|
|
53566
|
+
connector.setStartPoint(point5, this.beginTimeStamp);
|
|
53567
|
+
this.selection.subject.publish(this.selection);
|
|
53568
|
+
break;
|
|
53569
|
+
case "end":
|
|
53570
|
+
connector.setEndPoint(point5, this.beginTimeStamp);
|
|
53571
|
+
this.selection.subject.publish(this.selection);
|
|
53572
|
+
break;
|
|
53573
|
+
case "middle":
|
|
53574
|
+
connector.setMiddlePoint(point5, this.beginTimeStamp);
|
|
53575
|
+
break;
|
|
53576
|
+
}
|
|
53569
53577
|
this.selection.subject.publish(this.selection);
|
|
53570
53578
|
}
|
|
53571
53579
|
}
|