kritzel-stencil 0.0.103 → 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 +10 -40
- package/dist/cjs/kritzel-brush-style_18.cjs.entry.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 +9 -39
- 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-Bu6ZrM9f.js → p-DMSOfO6k.js} +12 -42
- package/dist/components/{p-Bu6ZrM9f.js.map → p-DMSOfO6k.js.map} +1 -1
- package/dist/esm/kritzel-brush-style_18.entry.js +10 -40
- package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
- package/dist/stencil/{p-95c7a63e.entry.js → p-f059fbff.entry.js} +2 -2
- package/dist/stencil/{p-95c7a63e.entry.js.map → p-f059fbff.entry.js.map} +1 -1
- package/dist/stencil/stencil.esm.js +1 -1
- package/package.json +1 -1
|
@@ -5667,7 +5667,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
|
|
|
5667
5667
|
}
|
|
5668
5668
|
}
|
|
5669
5669
|
|
|
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;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}";
|
|
5671
5671
|
|
|
5672
5672
|
const KritzelEngine = class {
|
|
5673
5673
|
get isSelecting() {
|
|
@@ -5935,21 +5935,20 @@ const KritzelEngine = class {
|
|
|
5935
5935
|
} }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
|
|
5936
5936
|
_t.map(object => {
|
|
5937
5937
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
5938
|
-
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: {
|
|
5939
5939
|
height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
|
|
5940
5940
|
width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
|
|
5941
5941
|
left: '0',
|
|
5942
5942
|
top: '0',
|
|
5943
5943
|
position: 'absolute',
|
|
5944
|
-
transform: object
|
|
5944
|
+
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
5945
|
+
transformOrigin: 'center',
|
|
5945
5946
|
opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
|
|
5946
5947
|
pointerEvents: object.markedForRemoval ? 'none' : 'auto',
|
|
5947
5948
|
zIndex: object.zIndex.toString(),
|
|
5948
|
-
} }, index.h("
|
|
5949
|
+
} }, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
|
|
5949
5950
|
minHeight: '0',
|
|
5950
5951
|
minWidth: '0',
|
|
5951
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
5952
|
-
transformOrigin: 'center',
|
|
5953
5952
|
backgroundColor: object.backgroundColor,
|
|
5954
5953
|
borderColor: object.borderColor,
|
|
5955
5954
|
borderWidth: object.borderWidth + 'px',
|
|
@@ -5991,74 +5990,44 @@ const KritzelEngine = class {
|
|
|
5991
5990
|
stroke: 'var(--kritzel-selection-border-color, #0e1111)',
|
|
5992
5991
|
strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
|
|
5993
5992
|
strokeLinecap: 'square',
|
|
5994
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
5995
|
-
transformOrigin: 'center',
|
|
5996
5993
|
}, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
|
|
5997
5994
|
stroke: 'var(--kritzel-selection-border-color, #0e1111)',
|
|
5998
5995
|
strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
|
|
5999
5996
|
strokeLinecap: 'square',
|
|
6000
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6001
|
-
transformOrigin: 'center',
|
|
6002
5997
|
}, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
|
|
6003
5998
|
stroke: 'var(--kritzel-selection-border-color, #0e1111)',
|
|
6004
5999
|
strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
|
|
6005
6000
|
strokeLinecap: 'square',
|
|
6006
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6007
|
-
transformOrigin: 'center',
|
|
6008
6001
|
}, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
|
|
6009
6002
|
stroke: 'var(--kritzel-selection-border-color, #0e1111)',
|
|
6010
6003
|
strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
|
|
6011
6004
|
strokeLinecap: 'square',
|
|
6012
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6013
|
-
transformOrigin: 'center',
|
|
6014
6005
|
}, visibility: object.selected ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
|
|
6015
6006
|
fill: 'var(--kritzel-selection-handle-color, #000000)',
|
|
6016
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6017
|
-
transformOrigin: 'center',
|
|
6018
6007
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
|
|
6019
6008
|
fill: 'transparent',
|
|
6020
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6021
|
-
transformOrigin: 'center',
|
|
6022
6009
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
|
|
6023
6010
|
fill: 'var(--kritzel-selection-handle-color, #000000)',
|
|
6024
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6025
|
-
transformOrigin: 'center',
|
|
6026
6011
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
|
|
6027
6012
|
fill: 'transparent',
|
|
6028
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6029
|
-
transformOrigin: 'center',
|
|
6030
6013
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
|
|
6031
6014
|
fill: 'var(--kritzel-selection-handle-color, #000000)',
|
|
6032
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6033
|
-
transformOrigin: 'center',
|
|
6034
6015
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
|
|
6035
6016
|
fill: 'transparent',
|
|
6036
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6037
|
-
transformOrigin: 'center',
|
|
6038
6017
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
|
|
6039
6018
|
fill: 'var(--kritzel-selection-handle-color, #000000)',
|
|
6040
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6041
|
-
transformOrigin: 'center',
|
|
6042
6019
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
|
|
6043
6020
|
fill: 'transparent',
|
|
6044
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6045
|
-
transformOrigin: 'center',
|
|
6046
6021
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
|
|
6047
6022
|
stroke: 'var(--kritzel-selection-border-color, #0e1111)',
|
|
6048
6023
|
strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
|
|
6049
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6050
|
-
transformOrigin: 'center',
|
|
6051
6024
|
}, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
|
|
6052
6025
|
fill: 'var(--kritzel-selection-handle-color, #000000)',
|
|
6053
|
-
transform: `rotate(${object.rotationDegrees}deg)`,
|
|
6054
|
-
transformOrigin: 'center',
|
|
6055
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: {
|
|
6056
6027
|
fill: 'transparent',
|
|
6057
6028
|
cursor: 'grab',
|
|
6058
|
-
|
|
6059
|
-
|
|
6060
|
-
}, 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))))));
|
|
6061
|
-
}), index.h("svg", { key: '6e836f2ab225812cbca612e78cfc5d1768b983a0', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
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: {
|
|
6062
6031
|
height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
|
|
6063
6032
|
width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
|
|
6064
6033
|
left: '0',
|
|
@@ -6066,13 +6035,14 @@ const KritzelEngine = class {
|
|
|
6066
6035
|
zIndex: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.zIndex.toString(),
|
|
6067
6036
|
position: 'absolute',
|
|
6068
6037
|
transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
|
|
6038
|
+
transformOrigin: 'top left',
|
|
6069
6039
|
overflow: 'visible',
|
|
6070
|
-
}, 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: {
|
|
6071
6041
|
position: 'fixed',
|
|
6072
6042
|
left: `${this.store.state.contextMenuX}px`,
|
|
6073
6043
|
top: `${this.store.state.contextMenuY}px`,
|
|
6074
6044
|
zIndex: '10000',
|
|
6075
|
-
}, 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' })));
|
|
6076
6046
|
}
|
|
6077
6047
|
get host() { return index.getElement(this); }
|
|
6078
6048
|
};
|