kritzel-stencil 0.0.102 → 0.0.104
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_18.cjs.entry.js +16 -19
- package/dist/cjs/kritzel-brush-style_18.cjs.entry.js.map +1 -1
- package/dist/collection/classes/handlers/rotation.handler.js +0 -1
- package/dist/collection/classes/handlers/rotation.handler.js.map +1 -1
- package/dist/collection/classes/objects/selection-group.class.js +7 -8
- package/dist/collection/classes/objects/selection-group.class.js.map +1 -1
- package/dist/collection/classes/reviver.class.js +0 -2
- package/dist/collection/classes/reviver.class.js.map +1 -1
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +2 -3
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +8 -7
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/{p-CF-8joQn.js → p-DMSOfO6k.js} +18 -21
- package/dist/components/p-DMSOfO6k.js.map +1 -0
- package/dist/esm/kritzel-brush-style_18.entry.js +16 -19
- package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
- package/dist/stencil/p-f059fbff.entry.js +2 -0
- package/dist/stencil/p-f059fbff.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-CF-8joQn.js.map +0 -1
- package/dist/stencil/p-73d454f3.entry.js +0 -2
- package/dist/stencil/p-73d454f3.entry.js.map +0 -1
|
@@ -3897,7 +3897,6 @@ class KritzelRotationHandler extends KritzelBaseHandler {
|
|
|
3897
3897
|
const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
|
|
3898
3898
|
this.rotation = currentRotation - this.initialRotation;
|
|
3899
3899
|
this._store.state.selectionGroup.rotate(this.rotation);
|
|
3900
|
-
this._store.rerender();
|
|
3901
3900
|
clearTimeout(this._store.state.longTouchTimeout);
|
|
3902
3901
|
}
|
|
3903
3902
|
}
|
|
@@ -4354,7 +4353,6 @@ class KritzelReviver {
|
|
|
4354
4353
|
let revivedObj;
|
|
4355
4354
|
switch (obj.__class__) {
|
|
4356
4355
|
case 'KritzelPath':
|
|
4357
|
-
console.log('Reviving KritzelPath');
|
|
4358
4356
|
revivedObj = new KritzelPath(this._store).revive(obj);
|
|
4359
4357
|
break;
|
|
4360
4358
|
case 'KritzelText':
|
|
@@ -4364,7 +4362,6 @@ class KritzelReviver {
|
|
|
4364
4362
|
revivedObj = new KritzelImage(this._store, obj.img).revive(obj);
|
|
4365
4363
|
break;
|
|
4366
4364
|
case 'KritzelSelectionGroup':
|
|
4367
|
-
console.log('Reviving KritzelSelectionGroup');
|
|
4368
4365
|
revivedObj = new KritzelSelectionGroup(this._store).revive(obj);
|
|
4369
4366
|
break;
|
|
4370
4367
|
case 'KritzelBrushTool':
|
|
@@ -4464,13 +4461,13 @@ class KritzelSelectionGroup extends KritzelBaseObject {
|
|
|
4464
4461
|
const heightScaleFactor = height / this.height;
|
|
4465
4462
|
const deltaX = x - this.translateX;
|
|
4466
4463
|
const deltaY = y - this.translateY;
|
|
4467
|
-
this.objects.forEach(
|
|
4468
|
-
const updatedWidth =
|
|
4469
|
-
const updatedHeight =
|
|
4470
|
-
const updatedX =
|
|
4471
|
-
const updatedY =
|
|
4472
|
-
|
|
4473
|
-
this._store.state.objectsOctree.update(
|
|
4464
|
+
this.objects.forEach(obj => {
|
|
4465
|
+
const updatedWidth = obj.width * widthScaleFactor;
|
|
4466
|
+
const updatedHeight = obj.height * heightScaleFactor;
|
|
4467
|
+
const updatedX = obj.translateX + deltaX + (obj.translateX - this.translateX) * (widthScaleFactor - 1);
|
|
4468
|
+
const updatedY = obj.translateY + deltaY + (obj.translateY - this.translateY) * (heightScaleFactor - 1);
|
|
4469
|
+
obj.resize(updatedX, updatedY, updatedWidth, updatedHeight);
|
|
4470
|
+
this._store.state.objectsOctree.update(obj);
|
|
4474
4471
|
});
|
|
4475
4472
|
this.refreshObjectDimensions();
|
|
4476
4473
|
this.unchangedObjects = ObjectHelper.clone(this.objects);
|
|
@@ -4491,7 +4488,6 @@ class KritzelSelectionGroup extends KritzelBaseObject {
|
|
|
4491
4488
|
child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
|
|
4492
4489
|
child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
|
|
4493
4490
|
child.rotation = this.objects.length === 1 ? value : value + unchangedChild.rotation;
|
|
4494
|
-
this._store.state.objectsOctree.update(child);
|
|
4495
4491
|
});
|
|
4496
4492
|
}
|
|
4497
4493
|
copy() {
|
|
@@ -5671,7 +5667,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
|
|
|
5671
5667
|
}
|
|
5672
5668
|
}
|
|
5673
5669
|
|
|
5674
|
-
const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}.debug-panel{position:absolute;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{
|
|
5670
|
+
const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
|
|
5675
5671
|
|
|
5676
5672
|
const KritzelEngine = class {
|
|
5677
5673
|
get isSelecting() {
|
|
@@ -5939,18 +5935,18 @@ const KritzelEngine = class {
|
|
|
5939
5935
|
} }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
|
|
5940
5936
|
_t.map(object => {
|
|
5941
5937
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
5942
|
-
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
|
|
5938
|
+
return (index.h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left' } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
|
|
5943
5939
|
height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
|
|
5944
5940
|
width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
|
|
5945
5941
|
left: '0',
|
|
5946
5942
|
top: '0',
|
|
5947
5943
|
position: 'absolute',
|
|
5948
|
-
transform:
|
|
5944
|
+
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
5949
5945
|
transformOrigin: 'center',
|
|
5950
5946
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
5951
5947
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
5952
5948
|
zIndex: object.zIndex.toString(),
|
|
5953
|
-
} }, index.h("
|
|
5949
|
+
} }, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
|
|
5954
5950
|
minHeight: '0',
|
|
5955
5951
|
minWidth: '0',
|
|
5956
5952
|
backgroundColor: object.backgroundColor,
|
|
@@ -6030,8 +6026,8 @@ const KritzelEngine = class {
|
|
|
6030
6026
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
|
|
6031
6027
|
fill: 'transparent',
|
|
6032
6028
|
cursor: 'grab',
|
|
6033
|
-
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })
|
|
6034
|
-
}), index.h("svg", { key: '
|
|
6029
|
+
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: '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)))))));
|
|
6030
|
+
}), index.h("svg", { key: '76788f88c63996a85778fac600f568e651f2604f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
6035
6031
|
height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
|
|
6036
6032
|
width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
|
|
6037
6033
|
left: '0',
|
|
@@ -6039,13 +6035,14 @@ const KritzelEngine = class {
|
|
|
6039
6035
|
zIndex: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.zIndex.toString(),
|
|
6040
6036
|
position: 'absolute',
|
|
6041
6037
|
transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
|
|
6038
|
+
transformOrigin: 'top left',
|
|
6042
6039
|
overflow: 'visible',
|
|
6043
|
-
}, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '
|
|
6040
|
+
}, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'e0356205729f20a61f5bbac14393d4d607a7c865', 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: '23ab721c25518e6c6a6e6e163fa0753e054cb5e7', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
|
|
6044
6041
|
position: 'fixed',
|
|
6045
6042
|
left: `${this.store.state.contextMenuX}px`,
|
|
6046
6043
|
top: `${this.store.state.contextMenuY}px`,
|
|
6047
6044
|
zIndex: '10000',
|
|
6048
|
-
}, 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: '
|
|
6045
|
+
}, 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: '01f90ff856d6a3b0812ce47796fd59dbbf0cd52d' })));
|
|
6049
6046
|
}
|
|
6050
6047
|
get host() { return index.getElement(this); }
|
|
6051
6048
|
};
|