kritzel-stencil 0.0.53 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/kritzel-brush-style_17.cjs.entry.js +31 -24
- package/dist/cjs/kritzel-brush-style_17.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/classes/objects/text.class.js +0 -6
- package/dist/collection/classes/objects/text.class.js.map +1 -1
- package/dist/collection/classes/tools/text-tool.class.js +11 -1
- package/dist/collection/classes/tools/text-tool.class.js.map +1 -1
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +37 -17
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +2 -2
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/{p-BO_dOgoX.js → p-B1iOMV3G.js} +3 -3
- package/dist/components/{p-BO_dOgoX.js.map → p-B1iOMV3G.js.map} +1 -1
- package/dist/components/{p-DPTUFMP6.js → p-Cfrjjjns.js} +13 -9
- package/dist/components/p-Cfrjjjns.js.map +1 -0
- package/dist/components/{p-Ck6uu17l.js → p-kDmtXK-1.js} +25 -21
- package/dist/components/{p-Ck6uu17l.js.map → p-kDmtXK-1.js.map} +1 -1
- package/dist/esm/kritzel-brush-style_17.entry.js +31 -24
- package/dist/esm/kritzel-brush-style_17.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-816ced21.entry.js +2 -0
- package/dist/stencil/p-816ced21.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/tools/text-tool.class.d.ts +3 -1
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +1 -0
- package/dist/types/components.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/p-DPTUFMP6.js.map +0 -1
- package/dist/stencil/p-79114109.entry.js +0 -2
- package/dist/stencil/p-79114109.entry.js.map +0 -1
|
@@ -3261,7 +3261,7 @@ class KritzelTextTool extends KritzelBaseTool {
|
|
|
3261
3261
|
'#800080',
|
|
3262
3262
|
];
|
|
3263
3263
|
}
|
|
3264
|
-
|
|
3264
|
+
handleMouseDown(event) {
|
|
3265
3265
|
const path = event.composedPath().slice(1);
|
|
3266
3266
|
const objectElement = path.find(element => element.classList && element.classList.contains('object'));
|
|
3267
3267
|
const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
|
|
@@ -3293,6 +3293,11 @@ class KritzelTextTool extends KritzelBaseTool {
|
|
|
3293
3293
|
this._store.state.activeText = text;
|
|
3294
3294
|
this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
|
|
3295
3295
|
}
|
|
3296
|
+
handleMouseUp(_event) {
|
|
3297
|
+
var _a, _b;
|
|
3298
|
+
(_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3299
|
+
(_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
|
|
3300
|
+
}
|
|
3296
3301
|
handleTouchStart(event) {
|
|
3297
3302
|
const path = event.composedPath().slice(1);
|
|
3298
3303
|
const objectElement = path.find(element => element.classList && element.classList.contains('object'));
|
|
@@ -3324,6 +3329,11 @@ class KritzelTextTool extends KritzelBaseTool {
|
|
|
3324
3329
|
this._store.state.activeText = text;
|
|
3325
3330
|
this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
|
|
3326
3331
|
}
|
|
3332
|
+
handleTouchEnd(_event) {
|
|
3333
|
+
var _a, _b;
|
|
3334
|
+
(_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3335
|
+
(_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
|
|
3336
|
+
}
|
|
3327
3337
|
}
|
|
3328
3338
|
|
|
3329
3339
|
class KritzelText extends KritzelBaseObject {
|
|
@@ -3356,12 +3366,6 @@ class KritzelText extends KritzelBaseObject {
|
|
|
3356
3366
|
if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
|
|
3357
3367
|
return;
|
|
3358
3368
|
}
|
|
3359
|
-
if (!this.isMounted) {
|
|
3360
|
-
requestAnimationFrame(() => {
|
|
3361
|
-
this.elementRef.focus();
|
|
3362
|
-
this.adjustTextareaSize();
|
|
3363
|
-
});
|
|
3364
|
-
}
|
|
3365
3369
|
this.elementRef = element;
|
|
3366
3370
|
this.isMounted = true;
|
|
3367
3371
|
}
|
|
@@ -5727,8 +5731,7 @@ const KritzelEngine = class {
|
|
|
5727
5731
|
handleMouseDown(ev) {
|
|
5728
5732
|
var _a, _b;
|
|
5729
5733
|
if (this.store.state.isContextMenuVisible) {
|
|
5730
|
-
this.
|
|
5731
|
-
this.store.state.isEnabled = true;
|
|
5734
|
+
this.hideContextMenu();
|
|
5732
5735
|
return;
|
|
5733
5736
|
}
|
|
5734
5737
|
if (this.store.state.isEnabled === false) {
|
|
@@ -5816,8 +5819,7 @@ const KritzelEngine = class {
|
|
|
5816
5819
|
handleWheel(ev) {
|
|
5817
5820
|
var _a, _b;
|
|
5818
5821
|
if (this.store.state.isContextMenuVisible) {
|
|
5819
|
-
this.
|
|
5820
|
-
this.store.state.isEnabled = true;
|
|
5822
|
+
this.hideContextMenu();
|
|
5821
5823
|
}
|
|
5822
5824
|
this.viewport.handleWheel(ev);
|
|
5823
5825
|
(_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
|
|
@@ -5841,7 +5843,7 @@ const KritzelEngine = class {
|
|
|
5841
5843
|
}
|
|
5842
5844
|
handleContextMenuAction(event) {
|
|
5843
5845
|
event.detail.action();
|
|
5844
|
-
this.
|
|
5846
|
+
this.hideContextMenu();
|
|
5845
5847
|
}
|
|
5846
5848
|
async registerTool(toolName, toolClass, toolConfig) {
|
|
5847
5849
|
if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
|
|
@@ -5899,21 +5901,26 @@ const KritzelEngine = class {
|
|
|
5899
5901
|
async redo() {
|
|
5900
5902
|
this.store.history.redo();
|
|
5901
5903
|
}
|
|
5904
|
+
async hideContextMenu() {
|
|
5905
|
+
this.store.state.isContextMenuVisible = false;
|
|
5906
|
+
this.store.state.selectionBox = null;
|
|
5907
|
+
this.store.state.isSelecting = false;
|
|
5908
|
+
}
|
|
5902
5909
|
render() {
|
|
5903
5910
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
|
|
5904
5911
|
const computedStyle = window.getComputedStyle(this.host);
|
|
5905
5912
|
const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
|
|
5906
5913
|
const baseHandleSize = parseFloat(baseHandleSizePx);
|
|
5907
5914
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
5908
|
-
return (index.h(index.Host, { key: '
|
|
5909
|
-
_a.translateX), index.h("div", { key: '
|
|
5910
|
-
_b.translateY), index.h("div", { key: '
|
|
5911
|
-
_c.viewportWidth), index.h("div", { key: '
|
|
5912
|
-
_d.viewportHeight), index.h("div", { key: '
|
|
5913
|
-
_e.scale), index.h("div", { key: '
|
|
5914
|
-
_g.name), index.h("div", { key: '
|
|
5915
|
-
_m.cursorX), index.h("div", { key: '
|
|
5916
|
-
_o.cursorY)), index.h("div", { key: '
|
|
5915
|
+
return (index.h(index.Host, { key: '657e79abc0fcfcea53e5cc2fdbf738e2528484eb' }, index.h("div", { key: '958b641575f67e0d4af485d6e016dad97f0374c5', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'cbcceaeb84308afd4585da4156e84e5f388e71a8' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
|
|
5916
|
+
_a.translateX), index.h("div", { key: '85affd2f0e73c5120184c1dcbd43c1d3f20e62fc' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
|
|
5917
|
+
_b.translateY), index.h("div", { key: '50c6c1c60637798619264d7fd970560f2516bdfe' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
|
|
5918
|
+
_c.viewportWidth), index.h("div", { key: 'e7b8687608610ea6690e829bb7ab347789874361' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
|
|
5919
|
+
_d.viewportHeight), index.h("div", { key: 'b0fef414048508caba4096d73803d4e6cf2985d5' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '9eec781e50f6705320af1720b80a2a3437465f8e' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
|
|
5920
|
+
_e.scale), index.h("div", { key: 'fdfce990c7d3e873793ba6fe96fa8c9f509cf871' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
|
|
5921
|
+
_g.name), index.h("div", { key: '4f5291779f38119c0da4dd0c76cee953403a18fb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'f10780190d41f893f9503e69529e4493d3a2bb53' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'efdc247fc22755b6c93e29ae3cba8a3f77d9da1b' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '6220789e4f91b06dc16b5279e9ad7f938be2b57c' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '5d08a8710904e8429322f0abab9501e230269e22' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '3bd7ad33f021ab2bc17019c9421fb66e9324e954' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'f43b598e9de8cfb46584c805f301d277e8c9756a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '5eff9661689fc2a3af5fb1ac535d0a5bac695f7e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'da8b5ee45a3d207e4c77696f938957b30c308a72' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'f958d0ef38567af150fe26637663ef85539815fe' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '8a27c1c3ee36111192b639b2e04dc3295822963b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'a57c3f9874d0755131cba940bbeac4fdd1e4b42d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
|
|
5922
|
+
_m.cursorX), index.h("div", { key: 'b36d278cdf15c9681d5a13bbe0d38c40fb63572f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
|
|
5923
|
+
_o.cursorY)), index.h("div", { key: 'c398ac098e0d94ff7f1bd7775b48b67c80462c14', class: "origin", style: {
|
|
5917
5924
|
transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
|
|
5918
5925
|
} }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
|
|
5919
5926
|
_t.map(object => {
|
|
@@ -6011,7 +6018,7 @@ const KritzelEngine = class {
|
|
|
6011
6018
|
fill: 'transparent',
|
|
6012
6019
|
cursor: 'grab',
|
|
6013
6020
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation))))));
|
|
6014
|
-
}), index.h("svg", { key: '
|
|
6021
|
+
}), index.h("svg", { key: '2e49d78292a0c23413faeaefbdf0a19d0deed738', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
6015
6022
|
height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
|
|
6016
6023
|
width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
|
|
6017
6024
|
left: '0',
|
|
@@ -6020,12 +6027,12 @@ const KritzelEngine = class {
|
|
|
6020
6027
|
position: 'absolute',
|
|
6021
6028
|
transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
|
|
6022
6029
|
overflow: 'visible',
|
|
6023
|
-
}, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '
|
|
6030
|
+
}, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'ae81abc2edbc6b6458c219575b6a30d6dc9202e2', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '8e4cc47400eb7c519e04854b67009dfd147acda6', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
|
|
6024
6031
|
position: 'fixed',
|
|
6025
6032
|
left: `${this.store.state.contextMenuX}px`,
|
|
6026
6033
|
top: `${this.store.state.contextMenuY}px`,
|
|
6027
6034
|
zIndex: '10000',
|
|
6028
|
-
}, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '
|
|
6035
|
+
}, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '259516bef2b2281b7427d312d01b8201508bd7e6' })));
|
|
6029
6036
|
}
|
|
6030
6037
|
get host() { return index.getElement(this); }
|
|
6031
6038
|
};
|