@inditextech/weave-sdk 2.9.5 → 2.11.0
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/sdk.d.ts +93 -2
- package/dist/sdk.d.ts.map +1 -1
- package/dist/sdk.js +1025 -32
- package/dist/sdk.js.map +1 -1
- package/dist/sdk.node.d.ts +112 -21
- package/dist/sdk.node.d.ts.map +1 -1
- package/dist/sdk.node.js +1025 -32
- package/dist/sdk.node.js.map +1 -1
- package/package.json +2 -2
package/dist/sdk.node.js
CHANGED
|
@@ -10311,7 +10311,7 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
|
|
|
10311
10311
|
* _.isNaN(undefined);
|
|
10312
10312
|
* // => false
|
|
10313
10313
|
*/
|
|
10314
|
-
function isNaN(value) {
|
|
10314
|
+
function isNaN$1(value) {
|
|
10315
10315
|
return isNumber(value) && value != +value;
|
|
10316
10316
|
}
|
|
10317
10317
|
/**
|
|
@@ -14728,7 +14728,7 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
|
|
|
14728
14728
|
lodash.isMap = isMap;
|
|
14729
14729
|
lodash.isMatch = isMatch;
|
|
14730
14730
|
lodash.isMatchWith = isMatchWith;
|
|
14731
|
-
lodash.isNaN = isNaN;
|
|
14731
|
+
lodash.isNaN = isNaN$1;
|
|
14732
14732
|
lodash.isNative = isNative;
|
|
14733
14733
|
lodash.isNil = isNil;
|
|
14734
14734
|
lodash.isNull = isNull;
|
|
@@ -15256,6 +15256,7 @@ const WEAVE_NODES_SELECTION_DEFAULT_CONFIG = {
|
|
|
15256
15256
|
anchor.offsetX(4);
|
|
15257
15257
|
}
|
|
15258
15258
|
},
|
|
15259
|
+
anchorSize: 12,
|
|
15259
15260
|
borderStroke: "#1a1aff",
|
|
15260
15261
|
borderStrokeWidth: 2
|
|
15261
15262
|
},
|
|
@@ -20660,6 +20661,7 @@ var WeaveReconciler = class {
|
|
|
20660
20661
|
newProps.height = rootContainer.getStageConfiguration().height;
|
|
20661
20662
|
}
|
|
20662
20663
|
const element = handler.onRender(newProps);
|
|
20664
|
+
hostContext.emitEvent("onNodeRenderedAdded", element);
|
|
20663
20665
|
return element;
|
|
20664
20666
|
},
|
|
20665
20667
|
detachDeletedInstance(node) {
|
|
@@ -21873,7 +21875,7 @@ var WeaveRegisterManager = class {
|
|
|
21873
21875
|
|
|
21874
21876
|
//#endregion
|
|
21875
21877
|
//#region package.json
|
|
21876
|
-
var version = "2.
|
|
21878
|
+
var version = "2.11.0";
|
|
21877
21879
|
|
|
21878
21880
|
//#endregion
|
|
21879
21881
|
//#region src/managers/setup.ts
|
|
@@ -21886,8 +21888,9 @@ var WeaveSetupManager = class {
|
|
|
21886
21888
|
welcomeLog() {
|
|
21887
21889
|
const logDisable = this.instance.getLogger().getDisabled();
|
|
21888
21890
|
const logLevel = this.instance.getLogger().getLevel();
|
|
21891
|
+
const configuration = this.instance.getConfiguration();
|
|
21889
21892
|
const params = [
|
|
21890
|
-
`%cWEAVE.JS%c\nversion: ${version}\nlog disabled: ${logDisable}\nlog level: ${logLevel}`,
|
|
21893
|
+
`%cWEAVE.JS%c\nversion: ${version}\nlog disabled: ${logDisable}\nlog level: ${logLevel}\n\nupscaling enabled [${configuration.performance?.upscale?.enabled ?? false}], base width [${configuration.performance?.upscale?.baseWidth ?? 1920}] base height [${configuration.performance?.upscale?.baseHeight ?? 1080}] multiplier [${configuration.performance?.upscale?.multiplier ?? 1}]`,
|
|
21891
21894
|
`color: black; font-size: 20px; font-weight: bold; padding: 2px; margin-bottom: 12px;`,
|
|
21892
21895
|
`color: black;`
|
|
21893
21896
|
];
|
|
@@ -21978,10 +21981,13 @@ var WeaveStageManager = class {
|
|
|
21978
21981
|
return instance;
|
|
21979
21982
|
}
|
|
21980
21983
|
initStage() {
|
|
21984
|
+
const container = this.instance.getStageConfiguration().container;
|
|
21985
|
+
const containerWidth = this.instance.getStageConfiguration().width ?? 1;
|
|
21986
|
+
const containerHeight = this.instance.getStageConfiguration().height ?? 1;
|
|
21981
21987
|
const props = {
|
|
21982
|
-
container
|
|
21983
|
-
width:
|
|
21984
|
-
height:
|
|
21988
|
+
container,
|
|
21989
|
+
width: containerWidth,
|
|
21990
|
+
height: containerHeight,
|
|
21985
21991
|
id: "stage",
|
|
21986
21992
|
initialZIndex: void 0
|
|
21987
21993
|
};
|
|
@@ -22531,6 +22537,10 @@ var Weave = class {
|
|
|
22531
22537
|
this.moduleLogger.debug(`Listening event [${event}]`);
|
|
22532
22538
|
this.emitter.on(event, callback);
|
|
22533
22539
|
}
|
|
22540
|
+
addOnceEventListener(event, callback) {
|
|
22541
|
+
this.moduleLogger.debug(`Listening once event [${event}]`);
|
|
22542
|
+
this.emitter.once(event).then(callback);
|
|
22543
|
+
}
|
|
22534
22544
|
removeEventListener(event, callback) {
|
|
22535
22545
|
this.moduleLogger.debug(`Removing listening to event [${event}]`);
|
|
22536
22546
|
this.emitter.off(event, callback);
|
|
@@ -22942,6 +22952,43 @@ const setupCanvasBackend = async () => {
|
|
|
22942
22952
|
await import("konva/canvas-backend");
|
|
22943
22953
|
};
|
|
22944
22954
|
|
|
22955
|
+
//#endregion
|
|
22956
|
+
//#region src/utils/upscale.ts
|
|
22957
|
+
const setupUpscaleStage = (instance, stage) => {
|
|
22958
|
+
const config = instance.getConfiguration();
|
|
22959
|
+
const doUpscale = config.performance?.upscale?.enabled ?? false;
|
|
22960
|
+
if (doUpscale) {
|
|
22961
|
+
const defaultOptions = {
|
|
22962
|
+
multiplier: 1,
|
|
22963
|
+
baseWidth: 1920,
|
|
22964
|
+
baseHeight: 1080
|
|
22965
|
+
};
|
|
22966
|
+
const finalOptions = (0, import_lodash.merge)({}, defaultOptions, { ...config.performance?.upscale });
|
|
22967
|
+
const realContainer = stage.container();
|
|
22968
|
+
const containerWidth = realContainer.offsetWidth;
|
|
22969
|
+
const containerHeight = realContainer.offsetHeight;
|
|
22970
|
+
const containerRatio = containerWidth / containerHeight;
|
|
22971
|
+
const multiplier = finalOptions.multiplier;
|
|
22972
|
+
let scaledContainerWidth = finalOptions.baseWidth * multiplier;
|
|
22973
|
+
let scaledContainerHeight = finalOptions.baseHeight * multiplier;
|
|
22974
|
+
if (containerWidth > containerHeight) scaledContainerWidth = Math.round(scaledContainerHeight * containerRatio);
|
|
22975
|
+
else scaledContainerHeight = Math.round(scaledContainerWidth / containerRatio);
|
|
22976
|
+
stage.width(scaledContainerWidth);
|
|
22977
|
+
stage.height(scaledContainerHeight);
|
|
22978
|
+
const scaleX = containerWidth / scaledContainerWidth;
|
|
22979
|
+
const scaleY = containerHeight / scaledContainerHeight;
|
|
22980
|
+
let scaleToCover = 1;
|
|
22981
|
+
if (scaleX > scaleY) scaleToCover = scaleX;
|
|
22982
|
+
else scaleToCover = scaleY;
|
|
22983
|
+
stage.setAttrs({ upscaleScale: scaleToCover });
|
|
22984
|
+
const innerElement = realContainer.getElementsByClassName("konvajs-content")[0];
|
|
22985
|
+
if (innerElement) {
|
|
22986
|
+
innerElement.style.transformOrigin = "0 0";
|
|
22987
|
+
innerElement.style.transform = `scale(${scaleToCover})`;
|
|
22988
|
+
}
|
|
22989
|
+
} else stage.setAttrs({ upscaleScale: 1 });
|
|
22990
|
+
};
|
|
22991
|
+
|
|
22945
22992
|
//#endregion
|
|
22946
22993
|
//#region src/nodes/stage/stage.ts
|
|
22947
22994
|
var WeaveStageNode = class extends WeaveNode {
|
|
@@ -22950,6 +22997,7 @@ var WeaveStageNode = class extends WeaveNode {
|
|
|
22950
22997
|
wheelMousePressed = false;
|
|
22951
22998
|
onRender(props) {
|
|
22952
22999
|
const stage = new Konva.Stage({ ...props });
|
|
23000
|
+
setupUpscaleStage(this.instance, stage);
|
|
22953
23001
|
this.wheelMousePressed = false;
|
|
22954
23002
|
stage.isFocused = () => this.stageFocused;
|
|
22955
23003
|
stage.isMouseWheelPressed = () => this.wheelMousePressed;
|
|
@@ -23902,6 +23950,7 @@ var WeaveTextNode = class extends WeaveNode {
|
|
|
23902
23950
|
this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
|
|
23903
23951
|
this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
|
|
23904
23952
|
window.weaveTextEditing[textNode.id()] = "editing";
|
|
23953
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
23905
23954
|
this.textArea.value = textNode.text();
|
|
23906
23955
|
this.textArea.id = textNode.id();
|
|
23907
23956
|
this.textAreaContainer.style.overflow = "hidden";
|
|
@@ -23911,8 +23960,8 @@ var WeaveTextNode = class extends WeaveNode {
|
|
|
23911
23960
|
if (textNode.getAttrs().verticalAlign === "middle") this.textAreaContainer.style.alignItems = "center";
|
|
23912
23961
|
if (textNode.getAttrs().verticalAlign === "bottom") this.textAreaContainer.style.alignItems = "end";
|
|
23913
23962
|
this.textAreaContainer.style.position = "absolute";
|
|
23914
|
-
this.textAreaContainer.style.top = position.y + "px";
|
|
23915
|
-
this.textAreaContainer.style.left = position.x + "px";
|
|
23963
|
+
this.textAreaContainer.style.top = position.y * upscaleScale + "px";
|
|
23964
|
+
this.textAreaContainer.style.left = position.x * upscaleScale + "px";
|
|
23916
23965
|
if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
|
|
23917
23966
|
const rect = textNode.getClientRect({ relativeTo: stage });
|
|
23918
23967
|
this.textAreaContainer.style.width = (rect.width + 1) * stage.scaleX() + "px";
|
|
@@ -26200,9 +26249,11 @@ var WeaveCommentNode = class extends WeaveNode {
|
|
|
26200
26249
|
expandNode(commentNode) {
|
|
26201
26250
|
const widthExpanded = this.config.style.expanded.width;
|
|
26202
26251
|
const circlePaddingContracted = this.config.style.contracted.circlePadding;
|
|
26252
|
+
const stage = this.instance.getStage();
|
|
26253
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
26203
26254
|
const internalCircleBigName = commentNode.findOne(`#${commentNode.id()}-circle-big-name`);
|
|
26204
26255
|
const internalComment = commentNode.findOne(`#${commentNode.id()}-comment`);
|
|
26205
|
-
const heightExpanded = (internalCircleBigName?.getClientRect().height ?? 0) + (internalComment?.getClientRect().height ?? 0) + 12;
|
|
26256
|
+
const heightExpanded = ((internalCircleBigName?.getClientRect().height ?? 0) + (internalComment?.getClientRect().height ?? 0)) * upscaleScale + 12;
|
|
26206
26257
|
const background = commentNode.findOne(`#${commentNode.id()}-bg`);
|
|
26207
26258
|
background?.setAttrs({
|
|
26208
26259
|
y: -heightExpanded,
|
|
@@ -26286,8 +26337,9 @@ var WeaveCommentNode = class extends WeaveNode {
|
|
|
26286
26337
|
paddingX = this.config.style.viewing.paddingX;
|
|
26287
26338
|
paddingY = this.config.style.viewing.paddingY;
|
|
26288
26339
|
}
|
|
26289
|
-
const
|
|
26290
|
-
const
|
|
26340
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
26341
|
+
const x = stagePos.x * upscaleScale + rect.x * scaleX * upscaleScale + widthContracted + paddingX;
|
|
26342
|
+
const y = stagePos.y * upscaleScale + rect.y * scaleY * upscaleScale + paddingY;
|
|
26291
26343
|
const position = {
|
|
26292
26344
|
x,
|
|
26293
26345
|
y
|
|
@@ -26323,10 +26375,12 @@ var WeaveCommentNode = class extends WeaveNode {
|
|
|
26323
26375
|
this.setCommentDOMPosition(commentNode, commentNode.getAttrs().commentAction);
|
|
26324
26376
|
};
|
|
26325
26377
|
normalizeNodeSize(node) {
|
|
26378
|
+
const stage = this.instance.getStage();
|
|
26379
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
26326
26380
|
const abs = node.getAbsoluteScale();
|
|
26327
26381
|
node.scale({
|
|
26328
|
-
x: node.scaleX() / abs.x,
|
|
26329
|
-
y: node.scaleY() / abs.y
|
|
26382
|
+
x: node.scaleX() / upscaleScale / abs.x,
|
|
26383
|
+
y: node.scaleY() / upscaleScale / abs.y
|
|
26330
26384
|
});
|
|
26331
26385
|
if (node instanceof Konva.Group) node.getChildren().forEach((child) => this.normalizeNodeSize(child));
|
|
26332
26386
|
}
|
|
@@ -26957,6 +27011,661 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
26957
27011
|
}
|
|
26958
27012
|
};
|
|
26959
27013
|
|
|
27014
|
+
//#endregion
|
|
27015
|
+
//#region src/nodes/measure/constants.ts
|
|
27016
|
+
const WEAVE_MEASURE_NODE_TYPE = "measure";
|
|
27017
|
+
|
|
27018
|
+
//#endregion
|
|
27019
|
+
//#region src/nodes/measure/measure.ts
|
|
27020
|
+
const HANDLE_SPACE_SEPARATION_MULTIPLIER = 1.5;
|
|
27021
|
+
const HANDLE_NO_SPACE_SEPARATION_MULTIPLIER = 2.5;
|
|
27022
|
+
var WeaveMeasureNode = class extends WeaveNode {
|
|
27023
|
+
nodeType = WEAVE_MEASURE_NODE_TYPE;
|
|
27024
|
+
handlePointCircleRadius = 6;
|
|
27025
|
+
onRender(props) {
|
|
27026
|
+
const measure = new Konva.Group({
|
|
27027
|
+
...props,
|
|
27028
|
+
name: "node",
|
|
27029
|
+
draggable: false
|
|
27030
|
+
});
|
|
27031
|
+
const color = props.color || "#FF3366";
|
|
27032
|
+
const fromPoint = props.fromPoint;
|
|
27033
|
+
const toPoint = props.toPoint;
|
|
27034
|
+
const separation = props.separation ?? 100;
|
|
27035
|
+
const orientation = props.orientation ?? -1;
|
|
27036
|
+
const textPadding = props.textPadding ?? 20;
|
|
27037
|
+
const separationPadding = props.separationPadding ?? 30;
|
|
27038
|
+
const unit = props.unit ?? "cms";
|
|
27039
|
+
const unitPerPixel = props.unitPerPixel ?? 100;
|
|
27040
|
+
const fromFinalPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, (separation + separationPadding) * orientation);
|
|
27041
|
+
const linePerpFrom = new Konva.Line({
|
|
27042
|
+
id: `linePerpFrom-${props.id}`,
|
|
27043
|
+
nodeId: props.id,
|
|
27044
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27045
|
+
points: [
|
|
27046
|
+
fromPoint.x,
|
|
27047
|
+
fromPoint.y,
|
|
27048
|
+
fromFinalPerp.left.x,
|
|
27049
|
+
fromFinalPerp.left.y
|
|
27050
|
+
],
|
|
27051
|
+
stroke: color,
|
|
27052
|
+
strokeWidth: 1,
|
|
27053
|
+
dash: [4, 4]
|
|
27054
|
+
});
|
|
27055
|
+
measure.add(linePerpFrom);
|
|
27056
|
+
const toFinalPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, (separation + separationPadding) * orientation);
|
|
27057
|
+
const linePerpTo = new Konva.Line({
|
|
27058
|
+
id: `linePerpTo-${props.id}`,
|
|
27059
|
+
nodeId: props.id,
|
|
27060
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27061
|
+
points: [
|
|
27062
|
+
toPoint.x,
|
|
27063
|
+
toPoint.y,
|
|
27064
|
+
toFinalPerp.left.x,
|
|
27065
|
+
toFinalPerp.left.y
|
|
27066
|
+
],
|
|
27067
|
+
stroke: color,
|
|
27068
|
+
strokeWidth: 1,
|
|
27069
|
+
dash: [4, 4]
|
|
27070
|
+
});
|
|
27071
|
+
measure.add(linePerpTo);
|
|
27072
|
+
const fromPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, separation * orientation);
|
|
27073
|
+
const fromCircle = new Konva.Circle({
|
|
27074
|
+
id: `fromCircle-${props.id}`,
|
|
27075
|
+
nodeId: props.id,
|
|
27076
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27077
|
+
x: fromPerp.left.x,
|
|
27078
|
+
y: fromPerp.left.y,
|
|
27079
|
+
radius: 3,
|
|
27080
|
+
fill: color
|
|
27081
|
+
});
|
|
27082
|
+
measure.add(fromCircle);
|
|
27083
|
+
const toPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, separation * orientation);
|
|
27084
|
+
const toCircle = new Konva.Circle({
|
|
27085
|
+
id: `toCircle-${props.id}`,
|
|
27086
|
+
nodeId: props.id,
|
|
27087
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27088
|
+
x: toPerp.left.x,
|
|
27089
|
+
y: toPerp.left.y,
|
|
27090
|
+
radius: 3,
|
|
27091
|
+
fill: color
|
|
27092
|
+
});
|
|
27093
|
+
measure.add(toCircle);
|
|
27094
|
+
const midPoint = this.midPoint(fromPerp.left, toPerp.left);
|
|
27095
|
+
const distance = this.distanceBetweenPoints(fromPoint, toPoint);
|
|
27096
|
+
const units = distance / unitPerPixel;
|
|
27097
|
+
const text = `${units.toFixed(2)} ${unit}`;
|
|
27098
|
+
const measureText = new Konva.Text({
|
|
27099
|
+
id: `measureText-${props.id}`,
|
|
27100
|
+
nodeId: props.id,
|
|
27101
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27102
|
+
x: midPoint.x,
|
|
27103
|
+
y: midPoint.y,
|
|
27104
|
+
text,
|
|
27105
|
+
fontFamily: "monospace",
|
|
27106
|
+
fontSize: 14,
|
|
27107
|
+
verticalAlign: "middle",
|
|
27108
|
+
align: "center",
|
|
27109
|
+
fill: color
|
|
27110
|
+
});
|
|
27111
|
+
const angle = this.getAngle(fromPoint, toPoint);
|
|
27112
|
+
const textSize = measureText.measureSize(text);
|
|
27113
|
+
const textOffsetX = textSize.width / 2;
|
|
27114
|
+
measureText.rotation(angle);
|
|
27115
|
+
measureText.offsetX(textSize.width / 2);
|
|
27116
|
+
measureText.offsetY(textSize.height / 2);
|
|
27117
|
+
if (textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left)) {
|
|
27118
|
+
const perpPointTextMid = this.perpendicularPoint(fromPerp.left, toPerp.left, midPoint, textSize.height * orientation);
|
|
27119
|
+
measureText.x(perpPointTextMid.left.x);
|
|
27120
|
+
measureText.y(perpPointTextMid.left.y);
|
|
27121
|
+
}
|
|
27122
|
+
measure.add(measureText);
|
|
27123
|
+
const pointLeftText = this.pointFromMid(fromPerp.left, toPerp.left, textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left) ? 0 : textOffsetX + textPadding, false);
|
|
27124
|
+
const pointRightText = this.pointFromMid(fromPerp.left, toPerp.left, textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left) ? 0 : textOffsetX + textPadding, true);
|
|
27125
|
+
const lineLeft = new Konva.Line({
|
|
27126
|
+
id: `lineLeft-${props.id}`,
|
|
27127
|
+
nodeId: props.id,
|
|
27128
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27129
|
+
points: [
|
|
27130
|
+
fromPerp.left.x,
|
|
27131
|
+
fromPerp.left.y,
|
|
27132
|
+
pointLeftText.x,
|
|
27133
|
+
pointLeftText.y
|
|
27134
|
+
],
|
|
27135
|
+
stroke: color,
|
|
27136
|
+
strokeWidth: 1
|
|
27137
|
+
});
|
|
27138
|
+
const lineRight = new Konva.Line({
|
|
27139
|
+
id: `lineRight-${props.id}`,
|
|
27140
|
+
nodeId: props.id,
|
|
27141
|
+
nodeType: WEAVE_MEASURE_NODE_TYPE,
|
|
27142
|
+
points: [
|
|
27143
|
+
pointRightText.x,
|
|
27144
|
+
pointRightText.y,
|
|
27145
|
+
toPerp.left.x,
|
|
27146
|
+
toPerp.left.y
|
|
27147
|
+
],
|
|
27148
|
+
stroke: color,
|
|
27149
|
+
strokeWidth: 1
|
|
27150
|
+
});
|
|
27151
|
+
measure.add(measureText);
|
|
27152
|
+
measure.add(lineLeft);
|
|
27153
|
+
measure.add(lineRight);
|
|
27154
|
+
this.setupDefaultNodeAugmentation(measure);
|
|
27155
|
+
measure.getTransformerProperties = function() {
|
|
27156
|
+
return {
|
|
27157
|
+
resizeEnabled: false,
|
|
27158
|
+
rotateEnabled: false,
|
|
27159
|
+
borderEnabled: false
|
|
27160
|
+
};
|
|
27161
|
+
};
|
|
27162
|
+
this.instance.addEventListener("onZoomChange", () => {
|
|
27163
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
27164
|
+
if (selectionPlugin) {
|
|
27165
|
+
const selectedNodes = selectionPlugin.getSelectedNodes();
|
|
27166
|
+
if (selectedNodes.length === 1 && selectedNodes[0].getAttrs().id === measure.getAttrs().id) this.updateSelectionHandlers(measure);
|
|
27167
|
+
}
|
|
27168
|
+
});
|
|
27169
|
+
this.instance.addEventListener("onNodesChange", () => {
|
|
27170
|
+
let isSelected = false;
|
|
27171
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
27172
|
+
if (selectionPlugin) {
|
|
27173
|
+
const selectedNodes = selectionPlugin.getSelectedNodes();
|
|
27174
|
+
if (selectedNodes.length === 1 && selectedNodes[0].getAttrs().id === measure.getAttrs().id) {
|
|
27175
|
+
isSelected = true;
|
|
27176
|
+
this.createSelectionHandlers(measure);
|
|
27177
|
+
this.updateSelectionHandlers(measure);
|
|
27178
|
+
}
|
|
27179
|
+
}
|
|
27180
|
+
if (!isSelected) this.destroySelectionHandlers(measure);
|
|
27181
|
+
});
|
|
27182
|
+
this.instance.addEventListener("onMeasureReferenceChange", ({ unit: unit$1, unitPerPixel: unitPerPixel$1 }) => {
|
|
27183
|
+
measure.setAttrs({
|
|
27184
|
+
unit: unit$1,
|
|
27185
|
+
unitPerPixel: unitPerPixel$1
|
|
27186
|
+
});
|
|
27187
|
+
this.instance.updateNode(this.serialize(measure));
|
|
27188
|
+
});
|
|
27189
|
+
measure.allowedAnchors = function() {
|
|
27190
|
+
return [];
|
|
27191
|
+
};
|
|
27192
|
+
this.setupDefaultNodeEvents(measure);
|
|
27193
|
+
return measure;
|
|
27194
|
+
}
|
|
27195
|
+
createSelectionHandlers(node) {
|
|
27196
|
+
const props = node.getAttrs();
|
|
27197
|
+
const fromPoint = props.fromPoint;
|
|
27198
|
+
const toPoint = props.toPoint;
|
|
27199
|
+
const separation = props.separation ?? 100;
|
|
27200
|
+
const orientation = props.orientation ?? -1;
|
|
27201
|
+
const angle = this.getAngle(fromPoint, toPoint);
|
|
27202
|
+
const moveToCircleAct = node.findOne(`#moveToCircle-${node.getAttrs().id}`);
|
|
27203
|
+
const crosshairFromAct = node.findOne(`#crosshairFrom-${node.getAttrs().id}`);
|
|
27204
|
+
const moveFromCircleAct = node.findOne(`#moveFromCircle-${node.getAttrs().id}`);
|
|
27205
|
+
const crosshairToAct = node.findOne(`#crosshairTo-${node.getAttrs().id}`);
|
|
27206
|
+
const moveSeparationRectAct = node.findOne(`#moveSeparationRect-${node.getAttrs().id}`);
|
|
27207
|
+
const measureText = node.findOne(`#measureText-${node.getAttrs().id}`);
|
|
27208
|
+
if (moveToCircleAct && crosshairFromAct && moveFromCircleAct && crosshairToAct && moveSeparationRectAct) return;
|
|
27209
|
+
const textSize = measureText?.measureSize(measureText.text());
|
|
27210
|
+
const moveFromCircle = new Konva.Circle({
|
|
27211
|
+
id: `moveFromCircle-${props.id}`,
|
|
27212
|
+
edgeDistanceDisableOnDrag: true,
|
|
27213
|
+
edgeSnappingDisableOnDrag: true,
|
|
27214
|
+
x: fromPoint.x,
|
|
27215
|
+
y: fromPoint.y,
|
|
27216
|
+
radius: this.handlePointCircleRadius,
|
|
27217
|
+
fill: "#FFFFFF",
|
|
27218
|
+
stroke: "#000000",
|
|
27219
|
+
strokeWidth: 1,
|
|
27220
|
+
draggable: true
|
|
27221
|
+
});
|
|
27222
|
+
const crosshairFrom = this.buildCrosshair("crosshairFrom", node, fromPoint, angle);
|
|
27223
|
+
const moveToCircle = new Konva.Circle({
|
|
27224
|
+
id: `moveToCircle-${props.id}`,
|
|
27225
|
+
edgeDistanceDisableOnDrag: true,
|
|
27226
|
+
edgeSnappingDisableOnDrag: true,
|
|
27227
|
+
x: toPoint.x,
|
|
27228
|
+
y: toPoint.y,
|
|
27229
|
+
radius: this.handlePointCircleRadius,
|
|
27230
|
+
fill: "#FFFFFF",
|
|
27231
|
+
stroke: "#000000",
|
|
27232
|
+
strokeWidth: 1,
|
|
27233
|
+
draggable: true
|
|
27234
|
+
});
|
|
27235
|
+
const crosshairTo = this.buildCrosshair("crosshairTo", node, toPoint, angle);
|
|
27236
|
+
const fromPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, separation * orientation);
|
|
27237
|
+
const toPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, separation * orientation);
|
|
27238
|
+
const pointMidMeasure = this.pointFromMid(fromPerp.left, toPerp.left, 0, false);
|
|
27239
|
+
const isTextBiggerThanMeasureSpace = (textSize?.width ?? 0) > this.distanceBetweenPoints(fromPerp.left, toPerp.left);
|
|
27240
|
+
const separatorPoint = this.perpendicularPoint(fromPerp.left, toPerp.left, pointMidMeasure, (isTextBiggerThanMeasureSpace ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * (textSize?.height ?? 0) * orientation);
|
|
27241
|
+
const moveSeparationRect = new Konva.Rect({
|
|
27242
|
+
id: `moveSeparationRect-${props.id}`,
|
|
27243
|
+
edgeDistanceDisableOnDrag: true,
|
|
27244
|
+
edgeSnappingDisableOnDrag: true,
|
|
27245
|
+
x: separatorPoint.left.x,
|
|
27246
|
+
y: separatorPoint.left.y,
|
|
27247
|
+
width: this.handlePointCircleRadius * 2 * 3,
|
|
27248
|
+
height: this.handlePointCircleRadius * 2,
|
|
27249
|
+
offsetX: this.handlePointCircleRadius * 3,
|
|
27250
|
+
offsetY: this.handlePointCircleRadius,
|
|
27251
|
+
cornerRadius: this.handlePointCircleRadius,
|
|
27252
|
+
rotation: angle,
|
|
27253
|
+
fill: "#FFFFFF",
|
|
27254
|
+
stroke: "#000000",
|
|
27255
|
+
strokeWidth: 1,
|
|
27256
|
+
draggable: true
|
|
27257
|
+
});
|
|
27258
|
+
node.add(moveFromCircle);
|
|
27259
|
+
node.add(crosshairFrom);
|
|
27260
|
+
node.add(moveToCircle);
|
|
27261
|
+
node.add(crosshairTo);
|
|
27262
|
+
node.add(moveSeparationRect);
|
|
27263
|
+
moveFromCircle.moveToTop();
|
|
27264
|
+
crosshairFrom.moveToBottom();
|
|
27265
|
+
moveToCircle.moveToTop();
|
|
27266
|
+
crosshairTo.moveToBottom();
|
|
27267
|
+
moveSeparationRect.moveToTop();
|
|
27268
|
+
moveFromCircle.on("dragstart", () => {
|
|
27269
|
+
moveFromCircle.visible(false);
|
|
27270
|
+
moveToCircle.visible(false);
|
|
27271
|
+
moveSeparationRect.visible(false);
|
|
27272
|
+
crosshairFrom.visible(true);
|
|
27273
|
+
});
|
|
27274
|
+
moveFromCircle.on("dragmove", (e) => {
|
|
27275
|
+
const actCircle = e.target;
|
|
27276
|
+
const realNode = e.target.getParent();
|
|
27277
|
+
const newFromPoint = {
|
|
27278
|
+
x: actCircle.x(),
|
|
27279
|
+
y: actCircle.y()
|
|
27280
|
+
};
|
|
27281
|
+
realNode.setAttrs({ fromPoint: newFromPoint });
|
|
27282
|
+
this.onUpdate(realNode, this.serialize(realNode).props);
|
|
27283
|
+
});
|
|
27284
|
+
moveFromCircle.on("dragend", (e) => {
|
|
27285
|
+
const actCircle = e.target;
|
|
27286
|
+
const realNode = e.target.getParent();
|
|
27287
|
+
moveFromCircle.visible(true);
|
|
27288
|
+
moveToCircle.visible(true);
|
|
27289
|
+
moveSeparationRect.visible(true);
|
|
27290
|
+
crosshairFrom.visible(false);
|
|
27291
|
+
const newFromPoint = {
|
|
27292
|
+
x: actCircle.x(),
|
|
27293
|
+
y: actCircle.y()
|
|
27294
|
+
};
|
|
27295
|
+
realNode.setAttrs({ fromPoint: newFromPoint });
|
|
27296
|
+
this.instance.updateNode(this.serialize(realNode));
|
|
27297
|
+
});
|
|
27298
|
+
moveToCircle.on("dragstart", () => {
|
|
27299
|
+
moveFromCircle.visible(false);
|
|
27300
|
+
moveToCircle.visible(false);
|
|
27301
|
+
moveSeparationRect.visible(false);
|
|
27302
|
+
crosshairTo.visible(true);
|
|
27303
|
+
});
|
|
27304
|
+
moveToCircle.on("dragmove", (e) => {
|
|
27305
|
+
const actCircle = e.target;
|
|
27306
|
+
const realNode = e.target.getParent();
|
|
27307
|
+
const newToPoint = {
|
|
27308
|
+
x: actCircle.x(),
|
|
27309
|
+
y: actCircle.y()
|
|
27310
|
+
};
|
|
27311
|
+
realNode.setAttrs({ toPoint: newToPoint });
|
|
27312
|
+
this.onUpdate(realNode, this.serialize(realNode).props);
|
|
27313
|
+
});
|
|
27314
|
+
moveToCircle.on("dragend", (e) => {
|
|
27315
|
+
const actCircle = e.target;
|
|
27316
|
+
const realNode = e.target.getParent();
|
|
27317
|
+
moveFromCircle.visible(true);
|
|
27318
|
+
moveToCircle.visible(true);
|
|
27319
|
+
moveSeparationRect.visible(true);
|
|
27320
|
+
crosshairTo.visible(false);
|
|
27321
|
+
const newToPoint = {
|
|
27322
|
+
x: actCircle.x(),
|
|
27323
|
+
y: actCircle.y()
|
|
27324
|
+
};
|
|
27325
|
+
realNode.setAttrs({ toPoint: newToPoint });
|
|
27326
|
+
this.instance.updateNode(this.serialize(realNode));
|
|
27327
|
+
});
|
|
27328
|
+
let originalSeparationHandlerPosition = {
|
|
27329
|
+
x: 0,
|
|
27330
|
+
y: 0
|
|
27331
|
+
};
|
|
27332
|
+
moveSeparationRect.on("dragstart", () => {
|
|
27333
|
+
const pos = moveSeparationRect.position();
|
|
27334
|
+
originalSeparationHandlerPosition = pos;
|
|
27335
|
+
});
|
|
27336
|
+
moveSeparationRect.on("dragmove", (e) => {
|
|
27337
|
+
const pos = e.target.position();
|
|
27338
|
+
const realNode = e.target.getParent();
|
|
27339
|
+
const fromPoint$1 = node.getAttrs().fromPoint;
|
|
27340
|
+
const toPoint$1 = node.getAttrs().toPoint;
|
|
27341
|
+
const midPoint = this.midPoint(fromPoint$1, toPoint$1);
|
|
27342
|
+
const isTextBiggerThanMeasureSpace$1 = (textSize?.width ?? 0) > this.distanceBetweenPoints(fromPerp.left, toPerp.left);
|
|
27343
|
+
const separatorPoint$1 = this.perpendicularPoint(fromPoint$1, toPoint$1, midPoint, (isTextBiggerThanMeasureSpace$1 ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * (textSize?.height ?? 0) * orientation);
|
|
27344
|
+
const pointInLine = this.projectPointToLine(separatorPoint$1.left, originalSeparationHandlerPosition, pos);
|
|
27345
|
+
if (isNaN(pointInLine.t)) {
|
|
27346
|
+
const point = this.movePointPerpendicularToLine(fromPoint$1, toPoint$1, separatorPoint$1.left, ((isTextBiggerThanMeasureSpace$1 ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * (textSize?.height ?? 0) + 1) * orientation);
|
|
27347
|
+
moveSeparationRect.position(point);
|
|
27348
|
+
originalSeparationHandlerPosition = point;
|
|
27349
|
+
realNode.setAttrs({ separation: (textSize?.height ?? 0) + 1 });
|
|
27350
|
+
} else {
|
|
27351
|
+
moveSeparationRect.position(pointInLine);
|
|
27352
|
+
const dx = originalSeparationHandlerPosition.x - separatorPoint$1.left.x;
|
|
27353
|
+
const dy = originalSeparationHandlerPosition.y - separatorPoint$1.left.y;
|
|
27354
|
+
const len = Math.hypot(dx, dy);
|
|
27355
|
+
let newLength = pointInLine.t * len;
|
|
27356
|
+
if (newLength < 0) newLength = 0;
|
|
27357
|
+
realNode.setAttrs({ separation: newLength });
|
|
27358
|
+
}
|
|
27359
|
+
this.onUpdate(realNode, this.serialize(realNode).props);
|
|
27360
|
+
});
|
|
27361
|
+
moveSeparationRect.on("dragend", (e) => {
|
|
27362
|
+
const pos = e.target.position();
|
|
27363
|
+
const realNode = e.target.getParent();
|
|
27364
|
+
const fromPoint$1 = node.getAttrs().fromPoint;
|
|
27365
|
+
const toPoint$1 = node.getAttrs().toPoint;
|
|
27366
|
+
const midPoint = this.midPoint(fromPoint$1, toPoint$1);
|
|
27367
|
+
const separatorPoint$1 = this.perpendicularPoint(fromPoint$1, toPoint$1, midPoint, (isTextBiggerThanMeasureSpace ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * (textSize?.height ?? 0) * orientation);
|
|
27368
|
+
const pointInLine = this.projectPointToLine(separatorPoint$1.left, originalSeparationHandlerPosition, pos);
|
|
27369
|
+
moveSeparationRect.position(pointInLine);
|
|
27370
|
+
const dx = originalSeparationHandlerPosition.x - separatorPoint$1.left.x;
|
|
27371
|
+
const dy = originalSeparationHandlerPosition.y - separatorPoint$1.left.y;
|
|
27372
|
+
const len = Math.hypot(dx, dy);
|
|
27373
|
+
let newLength = pointInLine.t * len;
|
|
27374
|
+
if (newLength < 0) newLength = 0;
|
|
27375
|
+
realNode.setAttrs({ separation: newLength });
|
|
27376
|
+
this.instance.updateNode(this.serialize(realNode));
|
|
27377
|
+
});
|
|
27378
|
+
}
|
|
27379
|
+
updateSelectionHandlers(node) {
|
|
27380
|
+
const stage = this.instance.getStage();
|
|
27381
|
+
const scale = stage.scaleX();
|
|
27382
|
+
const fromPoint = node.getAttrs().fromPoint;
|
|
27383
|
+
const toPoint = node.getAttrs().toPoint;
|
|
27384
|
+
const moveToCircle = node.findOne(`#moveToCircle-${node.getAttrs().id}`);
|
|
27385
|
+
const crosshairFrom = node.findOne(`#crosshairFrom-${node.getAttrs().id}`);
|
|
27386
|
+
const moveFromCircle = node.findOne(`#moveFromCircle-${node.getAttrs().id}`);
|
|
27387
|
+
const crosshairTo = node.findOne(`#crosshairTo-${node.getAttrs().id}`);
|
|
27388
|
+
const moveSeparationRect = node.findOne(`#moveSeparationRect-${node.getAttrs().id}`);
|
|
27389
|
+
if (moveToCircle) moveToCircle.scale({
|
|
27390
|
+
x: 1 / scale,
|
|
27391
|
+
y: 1 / scale
|
|
27392
|
+
});
|
|
27393
|
+
if (crosshairFrom) crosshairFrom.scale({
|
|
27394
|
+
x: 1 / scale,
|
|
27395
|
+
y: 1 / scale
|
|
27396
|
+
});
|
|
27397
|
+
if (moveFromCircle) moveFromCircle.scale({
|
|
27398
|
+
x: 1 / scale,
|
|
27399
|
+
y: 1 / scale
|
|
27400
|
+
});
|
|
27401
|
+
if (crosshairTo) crosshairTo.scale({
|
|
27402
|
+
x: 1 / scale,
|
|
27403
|
+
y: 1 / scale
|
|
27404
|
+
});
|
|
27405
|
+
if (moveSeparationRect) {
|
|
27406
|
+
const measureText = node.findOne(`#measureText-${node.getAttrs().id}`);
|
|
27407
|
+
const angle = this.getAngle(fromPoint, toPoint);
|
|
27408
|
+
const textSize = measureText?.measureSize(measureText.text());
|
|
27409
|
+
const separation = node.getAttrs().separation ?? 100;
|
|
27410
|
+
const orientation = node.getAttrs().orientation ?? -1;
|
|
27411
|
+
const fromPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, separation * orientation);
|
|
27412
|
+
const toPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, separation * orientation);
|
|
27413
|
+
const pointMidMeasure = this.pointFromMid(fromPerp.left, toPerp.left, 0, false);
|
|
27414
|
+
const isTextBiggerThanMeasureSpace = (textSize?.width ?? 0) > this.distanceBetweenPoints(fromPerp.left, toPerp.left);
|
|
27415
|
+
const separatorPoint = this.perpendicularPoint(fromPerp.left, toPerp.left, pointMidMeasure, (isTextBiggerThanMeasureSpace ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * (textSize?.height ?? 0) * orientation);
|
|
27416
|
+
moveSeparationRect.x(separatorPoint.left.x);
|
|
27417
|
+
moveSeparationRect.y(separatorPoint.left.y);
|
|
27418
|
+
moveSeparationRect.rotation(angle);
|
|
27419
|
+
moveSeparationRect.scale({
|
|
27420
|
+
x: 1 / scale,
|
|
27421
|
+
y: 1 / scale
|
|
27422
|
+
});
|
|
27423
|
+
}
|
|
27424
|
+
}
|
|
27425
|
+
destroySelectionHandlers(node) {
|
|
27426
|
+
const moveToCircle = node.findOne(`#moveToCircle-${node.getAttrs().id}`);
|
|
27427
|
+
const crosshairFrom = node.findOne(`#crosshairFrom-${node.getAttrs().id}`);
|
|
27428
|
+
const moveFromCircle = node.findOne(`#moveFromCircle-${node.getAttrs().id}`);
|
|
27429
|
+
const crosshairTo = node.findOne(`#crosshairTo-${node.getAttrs().id}`);
|
|
27430
|
+
const moveSeparationRect = node.findOne(`#moveSeparationRect-${node.getAttrs().id}`);
|
|
27431
|
+
if (moveToCircle) moveToCircle.destroy();
|
|
27432
|
+
if (crosshairFrom) crosshairFrom.destroy();
|
|
27433
|
+
if (moveFromCircle) moveFromCircle.destroy();
|
|
27434
|
+
if (crosshairTo) crosshairTo.destroy();
|
|
27435
|
+
if (moveSeparationRect) moveSeparationRect.destroy();
|
|
27436
|
+
}
|
|
27437
|
+
pointFromMid(from, to, distance, towardsSecond = true) {
|
|
27438
|
+
const mx = (from.x + to.x) / 2;
|
|
27439
|
+
const my = (from.y + to.y) / 2;
|
|
27440
|
+
const dx = to.x - from.x;
|
|
27441
|
+
const dy = to.y - from.y;
|
|
27442
|
+
const len = Math.hypot(dx, dy);
|
|
27443
|
+
const ux = dx / len;
|
|
27444
|
+
const uy = dy / len;
|
|
27445
|
+
const sign = towardsSecond ? 1 : -1;
|
|
27446
|
+
return {
|
|
27447
|
+
x: mx + ux * distance * sign,
|
|
27448
|
+
y: my + uy * distance * sign
|
|
27449
|
+
};
|
|
27450
|
+
}
|
|
27451
|
+
angleBetweenPoints(from, to) {
|
|
27452
|
+
return Math.atan2(to.y - from.y, to.x - from.x) * 180 / Math.PI;
|
|
27453
|
+
}
|
|
27454
|
+
midPoint(from, to) {
|
|
27455
|
+
return {
|
|
27456
|
+
x: (from.x + to.x) / 2,
|
|
27457
|
+
y: (from.y + to.y) / 2
|
|
27458
|
+
};
|
|
27459
|
+
}
|
|
27460
|
+
perpendicularPoint(from, to, point, distance) {
|
|
27461
|
+
const dx = to.x - from.x;
|
|
27462
|
+
const dy = to.y - from.y;
|
|
27463
|
+
const perpX = -dy;
|
|
27464
|
+
const perpY = dx;
|
|
27465
|
+
const len = Math.hypot(perpX, perpY);
|
|
27466
|
+
const ux = perpX / len;
|
|
27467
|
+
const uy = perpY / len;
|
|
27468
|
+
return {
|
|
27469
|
+
left: {
|
|
27470
|
+
x: point.x + ux * distance,
|
|
27471
|
+
y: point.y + uy * distance
|
|
27472
|
+
},
|
|
27473
|
+
right: {
|
|
27474
|
+
x: point.x - ux * distance,
|
|
27475
|
+
y: point.y - uy * distance
|
|
27476
|
+
}
|
|
27477
|
+
};
|
|
27478
|
+
}
|
|
27479
|
+
distanceBetweenPoints(from, to) {
|
|
27480
|
+
return Math.hypot(to.x - from.x, to.y - from.y);
|
|
27481
|
+
}
|
|
27482
|
+
onUpdate(nodeInstance, nextProps) {
|
|
27483
|
+
nodeInstance.setAttrs({ ...nextProps });
|
|
27484
|
+
const measure = nodeInstance;
|
|
27485
|
+
const fromPoint = nextProps.fromPoint;
|
|
27486
|
+
const toPoint = nextProps.toPoint;
|
|
27487
|
+
const separation = nextProps.separation ?? 100;
|
|
27488
|
+
const orientation = nextProps.orientation ?? -1;
|
|
27489
|
+
const textPadding = nextProps.textPadding ?? 20;
|
|
27490
|
+
const separationPadding = nextProps.separationPadding ?? 30;
|
|
27491
|
+
const unit = nextProps.unit ?? "cms";
|
|
27492
|
+
const unitPerPixel = nextProps.unitPerPixel ?? 100;
|
|
27493
|
+
const fromFinalPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, (separation + separationPadding) * orientation);
|
|
27494
|
+
const linePerpFrom = measure.findOne(`#linePerpFrom-${nextProps.id}`);
|
|
27495
|
+
linePerpFrom?.points([
|
|
27496
|
+
fromPoint.x,
|
|
27497
|
+
fromPoint.y,
|
|
27498
|
+
fromFinalPerp.left.x,
|
|
27499
|
+
fromFinalPerp.left.y
|
|
27500
|
+
]);
|
|
27501
|
+
const toFinalPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, (separation + separationPadding) * orientation);
|
|
27502
|
+
const linePerpTo = measure.findOne(`#linePerpTo-${nextProps.id}`);
|
|
27503
|
+
linePerpTo?.points([
|
|
27504
|
+
toPoint.x,
|
|
27505
|
+
toPoint.y,
|
|
27506
|
+
toFinalPerp.left.x,
|
|
27507
|
+
toFinalPerp.left.y
|
|
27508
|
+
]);
|
|
27509
|
+
const fromPerp = this.perpendicularPoint(fromPoint, toPoint, fromPoint, separation * orientation);
|
|
27510
|
+
const fromCircle = measure.findOne(`#fromCircle-${nextProps.id}`);
|
|
27511
|
+
fromCircle?.position({
|
|
27512
|
+
x: fromPerp.left.x,
|
|
27513
|
+
y: fromPerp.left.y
|
|
27514
|
+
});
|
|
27515
|
+
const toPerp = this.perpendicularPoint(fromPoint, toPoint, toPoint, separation * orientation);
|
|
27516
|
+
const toCircle = measure.findOne(`#toCircle-${nextProps.id}`);
|
|
27517
|
+
toCircle?.position({
|
|
27518
|
+
x: toPerp.left.x,
|
|
27519
|
+
y: toPerp.left.y
|
|
27520
|
+
});
|
|
27521
|
+
const midPoint = this.midPoint(fromPerp.left, toPerp.left);
|
|
27522
|
+
const distance = this.distanceBetweenPoints(fromPoint, toPoint);
|
|
27523
|
+
const units = distance / unitPerPixel;
|
|
27524
|
+
const text = `${units.toFixed(2)} ${unit}`;
|
|
27525
|
+
const measureText = measure.findOne(`#measureText-${nextProps.id}`);
|
|
27526
|
+
const angle = this.getAngle(fromPoint, toPoint);
|
|
27527
|
+
const textSize = measureText.measureSize(text);
|
|
27528
|
+
const textOffsetX = textSize.width / 2;
|
|
27529
|
+
measureText?.text(text);
|
|
27530
|
+
measureText?.rotation(angle);
|
|
27531
|
+
measureText?.x(midPoint.x);
|
|
27532
|
+
measureText?.y(midPoint.y);
|
|
27533
|
+
measureText?.offsetX(textSize.width / 2);
|
|
27534
|
+
measureText?.offsetY(textSize.height / 2);
|
|
27535
|
+
if (textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left)) {
|
|
27536
|
+
const perpPointTextMid = this.perpendicularPoint(fromPerp.left, toPerp.left, midPoint, textSize.height * orientation);
|
|
27537
|
+
measureText.x(perpPointTextMid.left.x);
|
|
27538
|
+
measureText.y(perpPointTextMid.left.y);
|
|
27539
|
+
}
|
|
27540
|
+
const pointLeftText = this.pointFromMid(fromPerp.left, toPerp.left, textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left) ? 0 : textOffsetX + textPadding, false);
|
|
27541
|
+
const pointRightText = this.pointFromMid(fromPerp.left, toPerp.left, textSize.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left) ? 0 : textOffsetX + textPadding, true);
|
|
27542
|
+
const lineLeft = measure.findOne(`#lineLeft-${nextProps.id}`);
|
|
27543
|
+
lineLeft?.points([
|
|
27544
|
+
fromPerp.left.x,
|
|
27545
|
+
fromPerp.left.y,
|
|
27546
|
+
pointLeftText.x,
|
|
27547
|
+
pointLeftText.y
|
|
27548
|
+
]);
|
|
27549
|
+
const lineRight = measure.findOne(`#lineRight-${nextProps.id}`);
|
|
27550
|
+
lineRight?.points([
|
|
27551
|
+
pointRightText.x,
|
|
27552
|
+
pointRightText.y,
|
|
27553
|
+
toPerp.left.x,
|
|
27554
|
+
toPerp.left.y
|
|
27555
|
+
]);
|
|
27556
|
+
const pointMidMeasure = this.pointFromMid(fromPerp.left, toPerp.left, 0, false);
|
|
27557
|
+
const crosshairFrom = measure.findOne(`#crosshairFrom-${measure.getAttrs().id}`);
|
|
27558
|
+
if (crosshairFrom) {
|
|
27559
|
+
crosshairFrom.x(fromPoint.x);
|
|
27560
|
+
crosshairFrom.y(fromPoint.y);
|
|
27561
|
+
crosshairFrom.rotation(angle);
|
|
27562
|
+
}
|
|
27563
|
+
const crosshairTo = measure.findOne(`#crosshairTo-${measure.getAttrs().id}`);
|
|
27564
|
+
if (crosshairTo) {
|
|
27565
|
+
crosshairTo.x(toPoint.x);
|
|
27566
|
+
crosshairTo.y(toPoint.y);
|
|
27567
|
+
crosshairTo.rotation(angle);
|
|
27568
|
+
}
|
|
27569
|
+
const moveSeparationRect = measure.findOne(`#moveSeparationRect-${measure.getAttrs().id}`);
|
|
27570
|
+
if (moveSeparationRect) {
|
|
27571
|
+
const textSize$1 = measureText.measureSize(measureText.text());
|
|
27572
|
+
const isTextBiggerThanMeasureSpace = textSize$1.width > this.distanceBetweenPoints(fromPerp.left, toPerp.left);
|
|
27573
|
+
const separatorPoint = this.perpendicularPoint(fromPerp.left, toPerp.left, pointMidMeasure, (isTextBiggerThanMeasureSpace ? HANDLE_NO_SPACE_SEPARATION_MULTIPLIER : HANDLE_SPACE_SEPARATION_MULTIPLIER) * textSize$1.height * orientation);
|
|
27574
|
+
moveSeparationRect.x(separatorPoint.left.x);
|
|
27575
|
+
moveSeparationRect.y(separatorPoint.left.y);
|
|
27576
|
+
moveSeparationRect.rotation(angle);
|
|
27577
|
+
}
|
|
27578
|
+
}
|
|
27579
|
+
projectPointToLine(fromPoint, toPoint, pointToProject) {
|
|
27580
|
+
const dx = toPoint.x - fromPoint.x;
|
|
27581
|
+
const dy = toPoint.y - fromPoint.y;
|
|
27582
|
+
const lenSq = dx * dx + dy * dy;
|
|
27583
|
+
const t = ((pointToProject.x - fromPoint.x) * dx + (pointToProject.y - fromPoint.y) * dy) / lenSq;
|
|
27584
|
+
return {
|
|
27585
|
+
x: fromPoint.x + t * dx,
|
|
27586
|
+
y: fromPoint.y + t * dy,
|
|
27587
|
+
t,
|
|
27588
|
+
flipped: t < 0
|
|
27589
|
+
};
|
|
27590
|
+
}
|
|
27591
|
+
buildCrosshair(name, node, point, angle) {
|
|
27592
|
+
const props = node.getAttrs();
|
|
27593
|
+
const crosshairSize = 60;
|
|
27594
|
+
const crosshair = new Konva.Group({
|
|
27595
|
+
id: `${name}-${props.id}`,
|
|
27596
|
+
x: point.x,
|
|
27597
|
+
y: point.y,
|
|
27598
|
+
rotation: angle,
|
|
27599
|
+
visible: false,
|
|
27600
|
+
listening: false,
|
|
27601
|
+
draggable: false
|
|
27602
|
+
});
|
|
27603
|
+
const horizontalLineFrom = new Konva.Line({
|
|
27604
|
+
points: [
|
|
27605
|
+
0,
|
|
27606
|
+
0,
|
|
27607
|
+
crosshairSize,
|
|
27608
|
+
0
|
|
27609
|
+
],
|
|
27610
|
+
x: -1 * (crosshairSize / 2),
|
|
27611
|
+
y: 0,
|
|
27612
|
+
stroke: "#CC0000",
|
|
27613
|
+
strokeWidth: 1
|
|
27614
|
+
});
|
|
27615
|
+
const verticalLineFrom = new Konva.Line({
|
|
27616
|
+
points: [
|
|
27617
|
+
0,
|
|
27618
|
+
0,
|
|
27619
|
+
0,
|
|
27620
|
+
crosshairSize
|
|
27621
|
+
],
|
|
27622
|
+
x: 0,
|
|
27623
|
+
y: -1 * crosshairSize / 2,
|
|
27624
|
+
stroke: "#CC0000",
|
|
27625
|
+
strokeWidth: 1
|
|
27626
|
+
});
|
|
27627
|
+
crosshair.add(horizontalLineFrom);
|
|
27628
|
+
crosshair.add(verticalLineFrom);
|
|
27629
|
+
return crosshair;
|
|
27630
|
+
}
|
|
27631
|
+
movePointPerpendicularToLine(fromPoint, toPoint, point, distance) {
|
|
27632
|
+
const dx = toPoint.x - fromPoint.x;
|
|
27633
|
+
const dy = toPoint.y - fromPoint.y;
|
|
27634
|
+
const len = Math.hypot(dx, dy);
|
|
27635
|
+
const ux = -dy / len;
|
|
27636
|
+
const uy = dx / len;
|
|
27637
|
+
return {
|
|
27638
|
+
x: point.x + ux * distance,
|
|
27639
|
+
y: point.y + uy * distance
|
|
27640
|
+
};
|
|
27641
|
+
}
|
|
27642
|
+
getAngle(fromPoint, toPoint) {
|
|
27643
|
+
let angle = this.angleBetweenPoints(fromPoint, toPoint);
|
|
27644
|
+
if (fromPoint.x > toPoint.x) angle = angle + 180;
|
|
27645
|
+
return angle;
|
|
27646
|
+
}
|
|
27647
|
+
flipOrientation(node) {
|
|
27648
|
+
this.destroySelectionHandlers(node);
|
|
27649
|
+
const currentOrientation = node.getAttrs().orientation ?? -1;
|
|
27650
|
+
node.setAttrs({ orientation: currentOrientation * -1 });
|
|
27651
|
+
this.instance.updateNode(this.serialize(node));
|
|
27652
|
+
this.createSelectionHandlers(node);
|
|
27653
|
+
this.updateSelectionHandlers(node);
|
|
27654
|
+
}
|
|
27655
|
+
getNormalizedDistance(node) {
|
|
27656
|
+
const stage = this.instance.getStage();
|
|
27657
|
+
const scale = stage.scaleX();
|
|
27658
|
+
const fromCircle = node.findOne(`#fromCircle-${node.getAttrs().id}`);
|
|
27659
|
+
const toCircle = node.findOne(`#toCircle-${node.getAttrs().id}`);
|
|
27660
|
+
if (fromCircle && toCircle) {
|
|
27661
|
+
const fromPoint = fromCircle.getAbsolutePosition();
|
|
27662
|
+
const toPoint = toCircle.getAbsolutePosition();
|
|
27663
|
+
return Math.hypot(toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) / scale;
|
|
27664
|
+
}
|
|
27665
|
+
return 0;
|
|
27666
|
+
}
|
|
27667
|
+
};
|
|
27668
|
+
|
|
26960
27669
|
//#endregion
|
|
26961
27670
|
//#region src/plugins/stage-zoom/constants.ts
|
|
26962
27671
|
const WEAVE_STAGE_ZOOM_TYPE = {
|
|
@@ -27192,10 +27901,11 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
27192
27901
|
this.setZoom(this.config.zoomSteps[this.defaultStep]);
|
|
27193
27902
|
return;
|
|
27194
27903
|
}
|
|
27904
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
27195
27905
|
const stageWidth = stage.width();
|
|
27196
27906
|
const stageHeight = stage.height();
|
|
27197
|
-
const scaleX = (stageWidth - this.config.fitToScreen.padding * 2) / bounds.width;
|
|
27198
|
-
const scaleY = (stageHeight - this.config.fitToScreen.padding * 2) / bounds.height;
|
|
27907
|
+
const scaleX = (stageWidth - this.config.fitToScreen.padding * 2 / upscaleScale) / bounds.width;
|
|
27908
|
+
const scaleY = (stageHeight - this.config.fitToScreen.padding * 2 / upscaleScale) / bounds.height;
|
|
27199
27909
|
const scale = Math.min(scaleX, scaleY);
|
|
27200
27910
|
const offsetX = bounds.x + bounds.width / 2;
|
|
27201
27911
|
const offsetY = bounds.y + bounds.height / 2;
|
|
@@ -27220,10 +27930,10 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
27220
27930
|
if (box.width === 0 || box.height === 0) return;
|
|
27221
27931
|
const container = stage.container();
|
|
27222
27932
|
const scale = stage.scale();
|
|
27223
|
-
const
|
|
27224
|
-
const
|
|
27225
|
-
const visibleStageWidth =
|
|
27226
|
-
const visibleStageHeight =
|
|
27933
|
+
const containerWidth = container.clientWidth;
|
|
27934
|
+
const containerHeight = container.clientHeight;
|
|
27935
|
+
const visibleStageWidth = containerWidth / scale.x;
|
|
27936
|
+
const visibleStageHeight = containerHeight / scale.y;
|
|
27227
27937
|
const fitsInView = box.width + this.config.fitToSelection.padding * 2 <= visibleStageWidth && box.height + this.config.fitToSelection.padding * 2 <= visibleStageHeight;
|
|
27228
27938
|
const selectionCenter = {
|
|
27229
27939
|
x: box.x + box.width / 2,
|
|
@@ -27231,8 +27941,8 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
27231
27941
|
};
|
|
27232
27942
|
if (smartZoom && fitsInView) {
|
|
27233
27943
|
const newPosition = {
|
|
27234
|
-
x:
|
|
27235
|
-
y:
|
|
27944
|
+
x: containerWidth / 2 - selectionCenter.x * scale.x,
|
|
27945
|
+
y: containerHeight / 2 - selectionCenter.y * scale.y
|
|
27236
27946
|
};
|
|
27237
27947
|
stage.position(newPosition);
|
|
27238
27948
|
return;
|
|
@@ -27242,12 +27952,13 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
27242
27952
|
x: 0,
|
|
27243
27953
|
y: 0
|
|
27244
27954
|
});
|
|
27955
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
27245
27956
|
const stageBox = {
|
|
27246
27957
|
width: stage.width(),
|
|
27247
27958
|
height: stage.height()
|
|
27248
27959
|
};
|
|
27249
|
-
const availableScreenWidth = stageBox.width - 2 * this.config.fitToSelection.padding;
|
|
27250
|
-
const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding;
|
|
27960
|
+
const availableScreenWidth = stageBox.width - 2 * this.config.fitToSelection.padding / upscaleScale;
|
|
27961
|
+
const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding / upscaleScale;
|
|
27251
27962
|
const scaleX = availableScreenWidth / box.width;
|
|
27252
27963
|
const scaleY = availableScreenHeight / box.height;
|
|
27253
27964
|
const finalScale = Math.min(scaleX, scaleY);
|
|
@@ -30709,6 +31420,16 @@ var WeaveVideoToolAction = class extends WeaveAction {
|
|
|
30709
31420
|
}
|
|
30710
31421
|
};
|
|
30711
31422
|
|
|
31423
|
+
//#endregion
|
|
31424
|
+
//#region src/actions/measure-tool/constants.ts
|
|
31425
|
+
const MEASURE_TOOL_ACTION_NAME = "measureTool";
|
|
31426
|
+
const MEASURE_TOOL_STATE = {
|
|
31427
|
+
["IDLE"]: "idle",
|
|
31428
|
+
["SET_FROM"]: "set_from",
|
|
31429
|
+
["SET_TO"]: "set_to",
|
|
31430
|
+
["FINISHED"]: "finished"
|
|
31431
|
+
};
|
|
31432
|
+
|
|
30712
31433
|
//#endregion
|
|
30713
31434
|
//#region src/plugins/stage-grid/stage-grid.ts
|
|
30714
31435
|
var WeaveStageGridPlugin = class extends WeavePlugin {
|
|
@@ -31424,11 +32145,12 @@ var WeaveStageResizePlugin = class extends WeavePlugin {
|
|
|
31424
32145
|
const containerParent = stage.container().parentNode;
|
|
31425
32146
|
if (!this.enabled) return;
|
|
31426
32147
|
if (containerParent) {
|
|
31427
|
-
const
|
|
31428
|
-
|
|
31429
|
-
|
|
31430
|
-
|
|
31431
|
-
|
|
32148
|
+
const upscaleScale = stage.getAttr("upscaleScale");
|
|
32149
|
+
if (upscaleScale === 1) {
|
|
32150
|
+
stage.width(containerParent.clientWidth);
|
|
32151
|
+
stage.height(containerParent.clientHeight);
|
|
32152
|
+
}
|
|
32153
|
+
setupUpscaleStage(this.instance, stage);
|
|
31432
32154
|
const plugins = this.instance.getPlugins();
|
|
31433
32155
|
for (const pluginId of Object.keys(plugins)) {
|
|
31434
32156
|
const pluginInstance = plugins[pluginId];
|
|
@@ -31437,11 +32159,14 @@ var WeaveStageResizePlugin = class extends WeavePlugin {
|
|
|
31437
32159
|
}
|
|
31438
32160
|
}
|
|
31439
32161
|
onInit() {
|
|
31440
|
-
|
|
32162
|
+
const throttledResize = (0, import_lodash.throttle)(() => {
|
|
31441
32163
|
this.resizeStage();
|
|
32164
|
+
}, 100);
|
|
32165
|
+
window.addEventListener("resize", () => {
|
|
32166
|
+
throttledResize();
|
|
31442
32167
|
});
|
|
31443
32168
|
const resizeObserver = new ResizeObserver(() => {
|
|
31444
|
-
|
|
32169
|
+
throttledResize();
|
|
31445
32170
|
});
|
|
31446
32171
|
const stage = this.instance.getStage();
|
|
31447
32172
|
resizeObserver.observe(stage.container());
|
|
@@ -32093,7 +32818,9 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
|
|
|
32093
32818
|
const utilityLayer = this.instance.getUtilityLayer();
|
|
32094
32819
|
if (!this.enabled) return;
|
|
32095
32820
|
if (!utilityLayer) return;
|
|
32821
|
+
if (e.target.getAttr("edgeSnappingDisableOnDrag")) return;
|
|
32096
32822
|
const { targetNode: node, skipNodes } = getTargetAndSkipNodes(this.instance, e);
|
|
32823
|
+
if (node?.getAttr("edgeSnappingDisable")) return;
|
|
32097
32824
|
if (typeof node === "undefined") return;
|
|
32098
32825
|
const nodeParent = this.getSelectionParentNode(node);
|
|
32099
32826
|
if (nodeParent === null) return;
|
|
@@ -33158,5 +33885,271 @@ var WeaveStageKeyboardMovePlugin = class extends WeavePlugin {
|
|
|
33158
33885
|
};
|
|
33159
33886
|
|
|
33160
33887
|
//#endregion
|
|
33161
|
-
|
|
33888
|
+
//#region src/actions/measure-tool/measure-tool.ts
|
|
33889
|
+
var WeaveMeasureToolAction = class extends WeaveAction {
|
|
33890
|
+
initialized = false;
|
|
33891
|
+
initialCursor = null;
|
|
33892
|
+
color = "#FF3366";
|
|
33893
|
+
onPropsChange = void 0;
|
|
33894
|
+
onInit = void 0;
|
|
33895
|
+
constructor() {
|
|
33896
|
+
super();
|
|
33897
|
+
this.initialized = false;
|
|
33898
|
+
this.state = MEASURE_TOOL_STATE.IDLE;
|
|
33899
|
+
this.measureId = null;
|
|
33900
|
+
this.container = void 0;
|
|
33901
|
+
this.clickPoint = null;
|
|
33902
|
+
this.crosshairCursor = null;
|
|
33903
|
+
this.firstPoint = null;
|
|
33904
|
+
this.measureLine = null;
|
|
33905
|
+
this.measureContainer = void 0;
|
|
33906
|
+
this.props = this.initProps();
|
|
33907
|
+
}
|
|
33908
|
+
getName() {
|
|
33909
|
+
return MEASURE_TOOL_ACTION_NAME;
|
|
33910
|
+
}
|
|
33911
|
+
initProps() {
|
|
33912
|
+
return {
|
|
33913
|
+
orientation: -1,
|
|
33914
|
+
separation: 0,
|
|
33915
|
+
textPadding: 20,
|
|
33916
|
+
separationPadding: 0,
|
|
33917
|
+
unit: "cms",
|
|
33918
|
+
unitPerPixel: 10,
|
|
33919
|
+
color: this.color,
|
|
33920
|
+
strokeEnabled: false
|
|
33921
|
+
};
|
|
33922
|
+
}
|
|
33923
|
+
setupEvents() {
|
|
33924
|
+
const stage = this.instance.getStage();
|
|
33925
|
+
window.addEventListener("keydown", (e) => {
|
|
33926
|
+
if (e.code === "Escape" && this.instance.getActiveAction() === MEASURE_TOOL_ACTION_NAME) this.cancelAction();
|
|
33927
|
+
});
|
|
33928
|
+
stage.on("pointermove", () => {
|
|
33929
|
+
if (this.state === MEASURE_TOOL_STATE.IDLE) return;
|
|
33930
|
+
if (this.state === MEASURE_TOOL_STATE.SET_TO) {
|
|
33931
|
+
const finalPoint = this.defineFinalPoint();
|
|
33932
|
+
if (this.measureLine && this.firstPoint) this.measureLine.points([
|
|
33933
|
+
0,
|
|
33934
|
+
0,
|
|
33935
|
+
finalPoint.x,
|
|
33936
|
+
finalPoint.y
|
|
33937
|
+
]);
|
|
33938
|
+
}
|
|
33939
|
+
this.setCursor();
|
|
33940
|
+
});
|
|
33941
|
+
stage.on("pointerclick", () => {
|
|
33942
|
+
if (this.state === MEASURE_TOOL_STATE.IDLE) return;
|
|
33943
|
+
if (this.state === MEASURE_TOOL_STATE.SET_FROM) {
|
|
33944
|
+
this.handleSetFrom();
|
|
33945
|
+
return;
|
|
33946
|
+
}
|
|
33947
|
+
if (this.state === MEASURE_TOOL_STATE.SET_TO) this.handleSetTo();
|
|
33948
|
+
});
|
|
33949
|
+
this.initialized = true;
|
|
33950
|
+
}
|
|
33951
|
+
setState(state) {
|
|
33952
|
+
this.state = state;
|
|
33953
|
+
}
|
|
33954
|
+
addMeasure() {
|
|
33955
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
33956
|
+
if (selectionPlugin) {
|
|
33957
|
+
const tr = selectionPlugin.getTransformer();
|
|
33958
|
+
tr.hide();
|
|
33959
|
+
}
|
|
33960
|
+
this.buildCrosshairCursor();
|
|
33961
|
+
this.setCursor();
|
|
33962
|
+
this.setFocusStage();
|
|
33963
|
+
this.clickPoint = null;
|
|
33964
|
+
this.setState(MEASURE_TOOL_STATE.SET_FROM);
|
|
33965
|
+
}
|
|
33966
|
+
buildCrosshairCursor() {
|
|
33967
|
+
const stage = this.instance.getStage();
|
|
33968
|
+
const { mousePoint } = this.instance.getMousePointer();
|
|
33969
|
+
this.crosshairCursor = new Konva.Group({
|
|
33970
|
+
x: mousePoint?.x,
|
|
33971
|
+
y: mousePoint?.y,
|
|
33972
|
+
scale: {
|
|
33973
|
+
x: 1 / stage.scaleX(),
|
|
33974
|
+
y: 1 / stage.scaleY()
|
|
33975
|
+
},
|
|
33976
|
+
listening: false,
|
|
33977
|
+
draggable: false
|
|
33978
|
+
});
|
|
33979
|
+
const crosshairSize = 60;
|
|
33980
|
+
const lineH = new Konva.Line({
|
|
33981
|
+
points: [
|
|
33982
|
+
0,
|
|
33983
|
+
0,
|
|
33984
|
+
crosshairSize,
|
|
33985
|
+
0
|
|
33986
|
+
],
|
|
33987
|
+
x: -1 * (crosshairSize / 2),
|
|
33988
|
+
y: 0,
|
|
33989
|
+
stroke: this.color,
|
|
33990
|
+
strokeWidth: 1
|
|
33991
|
+
});
|
|
33992
|
+
const lineV = new Konva.Line({
|
|
33993
|
+
points: [
|
|
33994
|
+
0,
|
|
33995
|
+
0,
|
|
33996
|
+
0,
|
|
33997
|
+
crosshairSize
|
|
33998
|
+
],
|
|
33999
|
+
x: 0,
|
|
34000
|
+
y: -1 * crosshairSize / 2,
|
|
34001
|
+
stroke: this.color,
|
|
34002
|
+
strokeWidth: 1
|
|
34003
|
+
});
|
|
34004
|
+
this.crosshairCursor.add(lineH);
|
|
34005
|
+
this.crosshairCursor.add(lineV);
|
|
34006
|
+
this.instance.getStage().on("pointermove.measureTool", () => {
|
|
34007
|
+
const pos = this.instance.getStage().getRelativePointerPosition();
|
|
34008
|
+
if (this.crosshairCursor && pos) {
|
|
34009
|
+
this.crosshairCursor.position(pos);
|
|
34010
|
+
this.crosshairCursor.moveToTop();
|
|
34011
|
+
}
|
|
34012
|
+
});
|
|
34013
|
+
this.instance.getUtilityLayer()?.add(this.crosshairCursor);
|
|
34014
|
+
}
|
|
34015
|
+
handleSetFrom() {
|
|
34016
|
+
const stage = this.instance.getStage();
|
|
34017
|
+
const realMousePoint = stage.getRelativePointerPosition();
|
|
34018
|
+
const { container, measureContainer } = this.instance.getMousePointer();
|
|
34019
|
+
this.clickPoint = realMousePoint;
|
|
34020
|
+
this.container = container;
|
|
34021
|
+
this.measureContainer = measureContainer;
|
|
34022
|
+
this.firstPoint = new Konva.Circle({
|
|
34023
|
+
x: this.clickPoint?.x ?? 0,
|
|
34024
|
+
y: this.clickPoint?.y ?? 0,
|
|
34025
|
+
radius: 6,
|
|
34026
|
+
fill: "#FFFFFF",
|
|
34027
|
+
stroke: "#000000",
|
|
34028
|
+
scale: {
|
|
34029
|
+
x: 1 / stage.scaleX(),
|
|
34030
|
+
y: 1 / stage.scaleY()
|
|
34031
|
+
},
|
|
34032
|
+
strokeWidth: 1,
|
|
34033
|
+
listening: false,
|
|
34034
|
+
draggable: false
|
|
34035
|
+
});
|
|
34036
|
+
this.measureLine = new Konva.Line({
|
|
34037
|
+
x: this.clickPoint?.x,
|
|
34038
|
+
y: this.clickPoint?.y,
|
|
34039
|
+
points: [0, 0],
|
|
34040
|
+
scale: {
|
|
34041
|
+
x: 1 / stage.scaleX(),
|
|
34042
|
+
y: 1 / stage.scaleY()
|
|
34043
|
+
},
|
|
34044
|
+
stroke: this.color,
|
|
34045
|
+
dashed: [4, 4],
|
|
34046
|
+
strokeWidth: 1,
|
|
34047
|
+
listening: false,
|
|
34048
|
+
draggable: false
|
|
34049
|
+
});
|
|
34050
|
+
this.instance.getUtilityLayer()?.add(this.firstPoint);
|
|
34051
|
+
this.instance.getUtilityLayer()?.add(this.measureLine);
|
|
34052
|
+
this.firstPoint.moveToTop();
|
|
34053
|
+
this.measureLine.moveToBottom();
|
|
34054
|
+
this.setState(MEASURE_TOOL_STATE.SET_TO);
|
|
34055
|
+
}
|
|
34056
|
+
handleSetTo() {
|
|
34057
|
+
const stage = this.instance.getStage();
|
|
34058
|
+
const realMousePoint = stage.getRelativePointerPosition();
|
|
34059
|
+
const { container } = this.instance.getMousePointer();
|
|
34060
|
+
this.clickPoint = realMousePoint;
|
|
34061
|
+
this.container = container;
|
|
34062
|
+
const nodeHandler = this.instance.getNodeHandler("measure");
|
|
34063
|
+
if (nodeHandler && this.firstPoint) {
|
|
34064
|
+
this.measureId = v4_default();
|
|
34065
|
+
const node = nodeHandler.create(this.measureId, {
|
|
34066
|
+
...this.props,
|
|
34067
|
+
id: this.measureId,
|
|
34068
|
+
x: 0,
|
|
34069
|
+
y: 0,
|
|
34070
|
+
fromPoint: {
|
|
34071
|
+
x: this.firstPoint.x(),
|
|
34072
|
+
y: this.firstPoint.y()
|
|
34073
|
+
},
|
|
34074
|
+
toPoint: {
|
|
34075
|
+
x: this.clickPoint?.x ?? 0,
|
|
34076
|
+
y: this.clickPoint?.y ?? 0
|
|
34077
|
+
},
|
|
34078
|
+
draggable: true
|
|
34079
|
+
});
|
|
34080
|
+
this.instance.addOnceEventListener("onNodeRenderedAdded", (child) => {
|
|
34081
|
+
if (child.getAttrs().id === this.measureId) {
|
|
34082
|
+
if (typeof this.measureContainer !== "undefined" && this.measureContainer?.id() !== "mainLayer") {
|
|
34083
|
+
const nodeInstance = this.instance.getMainLayer()?.findOne(`#${this.measureId}`);
|
|
34084
|
+
const stage$1 = this.instance.getStage();
|
|
34085
|
+
let realContainer = this.measureContainer;
|
|
34086
|
+
if (realContainer?.getAttrs().nodeId !== void 0) realContainer = stage$1.findOne(`#${realContainer?.getAttrs().nodeId}`);
|
|
34087
|
+
if (nodeInstance) moveNodeToContainer(this.instance, nodeInstance, realContainer);
|
|
34088
|
+
}
|
|
34089
|
+
this.cancelAction();
|
|
34090
|
+
}
|
|
34091
|
+
});
|
|
34092
|
+
this.instance.addNode(node, "mainLayer");
|
|
34093
|
+
this.setState(MEASURE_TOOL_STATE.FINISHED);
|
|
34094
|
+
}
|
|
34095
|
+
}
|
|
34096
|
+
trigger(cancelAction) {
|
|
34097
|
+
if (!this.instance) throw new Error("Instance not defined");
|
|
34098
|
+
if (!this.initialized) this.setupEvents();
|
|
34099
|
+
this.cancelAction = cancelAction;
|
|
34100
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
34101
|
+
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
34102
|
+
this.props = this.initProps();
|
|
34103
|
+
this.addMeasure();
|
|
34104
|
+
}
|
|
34105
|
+
cleanup() {
|
|
34106
|
+
const stage = this.instance.getStage();
|
|
34107
|
+
stage.container().style.cursor = "default";
|
|
34108
|
+
this.instance.getStage().off("pointermove.measureTool");
|
|
34109
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
34110
|
+
if (selectionPlugin) {
|
|
34111
|
+
const node = stage.findOne(`#${this.measureId}`);
|
|
34112
|
+
if (node) selectionPlugin.setSelectedNodes([node]);
|
|
34113
|
+
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
34114
|
+
}
|
|
34115
|
+
if (this.crosshairCursor) this.crosshairCursor.destroy();
|
|
34116
|
+
if (this.firstPoint) this.firstPoint.destroy();
|
|
34117
|
+
if (this.measureLine) this.measureLine.destroy();
|
|
34118
|
+
this.initialCursor = null;
|
|
34119
|
+
this.measureId = null;
|
|
34120
|
+
this.container = void 0;
|
|
34121
|
+
this.clickPoint = null;
|
|
34122
|
+
this.firstPoint = null;
|
|
34123
|
+
this.measureLine = null;
|
|
34124
|
+
this.setState(MEASURE_TOOL_STATE.IDLE);
|
|
34125
|
+
}
|
|
34126
|
+
setCursor() {
|
|
34127
|
+
const stage = this.instance.getStage();
|
|
34128
|
+
stage.container().style.cursor = "none";
|
|
34129
|
+
}
|
|
34130
|
+
setFocusStage() {
|
|
34131
|
+
const stage = this.instance.getStage();
|
|
34132
|
+
stage.container().tabIndex = 1;
|
|
34133
|
+
stage.container().blur();
|
|
34134
|
+
stage.container().focus();
|
|
34135
|
+
}
|
|
34136
|
+
defineFinalPoint() {
|
|
34137
|
+
if (!this.measureLine || !this.measureContainer) return {
|
|
34138
|
+
x: 0,
|
|
34139
|
+
y: 0
|
|
34140
|
+
};
|
|
34141
|
+
const stage = this.instance.getStage();
|
|
34142
|
+
const realMousePoint = this.instance.getStage().getRelativePointerPosition();
|
|
34143
|
+
const pos = {
|
|
34144
|
+
x: 0,
|
|
34145
|
+
y: 0
|
|
34146
|
+
};
|
|
34147
|
+
pos.x = ((realMousePoint?.x ?? 0) - this.measureLine.x()) * stage.scaleX();
|
|
34148
|
+
pos.y = ((realMousePoint?.y ?? 0) - this.measureLine.y()) * stage.scaleY();
|
|
34149
|
+
return pos;
|
|
34150
|
+
}
|
|
34151
|
+
};
|
|
34152
|
+
|
|
34153
|
+
//#endregion
|
|
34154
|
+
export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, setupCanvasBackend, setupSkiaBackend };
|
|
33162
34155
|
//# sourceMappingURL=sdk.node.js.map
|