@inditextech/weave-sdk 3.1.0 → 3.2.0-SNAPSHOT.84.1
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.js +900 -182
- package/dist/sdk.node.js +900 -182
- package/dist/types.d.ts +268 -38
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +900 -182
- package/dist/types.js.map +1 -1
- package/package.json +2 -2
package/dist/types.js
CHANGED
|
@@ -4,6 +4,7 @@ import { WEAVE_ASYNC_STATUS, WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_C
|
|
|
4
4
|
import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
|
|
5
5
|
import * as Y$1 from "yjs";
|
|
6
6
|
import * as Y from "yjs";
|
|
7
|
+
import "konva/lib/types";
|
|
7
8
|
|
|
8
9
|
//#region rolldown:runtime
|
|
9
10
|
var __create = Object.create;
|
|
@@ -18791,7 +18792,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
18791
18792
|
} else nodeHovered?.handleMouseout?.();
|
|
18792
18793
|
});
|
|
18793
18794
|
tr.on("mouseover", () => {
|
|
18794
|
-
|
|
18795
|
+
const nodesSelected = tr.nodes();
|
|
18796
|
+
if (nodesSelected.length === 1) {
|
|
18797
|
+
const node = nodesSelected[0];
|
|
18798
|
+
stage.container().style.cursor = node.defineMousePointer() ?? "grab";
|
|
18799
|
+
} else stage.container().style.cursor = "grab";
|
|
18795
18800
|
});
|
|
18796
18801
|
tr.on("mouseout", () => {
|
|
18797
18802
|
this.instance.getStage().handleMouseover?.();
|
|
@@ -19514,7 +19519,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19514
19519
|
if (areNodesSelected) {
|
|
19515
19520
|
stage.container().tabIndex = 1;
|
|
19516
19521
|
stage.container().focus();
|
|
19517
|
-
stage.container().style.cursor = "grab";
|
|
19522
|
+
stage.container().style.cursor = nodeTargeted.defineMousePointer() ?? "grab";
|
|
19518
19523
|
}
|
|
19519
19524
|
this.triggerSelectedNodesEvent();
|
|
19520
19525
|
}
|
|
@@ -19788,32 +19793,25 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
|
|
|
19788
19793
|
if (!this.enabled) return;
|
|
19789
19794
|
}
|
|
19790
19795
|
});
|
|
19791
|
-
if (catcher) {
|
|
19792
|
-
|
|
19793
|
-
|
|
19794
|
-
|
|
19795
|
-
|
|
19796
|
-
|
|
19797
|
-
|
|
19798
|
-
|
|
19799
|
-
|
|
19800
|
-
|
|
19801
|
-
|
|
19802
|
-
|
|
19803
|
-
|
|
19804
|
-
|
|
19805
|
-
|
|
19806
|
-
|
|
19807
|
-
|
|
19808
|
-
|
|
19809
|
-
|
|
19810
|
-
if (hasWeaveData) {
|
|
19811
|
-
this.handlePaste();
|
|
19812
|
-
return;
|
|
19813
|
-
}
|
|
19814
|
-
this.sendExternalPasteEvent(void 0, items);
|
|
19815
|
-
});
|
|
19816
|
-
}
|
|
19796
|
+
if (catcher) catcher.addEventListener("paste", async (e) => {
|
|
19797
|
+
e.preventDefault();
|
|
19798
|
+
let items = void 0;
|
|
19799
|
+
let hasWeaveData = false;
|
|
19800
|
+
if (!items) {
|
|
19801
|
+
if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
|
|
19802
|
+
}
|
|
19803
|
+
if (!items || items.length === 0) return;
|
|
19804
|
+
if (this.isClipboardAPIAvailable()) {
|
|
19805
|
+
const readText = await navigator.clipboard.readText();
|
|
19806
|
+
const continueToPaste = this.isWeaveData(readText);
|
|
19807
|
+
if (continueToPaste) hasWeaveData = true;
|
|
19808
|
+
}
|
|
19809
|
+
if (hasWeaveData) {
|
|
19810
|
+
this.handlePaste();
|
|
19811
|
+
return;
|
|
19812
|
+
}
|
|
19813
|
+
this.sendExternalPasteEvent(void 0, items);
|
|
19814
|
+
});
|
|
19817
19815
|
}
|
|
19818
19816
|
sendExternalPasteEvent(dataList, items) {
|
|
19819
19817
|
const stage = this.instance.getStage();
|
|
@@ -20198,6 +20196,11 @@ var WeaveNode = class {
|
|
|
20198
20196
|
node.handleMouseout = function() {};
|
|
20199
20197
|
node.handleSelectNode = function() {};
|
|
20200
20198
|
node.handleDeselectNode = function() {};
|
|
20199
|
+
node.defineMousePointer = () => {
|
|
20200
|
+
const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
|
|
20201
|
+
if (this.isSelecting() && selectedNodes.includes(node)) return "grab";
|
|
20202
|
+
return "pointer";
|
|
20203
|
+
};
|
|
20201
20204
|
node.canBeHovered = function() {
|
|
20202
20205
|
return true;
|
|
20203
20206
|
};
|
|
@@ -20684,12 +20687,12 @@ var WeaveNode = class {
|
|
|
20684
20687
|
}
|
|
20685
20688
|
if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !(isLocked || isMutexLocked) && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
|
|
20686
20689
|
showHover = true;
|
|
20687
|
-
stage.container().style.cursor = "pointer";
|
|
20690
|
+
stage.container().style.cursor = realNode?.defineMousePointer() ?? "pointer";
|
|
20688
20691
|
cancelBubble = true;
|
|
20689
20692
|
}
|
|
20690
20693
|
if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !(isLocked || isMutexLocked) && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
|
|
20691
20694
|
showHover = true;
|
|
20692
|
-
stage.container().style.cursor = "grab";
|
|
20695
|
+
stage.container().style.cursor = realNode?.defineMousePointer() ?? "grab";
|
|
20693
20696
|
cancelBubble = true;
|
|
20694
20697
|
}
|
|
20695
20698
|
if (!isTargetable) cancelBubble = true;
|
|
@@ -20875,6 +20878,9 @@ var WeaveAction = class {
|
|
|
20875
20878
|
hasAliases() {
|
|
20876
20879
|
return false;
|
|
20877
20880
|
}
|
|
20881
|
+
setForceExecution(forceExecution) {
|
|
20882
|
+
this.forceExecution = forceExecution;
|
|
20883
|
+
}
|
|
20878
20884
|
getAliases() {
|
|
20879
20885
|
return [];
|
|
20880
20886
|
}
|
|
@@ -21363,8 +21369,10 @@ var WeaveTargetingManager = class {
|
|
|
21363
21369
|
};
|
|
21364
21370
|
let measureContainer = mainLayer;
|
|
21365
21371
|
let container = mainLayer;
|
|
21372
|
+
const utilityLayer = this.instance.getUtilityLayer();
|
|
21373
|
+
if (utilityLayer) utilityLayer.visible(false);
|
|
21366
21374
|
const nodesSelection = this.instance.getPlugin("nodesSelection");
|
|
21367
|
-
if (nodesSelection) nodesSelection.
|
|
21375
|
+
if (nodesSelection) nodesSelection.getTransformer().visible(false);
|
|
21368
21376
|
const dummyRect = new Konva.Rect({
|
|
21369
21377
|
width: 10,
|
|
21370
21378
|
height: 10,
|
|
@@ -21385,7 +21393,8 @@ var WeaveTargetingManager = class {
|
|
|
21385
21393
|
x: 0,
|
|
21386
21394
|
y: 0
|
|
21387
21395
|
};
|
|
21388
|
-
if (
|
|
21396
|
+
if (utilityLayer) utilityLayer.visible(true);
|
|
21397
|
+
if (nodesSelection) nodesSelection.getTransformer().visible(true);
|
|
21389
21398
|
dummyRect.destroy();
|
|
21390
21399
|
return {
|
|
21391
21400
|
mousePoint: relativeMousePointer,
|
|
@@ -21789,13 +21798,13 @@ var WeaveStateManager = class {
|
|
|
21789
21798
|
updateNodes(nodes) {
|
|
21790
21799
|
for (const node of nodes) this.updateNode(node);
|
|
21791
21800
|
}
|
|
21792
|
-
stateTransactional(callback) {
|
|
21801
|
+
stateTransactional(callback, origin) {
|
|
21793
21802
|
const state = this.instance.getStore().getState();
|
|
21794
21803
|
const doc = getYjsDoc(state);
|
|
21795
|
-
const
|
|
21804
|
+
const transactionOrigin = origin ?? this.instance.getStore().getUser().id;
|
|
21796
21805
|
doc.transact(() => {
|
|
21797
21806
|
callback();
|
|
21798
|
-
},
|
|
21807
|
+
}, transactionOrigin);
|
|
21799
21808
|
}
|
|
21800
21809
|
removeNode(node) {
|
|
21801
21810
|
const state = this.instance.getStore().getState();
|
|
@@ -21930,7 +21939,6 @@ var WeaveRegisterManager = class {
|
|
|
21930
21939
|
registerActionsHandlers() {
|
|
21931
21940
|
const config = this.instance.getConfiguration();
|
|
21932
21941
|
if (config.actions) for (const action of config.actions) this.registerActionHandler(action);
|
|
21933
|
-
this.logger.info(`Actions handlers registered`);
|
|
21934
21942
|
}
|
|
21935
21943
|
registerActionHandler(action) {
|
|
21936
21944
|
const actionName = action.getName();
|
|
@@ -21957,7 +21965,7 @@ var WeaveRegisterManager = class {
|
|
|
21957
21965
|
|
|
21958
21966
|
//#endregion
|
|
21959
21967
|
//#region package.json
|
|
21960
|
-
var version = "3.
|
|
21968
|
+
var version = "3.2.0-SNAPSHOT.84.1";
|
|
21961
21969
|
|
|
21962
21970
|
//#endregion
|
|
21963
21971
|
//#region src/managers/setup.ts
|
|
@@ -22097,14 +22105,15 @@ var WeaveActionsManager = class {
|
|
|
22097
22105
|
getActiveAction() {
|
|
22098
22106
|
return this.activeAction;
|
|
22099
22107
|
}
|
|
22100
|
-
triggerAction(actionName, params) {
|
|
22108
|
+
triggerAction(actionName, params, forceExecution = false) {
|
|
22101
22109
|
const actionsHandlers = this.instance.getActionsHandlers();
|
|
22102
22110
|
if (typeof actionName === "undefined") throw new Error("Action name is required");
|
|
22103
22111
|
if (actionName && !actionsHandlers[actionName]) throw new Error(`Action handler with name [${actionName}] not registered`);
|
|
22104
|
-
if (
|
|
22105
|
-
this.activeAction = actionName;
|
|
22112
|
+
if (this.activeAction !== void 0 && !forceExecution) this.cancelAction(this.activeAction);
|
|
22113
|
+
if (!forceExecution) this.activeAction = actionName;
|
|
22114
|
+
actionsHandlers[actionName].setForceExecution(forceExecution);
|
|
22106
22115
|
const payload = actionsHandlers[actionName].trigger(this.cancelActionCallback(actionName), params);
|
|
22107
|
-
this.instance.emitEvent("onActiveActionChange", this.activeAction);
|
|
22116
|
+
if (!forceExecution) this.instance.emitEvent("onActiveActionChange", this.activeAction);
|
|
22108
22117
|
return payload;
|
|
22109
22118
|
}
|
|
22110
22119
|
updatePropsAction(actionName, props) {
|
|
@@ -23132,8 +23141,8 @@ var Weave = class {
|
|
|
23132
23141
|
getActiveAction() {
|
|
23133
23142
|
return this.actionsManager.getActiveAction();
|
|
23134
23143
|
}
|
|
23135
|
-
triggerAction(actionName, params) {
|
|
23136
|
-
return this.actionsManager.triggerAction(actionName, params);
|
|
23144
|
+
triggerAction(actionName, params, forceExecution = false) {
|
|
23145
|
+
return this.actionsManager.triggerAction(actionName, params, forceExecution);
|
|
23137
23146
|
}
|
|
23138
23147
|
getPropsAction(actionName) {
|
|
23139
23148
|
return this.actionsManager.getPropsAction(actionName);
|
|
@@ -23165,9 +23174,10 @@ var Weave = class {
|
|
|
23165
23174
|
return this.stateManager.getNode(nodeKey);
|
|
23166
23175
|
}
|
|
23167
23176
|
addNode(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
|
|
23177
|
+
const { origin,...restOptions } = options;
|
|
23168
23178
|
this.stateTransactional(() => {
|
|
23169
|
-
this.addNodeNT(node, parentId,
|
|
23170
|
-
});
|
|
23179
|
+
this.addNodeNT(node, parentId, restOptions);
|
|
23180
|
+
}, origin);
|
|
23171
23181
|
}
|
|
23172
23182
|
addNodeNT(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
|
|
23173
23183
|
const { index, emitUserChangeEvent, overrideUserChangeType } = mergeExceptArrays(DEFAULT_ADD_NODE_OPTIONS, options);
|
|
@@ -23188,9 +23198,10 @@ var Weave = class {
|
|
|
23188
23198
|
}
|
|
23189
23199
|
}
|
|
23190
23200
|
updateNode(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
|
|
23201
|
+
const { origin,...restOptions } = options;
|
|
23191
23202
|
this.stateTransactional(() => {
|
|
23192
|
-
this.updateNodeNT(node,
|
|
23193
|
-
});
|
|
23203
|
+
this.updateNodeNT(node, restOptions);
|
|
23204
|
+
}, origin);
|
|
23194
23205
|
}
|
|
23195
23206
|
updateNodeNT(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
|
|
23196
23207
|
const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
|
|
@@ -23208,9 +23219,10 @@ var Weave = class {
|
|
|
23208
23219
|
}
|
|
23209
23220
|
}
|
|
23210
23221
|
updateNodes(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
|
|
23222
|
+
const { origin,...restOptions } = options;
|
|
23211
23223
|
this.stateTransactional(() => {
|
|
23212
|
-
this.updateNodesNT(nodes,
|
|
23213
|
-
});
|
|
23224
|
+
this.updateNodesNT(nodes, restOptions);
|
|
23225
|
+
}, origin);
|
|
23214
23226
|
}
|
|
23215
23227
|
updateNodesNT(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
|
|
23216
23228
|
const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
|
|
@@ -23234,9 +23246,10 @@ var Weave = class {
|
|
|
23234
23246
|
}
|
|
23235
23247
|
}
|
|
23236
23248
|
removeNode(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
|
|
23249
|
+
const { origin,...restOptions } = options;
|
|
23237
23250
|
this.stateTransactional(() => {
|
|
23238
|
-
this.removeNodeNT(node,
|
|
23239
|
-
});
|
|
23251
|
+
this.removeNodeNT(node, restOptions);
|
|
23252
|
+
}, origin);
|
|
23240
23253
|
}
|
|
23241
23254
|
removeNodeNT(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
|
|
23242
23255
|
const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_REMOVE_NODE_OPTIONS, options);
|
|
@@ -23268,9 +23281,10 @@ var Weave = class {
|
|
|
23268
23281
|
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
23269
23282
|
}
|
|
23270
23283
|
removeNodes(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
|
|
23284
|
+
const { origin,...restOptions } = options;
|
|
23271
23285
|
this.stateTransactional(() => {
|
|
23272
|
-
this.removeNodesNT(nodes,
|
|
23273
|
-
});
|
|
23286
|
+
this.removeNodesNT(nodes, restOptions);
|
|
23287
|
+
}, origin);
|
|
23274
23288
|
}
|
|
23275
23289
|
removeNodesNT(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
|
|
23276
23290
|
for (const node of nodes) this.removeNodeNT(node, options);
|
|
@@ -23278,9 +23292,10 @@ var Weave = class {
|
|
|
23278
23292
|
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
23279
23293
|
}
|
|
23280
23294
|
zMoveNode(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
|
|
23295
|
+
const { origin,...restOptions } = options;
|
|
23281
23296
|
this.stateTransactional(() => {
|
|
23282
|
-
this.zMoveNodeNT(node, position,
|
|
23283
|
-
});
|
|
23297
|
+
this.zMoveNodeNT(node, position, restOptions);
|
|
23298
|
+
}, origin);
|
|
23284
23299
|
}
|
|
23285
23300
|
zMoveNodeNT(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
|
|
23286
23301
|
const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_MOVE_NODE_OPTIONS, options);
|
|
@@ -23334,8 +23349,8 @@ var Weave = class {
|
|
|
23334
23349
|
getBoundingBox(nodes, config) {
|
|
23335
23350
|
return getBoundingBox(nodes, config);
|
|
23336
23351
|
}
|
|
23337
|
-
stateTransactional(callback) {
|
|
23338
|
-
this.stateManager.stateTransactional(callback);
|
|
23352
|
+
stateTransactional(callback, origin) {
|
|
23353
|
+
this.stateManager.stateTransactional(callback, origin);
|
|
23339
23354
|
}
|
|
23340
23355
|
moveUp(node) {
|
|
23341
23356
|
this.zIndexManager.moveUp(node);
|
|
@@ -25020,7 +25035,12 @@ const WEAVE_IMAGE_CROP_ANCHOR_POSITION = {
|
|
|
25020
25035
|
const WEAVE_IMAGE_DEFAULT_CONFIG = {
|
|
25021
25036
|
performance: { cache: { enabled: false } },
|
|
25022
25037
|
style: { placeholder: { fill: "#aaaaaa" } },
|
|
25038
|
+
imageLoading: {
|
|
25039
|
+
maxRetryAttempts: 15,
|
|
25040
|
+
retryDelayMs: 2e3
|
|
25041
|
+
},
|
|
25023
25042
|
crossOrigin: "anonymous",
|
|
25043
|
+
useFallbackImage: true,
|
|
25024
25044
|
cropMode: {
|
|
25025
25045
|
gridLines: { enabled: true },
|
|
25026
25046
|
overlay: { fill: "rgba(0,0,0,0.2)" },
|
|
@@ -25590,7 +25610,9 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25590
25610
|
var WeaveImageNode = class extends WeaveNode {
|
|
25591
25611
|
imageBitmapCache = {};
|
|
25592
25612
|
imageSource = {};
|
|
25613
|
+
imageFallback = {};
|
|
25593
25614
|
imageState = {};
|
|
25615
|
+
imageTryoutAttempts = {};
|
|
25594
25616
|
imageIconSource = null;
|
|
25595
25617
|
nodeType = WEAVE_IMAGE_NODE_TYPE;
|
|
25596
25618
|
constructor(params) {
|
|
@@ -25604,6 +25626,12 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25604
25626
|
this.lastTapTime = 0;
|
|
25605
25627
|
this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
|
|
25606
25628
|
this.imageCrop = null;
|
|
25629
|
+
this.tryoutTimeoutId = null;
|
|
25630
|
+
this.imageBitmapCache = {};
|
|
25631
|
+
this.imageSource = {};
|
|
25632
|
+
this.imageState = {};
|
|
25633
|
+
this.imageTryoutAttempts = {};
|
|
25634
|
+
this.imageFallback = {};
|
|
25607
25635
|
}
|
|
25608
25636
|
getConfiguration() {
|
|
25609
25637
|
return this.config;
|
|
@@ -25684,6 +25712,12 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25684
25712
|
cropping: false
|
|
25685
25713
|
});
|
|
25686
25714
|
this.setupDefaultNodeAugmentation(image);
|
|
25715
|
+
image.defineMousePointer = () => {
|
|
25716
|
+
if (this.imageState[id]?.status === "loading") return "wait";
|
|
25717
|
+
const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
|
|
25718
|
+
if (this.isSelecting() && selectedNodes.includes(image)) return "grab";
|
|
25719
|
+
return "pointer";
|
|
25720
|
+
};
|
|
25687
25721
|
image.movedToContainer = () => {
|
|
25688
25722
|
const stage = this.instance.getStage();
|
|
25689
25723
|
const image$1 = stage.findOne(`#${id}`);
|
|
@@ -25762,8 +25796,8 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25762
25796
|
image.dblClick = () => {
|
|
25763
25797
|
if (this.imageState[id]?.loaded && !this.imageState[id]?.error) this.config.onDblClick?.(this, image);
|
|
25764
25798
|
};
|
|
25765
|
-
if (this.imageSource[id]) {
|
|
25766
|
-
imagePlaceholder
|
|
25799
|
+
if (this.imageSource[id] && imageProps.imageURL) {
|
|
25800
|
+
imagePlaceholder?.destroy();
|
|
25767
25801
|
const imageSource = this.imageSource[id];
|
|
25768
25802
|
internalImage.setAttrs({
|
|
25769
25803
|
image: imageSource,
|
|
@@ -25788,13 +25822,14 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25788
25822
|
height: sourceImageHeight
|
|
25789
25823
|
});
|
|
25790
25824
|
this.imageState[id] = {
|
|
25825
|
+
status: "loaded",
|
|
25791
25826
|
loaded: true,
|
|
25792
25827
|
error: false
|
|
25793
25828
|
};
|
|
25794
25829
|
this.updateImageCrop(image);
|
|
25795
25830
|
} else {
|
|
25796
25831
|
this.updatePlaceholderSize(image, imagePlaceholder);
|
|
25797
|
-
this.loadImage(imageProps, image);
|
|
25832
|
+
this.loadImage(imageProps, image, true);
|
|
25798
25833
|
}
|
|
25799
25834
|
if (this.config.performance.cache.enabled) image.on("transformend", () => {
|
|
25800
25835
|
this.cacheNode(image);
|
|
@@ -26025,7 +26060,7 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26025
26060
|
scaleY: 1,
|
|
26026
26061
|
rotation: 0,
|
|
26027
26062
|
visible: true,
|
|
26028
|
-
fill:
|
|
26063
|
+
fill: this.config.style.placeholder.fill,
|
|
26029
26064
|
strokeWidth: 0,
|
|
26030
26065
|
draggable: false,
|
|
26031
26066
|
zIndex: 0
|
|
@@ -26059,7 +26094,7 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26059
26094
|
scaleY: 1,
|
|
26060
26095
|
rotation: 0,
|
|
26061
26096
|
visible: true,
|
|
26062
|
-
fill:
|
|
26097
|
+
fill: this.config.style.placeholder.fill,
|
|
26063
26098
|
strokeWidth: 0,
|
|
26064
26099
|
draggable: false,
|
|
26065
26100
|
zIndex: 0
|
|
@@ -26101,59 +26136,111 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26101
26136
|
}
|
|
26102
26137
|
this.cacheNode(nodeInstance);
|
|
26103
26138
|
}
|
|
26104
|
-
|
|
26139
|
+
preloadFallbackImage(imageId, imageURL, { onLoad, onError }) {
|
|
26140
|
+
const imageURLToLoad = imageURL ?? "http://localhost/false-image";
|
|
26141
|
+
this.imageFallback[imageId] = Konva.Util.createImageElement();
|
|
26142
|
+
this.imageFallback[imageId].crossOrigin = this.config.crossOrigin;
|
|
26143
|
+
this.imageFallback[imageId].onerror = (error) => {
|
|
26144
|
+
this.imageState[imageId] = {
|
|
26145
|
+
status: "error-fallback",
|
|
26146
|
+
loaded: false,
|
|
26147
|
+
error: true
|
|
26148
|
+
};
|
|
26149
|
+
onError(error);
|
|
26150
|
+
};
|
|
26151
|
+
this.imageFallback[imageId].onload = async () => {
|
|
26152
|
+
this.imageState[imageId] = {
|
|
26153
|
+
status: "loading",
|
|
26154
|
+
loaded: true,
|
|
26155
|
+
error: false
|
|
26156
|
+
};
|
|
26157
|
+
onLoad();
|
|
26158
|
+
};
|
|
26159
|
+
this.imageState[imageId] = {
|
|
26160
|
+
status: "loading",
|
|
26161
|
+
loaded: false,
|
|
26162
|
+
error: false
|
|
26163
|
+
};
|
|
26164
|
+
try {
|
|
26165
|
+
this.imageFallback[imageId].src = imageURLToLoad;
|
|
26166
|
+
} catch (ex) {
|
|
26167
|
+
console.error(ex);
|
|
26168
|
+
}
|
|
26169
|
+
}
|
|
26170
|
+
preloadImage(imageId, imageURL, { onLoad, onError }, loadingTryout = false) {
|
|
26171
|
+
const imageURLToLoad = imageURL ?? "http://localhost/false-image";
|
|
26105
26172
|
this.imageSource[imageId] = Konva.Util.createImageElement();
|
|
26106
26173
|
this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
|
|
26107
26174
|
this.imageSource[imageId].onerror = (error) => {
|
|
26108
|
-
this.imageState[imageId] = {
|
|
26175
|
+
if (!loadingTryout) this.imageState[imageId] = {
|
|
26176
|
+
status: "error",
|
|
26109
26177
|
loaded: false,
|
|
26110
26178
|
error: true
|
|
26111
26179
|
};
|
|
26112
26180
|
delete this.imageSource[imageId];
|
|
26113
|
-
delete this.imageState[imageId];
|
|
26114
26181
|
onError(error);
|
|
26115
26182
|
};
|
|
26116
26183
|
this.imageSource[imageId].onload = async () => {
|
|
26117
26184
|
this.imageState[imageId] = {
|
|
26185
|
+
status: "loaded",
|
|
26118
26186
|
loaded: true,
|
|
26119
26187
|
error: false
|
|
26120
26188
|
};
|
|
26121
26189
|
onLoad();
|
|
26122
26190
|
};
|
|
26123
|
-
this.imageState[imageId] =
|
|
26191
|
+
if (this.imageState[imageId]) this.imageState[imageId].status = "loading";
|
|
26192
|
+
else this.imageState[imageId] = {
|
|
26193
|
+
status: "loading",
|
|
26124
26194
|
loaded: false,
|
|
26125
26195
|
error: false
|
|
26126
26196
|
};
|
|
26127
26197
|
try {
|
|
26128
|
-
|
|
26198
|
+
this.imageSource[imageId].src = imageURLToLoad;
|
|
26129
26199
|
} catch (ex) {
|
|
26130
26200
|
console.error(ex);
|
|
26131
26201
|
}
|
|
26132
26202
|
}
|
|
26133
|
-
loadImage(params, image) {
|
|
26203
|
+
loadImage(params, image, useFallback = false, loadTryout = false) {
|
|
26134
26204
|
const imageProps = params;
|
|
26135
26205
|
const { id } = imageProps;
|
|
26136
26206
|
const imagePlaceholder = image.findOne(`#${id}-placeholder`);
|
|
26137
26207
|
const internalImage = image.findOne(`#${id}-image`);
|
|
26138
|
-
|
|
26208
|
+
let realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
|
|
26209
|
+
let preloadFunction = this.preloadImage.bind(this);
|
|
26210
|
+
const loadFallback = useFallback && imageProps.imageFallback && this.config.useFallbackImage;
|
|
26211
|
+
if (loadFallback) {
|
|
26212
|
+
preloadFunction = this.preloadFallbackImage.bind(this);
|
|
26213
|
+
realImageURL = imageProps.imageFallback;
|
|
26214
|
+
}
|
|
26139
26215
|
this.loadAsyncElement(id);
|
|
26140
|
-
|
|
26216
|
+
preloadFunction(id, realImageURL ?? "", {
|
|
26141
26217
|
onLoad: () => {
|
|
26142
|
-
if (
|
|
26218
|
+
if (useFallback) this.tryoutTimeoutId = setTimeout(() => {
|
|
26219
|
+
const node = this.instance.getStage().findOne(`#${id}`);
|
|
26220
|
+
if (node) {
|
|
26221
|
+
this.imageTryoutAttempts[id] = (this.imageTryoutAttempts[id] ?? 0) + 1;
|
|
26222
|
+
this.loadImage(node.getAttrs(), node, false, true);
|
|
26223
|
+
}
|
|
26224
|
+
}, this.config.imageLoading.retryDelayMs);
|
|
26225
|
+
if (loadTryout && this.tryoutTimeoutId) {
|
|
26226
|
+
clearTimeout(this.tryoutTimeoutId);
|
|
26227
|
+
this.tryoutTimeoutId = null;
|
|
26228
|
+
}
|
|
26229
|
+
if (image && internalImage) {
|
|
26143
26230
|
image.setAttrs({
|
|
26144
26231
|
width: imageProps.width ? imageProps.width : this.imageSource[id].width,
|
|
26145
26232
|
height: imageProps.height ? imageProps.height : this.imageSource[id].height
|
|
26146
26233
|
});
|
|
26147
|
-
imagePlaceholder
|
|
26148
|
-
const imageSource = this.imageSource[id];
|
|
26234
|
+
imagePlaceholder?.destroy();
|
|
26235
|
+
const imageSource = loadFallback ? this.imageFallback[id] : this.imageSource[id];
|
|
26149
26236
|
internalImage.setAttrs({
|
|
26150
26237
|
width: imageProps.width ? imageProps.width : this.imageSource[id].width,
|
|
26151
26238
|
height: imageProps.height ? imageProps.height : this.imageSource[id].height,
|
|
26152
26239
|
image: imageSource,
|
|
26153
26240
|
visible: true
|
|
26154
26241
|
});
|
|
26155
|
-
let sourceImageWidth = this.imageSource[id].width;
|
|
26156
|
-
let sourceImageHeight = this.imageSource[id].height;
|
|
26242
|
+
let sourceImageWidth = imageProps.width ? imageProps.width : this.imageSource[id].width;
|
|
26243
|
+
let sourceImageHeight = imageProps.height ? imageProps.height : this.imageSource[id].height;
|
|
26157
26244
|
if (image.getAttrs().imageInfo) {
|
|
26158
26245
|
sourceImageWidth = image.getAttrs().imageInfo.width;
|
|
26159
26246
|
sourceImageHeight = image.getAttrs().imageInfo.height;
|
|
@@ -26172,40 +26259,56 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26172
26259
|
width: imageRect.width,
|
|
26173
26260
|
height: imageRect.height
|
|
26174
26261
|
});
|
|
26175
|
-
|
|
26176
|
-
|
|
26177
|
-
|
|
26178
|
-
|
|
26262
|
+
const stage = this.instance.getStage();
|
|
26263
|
+
if (!loadFallback) {
|
|
26264
|
+
if (stage.container().style.cursor === "wait") stage.container().style.cursor = "pointer";
|
|
26265
|
+
this.imageState[id] = {
|
|
26266
|
+
status: "loaded",
|
|
26267
|
+
loaded: true,
|
|
26268
|
+
error: false
|
|
26269
|
+
};
|
|
26270
|
+
}
|
|
26179
26271
|
this.updateImageCrop(image);
|
|
26180
26272
|
this.resolveAsyncElement(id);
|
|
26181
26273
|
this.cacheNode(image);
|
|
26182
26274
|
}
|
|
26183
26275
|
},
|
|
26184
26276
|
onError: (error) => {
|
|
26277
|
+
if (!this.config.useFallbackImage) this.tryoutTimeoutId = setTimeout(() => {
|
|
26278
|
+
const node = this.instance.getStage().findOne(`#${id}`);
|
|
26279
|
+
if (node) {
|
|
26280
|
+
this.imageTryoutAttempts[id] = (this.imageTryoutAttempts[id] ?? 0) + 1;
|
|
26281
|
+
this.loadImage(node.getAttrs(), node, false, true);
|
|
26282
|
+
}
|
|
26283
|
+
}, this.config.imageLoading.retryDelayMs);
|
|
26284
|
+
if (loadTryout) {
|
|
26285
|
+
const tryoutAttempts = this.imageTryoutAttempts[id] ?? 0;
|
|
26286
|
+
if (tryoutAttempts < this.config.imageLoading.maxRetryAttempts) this.tryoutTimeoutId = setTimeout(() => {
|
|
26287
|
+
const node = this.instance.getStage().findOne(`#${id}`);
|
|
26288
|
+
if (node) {
|
|
26289
|
+
this.imageTryoutAttempts[id] = tryoutAttempts + 1;
|
|
26290
|
+
this.loadImage(node.getAttrs(), node, false, true);
|
|
26291
|
+
}
|
|
26292
|
+
}, this.config.imageLoading.retryDelayMs);
|
|
26293
|
+
return;
|
|
26294
|
+
}
|
|
26295
|
+
if (this.config.useFallbackImage && !useFallback && !loadTryout && imageProps.imageFallback) {
|
|
26296
|
+
this.loadImage({ ...params }, image, true);
|
|
26297
|
+
return;
|
|
26298
|
+
}
|
|
26185
26299
|
this.imageState[id] = {
|
|
26300
|
+
status: "error",
|
|
26186
26301
|
loaded: false,
|
|
26187
26302
|
error: true
|
|
26188
26303
|
};
|
|
26189
|
-
image.setAttrs({
|
|
26190
|
-
image: void 0,
|
|
26191
|
-
width: 100,
|
|
26192
|
-
height: 100,
|
|
26193
|
-
imageInfo: {
|
|
26194
|
-
width: 100,
|
|
26195
|
-
height: 100
|
|
26196
|
-
},
|
|
26197
|
-
uncroppedImage: {
|
|
26198
|
-
width: 100,
|
|
26199
|
-
height: 100
|
|
26200
|
-
}
|
|
26201
|
-
});
|
|
26304
|
+
image.setAttrs({ image: void 0 });
|
|
26202
26305
|
this.resolveAsyncElement(id);
|
|
26203
26306
|
console.error("Error loading image", realImageURL, error);
|
|
26204
26307
|
imagePlaceholder?.setAttrs({ visible: true });
|
|
26205
26308
|
internalImage?.setAttrs({ visible: false });
|
|
26206
26309
|
this.cacheNode(image);
|
|
26207
26310
|
}
|
|
26208
|
-
});
|
|
26311
|
+
}, loadTryout);
|
|
26209
26312
|
}
|
|
26210
26313
|
updatePlaceholderSize(image, imagePlaceholder) {
|
|
26211
26314
|
const imageAttrs = image.getAttrs();
|
|
@@ -26226,8 +26329,16 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26226
26329
|
const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
|
|
26227
26330
|
if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
|
|
26228
26331
|
if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && imageAttrs.uncroppedImage) {
|
|
26332
|
+
const imageId = imageAttrs.id ?? "";
|
|
26229
26333
|
const originalImageInfo = imageAttrs.imageInfo;
|
|
26230
|
-
|
|
26334
|
+
let actualImageInfo = {
|
|
26335
|
+
width: this.imageSource[imageId]?.width ?? 0,
|
|
26336
|
+
height: this.imageSource[imageId]?.height ?? 0
|
|
26337
|
+
};
|
|
26338
|
+
if (actualImageInfo.width === 0 && actualImageInfo.height === 0 && this.imageFallback[imageId]) actualImageInfo = {
|
|
26339
|
+
width: this.imageFallback[imageId].width,
|
|
26340
|
+
height: this.imageFallback[imageId].height
|
|
26341
|
+
};
|
|
26231
26342
|
const originalActualDiffScale = originalImageInfo ? actualImageInfo.width / originalImageInfo.width : 1;
|
|
26232
26343
|
const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
|
|
26233
26344
|
const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
|
|
@@ -26256,6 +26367,9 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26256
26367
|
internalImage.height(imageAttrs.uncroppedImage.height);
|
|
26257
26368
|
}
|
|
26258
26369
|
}
|
|
26370
|
+
getFallbackImageSource(imageId) {
|
|
26371
|
+
return this.imageFallback[imageId];
|
|
26372
|
+
}
|
|
26259
26373
|
getImageSource(imageId) {
|
|
26260
26374
|
return this.imageSource[imageId];
|
|
26261
26375
|
}
|
|
@@ -26307,6 +26421,23 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
26307
26421
|
getIsAsync() {
|
|
26308
26422
|
return true;
|
|
26309
26423
|
}
|
|
26424
|
+
forceLoadImage(nodeInstance) {
|
|
26425
|
+
const nodeId = nodeInstance.getAttrs().id ?? "";
|
|
26426
|
+
const node = this.instance.getStage().findOne(`#${nodeId}`);
|
|
26427
|
+
if (this.tryoutTimeoutId) {
|
|
26428
|
+
clearTimeout(this.tryoutTimeoutId);
|
|
26429
|
+
this.tryoutTimeoutId = null;
|
|
26430
|
+
}
|
|
26431
|
+
if (node) this.loadImage(node.getAttrs(), node, false, false);
|
|
26432
|
+
}
|
|
26433
|
+
onDestroy(nodeInstance) {
|
|
26434
|
+
const nodeId = nodeInstance.getAttrs().id ?? "";
|
|
26435
|
+
delete this.imageSource[nodeId];
|
|
26436
|
+
delete this.imageState[nodeId];
|
|
26437
|
+
delete this.imageTryoutAttempts[nodeId];
|
|
26438
|
+
delete this.imageFallback[nodeId];
|
|
26439
|
+
nodeInstance.destroy();
|
|
26440
|
+
}
|
|
26310
26441
|
};
|
|
26311
26442
|
|
|
26312
26443
|
//#endregion
|
|
@@ -33364,42 +33495,60 @@ var WeaveTextToolAction = class extends WeaveAction {
|
|
|
33364
33495
|
|
|
33365
33496
|
//#endregion
|
|
33366
33497
|
//#region src/actions/image-tool/constants.ts
|
|
33367
|
-
const
|
|
33368
|
-
const
|
|
33498
|
+
const WEAVE_IMAGE_TOOL_ACTION_NAME = "imageTool";
|
|
33499
|
+
const WEAVE_IMAGE_TOOL_UPLOAD_TYPE = {
|
|
33500
|
+
["FILE"]: "file",
|
|
33501
|
+
["IMAGE_URL"]: "imageURL"
|
|
33502
|
+
};
|
|
33503
|
+
const WEAVE_IMAGE_TOOL_STATE = {
|
|
33369
33504
|
["IDLE"]: "idle",
|
|
33370
33505
|
["DEFINING_POSITION"]: "definingPosition",
|
|
33371
33506
|
["SELECTED_POSITION"]: "selectedPosition",
|
|
33372
33507
|
["ADDING"]: "adding",
|
|
33373
33508
|
["FINISHED"]: "finished"
|
|
33374
33509
|
};
|
|
33375
|
-
const
|
|
33376
|
-
|
|
33377
|
-
|
|
33378
|
-
|
|
33510
|
+
const WEAVE_IMAGE_TOOL_CONFIG_DEFAULT = { style: { cursor: {
|
|
33511
|
+
padding: 5,
|
|
33512
|
+
imageThumbnail: {
|
|
33513
|
+
width: 250,
|
|
33514
|
+
height: 250,
|
|
33515
|
+
shadowColor: "#aaaaaa",
|
|
33516
|
+
shadowBlur: 10,
|
|
33517
|
+
shadowOffset: {
|
|
33518
|
+
x: 2,
|
|
33519
|
+
y: 2
|
|
33520
|
+
},
|
|
33521
|
+
shadowOpacity: .5
|
|
33522
|
+
}
|
|
33523
|
+
} } };
|
|
33379
33524
|
|
|
33380
33525
|
//#endregion
|
|
33381
33526
|
//#region src/actions/image-tool/image-tool.ts
|
|
33382
33527
|
var WeaveImageToolAction = class extends WeaveAction {
|
|
33383
33528
|
initialized = false;
|
|
33384
33529
|
initialCursor = null;
|
|
33385
|
-
cursorPadding = 5;
|
|
33386
33530
|
forceMainContainer = false;
|
|
33531
|
+
ignoreKeyboardEvents = false;
|
|
33532
|
+
ignorePointerEvents = false;
|
|
33533
|
+
uploadType = null;
|
|
33387
33534
|
onPropsChange = void 0;
|
|
33388
33535
|
update = void 0;
|
|
33389
|
-
constructor() {
|
|
33536
|
+
constructor(params) {
|
|
33390
33537
|
super();
|
|
33538
|
+
this.config = mergeExceptArrays(WEAVE_IMAGE_TOOL_CONFIG_DEFAULT, params?.config ?? {});
|
|
33391
33539
|
this.pointers = new Map();
|
|
33392
33540
|
this.initialized = false;
|
|
33393
|
-
this.state =
|
|
33541
|
+
this.state = WEAVE_IMAGE_TOOL_STATE.IDLE;
|
|
33394
33542
|
this.imageId = null;
|
|
33395
33543
|
this.tempImageId = null;
|
|
33396
33544
|
this.tempImageNode = null;
|
|
33397
33545
|
this.container = void 0;
|
|
33398
33546
|
this.imageURL = null;
|
|
33547
|
+
this.uploadType = null;
|
|
33399
33548
|
this.clickPoint = null;
|
|
33400
33549
|
}
|
|
33401
33550
|
getName() {
|
|
33402
|
-
return
|
|
33551
|
+
return WEAVE_IMAGE_TOOL_ACTION_NAME;
|
|
33403
33552
|
}
|
|
33404
33553
|
initProps() {
|
|
33405
33554
|
return {
|
|
@@ -33413,14 +33562,15 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33413
33562
|
this.instance.addEventListener("onStageDrop", (e) => {
|
|
33414
33563
|
const dragId = this.instance.getDragStartedId();
|
|
33415
33564
|
const dragProperties = this.instance.getDragProperties();
|
|
33416
|
-
if (dragProperties && dragId ===
|
|
33565
|
+
if (dragProperties && dragId === WEAVE_IMAGE_TOOL_ACTION_NAME) {
|
|
33417
33566
|
this.instance.getStage().setPointersPositions(e);
|
|
33418
33567
|
const position = getPositionRelativeToContainerOnPosition(this.instance);
|
|
33419
|
-
this.instance.triggerAction(
|
|
33568
|
+
this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
|
|
33569
|
+
type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
|
|
33420
33570
|
imageURL: dragProperties.imageURL,
|
|
33421
|
-
|
|
33422
|
-
|
|
33423
|
-
|
|
33571
|
+
imageFallback: dragProperties.imageFallback,
|
|
33572
|
+
imageWidth: dragProperties.imageWidth,
|
|
33573
|
+
imageHeight: dragProperties.imageHeight,
|
|
33424
33574
|
position
|
|
33425
33575
|
});
|
|
33426
33576
|
}
|
|
@@ -33429,86 +33579,100 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33429
33579
|
setupEvents() {
|
|
33430
33580
|
const stage = this.instance.getStage();
|
|
33431
33581
|
window.addEventListener("keydown", (e) => {
|
|
33432
|
-
if (e.code === "Escape" && this.instance.getActiveAction() ===
|
|
33582
|
+
if (e.code === "Escape" && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME && !this.ignoreKeyboardEvents) {
|
|
33433
33583
|
this.cancelAction();
|
|
33434
33584
|
return;
|
|
33435
33585
|
}
|
|
33436
33586
|
});
|
|
33437
33587
|
stage.on("pointerdown", (e) => {
|
|
33438
33588
|
this.setTapStart(e);
|
|
33589
|
+
if (this.ignorePointerEvents) return;
|
|
33439
33590
|
this.pointers.set(e.evt.pointerId, {
|
|
33440
33591
|
x: e.evt.clientX,
|
|
33441
33592
|
y: e.evt.clientY
|
|
33442
33593
|
});
|
|
33443
|
-
if (this.pointers.size === 2 && this.instance.getActiveAction() ===
|
|
33444
|
-
this.state =
|
|
33594
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME) {
|
|
33595
|
+
this.state = WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION;
|
|
33445
33596
|
return;
|
|
33446
33597
|
}
|
|
33447
|
-
if (this.state ===
|
|
33598
|
+
if (this.state === WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION;
|
|
33448
33599
|
});
|
|
33449
33600
|
stage.on("pointermove", (e) => {
|
|
33450
|
-
if (this.
|
|
33601
|
+
if (this.ignorePointerEvents) return;
|
|
33602
|
+
if (this.state === WEAVE_IMAGE_TOOL_STATE.IDLE) return;
|
|
33451
33603
|
this.setCursor();
|
|
33452
|
-
if (this.pointers.size === 2 && this.instance.getActiveAction() ===
|
|
33453
|
-
this.state =
|
|
33604
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME) {
|
|
33605
|
+
this.state = WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION;
|
|
33454
33606
|
return;
|
|
33455
33607
|
}
|
|
33456
|
-
if ([
|
|
33608
|
+
if ([WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION, WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempImageNode && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
|
|
33457
33609
|
const mousePos = stage.getRelativePointerPosition();
|
|
33610
|
+
const cursorPadding = this.config.style.cursor.padding;
|
|
33458
33611
|
this.tempImageNode.setAttrs({
|
|
33459
|
-
x: (mousePos?.x ?? 0) +
|
|
33460
|
-
y: (mousePos?.y ?? 0) +
|
|
33612
|
+
x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
|
|
33613
|
+
y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleX()
|
|
33461
33614
|
});
|
|
33462
33615
|
}
|
|
33463
33616
|
});
|
|
33464
33617
|
stage.on("pointerup", (e) => {
|
|
33618
|
+
if (this.ignorePointerEvents) return;
|
|
33465
33619
|
this.pointers.delete(e.evt.pointerId);
|
|
33466
|
-
if (this.state ===
|
|
33620
|
+
if (this.state === WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
|
|
33467
33621
|
});
|
|
33468
33622
|
this.initialized = true;
|
|
33469
33623
|
}
|
|
33470
33624
|
setState(state) {
|
|
33471
33625
|
this.state = state;
|
|
33472
33626
|
}
|
|
33473
|
-
loadImage(imageData,
|
|
33627
|
+
async loadImage(imageData, downscalingRatio, position) {
|
|
33474
33628
|
this.setCursor();
|
|
33475
33629
|
this.setFocusStage();
|
|
33476
33630
|
if (!this.imageId) {
|
|
33477
33631
|
this.cancelAction();
|
|
33478
33632
|
return;
|
|
33479
33633
|
}
|
|
33480
|
-
this.imageURL = kind === IMAGE_TOOL_LOAD_FROM.DATAURL ? "not-defined" : imageData;
|
|
33481
33634
|
const imageNodeHandler = this.getImageNodeHandler();
|
|
33482
|
-
if (!imageNodeHandler)
|
|
33483
|
-
|
|
33484
|
-
|
|
33485
|
-
|
|
33486
|
-
|
|
33487
|
-
|
|
33488
|
-
|
|
33489
|
-
|
|
33490
|
-
|
|
33491
|
-
|
|
33635
|
+
if (!imageNodeHandler) return;
|
|
33636
|
+
const actualImageId = this.imageId;
|
|
33637
|
+
if (imageData instanceof File && downscalingRatio) {
|
|
33638
|
+
const realImageSize = await this.getImageSizeFromFile(imageData);
|
|
33639
|
+
const downscaledImage = await this.downscaleImageFile(imageData, downscalingRatio);
|
|
33640
|
+
const reader = new FileReader();
|
|
33641
|
+
reader.onloadend = () => {
|
|
33642
|
+
imageNodeHandler.preloadFallbackImage(actualImageId, reader.result, {
|
|
33643
|
+
onLoad: () => {
|
|
33644
|
+
this.instance.emitEvent("onImageLoadEnd", void 0);
|
|
33645
|
+
this.props = {
|
|
33646
|
+
...this.props,
|
|
33647
|
+
imageFallback: reader.result,
|
|
33648
|
+
imageURL: void 0,
|
|
33649
|
+
width: realImageSize.width,
|
|
33650
|
+
height: realImageSize.height
|
|
33651
|
+
};
|
|
33652
|
+
this.addImageNode(position);
|
|
33653
|
+
},
|
|
33654
|
+
onError: () => {
|
|
33655
|
+
this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
|
|
33656
|
+
this.cancelAction();
|
|
33657
|
+
}
|
|
33658
|
+
});
|
|
33492
33659
|
};
|
|
33493
|
-
|
|
33494
|
-
|
|
33495
|
-
|
|
33496
|
-
|
|
33497
|
-
|
|
33498
|
-
|
|
33499
|
-
if (imageSource && this.imageId) this.props = {
|
|
33500
|
-
...this.props,
|
|
33501
|
-
imageURL: this.imageURL,
|
|
33502
|
-
width: imageSource.width,
|
|
33503
|
-
height: imageSource.height
|
|
33504
|
-
};
|
|
33505
|
-
this.addImageNode(position);
|
|
33506
|
-
},
|
|
33507
|
-
onError: () => {
|
|
33508
|
-
this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
|
|
33660
|
+
reader.onerror = () => {};
|
|
33661
|
+
reader.readAsDataURL(downscaledImage);
|
|
33662
|
+
} else {
|
|
33663
|
+
const actualImageData = imageData;
|
|
33664
|
+
this.imageURL = actualImageData;
|
|
33665
|
+
if (!imageNodeHandler) {
|
|
33509
33666
|
this.cancelAction();
|
|
33667
|
+
return;
|
|
33510
33668
|
}
|
|
33511
|
-
|
|
33669
|
+
if (WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL === this.uploadType) {
|
|
33670
|
+
setTimeout(() => {
|
|
33671
|
+
this.saveImageUrl(actualImageId, actualImageData);
|
|
33672
|
+
}, 0);
|
|
33673
|
+
this.addImageNode(position);
|
|
33674
|
+
}
|
|
33675
|
+
}
|
|
33512
33676
|
this.instance.emitEvent("onImageLoadStart");
|
|
33513
33677
|
}
|
|
33514
33678
|
isTouchDevice() {
|
|
@@ -33519,7 +33683,7 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33519
33683
|
this.setCursor();
|
|
33520
33684
|
this.setFocusStage();
|
|
33521
33685
|
if (position) {
|
|
33522
|
-
this.setState(
|
|
33686
|
+
this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
|
|
33523
33687
|
this.handleAdding(position);
|
|
33524
33688
|
return;
|
|
33525
33689
|
}
|
|
@@ -33531,33 +33695,45 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33531
33695
|
this.cancelAction();
|
|
33532
33696
|
return;
|
|
33533
33697
|
}
|
|
33534
|
-
|
|
33698
|
+
let imageSource = imageNodeHandler.getImageSource(this.imageId);
|
|
33699
|
+
if (this.uploadType === "file") imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
|
|
33535
33700
|
if (!imageSource) {
|
|
33536
33701
|
this.cancelAction();
|
|
33537
33702
|
return;
|
|
33538
33703
|
}
|
|
33539
33704
|
const aspectRatio = imageSource.width / imageSource.height;
|
|
33540
33705
|
if (!this.tempImageNode && this.tempImageId && !this.isTouchDevice()) {
|
|
33706
|
+
const cursorPadding = this.config.style.cursor.padding;
|
|
33707
|
+
const imageThumbnailWidth = this.config.style.cursor.imageThumbnail.width;
|
|
33708
|
+
const imageThumbnailHeight = this.config.style.cursor.imageThumbnail.height;
|
|
33709
|
+
const shadowColor = this.config.style.cursor.imageThumbnail.shadowColor;
|
|
33710
|
+
const shadowBlur = this.config.style.cursor.imageThumbnail.shadowBlur;
|
|
33711
|
+
const shadowOffset = this.config.style.cursor.imageThumbnail.shadowOffset;
|
|
33712
|
+
const shadowOpacity = this.config.style.cursor.imageThumbnail.shadowOpacity;
|
|
33541
33713
|
this.tempImageNode = new Konva.Image({
|
|
33542
33714
|
id: this.tempImageId,
|
|
33543
|
-
x: (mousePos?.x ?? 0) +
|
|
33544
|
-
y: (mousePos?.y ?? 0) +
|
|
33545
|
-
width:
|
|
33546
|
-
height:
|
|
33715
|
+
x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
|
|
33716
|
+
y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY(),
|
|
33717
|
+
width: imageThumbnailWidth * aspectRatio * (1 / stage.scaleX()),
|
|
33718
|
+
height: imageThumbnailHeight * (1 / stage.scaleY()),
|
|
33547
33719
|
opacity: 1,
|
|
33548
33720
|
adding: true,
|
|
33549
33721
|
image: imageSource,
|
|
33550
33722
|
stroke: "#000000ff",
|
|
33551
33723
|
strokeWidth: 0,
|
|
33552
33724
|
strokeScaleEnabled: true,
|
|
33553
|
-
listening: false
|
|
33725
|
+
listening: false,
|
|
33726
|
+
shadowColor,
|
|
33727
|
+
shadowBlur,
|
|
33728
|
+
shadowOffset,
|
|
33729
|
+
shadowOpacity
|
|
33554
33730
|
});
|
|
33555
33731
|
this.instance.getMainLayer()?.add(this.tempImageNode);
|
|
33556
33732
|
}
|
|
33557
33733
|
this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
|
|
33558
33734
|
}
|
|
33559
33735
|
this.clickPoint = null;
|
|
33560
|
-
this.setState(
|
|
33736
|
+
this.setState(WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION);
|
|
33561
33737
|
}
|
|
33562
33738
|
handleAdding(position) {
|
|
33563
33739
|
if (this.imageId) {
|
|
@@ -33566,7 +33742,8 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33566
33742
|
this.cancelAction();
|
|
33567
33743
|
return;
|
|
33568
33744
|
}
|
|
33569
|
-
|
|
33745
|
+
let imageSource = imageNodeHandler.getImageSource(this.imageId);
|
|
33746
|
+
if (this.uploadType === "file") imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
|
|
33570
33747
|
if (!imageSource && !position) {
|
|
33571
33748
|
this.cancelAction();
|
|
33572
33749
|
return;
|
|
@@ -33575,8 +33752,8 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33575
33752
|
this.clickPoint = mousePoint;
|
|
33576
33753
|
this.container = container;
|
|
33577
33754
|
const nodeHandler = this.instance.getNodeHandler("image");
|
|
33578
|
-
const imageWidth = this.props.
|
|
33579
|
-
const imageHeight = this.props.
|
|
33755
|
+
const imageWidth = this.props.width ? this.props.width : imageSource?.width;
|
|
33756
|
+
const imageHeight = this.props.height ? this.props.height : imageSource?.height;
|
|
33580
33757
|
if (nodeHandler) {
|
|
33581
33758
|
const node = nodeHandler.create(this.imageId, {
|
|
33582
33759
|
...this.props,
|
|
@@ -33584,7 +33761,7 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33584
33761
|
y: this.clickPoint?.y ?? 0,
|
|
33585
33762
|
opacity: 1,
|
|
33586
33763
|
adding: false,
|
|
33587
|
-
imageURL: this.imageURL,
|
|
33764
|
+
imageURL: this.imageURL ?? void 0,
|
|
33588
33765
|
stroke: "#000000ff",
|
|
33589
33766
|
strokeWidth: 0,
|
|
33590
33767
|
strokeScaleEnabled: true,
|
|
@@ -33593,6 +33770,10 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33593
33770
|
imageInfo: {
|
|
33594
33771
|
width: imageWidth,
|
|
33595
33772
|
height: imageHeight
|
|
33773
|
+
},
|
|
33774
|
+
uncroppedImage: {
|
|
33775
|
+
width: imageWidth,
|
|
33776
|
+
height: imageHeight
|
|
33596
33777
|
}
|
|
33597
33778
|
});
|
|
33598
33779
|
this.instance.addNode(node, this.forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.container?.getAttrs().id);
|
|
@@ -33601,7 +33782,7 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33601
33782
|
nodeId: this.imageId
|
|
33602
33783
|
});
|
|
33603
33784
|
}
|
|
33604
|
-
this.setState(
|
|
33785
|
+
this.setState(WEAVE_IMAGE_TOOL_STATE.FINISHED);
|
|
33605
33786
|
}
|
|
33606
33787
|
this.cancelAction();
|
|
33607
33788
|
}
|
|
@@ -33611,14 +33792,35 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33611
33792
|
this.cancelAction = cancelAction;
|
|
33612
33793
|
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
33613
33794
|
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
33795
|
+
this.ignorePointerEvents = false;
|
|
33796
|
+
this.ignoreKeyboardEvents = false;
|
|
33614
33797
|
this.forceMainContainer = params?.forceMainContainer ?? false;
|
|
33798
|
+
this.imageURL = null;
|
|
33615
33799
|
this.imageId = v4_default();
|
|
33616
33800
|
this.props = this.initProps();
|
|
33617
33801
|
if (params?.imageId) this.updateProps({ imageId: params.imageId });
|
|
33618
|
-
if (
|
|
33619
|
-
|
|
33620
|
-
|
|
33621
|
-
|
|
33802
|
+
if (this.forceExecution) {
|
|
33803
|
+
this.ignorePointerEvents = true;
|
|
33804
|
+
this.ignoreKeyboardEvents = true;
|
|
33805
|
+
}
|
|
33806
|
+
if (params?.position) this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
|
|
33807
|
+
if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE && params.imageFile && params.imageDownscaleRatio) {
|
|
33808
|
+
this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE;
|
|
33809
|
+
this.loadImage(params.imageFile, params.imageDownscaleRatio, params?.position ?? void 0);
|
|
33810
|
+
}
|
|
33811
|
+
if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && params.imageURL && params.imageFallback && params.imageWidth && params.imageHeight) {
|
|
33812
|
+
this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL;
|
|
33813
|
+
this.updateProps({
|
|
33814
|
+
imageFallback: params.imageFallback,
|
|
33815
|
+
width: params.imageWidth,
|
|
33816
|
+
height: params.imageHeight
|
|
33817
|
+
});
|
|
33818
|
+
this.loadImage(params.imageURL, void 0, params?.position ?? void 0);
|
|
33819
|
+
}
|
|
33820
|
+
if (![WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE, WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL].includes(params.type)) {
|
|
33821
|
+
this.cancelAction();
|
|
33822
|
+
return;
|
|
33823
|
+
}
|
|
33622
33824
|
return {
|
|
33623
33825
|
nodeId: this.imageId,
|
|
33624
33826
|
finishUploadCallback: (nodeId, imageURL) => {
|
|
@@ -33628,38 +33830,516 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33628
33830
|
}
|
|
33629
33831
|
saveImageUrl(nodeId, imageURL) {
|
|
33630
33832
|
this.imageURL = imageURL;
|
|
33631
|
-
|
|
33833
|
+
const stage = this.instance.getStage();
|
|
33834
|
+
const nodeHandler = this.instance.getNodeHandler("image");
|
|
33835
|
+
const node = stage.findOne(`#${nodeId}`);
|
|
33836
|
+
if (nodeHandler && node) {
|
|
33837
|
+
node.setAttr("imageURL", imageURL);
|
|
33838
|
+
nodeHandler.forceLoadImage(node);
|
|
33839
|
+
this.instance.updateNode(nodeHandler.serialize(node), { origin: "system" });
|
|
33840
|
+
}
|
|
33841
|
+
}
|
|
33842
|
+
cleanup() {
|
|
33843
|
+
const stage = this.instance.getStage();
|
|
33844
|
+
if (this.tempImageNode) this.tempImageNode.destroy();
|
|
33845
|
+
if (!this.forceExecution) {
|
|
33846
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
33847
|
+
if (selectionPlugin) {
|
|
33848
|
+
const node = stage.findOne(`#${this.imageId}`);
|
|
33849
|
+
if (node) selectionPlugin.setSelectedNodes([node]);
|
|
33850
|
+
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
33851
|
+
}
|
|
33852
|
+
stage.container().style.cursor = "default";
|
|
33853
|
+
this.instance.endDrag(WEAVE_IMAGE_TOOL_ACTION_NAME);
|
|
33854
|
+
}
|
|
33855
|
+
this.initialCursor = null;
|
|
33856
|
+
this.forceMainContainer = false;
|
|
33857
|
+
this.container = void 0;
|
|
33858
|
+
this.tempImageNode = null;
|
|
33859
|
+
this.imageURL = null;
|
|
33860
|
+
this.clickPoint = null;
|
|
33861
|
+
this.setState(WEAVE_IMAGE_TOOL_STATE.IDLE);
|
|
33862
|
+
}
|
|
33863
|
+
getImageNodeHandler() {
|
|
33864
|
+
return this.instance.getNodeHandler("image");
|
|
33865
|
+
}
|
|
33866
|
+
setCursor() {
|
|
33867
|
+
const stage = this.instance.getStage();
|
|
33868
|
+
stage.container().style.cursor = "crosshair";
|
|
33869
|
+
}
|
|
33870
|
+
setFocusStage() {
|
|
33871
|
+
const stage = this.instance.getStage();
|
|
33872
|
+
stage.container().tabIndex = 1;
|
|
33873
|
+
stage.container().blur();
|
|
33874
|
+
stage.container().focus();
|
|
33875
|
+
}
|
|
33876
|
+
getImageSizeFromFile(file) {
|
|
33877
|
+
return new Promise((resolve, reject) => {
|
|
33878
|
+
const img = new Image();
|
|
33879
|
+
const url = URL.createObjectURL(file);
|
|
33880
|
+
img.onload = () => {
|
|
33881
|
+
resolve({
|
|
33882
|
+
width: img.naturalWidth,
|
|
33883
|
+
height: img.naturalHeight
|
|
33884
|
+
});
|
|
33885
|
+
URL.revokeObjectURL(url);
|
|
33886
|
+
};
|
|
33887
|
+
img.onerror = reject;
|
|
33888
|
+
img.src = url;
|
|
33889
|
+
});
|
|
33890
|
+
}
|
|
33891
|
+
async downscaleImageFile(file, ratio) {
|
|
33892
|
+
const bitmap = await createImageBitmap(file);
|
|
33893
|
+
const width = Math.round(bitmap.width * ratio);
|
|
33894
|
+
const height = Math.round(bitmap.height * ratio);
|
|
33895
|
+
const canvas = document.createElement("canvas");
|
|
33896
|
+
canvas.width = width;
|
|
33897
|
+
canvas.height = height;
|
|
33898
|
+
const ctx = canvas.getContext("2d");
|
|
33899
|
+
ctx.drawImage(bitmap, 0, 0, width, height);
|
|
33900
|
+
return new Promise((resolve) => {
|
|
33901
|
+
canvas.toBlob((blob) => resolve(blob), file.type, .9);
|
|
33902
|
+
});
|
|
33903
|
+
}
|
|
33904
|
+
setDragAndDropProperties(properties) {
|
|
33905
|
+
this.instance.startDrag(WEAVE_IMAGE_TOOL_ACTION_NAME);
|
|
33906
|
+
this.instance.setDragProperties(properties);
|
|
33907
|
+
}
|
|
33908
|
+
getActualState() {
|
|
33909
|
+
return this.state;
|
|
33910
|
+
}
|
|
33911
|
+
};
|
|
33912
|
+
|
|
33913
|
+
//#endregion
|
|
33914
|
+
//#region src/actions/images-tool/constants.ts
|
|
33915
|
+
const WEAVE_IMAGES_TOOL_ACTION_NAME = "imagesTool";
|
|
33916
|
+
const WEAVE_IMAGES_TOOL_UPLOAD_TYPE = {
|
|
33917
|
+
["FILE"]: "file",
|
|
33918
|
+
["IMAGE_URL"]: "imageURL"
|
|
33919
|
+
};
|
|
33920
|
+
const WEAVE_IMAGES_TOOL_STATE = {
|
|
33921
|
+
["IDLE"]: "idle",
|
|
33922
|
+
["UPLOADING"]: "uploading",
|
|
33923
|
+
["DEFINING_POSITION"]: "definingPosition",
|
|
33924
|
+
["SELECTED_POSITION"]: "selectedPosition",
|
|
33925
|
+
["ADDING"]: "adding",
|
|
33926
|
+
["FINISHED"]: "finished"
|
|
33927
|
+
};
|
|
33928
|
+
const WEAVE_IMAGES_TOOL_DEFAULT_CONFIG = {
|
|
33929
|
+
style: {
|
|
33930
|
+
cursor: {
|
|
33931
|
+
padding: 5,
|
|
33932
|
+
imageThumbnails: {
|
|
33933
|
+
padding: 15,
|
|
33934
|
+
width: 250,
|
|
33935
|
+
height: 250,
|
|
33936
|
+
shadowColor: "#aaaaaa",
|
|
33937
|
+
shadowBlur: 10,
|
|
33938
|
+
shadowOffset: {
|
|
33939
|
+
x: 2,
|
|
33940
|
+
y: 2
|
|
33941
|
+
},
|
|
33942
|
+
shadowOpacity: .5
|
|
33943
|
+
}
|
|
33944
|
+
},
|
|
33945
|
+
moreImages: {
|
|
33946
|
+
paddingX: 12,
|
|
33947
|
+
paddingY: 8,
|
|
33948
|
+
fontSize: 16,
|
|
33949
|
+
fontFamily: "Arial",
|
|
33950
|
+
textColor: "#000000",
|
|
33951
|
+
backgroundColor: "#FFFFFF",
|
|
33952
|
+
backgroundOpacity: 1
|
|
33953
|
+
},
|
|
33954
|
+
images: { padding: 20 }
|
|
33955
|
+
},
|
|
33956
|
+
layout: { columns: 4 }
|
|
33957
|
+
};
|
|
33958
|
+
|
|
33959
|
+
//#endregion
|
|
33960
|
+
//#region src/utils/generic.ts
|
|
33961
|
+
function sleep(ms) {
|
|
33962
|
+
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
33963
|
+
}
|
|
33964
|
+
|
|
33965
|
+
//#endregion
|
|
33966
|
+
//#region src/actions/images-tool/images-tool.ts
|
|
33967
|
+
var WeaveImagesToolAction = class extends WeaveAction {
|
|
33968
|
+
initialized = false;
|
|
33969
|
+
initialCursor = null;
|
|
33970
|
+
nodesIds = [];
|
|
33971
|
+
imagesIds = [];
|
|
33972
|
+
imagesSize = [];
|
|
33973
|
+
imagesDownscaleRatio = [];
|
|
33974
|
+
imagesFallback = [];
|
|
33975
|
+
images = null;
|
|
33976
|
+
imagesURLs = null;
|
|
33977
|
+
forceMainContainer = false;
|
|
33978
|
+
onStartUploading = () => {};
|
|
33979
|
+
onFinishedUploading = () => {};
|
|
33980
|
+
uploadType = null;
|
|
33981
|
+
onPropsChange = void 0;
|
|
33982
|
+
update = void 0;
|
|
33983
|
+
constructor(params) {
|
|
33984
|
+
super();
|
|
33985
|
+
this.config = mergeExceptArrays(WEAVE_IMAGES_TOOL_DEFAULT_CONFIG, params ?? {});
|
|
33986
|
+
this.pointers = new Map();
|
|
33987
|
+
this.initialized = false;
|
|
33988
|
+
this.tempPointerFeedbackNode = null;
|
|
33989
|
+
this.state = WEAVE_IMAGES_TOOL_STATE.IDLE;
|
|
33990
|
+
this.images = [];
|
|
33991
|
+
this.container = void 0;
|
|
33992
|
+
this.preloadImgs = {};
|
|
33993
|
+
this.uploadType = null;
|
|
33994
|
+
this.clickPoint = null;
|
|
33995
|
+
}
|
|
33996
|
+
getName() {
|
|
33997
|
+
return WEAVE_IMAGES_TOOL_ACTION_NAME;
|
|
33998
|
+
}
|
|
33999
|
+
getPreloadedImage(imageId) {
|
|
34000
|
+
return this.preloadImgs?.[imageId];
|
|
34001
|
+
}
|
|
34002
|
+
initProps() {
|
|
34003
|
+
return {
|
|
34004
|
+
width: 100,
|
|
34005
|
+
height: 100,
|
|
34006
|
+
scaleX: 1,
|
|
34007
|
+
scaleY: 1
|
|
34008
|
+
};
|
|
34009
|
+
}
|
|
34010
|
+
onInit() {
|
|
34011
|
+
this.instance.addEventListener("onStageDrop", (e) => {
|
|
34012
|
+
const dragId = this.instance.getDragStartedId();
|
|
34013
|
+
const dragProperties = this.instance.getDragProperties();
|
|
34014
|
+
if (dragProperties && dragId === WEAVE_IMAGES_TOOL_ACTION_NAME) {
|
|
34015
|
+
this.instance.getStage().setPointersPositions(e);
|
|
34016
|
+
const position = getPositionRelativeToContainerOnPosition(this.instance);
|
|
34017
|
+
this.instance.triggerAction(WEAVE_IMAGES_TOOL_ACTION_NAME, {
|
|
34018
|
+
type: WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL,
|
|
34019
|
+
imagesURLs: dragProperties.imagesURls,
|
|
34020
|
+
imagesSize: dragProperties.imagesSize,
|
|
34021
|
+
imagesFallback: dragProperties.imagesFallback,
|
|
34022
|
+
imagesIds: dragProperties.imagesIds,
|
|
34023
|
+
position
|
|
34024
|
+
});
|
|
34025
|
+
}
|
|
34026
|
+
});
|
|
34027
|
+
}
|
|
34028
|
+
setupEvents() {
|
|
34029
|
+
const stage = this.instance.getStage();
|
|
34030
|
+
stage.container().addEventListener("keydown", (e) => {
|
|
34031
|
+
if (e.key === "Escape" && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) {
|
|
34032
|
+
this.cancelAction();
|
|
34033
|
+
return;
|
|
34034
|
+
}
|
|
34035
|
+
});
|
|
34036
|
+
stage.on("pointerdown", (e) => {
|
|
34037
|
+
this.setTapStart(e);
|
|
34038
|
+
this.pointers.set(e.evt.pointerId, {
|
|
34039
|
+
x: e.evt.clientX,
|
|
34040
|
+
y: e.evt.clientY
|
|
34041
|
+
});
|
|
34042
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) {
|
|
34043
|
+
this.state = WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION;
|
|
34044
|
+
return;
|
|
34045
|
+
}
|
|
34046
|
+
if (this.state === WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION) this.state = WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION;
|
|
34047
|
+
});
|
|
34048
|
+
stage.on("pointermove", (e) => {
|
|
34049
|
+
if (this.state === WEAVE_IMAGES_TOOL_STATE.IDLE) return;
|
|
34050
|
+
this.setCursor();
|
|
34051
|
+
this.setFocusStage();
|
|
34052
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) {
|
|
34053
|
+
this.state = WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION;
|
|
34054
|
+
return;
|
|
34055
|
+
}
|
|
34056
|
+
if ([WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION, WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempPointerFeedbackNode && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
|
|
34057
|
+
const mousePos = stage.getRelativePointerPosition();
|
|
34058
|
+
const cursorPadding = this.config.style.cursor.padding;
|
|
34059
|
+
this.tempPointerFeedbackNode.setAttrs({
|
|
34060
|
+
x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
|
|
34061
|
+
y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY()
|
|
34062
|
+
});
|
|
34063
|
+
}
|
|
34064
|
+
});
|
|
34065
|
+
stage.on("pointerup", (e) => {
|
|
34066
|
+
this.pointers.delete(e.evt.pointerId);
|
|
34067
|
+
if (this.state === WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
|
|
34068
|
+
});
|
|
34069
|
+
this.initialized = true;
|
|
34070
|
+
}
|
|
34071
|
+
setState(state) {
|
|
34072
|
+
this.state = state;
|
|
34073
|
+
}
|
|
34074
|
+
async addImages(position) {
|
|
34075
|
+
const stage = this.instance.getStage();
|
|
34076
|
+
this.setCursor();
|
|
34077
|
+
this.setFocusStage();
|
|
34078
|
+
if (position) {
|
|
34079
|
+
this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
|
|
34080
|
+
this.handleAdding(position);
|
|
34081
|
+
return;
|
|
34082
|
+
}
|
|
34083
|
+
if (!this.tempPointerFeedbackNode && !this.isTouchDevice() && this.images && this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
|
|
34084
|
+
const mousePos = stage.getRelativePointerPosition();
|
|
34085
|
+
const cursorPadding = this.config.style.cursor.padding;
|
|
34086
|
+
const imageThumbnailsPadding = this.config.style.cursor.imageThumbnails.padding;
|
|
34087
|
+
this.tempPointerFeedbackNode = new Konva.Group({
|
|
34088
|
+
x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
|
|
34089
|
+
y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY(),
|
|
34090
|
+
listening: false
|
|
34091
|
+
});
|
|
34092
|
+
const imagesTop3 = this.images.slice(0, 3) ?? [];
|
|
34093
|
+
let maxWidth = 0;
|
|
34094
|
+
let maxHeight = 0;
|
|
34095
|
+
let position$1 = {
|
|
34096
|
+
x: 0,
|
|
34097
|
+
y: 0
|
|
34098
|
+
};
|
|
34099
|
+
for (const image of imagesTop3) {
|
|
34100
|
+
const imageSource = await this.loadImageSource(image);
|
|
34101
|
+
const maxImageWidth = this.config.style.cursor.imageThumbnails.width;
|
|
34102
|
+
const maxImageHeight = this.config.style.cursor.imageThumbnails.height;
|
|
34103
|
+
const shadowColor = this.config.style.cursor.imageThumbnails.shadowColor;
|
|
34104
|
+
const shadowBlur = this.config.style.cursor.imageThumbnails.shadowBlur;
|
|
34105
|
+
const shadowOffset = this.config.style.cursor.imageThumbnails.shadowOffset;
|
|
34106
|
+
const shadowOpacity = this.config.style.cursor.imageThumbnails.shadowOpacity;
|
|
34107
|
+
const aspectRatio = imageSource.width / imageSource.height || 1;
|
|
34108
|
+
const imageWidth = maxImageWidth * aspectRatio * (1 / stage.scaleX());
|
|
34109
|
+
const imageHeight = maxImageHeight * (1 / stage.scaleY());
|
|
34110
|
+
const imageNode = new Konva.Image({
|
|
34111
|
+
x: position$1.x,
|
|
34112
|
+
y: position$1.y,
|
|
34113
|
+
width: imageWidth,
|
|
34114
|
+
height: imageHeight,
|
|
34115
|
+
opacity: 1,
|
|
34116
|
+
adding: true,
|
|
34117
|
+
image: imageSource,
|
|
34118
|
+
stroke: "#000000ff",
|
|
34119
|
+
strokeWidth: 0,
|
|
34120
|
+
strokeScaleEnabled: true,
|
|
34121
|
+
listening: false,
|
|
34122
|
+
shadowColor,
|
|
34123
|
+
shadowBlur,
|
|
34124
|
+
shadowOffset,
|
|
34125
|
+
shadowOpacity
|
|
34126
|
+
});
|
|
34127
|
+
maxWidth = position$1.x + imageWidth;
|
|
34128
|
+
maxHeight = Math.max(maxHeight, position$1.y + imageHeight);
|
|
34129
|
+
position$1 = {
|
|
34130
|
+
x: position$1.x + imageThumbnailsPadding / stage.scaleX(),
|
|
34131
|
+
y: position$1.y + imageThumbnailsPadding / stage.scaleY()
|
|
34132
|
+
};
|
|
34133
|
+
this.tempPointerFeedbackNode.add(imageNode);
|
|
34134
|
+
imageNode.moveToBottom();
|
|
34135
|
+
}
|
|
34136
|
+
if (this.images.length > 3) {
|
|
34137
|
+
const paddingX = this.config.style.moreImages.paddingX;
|
|
34138
|
+
const paddingY = this.config.style.moreImages.paddingY;
|
|
34139
|
+
const fontSize = this.config.style.moreImages.fontSize;
|
|
34140
|
+
const fontFamily = this.config.style.moreImages.fontFamily;
|
|
34141
|
+
const textColor = this.config.style.moreImages.textColor;
|
|
34142
|
+
const backgroundColor = this.config.style.moreImages.backgroundColor;
|
|
34143
|
+
const backgroundOpacity = this.config.style.moreImages.backgroundOpacity;
|
|
34144
|
+
const text = `and ${this.images.length - 3} more image(s)`;
|
|
34145
|
+
const textNode = new Konva.Text({
|
|
34146
|
+
x: maxWidth + paddingX / stage.scaleX() + cursorPadding / stage.scaleX(),
|
|
34147
|
+
y: position$1.y,
|
|
34148
|
+
fontFamily,
|
|
34149
|
+
fontSize: fontSize / stage.scaleX(),
|
|
34150
|
+
text,
|
|
34151
|
+
fill: textColor,
|
|
34152
|
+
listening: false
|
|
34153
|
+
});
|
|
34154
|
+
const textSize = textNode.measureSize(text);
|
|
34155
|
+
textNode.y((maxHeight - textSize.height) / 2);
|
|
34156
|
+
this.tempPointerFeedbackNode.add(textNode);
|
|
34157
|
+
const textBg = new Konva.Rect({
|
|
34158
|
+
x: textNode.x() - paddingX / stage.scaleX(),
|
|
34159
|
+
y: textNode.y() - paddingY / stage.scaleY(),
|
|
34160
|
+
width: textNode.width() + 2 * paddingX / stage.scaleX(),
|
|
34161
|
+
height: textNode.height() + 2 * paddingY / stage.scaleY(),
|
|
34162
|
+
fill: backgroundColor,
|
|
34163
|
+
opacity: backgroundOpacity
|
|
34164
|
+
});
|
|
34165
|
+
this.tempPointerFeedbackNode.add(textBg);
|
|
34166
|
+
textBg.moveToBottom();
|
|
34167
|
+
textNode.moveToTop();
|
|
34168
|
+
}
|
|
34169
|
+
this.instance.getUtilityLayer()?.add(this.tempPointerFeedbackNode);
|
|
34170
|
+
}
|
|
34171
|
+
this.clickPoint = null;
|
|
34172
|
+
this.setState(WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION);
|
|
34173
|
+
}
|
|
34174
|
+
async handleAdding(position) {
|
|
34175
|
+
const stage = this.instance.getStage();
|
|
34176
|
+
this.tempPointerFeedbackNode?.destroy();
|
|
34177
|
+
this.tempPointerFeedbackNode = null;
|
|
34178
|
+
this.instance.getUtilityLayer()?.batchDraw();
|
|
34179
|
+
stage.container().style.cursor = "default";
|
|
34180
|
+
const { mousePoint, container } = this.instance.getMousePointer(position);
|
|
34181
|
+
this.clickPoint = mousePoint;
|
|
34182
|
+
this.container = container;
|
|
34183
|
+
const originPoint = {
|
|
34184
|
+
x: this.clickPoint?.x ?? 0,
|
|
34185
|
+
y: this.clickPoint?.y ?? 0
|
|
34186
|
+
};
|
|
34187
|
+
if (!this.images && !this.imagesURLs) return;
|
|
34188
|
+
const imageToolActionHandler = this.instance.getActionHandler(WEAVE_IMAGE_TOOL_ACTION_NAME);
|
|
34189
|
+
if (!imageToolActionHandler) return;
|
|
34190
|
+
const imagesPadding = this.config.style.images.padding;
|
|
34191
|
+
const layoutColumns = this.config.layout.columns;
|
|
34192
|
+
const uploadImagesPromises = [];
|
|
34193
|
+
let imagePositionX = originPoint.x;
|
|
34194
|
+
let imagePositionY = originPoint.y;
|
|
34195
|
+
let maxHeight = 0;
|
|
34196
|
+
if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE && this.images) {
|
|
34197
|
+
for (let i = 0; i < this.images.length; i++) {
|
|
34198
|
+
const file = this.images[i];
|
|
34199
|
+
const downscaleRatio = this.imagesDownscaleRatio[i];
|
|
34200
|
+
const resourceId = this.imagesIds[i];
|
|
34201
|
+
const { nodeId, finishUploadCallback } = this.instance.triggerAction(
|
|
34202
|
+
WEAVE_IMAGE_TOOL_ACTION_NAME,
|
|
34203
|
+
{
|
|
34204
|
+
type: "file",
|
|
34205
|
+
imageFile: file,
|
|
34206
|
+
imageDownscaleRatio: downscaleRatio,
|
|
34207
|
+
imageId: resourceId,
|
|
34208
|
+
position: {
|
|
34209
|
+
x: imagePositionX,
|
|
34210
|
+
y: imagePositionY
|
|
34211
|
+
},
|
|
34212
|
+
forceMainContainer: this.forceMainContainer
|
|
34213
|
+
},
|
|
34214
|
+
true
|
|
34215
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34216
|
+
);
|
|
34217
|
+
this.nodesIds.push(nodeId);
|
|
34218
|
+
maxHeight = Math.max(maxHeight, this.imagesSize[i].height);
|
|
34219
|
+
imagePositionX += imagesPadding + this.imagesSize[i].width;
|
|
34220
|
+
if ((i + 1) % layoutColumns === 0) {
|
|
34221
|
+
imagePositionX = originPoint.x;
|
|
34222
|
+
imagePositionY = imagePositionY + maxHeight + imagesPadding;
|
|
34223
|
+
maxHeight = 0;
|
|
34224
|
+
}
|
|
34225
|
+
const uploadImageFunction = async () => {
|
|
34226
|
+
const data = await this.uploadImageFunction.mutateAsync(file);
|
|
34227
|
+
const room = data.image.roomId;
|
|
34228
|
+
const imageId = data.image.imageId;
|
|
34229
|
+
finishUploadCallback?.(nodeId, `${process.env.NEXT_PUBLIC_API_ENDPOINT}/weavejs/rooms/${room}/images/${imageId}`);
|
|
34230
|
+
};
|
|
34231
|
+
uploadImagesPromises.push(uploadImageFunction);
|
|
34232
|
+
while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
|
|
34233
|
+
}
|
|
34234
|
+
const uploadImages = async () => {
|
|
34235
|
+
this.onStartUploading();
|
|
34236
|
+
await Promise.allSettled(uploadImagesPromises.map((fn) => fn()));
|
|
34237
|
+
this.onFinishedUploading();
|
|
34238
|
+
};
|
|
34239
|
+
uploadImages();
|
|
34240
|
+
}
|
|
34241
|
+
if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imagesURLs) for (let i = 0; i < this.imagesURLs.length; i++) {
|
|
34242
|
+
const imageURL = this.imagesURLs[i];
|
|
34243
|
+
const imageFallback = this.imagesFallback[i];
|
|
34244
|
+
const imageSize = this.imagesSize[i];
|
|
34245
|
+
const resourceId = this.imagesIds[i];
|
|
34246
|
+
const { nodeId } = this.instance.triggerAction(
|
|
34247
|
+
WEAVE_IMAGE_TOOL_ACTION_NAME,
|
|
34248
|
+
{
|
|
34249
|
+
type: "imageURL",
|
|
34250
|
+
imageURL,
|
|
34251
|
+
imageFallback,
|
|
34252
|
+
imageWidth: imageSize.width,
|
|
34253
|
+
imageHeight: imageSize.height,
|
|
34254
|
+
imageId: resourceId,
|
|
34255
|
+
position: {
|
|
34256
|
+
x: imagePositionX,
|
|
34257
|
+
y: imagePositionY
|
|
34258
|
+
},
|
|
34259
|
+
forceMainContainer: this.forceMainContainer
|
|
34260
|
+
},
|
|
34261
|
+
true
|
|
34262
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34263
|
+
);
|
|
34264
|
+
this.nodesIds.push(nodeId);
|
|
34265
|
+
maxHeight = Math.max(maxHeight, this.imagesSize[i].height);
|
|
34266
|
+
imagePositionX += imagesPadding + this.imagesSize[i].width;
|
|
34267
|
+
if ((i + 1) % layoutColumns === 0) {
|
|
34268
|
+
imagePositionX = originPoint.x;
|
|
34269
|
+
imagePositionY = imagePositionY + maxHeight + imagesPadding;
|
|
34270
|
+
maxHeight = 0;
|
|
34271
|
+
}
|
|
34272
|
+
while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
|
|
34273
|
+
}
|
|
34274
|
+
this.setState(WEAVE_IMAGES_TOOL_STATE.FINISHED);
|
|
34275
|
+
this.cancelAction();
|
|
34276
|
+
}
|
|
34277
|
+
trigger(cancelAction, params) {
|
|
34278
|
+
if (!this.instance) throw new Error("Instance not defined");
|
|
34279
|
+
if (!this.initialized) this.setupEvents();
|
|
34280
|
+
this.cancelAction = cancelAction;
|
|
34281
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
34282
|
+
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
34283
|
+
if (params?.position) this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
|
|
34284
|
+
this.forceMainContainer = params.forceMainContainer ?? false;
|
|
34285
|
+
if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
|
|
34286
|
+
this.uploadType = WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE;
|
|
34287
|
+
this.onStartUploading = params.onStartUploading;
|
|
34288
|
+
this.onFinishedUploading = params.onFinishedUploading;
|
|
34289
|
+
this.uploadImageFunction = params.uploadImageFunction;
|
|
34290
|
+
this.nodesIds = [];
|
|
34291
|
+
this.images = params.images;
|
|
34292
|
+
this.imagesDownscaleRatio = params.imagesDownscaleRatio;
|
|
34293
|
+
}
|
|
34294
|
+
if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL) {
|
|
34295
|
+
this.uploadType = WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL;
|
|
34296
|
+
this.nodesIds = [];
|
|
34297
|
+
this.imagesURLs = params.imagesURLs;
|
|
34298
|
+
this.imagesFallback = params.imagesFallback;
|
|
34299
|
+
}
|
|
34300
|
+
if (![WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE, WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL].includes(params.type)) {
|
|
34301
|
+
this.cancelAction();
|
|
34302
|
+
return;
|
|
34303
|
+
}
|
|
34304
|
+
this.imagesIds = params.imagesIds;
|
|
34305
|
+
this.imagesSize = params.imagesSize;
|
|
34306
|
+
this.addImages(params?.position);
|
|
34307
|
+
}
|
|
34308
|
+
saveImageUrl(nodeId, imageURL) {
|
|
34309
|
+
if (this.state !== WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION) {
|
|
33632
34310
|
const stage = this.instance.getStage();
|
|
33633
34311
|
const nodeHandler = this.instance.getNodeHandler("image");
|
|
33634
34312
|
const node = stage.findOne(`#${nodeId}`);
|
|
33635
34313
|
if (nodeHandler && node) {
|
|
33636
34314
|
node.setAttr("imageURL", imageURL);
|
|
33637
|
-
|
|
34315
|
+
nodeHandler.forceLoadImage(node);
|
|
34316
|
+
this.instance.updateNode(nodeHandler.serialize(node), { origin: "system" });
|
|
33638
34317
|
}
|
|
33639
34318
|
}
|
|
33640
34319
|
}
|
|
33641
34320
|
cleanup() {
|
|
33642
34321
|
const stage = this.instance.getStage();
|
|
33643
|
-
|
|
34322
|
+
this.tempPointerFeedbackNode?.destroy();
|
|
34323
|
+
this.tempPointerFeedbackNode = null;
|
|
34324
|
+
this.instance.getUtilityLayer()?.batchDraw();
|
|
33644
34325
|
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
33645
34326
|
if (selectionPlugin) {
|
|
33646
|
-
const
|
|
33647
|
-
|
|
34327
|
+
const addedNodes = [];
|
|
34328
|
+
for (const nodeId of this.nodesIds) {
|
|
34329
|
+
const node = stage.findOne(`#${nodeId}`);
|
|
34330
|
+
if (node) addedNodes.push(node);
|
|
34331
|
+
}
|
|
34332
|
+
selectionPlugin.setSelectedNodes(addedNodes);
|
|
33648
34333
|
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
33649
34334
|
}
|
|
34335
|
+
this.instance.endDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
|
|
33650
34336
|
stage.container().style.cursor = "default";
|
|
33651
|
-
this.
|
|
33652
|
-
this.initialCursor = null;
|
|
33653
|
-
this.imageId = null;
|
|
34337
|
+
this.uploadType = null;
|
|
33654
34338
|
this.forceMainContainer = false;
|
|
34339
|
+
this.initialCursor = null;
|
|
33655
34340
|
this.container = void 0;
|
|
33656
|
-
this.tempImageNode = null;
|
|
33657
|
-
this.imageURL = null;
|
|
33658
34341
|
this.clickPoint = null;
|
|
33659
|
-
this.setState(
|
|
33660
|
-
}
|
|
33661
|
-
getImageNodeHandler() {
|
|
33662
|
-
return this.instance.getNodeHandler("image");
|
|
34342
|
+
this.setState(WEAVE_IMAGES_TOOL_STATE.IDLE);
|
|
33663
34343
|
}
|
|
33664
34344
|
setCursor() {
|
|
33665
34345
|
const stage = this.instance.getStage();
|
|
@@ -33671,8 +34351,46 @@ var WeaveImageToolAction = class extends WeaveAction {
|
|
|
33671
34351
|
stage.container().blur();
|
|
33672
34352
|
stage.container().focus();
|
|
33673
34353
|
}
|
|
34354
|
+
getImageSizeFromFile(file) {
|
|
34355
|
+
return new Promise((resolve, reject) => {
|
|
34356
|
+
const img = new Image();
|
|
34357
|
+
const url = URL.createObjectURL(file);
|
|
34358
|
+
img.onload = () => {
|
|
34359
|
+
resolve({
|
|
34360
|
+
width: img.naturalWidth,
|
|
34361
|
+
height: img.naturalHeight
|
|
34362
|
+
});
|
|
34363
|
+
URL.revokeObjectURL(url);
|
|
34364
|
+
};
|
|
34365
|
+
img.onerror = reject;
|
|
34366
|
+
img.src = url;
|
|
34367
|
+
});
|
|
34368
|
+
}
|
|
34369
|
+
loadImageSource(image) {
|
|
34370
|
+
return new Promise((resolve, reject) => {
|
|
34371
|
+
const reader = new FileReader();
|
|
34372
|
+
reader.onloadend = () => {
|
|
34373
|
+
const imageSource = Konva.Util.createImageElement();
|
|
34374
|
+
imageSource.crossOrigin = "anonymous";
|
|
34375
|
+
imageSource.onerror = (error) => {
|
|
34376
|
+
reject(error);
|
|
34377
|
+
};
|
|
34378
|
+
imageSource.onload = async () => {
|
|
34379
|
+
resolve(imageSource);
|
|
34380
|
+
};
|
|
34381
|
+
imageSource.src = reader.result;
|
|
34382
|
+
};
|
|
34383
|
+
reader.onerror = () => {
|
|
34384
|
+
reject(new Error("Failed to read image file"));
|
|
34385
|
+
};
|
|
34386
|
+
reader.readAsDataURL(image);
|
|
34387
|
+
});
|
|
34388
|
+
}
|
|
34389
|
+
isTouchDevice() {
|
|
34390
|
+
return window.matchMedia("(pointer: coarse)").matches;
|
|
34391
|
+
}
|
|
33674
34392
|
setDragAndDropProperties(properties) {
|
|
33675
|
-
this.instance.startDrag(
|
|
34393
|
+
this.instance.startDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
|
|
33676
34394
|
this.instance.setDragProperties(properties);
|
|
33677
34395
|
}
|
|
33678
34396
|
};
|
|
@@ -38941,5 +39659,5 @@ var WeaveStageKeyboardMovePlugin = class extends WeavePlugin {
|
|
|
38941
39659
|
};
|
|
38942
39660
|
|
|
38943
39661
|
//#endregion
|
|
38944
|
-
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, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_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,
|
|
39662
|
+
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, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_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, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_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_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, 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_IMAGES_TOOL_ACTION_NAME, WEAVE_IMAGES_TOOL_DEFAULT_CONFIG, WEAVE_IMAGES_TOOL_STATE, WEAVE_IMAGES_TOOL_UPLOAD_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_IMAGE_TOOL_ACTION_NAME, WEAVE_IMAGE_TOOL_CONFIG_DEFAULT, WEAVE_IMAGE_TOOL_STATE, WEAVE_IMAGE_TOOL_UPLOAD_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, 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_DROP_AREA_KEY, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_IMAGE_CROPPING_MODE, 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_STAGE_PANNING_THROTTLE_MS, WEAVE_STAGE_TEXT_EDITION_MODE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_DEFAULT_CONFIG, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImagesToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveRenderer, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, moveNodeToContainerNT, resetScale, setupCanvasBackend, setupSkiaBackend, weavejsToYjsBinary };
|
|
38945
39663
|
//# sourceMappingURL=types.js.map
|