kritzel-stencil 0.1.2 → 0.1.3
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-color_24.cjs.entry.js +17 -57
- package/dist/collection/classes/core/viewport.class.js +3 -43
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +1 -1
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +2 -2
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +2 -2
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +4 -4
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +2 -2
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-cursor-trail.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-line-endings.js +1 -1
- package/dist/components/kritzel-shape-fill.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/{p-CSGeDE4f.js → p-BlUr7oVq.js} +1 -1
- package/dist/components/{p-BbqT9o1F.js → p-CNneo_RD.js} +1 -1
- package/dist/components/p-CkpOndCn.js +1 -0
- package/dist/components/{p-CyHZWbkS.js → p-CzjSdJio.js} +1 -1
- package/dist/components/{p-D8GeJNUv.js → p-DLijNISu.js} +1 -1
- package/dist/components/{p-B8QjTqOY.js → p-DMJI6opm.js} +1 -1
- package/dist/components/{p-B3P64-gH.js → p-DwJUC6cw.js} +2 -2
- package/dist/components/{p-BF6MdW17.js → p-FOxrXeq4.js} +1 -1
- package/dist/components/{p-CbuHMNa9.js → p-S5GeUsJP.js} +1 -1
- package/dist/components/{p-BnidlyU0.js → p-e1r5dgeP.js} +1 -1
- package/dist/components/{p-ClMFs3KI.js → p-pKbfOI5a.js} +1 -1
- package/dist/esm/kritzel-color_24.entry.js +17 -57
- package/dist/stencil/p-361ebc7e.entry.js +9 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/core/viewport.class.d.ts +0 -6
- package/package.json +1 -1
- package/dist/components/p-8iEiCuEN.js +0 -1
- package/dist/stencil/p-caf30edb.entry.js +0 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as r,t as o}from"./p-BxS4Pdpz.js";import{d as n}from"./p-
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as r,t as o}from"./p-BxS4Pdpz.js";import{d as n}from"./p-DLijNISu.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleSizeClick(t))}render(){return i(r,{key:"d4c62d22c92b540f372120681da797acded5b6cb"},this.sizes.map((e=>i("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},i("kritzel-font",{fontFamily:this.fontFamily,size:e})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}"}},[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-size","kritzel-font"].forEach((e=>{switch(e){case"kritzel-font-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-font":customElements.get(o(e))||n()}}))}export{l as K,a as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BxS4Pdpz.js";import{d as a}from"./p-
|
|
1
|
+
import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BxS4Pdpz.js";import{d as a}from"./p-e1r5dgeP.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"891f899a41844bba03305e3dd7cbf428d4471ff9"},r("div",{key:"773a756d54d0632c9ea6b3aebb743abad2274244",class:"size-grid"},this.sizes.map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"#000000",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function l(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),c);break;case"kritzel-color":customElements.get(o(e))||a()}}))}export{c as K,l as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,d as r,t as s}from"./p-BxS4Pdpz.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}value;size=24;isLightColor(e){if(!e)return!1;let t=0,i=0,r=0,s=e.startsWith("#")?e.slice(1):e;if(3===s.length)t=parseInt(s[0]+s[0],16),i=parseInt(s[1]+s[1],16),r=parseInt(s[2]+s[2],16);else{if(6!==s.length)return!1;t=parseInt(s.substring(0,2),16),i=parseInt(s.substring(2,4),16),r=parseInt(s.substring(4,6),16)}return!(isNaN(t)||isNaN(i)||isNaN(r))&&.299*t+.587*i+.114*r>220}render(){const e=this.isLightColor(this.value);return i(r,{key:"
|
|
1
|
+
import{p as e,H as t,h as i,d as r,t as s}from"./p-BxS4Pdpz.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}value;size=24;isLightColor(e){if(!e)return!1;let t=0,i=0,r=0,s=e.startsWith("#")?e.slice(1):e;if(3===s.length)t=parseInt(s[0]+s[0],16),i=parseInt(s[1]+s[1],16),r=parseInt(s[2]+s[2],16);else{if(6!==s.length)return!1;t=parseInt(s.substring(0,2),16),i=parseInt(s.substring(2,4),16),r=parseInt(s.substring(4,6),16)}return!(isNaN(t)||isNaN(i)||isNaN(r))&&.299*t+.587*i+.114*r>220}render(){const e=this.isLightColor(this.value);return i(r,{key:"16e284aa1e572b81f4413d33c0d046ee57c5980f"},i("div",{key:"718a391eb984720fdc5cd80f9a4db161e504bb9c",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},i("div",{key:"bcf5ebc3dda30fcda5f1c61fa55aeef2bf1d799c",class:{"color-circle":!0,white:e},style:{backgroundColor:this.value,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}static get style(){return":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}"}},[513,"kritzel-color",{value:[1],size:[2]}]);function c(){"undefined"!=typeof customElements&&["kritzel-color"].forEach((e=>{"kritzel-color"===e&&(customElements.get(s(e))||customElements.define(s(e),o))}))}export{o as K,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as r,h as l,d as i,t as o}from"./p-BxS4Pdpz.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=r(this,"valueChange")}value="transparent";valueChange;handleFillChange(e){this.value=e,this.valueChange.emit(e)}renderFillIcon(e){const t="#000000";return l("svg",{viewBox:"0 0 24 24",class:"fill-icon"},l("rect","transparent"===e?{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:"none",stroke:t,"stroke-width":"2"}:{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:t,stroke:t,"stroke-width":"2"}))}render(){return l(i,{key:"
|
|
1
|
+
import{p as e,H as t,c as r,h as l,d as i,t as o}from"./p-BxS4Pdpz.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=r(this,"valueChange")}value="transparent";valueChange;handleFillChange(e){this.value=e,this.valueChange.emit(e)}renderFillIcon(e){const t="#000000";return l("svg",{viewBox:"0 0 24 24",class:"fill-icon"},l("rect","transparent"===e?{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:"none",stroke:t,"stroke-width":"2"}:{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:t,stroke:t,"stroke-width":"2"}))}render(){return l(i,{key:"0d0c051f7b8b8a7c586246bc9d74ed3c3885eb90"},l("div",{key:"c2411c4d070fcffff06f372c1e750415486f6a40",class:"fill-row"},l("button",{key:"b53097dce91b2f42a7511c4db923730fa089cb7f",class:{"fill-option":!0,selected:"transparent"===this.value},onClick:()=>this.handleFillChange("transparent"),title:"Transparent background"},this.renderFillIcon("transparent")),l("button",{key:"570424d81fc01a1a09e4efa5ff3918fc9a2c5451",class:{"fill-option":!0,selected:"filled"===this.value},onClick:()=>this.handleFillChange("filled"),title:"Filled background"},this.renderFillIcon("filled"))))}static get style(){return":host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}"}},[513,"kritzel-shape-fill",{value:[1025]}]);function n(){"undefined"!=typeof customElements&&["kritzel-shape-fill"].forEach((e=>{"kritzel-shape-fill"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as K,n as d}
|
|
@@ -37,13 +37,13 @@ const KritzelColor = class {
|
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
39
|
const isColorVeryLight = this.isLightColor(this.value);
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: '16e284aa1e572b81f4413d33c0d046ee57c5980f' }, h("div", { key: '718a391eb984720fdc5cd80f9a4db161e504bb9c', class: "checkerboard-bg", style: {
|
|
41
41
|
width: `${this.size}px`,
|
|
42
42
|
height: `${this.size}px`,
|
|
43
43
|
borderRadius: '50%',
|
|
44
44
|
display: 'inline-block',
|
|
45
45
|
position: 'relative',
|
|
46
|
-
} }, h("div", { key: '
|
|
46
|
+
} }, h("div", { key: 'bcf5ebc3dda30fcda5f1c61fa55aeef2bf1d799c', class: {
|
|
47
47
|
'color-circle': true,
|
|
48
48
|
'white': isColorVeryLight,
|
|
49
49
|
}, style: {
|
|
@@ -125,7 +125,7 @@ const KritzelColorPalette = class {
|
|
|
125
125
|
render() {
|
|
126
126
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
127
127
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
128
|
-
return (h(Host, { key: '
|
|
128
|
+
return (h(Host, { key: 'fbb9b59f227cdc0e97e8dfaf73255fb987c58292' }, h("div", { key: '447971664569dd28972587fc44b67575762ef959', class: {
|
|
129
129
|
'color-grid': true,
|
|
130
130
|
'expanded': this.isExpanded,
|
|
131
131
|
}, style: {
|
|
@@ -499,7 +499,7 @@ class KritzelToolConfigHelper {
|
|
|
499
499
|
}
|
|
500
500
|
}
|
|
501
501
|
|
|
502
|
-
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw -
|
|
502
|
+
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
|
|
503
503
|
|
|
504
504
|
const KritzelControls = class {
|
|
505
505
|
constructor(hostRef) {
|
|
@@ -767,10 +767,10 @@ const KritzelControls = class {
|
|
|
767
767
|
'kritzel-control': true,
|
|
768
768
|
'selected': this.activeControl?.name === control?.name,
|
|
769
769
|
}, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
|
|
770
|
-
})), h("div", { key: '
|
|
770
|
+
})), h("div", { key: '5f76128a603b02f7e92241453b2bc4045b517438', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
771
771
|
'kritzel-config-container': true,
|
|
772
772
|
'visible': hasConfigUI,
|
|
773
|
-
}, key: configControl.name }, h("div", { key: '
|
|
773
|
+
}, key: configControl.name }, h("div", { key: 'dc3903a6631e85c95ed62e23aec93feae2c46c55', class: "config-gradient-left" }), h("kritzel-tooltip", { key: '360a0a16a6aab116d3cd641b9988a63fad8a2e32', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '9c77db55899b52706ceb0f2c49bf3341c28b663a', tool: this.activeControl.tool, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'e9b3a9ae86d9117d194d67cab55771f7322947b0', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
|
|
774
774
|
if (event.key === 'Enter') {
|
|
775
775
|
this.handleConfigClick?.(event);
|
|
776
776
|
}
|
|
@@ -853,7 +853,7 @@ const KritzelCursorTrail = class {
|
|
|
853
853
|
}
|
|
854
854
|
}
|
|
855
855
|
render() {
|
|
856
|
-
return (h(Host, { key: '
|
|
856
|
+
return (h(Host, { key: '5bb40688111e544ec102739c3d606ef34273fbab' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '91782bcfaae5d97d534a3e44535e85ed28f960b5', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
857
857
|
position: 'absolute',
|
|
858
858
|
left: '0',
|
|
859
859
|
top: '0',
|
|
@@ -1394,7 +1394,7 @@ const KritzelEditor = class {
|
|
|
1394
1394
|
}
|
|
1395
1395
|
}
|
|
1396
1396
|
render() {
|
|
1397
|
-
return (h(Host, { key: '
|
|
1397
|
+
return (h(Host, { key: '08dae992458f6440295e59a12934c76ad4f9931e' }, h("kritzel-workspace-manager", { key: '43a980a7aadbc3fef9f375c99f1577f771612835', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '471133030308d915fb9fa1e8e818662e56d483db', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '7e7c7111e0629309c4bda9d94b95623dbe835f0f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
|
|
1398
1398
|
}
|
|
1399
1399
|
static get watchers() { return {
|
|
1400
1400
|
"isEngineReady": [{
|
|
@@ -18625,11 +18625,6 @@ class KritzelViewport {
|
|
|
18625
18625
|
_core;
|
|
18626
18626
|
_debounceUpdate;
|
|
18627
18627
|
_debounceEndScaling;
|
|
18628
|
-
_velocityX = 0;
|
|
18629
|
-
_velocityY = 0;
|
|
18630
|
-
_panRafId = null;
|
|
18631
|
-
_friction = 0.92;
|
|
18632
|
-
_minVelocity = 0.5;
|
|
18633
18628
|
initialTouchDistance = 0;
|
|
18634
18629
|
startX = 0;
|
|
18635
18630
|
startY = 0;
|
|
@@ -18813,47 +18808,12 @@ class KritzelViewport {
|
|
|
18813
18808
|
this._debounceEndScaling();
|
|
18814
18809
|
}
|
|
18815
18810
|
handlePan(event) {
|
|
18816
|
-
// Normalize delta for trackpad vs mouse wheel
|
|
18817
|
-
// WheelEvent.deltaMode: 0=pixels, 1=lines, 2=pages
|
|
18818
|
-
let deltaX = event.deltaX;
|
|
18819
|
-
let deltaY = event.deltaY;
|
|
18820
|
-
if (event.deltaMode === 1) {
|
|
18821
|
-
deltaX *= 16;
|
|
18822
|
-
deltaY *= 16;
|
|
18823
|
-
}
|
|
18824
|
-
else if (event.deltaMode === 2) {
|
|
18825
|
-
deltaX *= window.innerWidth;
|
|
18826
|
-
deltaY *= window.innerHeight;
|
|
18827
|
-
}
|
|
18828
18811
|
const panSpeed = 0.8;
|
|
18829
|
-
|
|
18830
|
-
this.
|
|
18831
|
-
this._velocityY = -deltaY * panSpeed;
|
|
18832
|
-
// Start animation loop if not already running
|
|
18833
|
-
if (this._panRafId === null) {
|
|
18834
|
-
this._animatePan();
|
|
18835
|
-
}
|
|
18836
|
-
}
|
|
18837
|
-
_animatePan() {
|
|
18838
|
-
// Apply current velocity
|
|
18839
|
-
this._core.store.state.translateX += this._velocityX;
|
|
18840
|
-
this._core.store.state.translateY += this._velocityY;
|
|
18812
|
+
this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
|
|
18813
|
+
this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
|
|
18841
18814
|
this._core.store.state.hasViewportChanged = true;
|
|
18842
18815
|
this._core.rerender();
|
|
18843
|
-
|
|
18844
|
-
this._velocityX *= this._friction;
|
|
18845
|
-
this._velocityY *= this._friction;
|
|
18846
|
-
// Continue animation if velocity is still significant
|
|
18847
|
-
if (Math.abs(this._velocityX) > this._minVelocity || Math.abs(this._velocityY) > this._minVelocity) {
|
|
18848
|
-
this._panRafId = requestAnimationFrame(() => this._animatePan());
|
|
18849
|
-
}
|
|
18850
|
-
else {
|
|
18851
|
-
// Stop animation and finalize
|
|
18852
|
-
this._velocityX = 0;
|
|
18853
|
-
this._velocityY = 0;
|
|
18854
|
-
this._panRafId = null;
|
|
18855
|
-
this._debounceUpdate();
|
|
18856
|
-
}
|
|
18816
|
+
this._debounceUpdate();
|
|
18857
18817
|
}
|
|
18858
18818
|
}
|
|
18859
18819
|
|
|
@@ -21195,7 +21155,7 @@ const KritzelFont = class {
|
|
|
21195
21155
|
size = 24;
|
|
21196
21156
|
color = '#000000';
|
|
21197
21157
|
render() {
|
|
21198
|
-
return (h(Host, { key: '
|
|
21158
|
+
return (h(Host, { key: '96cdcbefb7747932e4dc174a1a4a952863a0da99' }, h("div", { key: '228479a564056c0a06db85bbdb07978fe17802a6', class: "font-preview", style: {
|
|
21199
21159
|
fontFamily: this.fontFamily,
|
|
21200
21160
|
fontSize: `${this.size}px`,
|
|
21201
21161
|
color: this.color
|
|
@@ -21269,7 +21229,7 @@ const KritzelFontSize = class {
|
|
|
21269
21229
|
}
|
|
21270
21230
|
}
|
|
21271
21231
|
render() {
|
|
21272
|
-
return (h(Host, { key: '
|
|
21232
|
+
return (h(Host, { key: 'd4c62d22c92b540f372120681da797acded5b6cb' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
21273
21233
|
'size-container': true,
|
|
21274
21234
|
'selected': this.selectedSize === size,
|
|
21275
21235
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
|
|
@@ -21375,10 +21335,10 @@ const KritzelLineEndings = class {
|
|
|
21375
21335
|
render() {
|
|
21376
21336
|
const startEnding = this.getStartEnding();
|
|
21377
21337
|
const endEnding = this.getEndEnding();
|
|
21378
|
-
return (h(Host, { key: '
|
|
21338
|
+
return (h(Host, { key: '424f7faa167fdf487bcf094f72b34488ba477c99' }, h("div", { key: '3c667e2fdba171599ce747b3489258bdbbf8ec8e', class: "endings-section" }, h("div", { key: '1502ec8094550c73cd6e7d21ab0110d1dc5fd035', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
21379
21339
|
'ending-option': true,
|
|
21380
21340
|
'selected': startEnding === type,
|
|
21381
|
-
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '
|
|
21341
|
+
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'c62e785eb0c60fa00603796193fb77ecb2f3a8dd', class: "endings-section" }, h("div", { key: 'bb256da3a6a1a473a93aa70c12aa12a2ff34f8a3', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
21382
21342
|
'ending-option': true,
|
|
21383
21343
|
'selected': endEnding === type,
|
|
21384
21344
|
}, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
|
|
@@ -21889,10 +21849,10 @@ const KritzelShapeFill = class {
|
|
|
21889
21849
|
return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
|
|
21890
21850
|
}
|
|
21891
21851
|
render() {
|
|
21892
|
-
return (h(Host, { key: '
|
|
21852
|
+
return (h(Host, { key: '0d0c051f7b8b8a7c586246bc9d74ed3c3885eb90' }, h("div", { key: 'c2411c4d070fcffff06f372c1e750415486f6a40', class: "fill-row" }, h("button", { key: 'b53097dce91b2f42a7511c4db923730fa089cb7f', class: {
|
|
21893
21853
|
'fill-option': true,
|
|
21894
21854
|
'selected': this.value === 'transparent',
|
|
21895
|
-
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '
|
|
21855
|
+
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '570424d81fc01a1a09e4efa5ff3918fc9a2c5451', class: {
|
|
21896
21856
|
'fill-option': true,
|
|
21897
21857
|
'selected': this.value === 'filled',
|
|
21898
21858
|
}, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
|