polotno 3.0.0-2 → 3.0.0-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "3.0.0-2",
+  "version": "3.0.0-3",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/toolbar/sketch.js

@@ -1 +1 @@
-import e from"react";import t from"../utils/reactcss.js";import r from"lodash/merge.js";import{Button as o}from"@blueprintjs/core";import{CgColorPicker as n}from"../icons/meronex.js";import i from"konva";import{ColorWrap as a,Saturation as s,Hue as l,Alpha as c,Checkboard as d}from"../utils/react-color/components/common.js";import{SketchFields as p}from"../utils/react-color/components/sketch/SketchFields.js";import{SketchPresetColors as m}from"../utils/react-color/components/sketch/SketchPresetColors.js";const u=t=>{const r=e.useRef(t);return r.current=t,e.useCallback((...e)=>r.current(...e),[])};export const Sketch=({width:a=200,rgb:h,hex:g,hsv:x,hsl:f,onChange:v,onSwatchHover:b,disableAlpha:E=!1,presetColors:w=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],renderers:y,styles:k={},className:C=""})=>{const A=t(r({default:Object.assign({picker:{width:a,padding:"10px 10px 0",boxSizing:"initial",background:"#fff",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"},saturation:{width:"100%",paddingBottom:"75%",position:"relative",overflow:"hidden"},Saturation:{radius:"3px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},controls:{display:"flex"},sliders:{padding:"4px 0",flex:"1"},color:{width:"24px",height:"24px",position:"relative",marginTop:"4px",marginLeft:"4px",borderRadius:"3px"},activeColor:{absolute:"0px 0px 0px 0px",borderRadius:"2px",background:`rgba(${h.r},${h.g},${h.b},${h.a})`,boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},hue:{position:"relative",height:"10px",overflow:"hidden"},Hue:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},alpha:{position:"relative",height:"10px",marginTop:"4px",overflow:"hidden"},Alpha:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"}},k),disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},k),{disableAlpha:E}),[S,B]=e.useState(!1),F=e.useRef(null),R=u(e=>{var t;if(S){const r=null===(t=F.current)||void 0===t?void 0:t.fill();r&&v(i.Util.colorToRGBA(r)),L(),function(e){let t=e.target;for(;t;){if(t.classList.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||B(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),j=u(e=>{if(!S){return}const t=i.stages.find(t=>{const r=t.getContent().parentElement.parentElement.getBoundingClientRect();return r.left<e.clientX&&r.left+r.width>e.clientX&&r.top<e.clientY&&r.top+r.height>e.clientY});if(!t){return void L()}const r=t.getContent().getBoundingClientRect(),o=e.clientX-r.left,n=e.clientY-r.top,a=t.children[0],s=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:c}=s.getContext("2d").getImageData(o*l,n*l,1,1),d=t.findOne(".line-guides");d.findOne(".picker")||(F.current&&F.current.destroy(),F.current=new i.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),d.add(F.current)),F.current.setAbsolutePosition({x:o-15,y:n-15}),F.current.fill("rgb("+c[0]+","+c[1]+","+c[2]+")")});e.useEffect(()=>(window.addEventListener("mousemove",j),window.addEventListener("mousedown",R,!0),window.addEventListener("touchstart",R,!0),()=>{window.removeEventListener("mousemove",j),window.removeEventListener("mousedown",R,!0),window.removeEventListener("touchstart",R,!0),L()}),[]),e.useEffect(()=>{S||L()},[S]),e.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="default"}),[S]);const L=u(()=>{F.current&&(F.current.destroy(),F.current=null)});return e.createElement("div",{style:A.picker,className:`sketch-picker ${C}`},e.createElement("div",{style:A.saturation},e.createElement(s,{style:A.Saturation,hsl:f,hsv:x,onChange:v})),e.createElement("div",{style:A.controls,className:"flexbox-fix"},e.createElement("div",{style:A.sliders},e.createElement("div",{style:A.hue},e.createElement(l,{style:A.Hue,hsl:f,onChange:v})),e.createElement("div",{style:A.alpha},e.createElement(c,{style:A.Alpha,rgb:h,hsl:f,renderers:y,onChange:v}))),e.createElement("div",{style:A.color},e.createElement(d,{size:8,white:"transparent",grey:"rgba(0,0,0,.08)"}),e.createElement("div",{style:A.activeColor})),e.createElement("div",{style:A.color},e.createElement(o,{icon:e.createElement(n,{className:"bp6-icon"}),className:"color-picker-button",minimal:!0,style:{width:"24px",height:"24px",minWidth:"24px",minHeight:"24px",padding:0,margin:0},active:S,onClickCapture:e=>{B(e=>!e),e.stopPropagation()}}))),e.createElement(p,{rgb:h,hsl:f,hex:g,onChange:v,disableAlpha:E}),e.createElement(m,{colors:w,onClick:v,onSwatchHover:b}))};export default a(Sketch);
+import e from"react";import t from"../utils/reactcss/index.js";import r from"lodash/merge.js";import{Button as o}from"@blueprintjs/core";import{CgColorPicker as n}from"../icons/meronex.js";import i from"konva";import{ColorWrap as a,Saturation as s,Hue as l,Alpha as c,Checkboard as d}from"../utils/react-color/components/common.js";import{SketchFields as p}from"../utils/react-color/components/sketch/SketchFields.js";import{SketchPresetColors as m}from"../utils/react-color/components/sketch/SketchPresetColors.js";const u=t=>{const r=e.useRef(t);return r.current=t,e.useCallback((...e)=>r.current(...e),[])};export const Sketch=({width:a=200,rgb:h,hex:g,hsv:x,hsl:f,onChange:v,onSwatchHover:b,disableAlpha:E=!1,presetColors:w=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],renderers:y,styles:k={},className:C=""})=>{const A=t(r({default:Object.assign({picker:{width:a,padding:"10px 10px 0",boxSizing:"initial",background:"#fff",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"},saturation:{width:"100%",paddingBottom:"75%",position:"relative",overflow:"hidden"},Saturation:{radius:"3px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},controls:{display:"flex"},sliders:{padding:"4px 0",flex:"1"},color:{width:"24px",height:"24px",position:"relative",marginTop:"4px",marginLeft:"4px",borderRadius:"3px"},activeColor:{absolute:"0px 0px 0px 0px",borderRadius:"2px",background:`rgba(${h.r},${h.g},${h.b},${h.a})`,boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},hue:{position:"relative",height:"10px",overflow:"hidden"},Hue:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},alpha:{position:"relative",height:"10px",marginTop:"4px",overflow:"hidden"},Alpha:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"}},k),disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},k),{disableAlpha:E}),[S,B]=e.useState(!1),F=e.useRef(null),R=u(e=>{var t;if(S){const r=null===(t=F.current)||void 0===t?void 0:t.fill();r&&v(i.Util.colorToRGBA(r)),L(),function(e){let t=e.target;for(;t;){if(t.classList.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||B(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),j=u(e=>{if(!S){return}const t=i.stages.find(t=>{const r=t.getContent().parentElement.parentElement.getBoundingClientRect();return r.left<e.clientX&&r.left+r.width>e.clientX&&r.top<e.clientY&&r.top+r.height>e.clientY});if(!t){return void L()}const r=t.getContent().getBoundingClientRect(),o=e.clientX-r.left,n=e.clientY-r.top,a=t.children[0],s=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:c}=s.getContext("2d").getImageData(o*l,n*l,1,1),d=t.findOne(".line-guides");d.findOne(".picker")||(F.current&&F.current.destroy(),F.current=new i.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),d.add(F.current)),F.current.setAbsolutePosition({x:o-15,y:n-15}),F.current.fill("rgb("+c[0]+","+c[1]+","+c[2]+")")});e.useEffect(()=>(window.addEventListener("mousemove",j),window.addEventListener("mousedown",R,!0),window.addEventListener("touchstart",R,!0),()=>{window.removeEventListener("mousemove",j),window.removeEventListener("mousedown",R,!0),window.removeEventListener("touchstart",R,!0),L()}),[]),e.useEffect(()=>{S||L()},[S]),e.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="default"}),[S]);const L=u(()=>{F.current&&(F.current.destroy(),F.current=null)});return e.createElement("div",{style:A.picker,className:`sketch-picker ${C}`},e.createElement("div",{style:A.saturation},e.createElement(s,{style:A.Saturation,hsl:f,hsv:x,onChange:v})),e.createElement("div",{style:A.controls,className:"flexbox-fix"},e.createElement("div",{style:A.sliders},e.createElement("div",{style:A.hue},e.createElement(l,{style:A.Hue,hsl:f,onChange:v})),e.createElement("div",{style:A.alpha},e.createElement(c,{style:A.Alpha,rgb:h,hsl:f,renderers:y,onChange:v}))),e.createElement("div",{style:A.color},e.createElement(d,{size:8,white:"transparent",grey:"rgba(0,0,0,.08)"}),e.createElement("div",{style:A.activeColor})),e.createElement("div",{style:A.color},e.createElement(o,{icon:e.createElement(n,{className:"bp6-icon"}),className:"color-picker-button",minimal:!0,style:{width:"24px",height:"24px",minWidth:"24px",minHeight:"24px",padding:0,margin:0},active:S,onClickCapture:e=>{B(e=>!e),e.stopPropagation()}}))),e.createElement(p,{rgb:h,hsl:f,hex:g,onChange:v,disableAlpha:E}),e.createElement(m,{colors:w,onClick:v,onSwatchHover:b}))};export default a(Sketch);

package/utils/react-color/components/common/Alpha.js

@@ -1 +1 @@
-import e from"react";import t from"../../../reactcss.js";import*as r from"../../helpers/alpha.js";import n from"./Checkboard.js";const o=Object.assign||function(e){for(let t=1;t<arguments.length;t++){const r=arguments[t];for(const t in r){Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}}return e};export class Alpha extends(e.PureComponent||e.Component){constructor(e){super(e),this.container=null,this.handleChange=e=>{const t=r.calculateChange(e,this.props.hsl,this.props.direction,this.props.a,this.container);t&&"function"==typeof this.props.onChange&&this.props.onChange(t,e)},this.handleMouseDown=e=>{this.handleChange(e),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()},this.unbindEventListeners=()=>{window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}componentWillUnmount(){this.unbindEventListeners()}render(){const r=this.props.rgb,s=t({default:{alpha:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},checkboard:{absolute:"0px 0px 0px 0px",overflow:"hidden",borderRadius:this.props.radius},gradient:{absolute:"0px 0px 0px 0px",background:"linear-gradient(to right, rgba("+r.r+","+r.g+","+r.b+", 0) 0%,\n           rgba("+r.r+","+r.g+","+r.b+", 1) 100%)",boxShadow:this.props.shadow,borderRadius:this.props.radius},container:{position:"relative",height:"100%",margin:"0 3px"},pointer:{position:"absolute",left:100*r.a+"%"},slider:{width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",marginTop:"1px",transform:"translateX(-2px)"}},vertical:{gradient:{background:"linear-gradient(to bottom, rgba("+r.r+","+r.g+","+r.b+", 0) 0%,\n           rgba("+r.r+","+r.g+","+r.b+", 1) 100%)"},pointer:{left:0,top:100*r.a+"%"}},overwrite:o({},this.props.style)},{vertical:"vertical"===this.props.direction,overwrite:!0});return e.createElement("div",{style:s.alpha},e.createElement("div",{style:s.checkboard},e.createElement(n,{renderers:this.props.renderers})),e.createElement("div",{style:s.gradient}),e.createElement("div",{style:s.container,ref:e=>{this.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},e.createElement("div",{style:s.pointer},this.props.pointer?e.createElement(this.props.pointer,this.props):e.createElement("div",{style:s.slider}))))}}export default Alpha;
+import e from"react";import t from"../../../reactcss/index.js.js";import*as r from"../../helpers/alpha.js";import n from"./Checkboard.js";const o=Object.assign||function(e){for(let t=1;t<arguments.length;t++){const r=arguments[t];for(const t in r){Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}}return e};export class Alpha extends(e.PureComponent||e.Component){constructor(e){super(e),this.container=null,this.handleChange=e=>{const t=r.calculateChange(e,this.props.hsl,this.props.direction,this.props.a,this.container);t&&"function"==typeof this.props.onChange&&this.props.onChange(t,e)},this.handleMouseDown=e=>{this.handleChange(e),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()},this.unbindEventListeners=()=>{window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}componentWillUnmount(){this.unbindEventListeners()}render(){const r=this.props.rgb,s=t({default:{alpha:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},checkboard:{absolute:"0px 0px 0px 0px",overflow:"hidden",borderRadius:this.props.radius},gradient:{absolute:"0px 0px 0px 0px",background:"linear-gradient(to right, rgba("+r.r+","+r.g+","+r.b+", 0) 0%,\n           rgba("+r.r+","+r.g+","+r.b+", 1) 100%)",boxShadow:this.props.shadow,borderRadius:this.props.radius},container:{position:"relative",height:"100%",margin:"0 3px"},pointer:{position:"absolute",left:100*r.a+"%"},slider:{width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",marginTop:"1px",transform:"translateX(-2px)"}},vertical:{gradient:{background:"linear-gradient(to bottom, rgba("+r.r+","+r.g+","+r.b+", 0) 0%,\n           rgba("+r.r+","+r.g+","+r.b+", 1) 100%)"},pointer:{left:0,top:100*r.a+"%"}},overwrite:o({},this.props.style)},{vertical:"vertical"===this.props.direction,overwrite:!0});return e.createElement("div",{style:s.alpha},e.createElement("div",{style:s.checkboard},e.createElement(n,{renderers:this.props.renderers})),e.createElement("div",{style:s.gradient}),e.createElement("div",{style:s.container,ref:e=>{this.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},e.createElement("div",{style:s.pointer},this.props.pointer?e.createElement(this.props.pointer,this.props):e.createElement("div",{style:s.slider}))))}}export default Alpha;

package/utils/react-color/components/common/Checkboard.js

@@ -1 +1 @@
-import e from"react";import r from"../../../reactcss.js";import*as t from"../../helpers/checkboard.js";const o=Object.assign||function(e){for(let r=1;r<arguments.length;r++){const t=arguments[r];for(const r in t){Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}}return e};export const Checkboard=({white:s,grey:a,size:n,renderers:c,borderRadius:d,boxShadow:i,children:l})=>{const p=r({default:{grid:{borderRadius:d,boxShadow:i,absolute:"0px 0px 0px 0px",background:"url("+t.get(s||"transparent",a||"rgba(0,0,0,.08)",n||8,null==c?void 0:c.canvas)+") center left"}}});return e.isValidElement(l)?e.cloneElement(l,Object.assign(Object.assign({},l.props),{style:o({},l.props.style,p.grid)})):e.createElement("div",{style:p.grid})};Checkboard.defaultProps={size:8,white:"transparent",grey:"rgba(0,0,0,.08)",renderers:{}};export default Checkboard;
+import e from"react";import r from"../../../reactcss/index.js.js";import*as t from"../../helpers/checkboard.js";const o=Object.assign||function(e){for(let r=1;r<arguments.length;r++){const t=arguments[r];for(const r in t){Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}}return e};export const Checkboard=({white:s,grey:a,size:n,renderers:c,borderRadius:d,boxShadow:i,children:l})=>{const p=r({default:{grid:{borderRadius:d,boxShadow:i,absolute:"0px 0px 0px 0px",background:"url("+t.get(s||"transparent",a||"rgba(0,0,0,.08)",n||8,null==c?void 0:c.canvas)+") center left"}}});return e.isValidElement(l)?e.cloneElement(l,Object.assign(Object.assign({},l.props),{style:o({},l.props.style,p.grid)})):e.createElement("div",{style:p.grid})};Checkboard.defaultProps={size:8,white:"transparent",grey:"rgba(0,0,0,.08)",renderers:{}};export default Checkboard;

package/utils/react-color/components/common/EditableInput.js

@@ -1 +1 @@
-import e from"react";import t from"../../../reactcss.js";const s=[38,40];let a=1;export class EditableInput extends(e.PureComponent||e.Component){constructor(e){super(e),this.input=null,this.handleBlur=()=>{this.state.blurValue&&this.setState({value:this.state.blurValue,blurValue:null})},this.handleChange=e=>{this.setUpdatedValue(e.target.value,e)},this.handleKeyDown=e=>{const t=(e=>Number(String(e).replace(/%/g,"")))(e.target.value);if(!isNaN(t)&&(a=e.keyCode,s.indexOf(a)>-1)){const s=this.getArrowOffset(),a=38===e.keyCode?t+s:t-s;this.setUpdatedValue(a,e)}var a},this.handleDrag=e=>{if(this.props.dragLabel){const t=Math.round(this.props.value+e.movementX);t>=0&&t<=this.props.dragMax&&this.props.onChange&&this.props.onChange(this.getValueObjectWithLabel(t),e)}},this.handleMouseDown=e=>{this.props.dragLabel&&(e.preventDefault(),this.handleDrag(e),window.addEventListener("mousemove",this.handleDrag),window.addEventListener("mouseup",this.handleMouseUp))},this.handleMouseUp=()=>{this.unbindEventListeners()},this.unbindEventListeners=()=>{window.removeEventListener("mousemove",this.handleDrag),window.removeEventListener("mouseup",this.handleMouseUp)},this.state={value:String(e.value).toUpperCase(),blurValue:String(e.value).toUpperCase()},this.inputId="rc-editable-input-"+a++}componentDidUpdate(e,t){this.props.value===this.state.value||e.value===this.props.value&&t.value===this.state.value||(this.input===document.activeElement?this.setState({blurValue:String(this.props.value).toUpperCase()}):this.setState({value:String(this.props.value).toUpperCase(),blurValue:!this.state.blurValue&&String(this.props.value).toUpperCase()}))}componentWillUnmount(){this.unbindEventListeners()}getValueObjectWithLabel(e){return{[this.props.label]:e}}getArrowOffset(){return this.props.arrowOffset||1}setUpdatedValue(e,t){const s=this.props.label?this.getValueObjectWithLabel(e):e;this.props.onChange&&this.props.onChange(s,t),this.setState({value:e})}render(){const s=t({default:{wrap:{position:"relative"}},"user-override":{wrap:this.props.style&&this.props.style.wrap?this.props.style.wrap:{},input:this.props.style&&this.props.style.input?this.props.style.input:{},label:this.props.style&&this.props.style.label?this.props.style.label:{}},"dragLabel-true":{label:{cursor:"ew-resize"}}},{"user-override":!0},this.props);return e.createElement("div",{style:s.wrap},e.createElement("input",{id:this.inputId,style:s.input,ref:e=>{this.input=e},value:this.state.value,onKeyDown:this.handleKeyDown,onChange:this.handleChange,onBlur:this.handleBlur,placeholder:this.props.placeholder,spellCheck:"false"}),this.props.label&&!this.props.hideLabel?e.createElement("label",{htmlFor:this.inputId,style:s.label,onMouseDown:this.handleMouseDown},this.props.label):null)}}export default EditableInput;
+import e from"react";import t from"../../../reactcss/index.js.js";const s=[38,40];let a=1;export class EditableInput extends(e.PureComponent||e.Component){constructor(e){super(e),this.input=null,this.handleBlur=()=>{this.state.blurValue&&this.setState({value:this.state.blurValue,blurValue:null})},this.handleChange=e=>{this.setUpdatedValue(e.target.value,e)},this.handleKeyDown=e=>{const t=(e=>Number(String(e).replace(/%/g,"")))(e.target.value);if(!isNaN(t)&&(a=e.keyCode,s.indexOf(a)>-1)){const s=this.getArrowOffset(),a=38===e.keyCode?t+s:t-s;this.setUpdatedValue(a,e)}var a},this.handleDrag=e=>{if(this.props.dragLabel){const t=Math.round(this.props.value+e.movementX);t>=0&&t<=this.props.dragMax&&this.props.onChange&&this.props.onChange(this.getValueObjectWithLabel(t),e)}},this.handleMouseDown=e=>{this.props.dragLabel&&(e.preventDefault(),this.handleDrag(e),window.addEventListener("mousemove",this.handleDrag),window.addEventListener("mouseup",this.handleMouseUp))},this.handleMouseUp=()=>{this.unbindEventListeners()},this.unbindEventListeners=()=>{window.removeEventListener("mousemove",this.handleDrag),window.removeEventListener("mouseup",this.handleMouseUp)},this.state={value:String(e.value).toUpperCase(),blurValue:String(e.value).toUpperCase()},this.inputId="rc-editable-input-"+a++}componentDidUpdate(e,t){this.props.value===this.state.value||e.value===this.props.value&&t.value===this.state.value||(this.input===document.activeElement?this.setState({blurValue:String(this.props.value).toUpperCase()}):this.setState({value:String(this.props.value).toUpperCase(),blurValue:!this.state.blurValue&&String(this.props.value).toUpperCase()}))}componentWillUnmount(){this.unbindEventListeners()}getValueObjectWithLabel(e){return{[this.props.label]:e}}getArrowOffset(){return this.props.arrowOffset||1}setUpdatedValue(e,t){const s=this.props.label?this.getValueObjectWithLabel(e):e;this.props.onChange&&this.props.onChange(s,t),this.setState({value:e})}render(){const s=t({default:{wrap:{position:"relative"}},"user-override":{wrap:this.props.style&&this.props.style.wrap?this.props.style.wrap:{},input:this.props.style&&this.props.style.input?this.props.style.input:{},label:this.props.style&&this.props.style.label?this.props.style.label:{}},"dragLabel-true":{label:{cursor:"ew-resize"}}},{"user-override":!0},this.props);return e.createElement("div",{style:s.wrap},e.createElement("input",{id:this.inputId,style:s.input,ref:e=>{this.input=e},value:this.state.value,onKeyDown:this.handleKeyDown,onChange:this.handleChange,onBlur:this.handleBlur,placeholder:this.props.placeholder,spellCheck:"false"}),this.props.label&&!this.props.hideLabel?e.createElement("label",{htmlFor:this.inputId,style:s.label,onMouseDown:this.handleMouseDown},this.props.label):null)}}export default EditableInput;

package/utils/react-color/components/common/Hue.js

@@ -1 +1 @@
-import e from"react";import t from"../../../reactcss.js";import*as n from"../../helpers/hue.js";export class Hue extends(e.PureComponent||e.Component){constructor(e){super(e),this.container=null,this.handleChange=e=>{const t=n.calculateChange(e,this.props.direction,this.props.hsl,this.container);t&&"function"==typeof this.props.onChange&&this.props.onChange(t,e)},this.handleMouseDown=e=>{this.handleChange(e),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()}}componentWillUnmount(){this.unbindEventListeners()}unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}render(){const n=this.props.direction||"horizontal",o=t({default:{hue:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius,boxShadow:this.props.shadow},container:{padding:"0 2px",position:"relative",height:"100%",borderRadius:this.props.radius},pointer:{position:"absolute",left:100*this.props.hsl.h/360+"%"},slider:{marginTop:"1px",width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",transform:"translateX(-2px)"}},vertical:{pointer:{left:"0px",top:-100*this.props.hsl.h/360+100+"%"}}},{vertical:"vertical"===n});return e.createElement("div",{style:o.hue},e.createElement("div",{className:"hue-"+n,style:o.container,ref:e=>{this.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},e.createElement("style",null,"\n            .hue-horizontal {\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n\n            .hue-vertical {\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n                #0f0 33%, #0ff 50%, #0f 67%, #f0f 83%, #f00 100%);\n            }\n          "),e.createElement("div",{style:o.pointer},this.props.pointer?e.createElement(this.props.pointer,this.props):e.createElement("div",{style:o.slider}))))}}export default Hue;
+import e from"react";import t from"../../../reactcss/index.js.js";import*as n from"../../helpers/hue.js";export class Hue extends(e.PureComponent||e.Component){constructor(e){super(e),this.container=null,this.handleChange=e=>{const t=n.calculateChange(e,this.props.direction,this.props.hsl,this.container);t&&"function"==typeof this.props.onChange&&this.props.onChange(t,e)},this.handleMouseDown=e=>{this.handleChange(e),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()}}componentWillUnmount(){this.unbindEventListeners()}unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}render(){const n=this.props.direction||"horizontal",o=t({default:{hue:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius,boxShadow:this.props.shadow},container:{padding:"0 2px",position:"relative",height:"100%",borderRadius:this.props.radius},pointer:{position:"absolute",left:100*this.props.hsl.h/360+"%"},slider:{marginTop:"1px",width:"4px",borderRadius:"1px",height:"8px",boxShadow:"0 0 2px rgba(0, 0, 0, .6)",background:"#fff",transform:"translateX(-2px)"}},vertical:{pointer:{left:"0px",top:-100*this.props.hsl.h/360+100+"%"}}},{vertical:"vertical"===n});return e.createElement("div",{style:o.hue},e.createElement("div",{className:"hue-"+n,style:o.container,ref:e=>{this.container=e},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},e.createElement("style",null,"\n            .hue-horizontal {\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n\n            .hue-vertical {\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n                #0f0 33%, #0ff 50%, #0f 67%, #f0f 83%, #f00 100%);\n            }\n          "),e.createElement("div",{style:o.pointer},this.props.pointer?e.createElement(this.props.pointer,this.props):e.createElement("div",{style:o.slider}))))}}export default Hue;

package/utils/react-color/components/common/Saturation.js

@@ -1 +1 @@
-import t from"react";import e from"../../../reactcss.js";import n from"lodash/throttle.js";import*as o from"../../helpers/saturation.js";export class Saturation extends(t.PureComponent||t.Component){constructor(t){super(t),this.container=null,this.handleChange=t=>{"function"==typeof this.props.onChange&&this.throttle(this.props.onChange,o.calculateChange(t,this.props.hsl,this.container),t)},this.handleMouseDown=t=>{this.handleChange(t);const e=this.getContainerRenderWindow();e.addEventListener("mousemove",this.handleChange),e.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()},this.throttle=n((t,e,n)=>{t(e,n)},50)}componentWillUnmount(){this.throttle.cancel(),this.unbindEventListeners()}getContainerRenderWindow(){const t=this.container;let e=window;for(;!e.document.contains(t)&&e.parent!==e;){e=e.parent}return e}unbindEventListeners(){const t=this.getContainerRenderWindow();t.removeEventListener("mousemove",this.handleChange),t.removeEventListener("mouseup",this.handleMouseUp)}render(){const{color:n,white:o,black:r,pointer:s,circle:i}=this.props.style||{},a=e({default:{color:{absolute:"0px 0px 0px 0px",background:"hsl("+this.props.hsl.h+",100%, 50%)",borderRadius:this.props.radius},white:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},black:{absolute:"0px 0px 0px 0px",boxShadow:this.props.shadow,borderRadius:this.props.radius},pointer:{position:"absolute",top:-100*this.props.hsv.v+100+"%",left:100*this.props.hsv.s+"%",cursor:"default"},circle:{width:"4px",height:"4px",boxShadow:"0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",borderRadius:"50%",cursor:"hand",transform:"translate(-2px, -2px)"}},custom:{color:n,white:o,black:r,pointer:s,circle:i}},{custom:!!this.props.style});return t.createElement("div",{style:a.color,ref:t=>{this.container=t},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},t.createElement("style",null,"\n          .saturation-white {\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n          }\n          .saturation-black {\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\n          }\n        "),t.createElement("div",{style:a.white,className:"saturation-white"},t.createElement("div",{style:a.black,className:"saturation-black"}),t.createElement("div",{style:a.pointer},this.props.pointer?t.createElement(this.props.pointer,this.props):t.createElement("div",{style:a.circle}))))}}export default Saturation;
+import t from"react";import e from"../../../reactcss/index.js.js";import n from"lodash/throttle.js";import*as o from"../../helpers/saturation.js";export class Saturation extends(t.PureComponent||t.Component){constructor(t){super(t),this.container=null,this.handleChange=t=>{"function"==typeof this.props.onChange&&this.throttle(this.props.onChange,o.calculateChange(t,this.props.hsl,this.container),t)},this.handleMouseDown=t=>{this.handleChange(t);const e=this.getContainerRenderWindow();e.addEventListener("mousemove",this.handleChange),e.addEventListener("mouseup",this.handleMouseUp)},this.handleMouseUp=()=>{this.unbindEventListeners()},this.throttle=n((t,e,n)=>{t(e,n)},50)}componentWillUnmount(){this.throttle.cancel(),this.unbindEventListeners()}getContainerRenderWindow(){const t=this.container;let e=window;for(;!e.document.contains(t)&&e.parent!==e;){e=e.parent}return e}unbindEventListeners(){const t=this.getContainerRenderWindow();t.removeEventListener("mousemove",this.handleChange),t.removeEventListener("mouseup",this.handleMouseUp)}render(){const{color:n,white:o,black:s,pointer:r,circle:i}=this.props.style||{},a=e({default:{color:{absolute:"0px 0px 0px 0px",background:"hsl("+this.props.hsl.h+",100%, 50%)",borderRadius:this.props.radius},white:{absolute:"0px 0px 0px 0px",borderRadius:this.props.radius},black:{absolute:"0px 0px 0px 0px",boxShadow:this.props.shadow,borderRadius:this.props.radius},pointer:{position:"absolute",top:-100*this.props.hsv.v+100+"%",left:100*this.props.hsv.s+"%",cursor:"default"},circle:{width:"4px",height:"4px",boxShadow:"0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",borderRadius:"50%",cursor:"hand",transform:"translate(-2px, -2px)"}},custom:{color:n,white:o,black:s,pointer:r,circle:i}},{custom:!!this.props.style});return t.createElement("div",{style:a.color,ref:t=>{this.container=t},onMouseDown:this.handleMouseDown,onTouchMove:this.handleChange,onTouchStart:this.handleChange},t.createElement("style",null,"\n          .saturation-white {\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n          }\n          .saturation-black {\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\n          }\n        "),t.createElement("div",{style:a.white,className:"saturation-white"},t.createElement("div",{style:a.black,className:"saturation-black"}),t.createElement("div",{style:a.pointer},this.props.pointer?t.createElement(this.props.pointer,this.props):t.createElement("div",{style:a.circle}))))}}export default Saturation;

package/utils/react-color/components/common/Swatch.js

@@ -1 +1 @@
-import t from"react";import e from"../../../reactcss.js";import{handleFocus as o}from"../../helpers/interaction.js";import r from"./Checkboard.js";const n=Object.assign||function(t){for(let e=1;e<arguments.length;e++){const o=arguments[e];for(const e in o){Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])}}return t};export const Swatch=({color:o,style:c,onClick:s=()=>{},onHover:a,title:i=o,children:l,focus:d,focusStyle:h={}})=>{const p="transparent"===o,u=e({default:{swatch:n({background:o,height:"100%",width:"100%",cursor:"pointer",position:"relative",outline:"none"},c,d?h:{})}}),f={};return a&&(f.onMouseOver=t=>a&&a(o,t)),t.createElement("div",n({style:u.swatch,onClick:t=>s(o,t),title:i,tabIndex:0,onKeyDown:t=>13===t.keyCode&&s(o,t)},f),l,p&&t.createElement(r,{borderRadius:u.swatch.borderRadius,boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.1)"}))};export default o(Swatch);
+import t from"react";import e from"../../../reactcss/index.js.js";import{handleFocus as o}from"../../helpers/interaction.js";import r from"./Checkboard.js";const n=Object.assign||function(t){for(let e=1;e<arguments.length;e++){const o=arguments[e];for(const e in o){Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])}}return t};export const Swatch=({color:o,style:c,onClick:s=()=>{},onHover:i,title:a=o,children:l,focus:d,focusStyle:h={}})=>{const p="transparent"===o,u=e({default:{swatch:n({background:o,height:"100%",width:"100%",cursor:"pointer",position:"relative",outline:"none"},c,d?h:{})}}),f={};return i&&(f.onMouseOver=t=>i&&i(o,t)),t.createElement("div",n({style:u.swatch,onClick:t=>s(o,t),title:a,tabIndex:0,onKeyDown:t=>13===t.keyCode&&s(o,t)},f),l,p&&t.createElement(r,{borderRadius:u.swatch.borderRadius,boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.1)"}))};export default o(Swatch);

package/utils/react-color/components/sketch/SketchFields.js

@@ -1 +1 @@
-import e from"react";import l from"../../../reactcss.js";import*as a from"../../helpers/color.js";import{EditableInput as t}from"../common.js";export const SketchFields=({onChange:n,rgb:r,hsl:i,hex:p,disableAlpha:s})=>{const d=l({default:{fields:{display:"flex",paddingTop:"4px"},single:{flex:"1",paddingLeft:"6px"},alpha:{flex:"1",paddingLeft:"6px"},double:{flex:"2"},input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px #ccc",fontSize:"11px"},label:{display:"block",textAlign:"center",fontSize:"11px",color:"#222",paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}},disableAlpha:{alpha:{display:"none"}}},{disableAlpha:s}),o=(e,l)=>{if(e.hex){a.isValidHex(e.hex)&&n({hex:e.hex,source:"hex"},l)}else if(e.r||e.g||e.b){n({r:e.r||r.r,g:e.g||r.g,b:e.b||r.b,a:r.a,source:"rgb"},l)}else if(e.a){let a=e.a;a<0?a=0:a>100&&(a=100),a/=100,n({h:i.h,s:i.s,l:i.l,a,source:"rgb"},l)}};return e.createElement("div",{style:d.fields,className:"flexbox-fix"},e.createElement("div",{style:d.double},e.createElement(t,{style:{input:d.input,label:d.label},label:"hex",value:p.replace("#",""),onChange:o})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"r",value:r.r,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"g",value:r.g,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"b",value:r.b,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.alpha},e.createElement(t,{style:{input:d.input,label:d.label},label:"a",value:Math.round(100*r.a),onChange:o,dragLabel:"true",dragMax:"100"})))};export default SketchFields;
+import e from"react";import l from"../../../reactcss/index.js.js";import*as a from"../../helpers/color.js";import{EditableInput as t}from"../common.js";export const SketchFields=({onChange:n,rgb:r,hsl:i,hex:s,disableAlpha:p})=>{const d=l({default:{fields:{display:"flex",paddingTop:"4px"},single:{flex:"1",paddingLeft:"6px"},alpha:{flex:"1",paddingLeft:"6px"},double:{flex:"2"},input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px #ccc",fontSize:"11px"},label:{display:"block",textAlign:"center",fontSize:"11px",color:"#222",paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}},disableAlpha:{alpha:{display:"none"}}},{disableAlpha:p}),o=(e,l)=>{if(e.hex){a.isValidHex(e.hex)&&n({hex:e.hex,source:"hex"},l)}else if(e.r||e.g||e.b){n({r:e.r||r.r,g:e.g||r.g,b:e.b||r.b,a:r.a,source:"rgb"},l)}else if(e.a){let a=e.a;a<0?a=0:a>100&&(a=100),a/=100,n({h:i.h,s:i.s,l:i.l,a,source:"rgb"},l)}};return e.createElement("div",{style:d.fields,className:"flexbox-fix"},e.createElement("div",{style:d.double},e.createElement(t,{style:{input:d.input,label:d.label},label:"hex",value:s.replace("#",""),onChange:o})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"r",value:r.r,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"g",value:r.g,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.single},e.createElement(t,{style:{input:d.input,label:d.label},label:"b",value:r.b,onChange:o,dragLabel:"true",dragMax:"255"})),e.createElement("div",{style:d.alpha},e.createElement(t,{style:{input:d.input,label:d.label},label:"a",value:Math.round(100*r.a),onChange:o,dragLabel:"true",dragMax:"100"})))};export default SketchFields;

package/utils/react-color/components/sketch/SketchPresetColors.js

@@ -1 +1 @@
-import e from"react";import o from"../../../reactcss.js";import{Swatch as t}from"../common.js";const r=Object.assign||function(e){for(let o=1;o<arguments.length;o++){const t=arguments[o];for(const o in t){Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}}return e};export const SketchPresetColors=({colors:s,onClick:c=()=>{},onSwatchHover:n})=>{const l=o({default:{colors:{margin:"0 -10px",padding:"10px 0 0 10px",borderTop:"1px solid #eee",display:"flex",flexWrap:"wrap",position:"relative"},swatchWrap:{width:"16px",height:"16px",margin:"0 10px 10px 0"},swatch:{borderRadius:"3px",boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15)"}},"no-presets":{colors:{display:"none"}}},{"no-presets":!s||!s.length}),a=(e,o)=>{c({hex:e,source:"hex"},o)};return e.createElement("div",{style:l.colors,className:"flexbox-fix"},s.map(o=>{const s="string"==typeof o?{color:o}:o,c=""+s.color+(s.title||"");return e.createElement("div",{key:c,style:l.swatchWrap},e.createElement(t,r({},s,{style:l.swatch,onClick:a,onHover:n,focusStyle:{boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px "+s.color}})))}))};export default SketchPresetColors;
+import e from"react";import o from"../../../reactcss/index.js.js";import{Swatch as t}from"../common.js";const r=Object.assign||function(e){for(let o=1;o<arguments.length;o++){const t=arguments[o];for(const o in t){Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}}return e};export const SketchPresetColors=({colors:s,onClick:c=()=>{},onSwatchHover:n})=>{const l=o({default:{colors:{margin:"0 -10px",padding:"10px 0 0 10px",borderTop:"1px solid #eee",display:"flex",flexWrap:"wrap",position:"relative"},swatchWrap:{width:"16px",height:"16px",margin:"0 10px 10px 0"},swatch:{borderRadius:"3px",boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15)"}},"no-presets":{colors:{display:"none"}}},{"no-presets":!s||!s.length}),a=(e,o)=>{c({hex:e,source:"hex"},o)};return e.createElement("div",{style:l.colors,className:"flexbox-fix"},s.map(o=>{const s="string"==typeof o?{color:o}:o,c=""+s.color+(s.title||"");return e.createElement("div",{key:c,style:l.swatchWrap},e.createElement(t,r({},s,{style:l.swatch,onClick:a,onHover:n,focusStyle:{boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px "+s.color}})))}))};export default SketchPresetColors;

package/utils/validate-key.js

@@ -1 +1 @@
-import*as e from"mobx";import{getAPI as o}from"./api.js";import{useRemoveBackground as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;export const isCreditVisible=()=>n.value;const i=e.action(()=>{n.value=!0});let r="";export const getKey=()=>r||"";let s="undefined"!=typeof window?window.location.origin:"";const l="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===s&&l&&(s="headless"),"file://"===s&&d&&(s="electron");const c=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${s}" here: https://polotno.com/cabinet`;let p=fetch;export const __=e=>{p=e};export async function isKeyPaid(n){for(let r=0;r<5;r++){try{const i=await p(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"3.0.0-2"})});if(e.runInAction(()=>{a.value=i.headers.get("x-api-version")}),!n){return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1}if(200!==i.status){await new Promise(e=>setTimeout(e,3e3));continue}const r=await i.json();return r.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),r.is_paid||console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),r.is_domain_valid||console.log(c,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(r.remove_background_enabled),r.is_paid||!1}catch(i){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e,o){r=e,await isKeyPaid(e)&&!o||i()}
+import*as e from"mobx";import{getAPI as o}from"./api.js";import{useRemoveBackground as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;export const isCreditVisible=()=>n.value;const i=e.action(()=>{n.value=!0});let r="";export const getKey=()=>r||"";let s="undefined"!=typeof window?window.location.origin:"";const l="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===s&&l&&(s="headless"),"file://"===s&&d&&(s="electron");const c=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${s}" here: https://polotno.com/cabinet`;let p=fetch;export const __=e=>{p=e};export async function isKeyPaid(n){for(let r=0;r<5;r++){try{const i=await p(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"3.0.0-3"})});if(e.runInAction(()=>{a.value=i.headers.get("x-api-version")}),!n){return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1}if(200!==i.status){await new Promise(e=>setTimeout(e,3e3));continue}const r=await i.json();return r.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),r.is_paid||console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),r.is_domain_valid||console.log(c,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(r.remove_background_enabled),r.is_paid||!1}catch(i){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e,o){r=e,await isKeyPaid(e)&&!o||i()}