kritzel-stencil 0.0.87 → 0.0.88
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 +7 -35
- package/dist/cjs/kritzel-brush-style_18.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/components/core/kritzel-editor/kritzel-editor.css +9 -65
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +2 -29
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +13 -0
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +7 -2
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css +5 -0
- package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +14 -1
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +23 -0
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-context-menu.js +1 -1
- package/dist/components/kritzel-control-brush-config.js +1 -1
- package/dist/components/kritzel-control-text-config.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +11 -38
- package/dist/components/kritzel-editor.js.map +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/{p-CtzUAFH7.js → p-B8Ghe4_f.js} +3 -3
- package/dist/components/{p-CtzUAFH7.js.map → p-B8Ghe4_f.js.map} +1 -1
- package/dist/components/{p-CwiXaI-9.js → p-CdP5LzdE.js} +3 -3
- package/dist/components/p-CdP5LzdE.js.map +1 -0
- package/dist/components/{p-CW800wxH.js → p-DETXGOAB.js} +4 -4
- package/dist/components/{p-CW800wxH.js.map → p-DETXGOAB.js.map} +1 -1
- package/dist/components/{p-CejqoWNi.js → p-DGWfDAfd.js} +4 -4
- package/dist/components/{p-CejqoWNi.js.map → p-DGWfDAfd.js.map} +1 -1
- package/dist/components/{p-BrDtPpFQ.js → p-DjBVRY7K.js} +7 -7
- package/dist/components/p-DjBVRY7K.js.map +1 -0
- package/dist/components/{p-RyhiTey9.js → p-G-6fyqzO.js} +3 -3
- package/dist/components/p-G-6fyqzO.js.map +1 -0
- package/dist/components/{p-CKvByKIq.js → p-heFwGhv-.js} +3 -3
- package/dist/components/p-heFwGhv-.js.map +1 -0
- package/dist/esm/kritzel-brush-style_18.entry.js +7 -35
- package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-a45f12c1.entry.js +2 -0
- package/dist/stencil/p-a45f12c1.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -2
- package/package.json +1 -1
- package/dist/components/p-BrDtPpFQ.js.map +0 -1
- package/dist/components/p-CKvByKIq.js.map +0 -1
- package/dist/components/p-CwiXaI-9.js.map +0 -1
- package/dist/components/p-RyhiTey9.js.map +0 -1
- package/dist/stencil/p-9e9735ac.entry.js +0 -2
- package/dist/stencil/p-9e9735ac.entry.js.map +0 -1
|
@@ -83,7 +83,7 @@ const KritzelColor = class {
|
|
|
83
83
|
};
|
|
84
84
|
KritzelColor.style = kritzelColorCss;
|
|
85
85
|
|
|
86
|
-
const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color)}.color-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-color-palette-selected-background-color)}";
|
|
86
|
+
const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box;--kritzel-color-palette-hover-background-color:#f0f0f0;--kritzel-color-palette-circle-border-color:#dddcdc;--kritzel-color-palette-selected-border-color:var(--kritzel-primary-color);--kritzel-color-palette-selected-background-color:#f0f0f0;--kritzel-color-palette-expand-toggle-color:#666;--kritzel-color-palette-expand-toggle-hover-color:#333}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color)}.color-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-color-palette-selected-background-color)}";
|
|
87
87
|
|
|
88
88
|
const KritzelColorPalette = class {
|
|
89
89
|
constructor(hostRef) {
|
|
@@ -121,7 +121,7 @@ const KritzelColorPalette = class {
|
|
|
121
121
|
};
|
|
122
122
|
KritzelColorPalette.style = kritzelColorPaletteCss;
|
|
123
123
|
|
|
124
|
-
const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color);border-radius:var(--kritzel-context-menu-border-radius);box-shadow:var(--kritzel-context-menu-box-shadow);border:var(--kritzel-context-menu-border);padding:var(--kritzel-context-menu-padding)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding);border-radius:var(--kritzel-context-menu-item-border-radius);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size);color:var(--kritzel-context-menu-item-color);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color)}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
|
|
124
|
+
const kritzelContextMenuCss = ":host{display:block;--kritzel-context-menu-background-color:#ffffff;--kritzel-context-menu-border-radius:8px;--kritzel-context-menu-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);--kritzel-context-menu-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-padding:4px;--kritzel-context-menu-item-gap:8px;--kritzel-context-menu-item-padding:8px;--kritzel-context-menu-item-border-radius:8px;--kritzel-context-menu-item-color:#333333;--kritzel-context-menu-item-font-size:14px;--kritzel-context-menu-item-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-context-menu-item-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-context-menu-item-disabled-color:#aaaaaa}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color);border-radius:var(--kritzel-context-menu-border-radius);box-shadow:var(--kritzel-context-menu-box-shadow);border:var(--kritzel-context-menu-border);padding:var(--kritzel-context-menu-padding)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding);border-radius:var(--kritzel-context-menu-item-border-radius);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size);color:var(--kritzel-context-menu-item-color);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color)}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
|
|
125
125
|
|
|
126
126
|
const KritzelContextMenu = class {
|
|
127
127
|
constructor(hostRef) {
|
|
@@ -3036,7 +3036,7 @@ class KritzelTextTool extends KritzelBaseTool {
|
|
|
3036
3036
|
}
|
|
3037
3037
|
}
|
|
3038
3038
|
|
|
3039
|
-
const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap);height:100%;padding:var(--kritzel-controls-padding);background-color:var(--kritzel-controls-background-color);border-radius:var(--kritzel-controls-border-radius);box-shadow:var(--kritzel-controls-box-shadow);border:var(--kritzel-controls-border);border-radius:var(--kritzel-controls-border-radius);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color);border-radius:var(--kritzel-controls-control-border-radius);padding:var(--kritzel-controls-control-padding);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color)}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color)}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color);color:var(--kritzel-controls-control-selected-color)}.kritzel-divider{width:var(--kritzel-controls-divider-width);height:var(--kritzel-controls-divider-height);background-color:var(--kritzel-controls-divider-background-color)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001;}";
|
|
3039
|
+
const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none;--kritzel-primary-color:blue;--kritzel-controls-box-shadow:0 0 3px rgba(0, 0, 0, 0.08);--kritzel-controls-border:1px solid hsl(0, 0%, 0%, 4.3%);--kritzel-controls-border-radius:8px;--kritzel-controls-background-color:#ffffff;--kritzel-controls-padding:8px;--kritzel-controls-gap:8px;--kritzel-controls-control-color:#000;--kritzel-controls-control-border-radius:8px;--kritzel-controls-control-padding:8px;--kritzel-controls-control-hover-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-control-active-background-color:hsl(0, 0%, 0%, 8.6%);--kritzel-controls-control-selected-background-color:var(--kritzel-primary-color);--kritzel-controls-control-selected-color:#ffffff;--kritzel-controls-divider-width:1px;--kritzel-controls-divider-height:24px;--kritzel-controls-divider-background-color:hsl(0, 0%, 0%, 4.3%);--kritzel-controls-tooltip-background-color:#fff;--kritzel-controls-tooltip-color:#000;--kritzel-controls-tooltip-border-radius:8px;--kritzel-controls-tooltip-padding:8px;--kritzel-controls-tooltip-box-shadow:0 1px 6px rgba(0, 0, 0, 0.12)}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap);height:100%;padding:var(--kritzel-controls-padding);background-color:var(--kritzel-controls-background-color);border-radius:var(--kritzel-controls-border-radius);box-shadow:var(--kritzel-controls-box-shadow);border:var(--kritzel-controls-border);border-radius:var(--kritzel-controls-border-radius);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color);border-radius:var(--kritzel-controls-control-border-radius);padding:var(--kritzel-controls-control-padding);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color)}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color)}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color);color:var(--kritzel-controls-control-selected-color)}.kritzel-divider{width:var(--kritzel-controls-divider-width);height:var(--kritzel-controls-divider-height);background-color:var(--kritzel-controls-divider-background-color)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001;}";
|
|
3040
3040
|
|
|
3041
3041
|
const KritzelControls = class {
|
|
3042
3042
|
constructor(hostRef) {
|
|
@@ -4793,7 +4793,7 @@ const DEFAULT_KRITZEL_CONTROLS = [
|
|
|
4793
4793
|
},
|
|
4794
4794
|
];
|
|
4795
4795
|
|
|
4796
|
-
const kritzelEditorCss = "
|
|
4796
|
+
const kritzelEditorCss = ":host{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;box-sizing:border-box}kritzel-controls{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:1000}";
|
|
4797
4797
|
|
|
4798
4798
|
const KritzelEditor = class {
|
|
4799
4799
|
constructor(hostRef) {
|
|
@@ -4804,30 +4804,6 @@ const KritzelEditor = class {
|
|
|
4804
4804
|
this.forceUpdate = 0;
|
|
4805
4805
|
this.engineReady = false;
|
|
4806
4806
|
this.controlsReady = false;
|
|
4807
|
-
this.adjustSizeToParent = () => {
|
|
4808
|
-
const parent = this.hostElement.parentElement;
|
|
4809
|
-
if (parent) {
|
|
4810
|
-
const parentStyle = window.getComputedStyle(parent);
|
|
4811
|
-
const parentWidth = parentStyle.width;
|
|
4812
|
-
const parentHeight = parentStyle.height;
|
|
4813
|
-
this.hostElement.style.width = parentWidth;
|
|
4814
|
-
this.hostElement.style.height = parentHeight;
|
|
4815
|
-
const engine = this.hostElement.querySelector('kritzel-engine');
|
|
4816
|
-
if (engine) {
|
|
4817
|
-
engine.style.width = parentWidth;
|
|
4818
|
-
engine.style.height = parentHeight;
|
|
4819
|
-
}
|
|
4820
|
-
this.hostElement.style.position = 'relative';
|
|
4821
|
-
const controls = this.hostElement.querySelector('kritzel-controls');
|
|
4822
|
-
if (controls) {
|
|
4823
|
-
controls.style.position = 'absolute';
|
|
4824
|
-
controls.style.left = '50%';
|
|
4825
|
-
controls.style.bottom = '24px';
|
|
4826
|
-
controls.style.transform = 'translateX(-50%)';
|
|
4827
|
-
controls.style.zIndex = '1000';
|
|
4828
|
-
}
|
|
4829
|
-
}
|
|
4830
|
-
};
|
|
4831
4807
|
}
|
|
4832
4808
|
handleTouchStart(event) {
|
|
4833
4809
|
if (event.cancelable) {
|
|
@@ -4839,10 +4815,6 @@ const KritzelEditor = class {
|
|
|
4839
4815
|
KritzelIconRegistry.register(name, svg);
|
|
4840
4816
|
}
|
|
4841
4817
|
}
|
|
4842
|
-
componentDidLoad() {
|
|
4843
|
-
this.adjustSizeToParent();
|
|
4844
|
-
window.addEventListener('resize', this.adjustSizeToParent);
|
|
4845
|
-
}
|
|
4846
4818
|
handleEngineReady() {
|
|
4847
4819
|
this.engineReady = true;
|
|
4848
4820
|
this.checkReadiness();
|
|
@@ -4858,7 +4830,7 @@ const KritzelEditor = class {
|
|
|
4858
4830
|
}
|
|
4859
4831
|
}
|
|
4860
4832
|
render() {
|
|
4861
|
-
return (index.h(index.Host, { key: '
|
|
4833
|
+
return (index.h(index.Host, { key: '26ad14e9e7f376076aeaa58e1030ef6af71141de' }, index.h("kritzel-engine", { key: '8ae523a64f8d915dbac892f8f038d603ea987702', onEngineReady: () => this.handleEngineReady() }), index.h("kritzel-controls", { key: 'dda29eb7ff328f69e8ccf6e8ff61cf0a279f385d', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: this.hideControls ? { display: 'none' } : {} })));
|
|
4862
4834
|
}
|
|
4863
4835
|
get hostElement() { return index.getElement(this); }
|
|
4864
4836
|
};
|
|
@@ -5717,7 +5689,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
|
|
|
5717
5689
|
}
|
|
5718
5690
|
}
|
|
5719
5691
|
|
|
5720
|
-
const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color)}.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{-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;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}";
|
|
5692
|
+
const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color);--kritzel-selection-box-background-color:rgba(0, 0, 255, 0.2);--kritzel-selection-box-border-color:rgba(0, 0, 255, 0.5);--kritzel-selection-border-color:var(--kritzel-primary-color);--kritzel-selection-border-width:2px;--kritzel-selection-border-style:solid;--kritzel-selection-handle-size:6px;--kritzel-selection-handle-color:#000000;--kritzel-cursor-trail-color:rgb(228, 228, 228);--kritzel-cursor-trail-opacity:0.6;--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{-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;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}";
|
|
5721
5693
|
|
|
5722
5694
|
const KritzelEngine = class {
|
|
5723
5695
|
get isSelecting() {
|
|
@@ -6203,7 +6175,7 @@ const KritzelIcon = class {
|
|
|
6203
6175
|
};
|
|
6204
6176
|
KritzelIcon.style = kritzelIconCss;
|
|
6205
6177
|
|
|
6206
|
-
const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color)}.size-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-stroke-size-selected-background-color)}";
|
|
6178
|
+
const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;--kritzel-stroke-size-hover-background-color:#f0f0f0;--kritzel-stroke-size-selected-border-color:var(--kritzel-primary-color);--kritzel-stroke-size-selected-background-color:#f0f0f0;--kritzel-stroke-size-circle-color:#000}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color)}.size-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-stroke-size-selected-background-color)}";
|
|
6207
6179
|
|
|
6208
6180
|
const KritzelStrokeSize = class {
|
|
6209
6181
|
constructor(hostRef) {
|