@rogieking/figui3 6.40.0 → 7.0.0

package/dist/fig-editor.js

@@ -1,4 +1,4 @@
-import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))customElements.define(j,J)}function k(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var A=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],S=["shorter","longer","increasing","decreasing"],D=new Set(["oklch","hsl"]);function R(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!A.includes(K))K="srgb";J.interpolationSpace=K;let U=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=S.includes(U)?U:"shorter",J}function V(j){let J=R(j),K={...J,interpolationSpace:J.interpolationSpace};if(D.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function y(j){let J=R(j);if(J.interpolationSpace==="srgb")return"";if(D.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function N(j){let J=R(j);if(D.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function H(j){let J=String(j??"");for(let K of D){let U=`${K}-`;if(J.startsWith(U))return{interpolationSpace:K,hueInterpolation:J.slice(U.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var P=0;class _ extends HTMLElement{#Q=null;#Y=null;#j=null;#Uj=`fig-fill-picker-dialog-${++P}`;#b="solid";anchorElement=null;#W="solid";#x="srgb";#K={h:0,s:0,v:85,a:1};#S="hex";#J={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#Z={url:null,scaleMode:"fill",scale:50};#$={stream:null,snapshot:null};#k={};#h={};#O=null;#L=null;#_=null;#f=null;#B=!1;#G=!1;#N=null;#w=null;#m=null;#C=null;#n=null;#v=0;#d=null;#c=null;#p=new Set;#s=new Set;constructor(){super();this.#d=this.#Vj.bind(this),this.#c=this.#_j.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#R(()=>{this.#Dj(),this.#Xj(),this.#z()})}disconnectedCallback(){if(this.#Zj(),this.#Rj(),this.#Tj(),this.#Y)this.#Y.removeAttribute("selected");if(this.#Q)this.#Q.removeEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c);this.#Q=null,this.#Y=null}#M(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#R(j){let J=requestAnimationFrame(()=>{if(this.#p.delete(J),this.isConnected)j()});return this.#p.add(J),J}#Rj(){this.#p.forEach((j)=>cancelAnimationFrame(j)),this.#p.clear()}#Tj(){if(this.#s.forEach((j)=>URL.revokeObjectURL(j)),this.#s.clear(),this.#$.snapshot?.startsWith("blob:")){if(this.#X.url===this.#$.snapshot)this.#X.url=null;this.#$.snapshot=null}}#Dj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Y=document.createElement("fig-swatch"),this.#Y.setAttribute("background","#D9D9D9"),this.appendChild(this.#Y),this.#Q=this.#Y;else if(j.matches("fig-swatch"))this.#Y=j,this.#Q=j;else this.#Q=j,this.#Y=null;if(this.#F(),this.#Q.removeEventListener("click",this.#d),this.#Q.addEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c),this.#Q.addEventListener("keydown",this.#c),this.#Y)this.#R(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#F()})}#i(){return this.getAttribute("aria-label")||"Fill picker"}#F(){if(!this.#Q)return;let j=this.#M(),J=this.getAttribute("aria-labelledby");if(!this.#Q.hasAttribute("role"))this.#Q.setAttribute("role","button");if(this.#Q.setAttribute("tabindex",j?"-1":"0"),this.#Q.setAttribute("aria-disabled",j?"true":"false"),this.#Q.setAttribute("aria-haspopup","dialog"),this.#Q.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#Q.setAttribute("aria-controls",this.#Uj),this.#Q.removeAttribute("aria-hidden"),J)this.#Q.setAttribute("aria-labelledby",J),this.#Q.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`),this.#Q.removeAttribute("aria-labelledby");else if(this.#Q.removeAttribute("aria-labelledby"),!this.#Q.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`);let K=this.getAttribute("aria-describedby");if(K)this.#Q.setAttribute("aria-describedby",K);else this.#Q.removeAttribute("aria-describedby")}#Vj(j){if(this.#M())return;j.stopPropagation(),j.preventDefault(),this.#l()}#_j(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#M())return;j.preventDefault(),j.stopPropagation(),this.#l()}#Xj(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let K=JSON.parse(j);if(K.type)this.#W=K.type;if(K.color){if(typeof K.color==="string")this.#K=this.#I(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#K=K.color}let U=K.alpha!==void 0?Number(K.alpha):K.opacity!==void 0?Number(K.opacity)/100:void 0;if(Number.isFinite(U))this.#K.a=Math.max(0,Math.min(1,U));if(this.#x="srgb",K.gradient)this.#J=R({...this.#J,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#Z={...this.#Z,...K.video};if(K.type&&!J.includes(K.type)){let{type:Q,...X}=K;this.#h[K.type]=X}}catch(K){if(j.startsWith("#"))this.#W="solid",this.#K=this.#I(j)}}#z(){if(!this.#Y)return;let j,J="cover",K="center";switch(this.#W){case"solid":j=this.#H(this.#K);break;case"gradient":j=this.#fj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let Q=this.#Yj(this.#X.scaleMode,this.#X.scale);J=Q.size,K=Q.position}else j="";break;case"video":if(this.#Z.url){j=`url(${this.#Z.url})`;let Q=this.#Yj(this.#Z.scaleMode,this.#Z.scale);J=Q.size,K=Q.position}else j="";break;default:j=this.#k[this.#W]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#Y.setAttribute("background",j),this.#Y.style.setProperty("--swatch-bg-size",J),this.#Y.style.setProperty("--swatch-bg-position",K),this.#W==="solid")this.#Y.setAttribute("alpha",this.#K.a);else this.#Y.removeAttribute("alpha")}#Yj(j,J){switch(j){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#l(){if(this.#M())return;if(!this.#j)this.#qj();if(this.#m=JSON.stringify(this.value),this.#C=this.#m,this.#o(this.#W,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,this.#F(),this.#R(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#R(()=>{this.#E(),this.#T()})})}open(){this.#l()}close(){if(this.#j)this.#j.open=!1,this.#F()}#Fj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#k)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((U)=>U.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#Zj(){if(this.#N)this.#N(),this.#N=null;if(this.#w?.disconnect(),this.#w=null,this.#r(),!this.#j)return;this.#Fj(),this.#j.remove(),this.#j=null,this.#n=null,this.#m=null,this.#C=null,this.#O=null,this.#L=null,this.#_=null,this.#f=null,this.#G=!1,this.#F()}#r(){if(this.#v+=1,this.#$.stream)this.#$.stream.getTracks().forEach((J)=>J.stop()),this.#$.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#qj(){this.#k={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let $=Y.getAttribute("slot").slice(5);this.#k[$]={element:Y,label:Y.getAttribute("label")||$.charAt(0).toUpperCase()+$.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.id=this.#Uj,this.#j.setAttribute("aria-label",this.#i()),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#Q;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],K={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},U=this.getAttribute("mode"),Q;if(U){if(Q=U.split(",").map(($)=>$.trim().toLowerCase()).filter(($)=>J.includes($)||this.#k[$]),Q.length===0)Q=[...J]}else Q=[...J];let X={...K};for(let[Y,{label:$}]of Object.entries(this.#k))X[Y]=$;if(!Q.includes(this.#W))this.#W=Q[0],this.#b=Q[0];let Z;if(Q.length===1)Z=`<h3 class="fig-fill-picker-type-label">${k(X[Q[0]])}</h3>`;else{let Y=Q.map(($)=>`<fig-select-option value="${k($)}">${k(X[$])}</fig-select-option>`).join(`
+import"./fig.js";import"./fig-lab.js";function E(j,J){if(!customElements.get(j))customElements.define(j,J)}function k(j){return String(j??"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var A=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],S=["shorter","longer","increasing","decreasing"],D=new Set(["oklch","hsl"]);function R(j){let J={...j??{}},K=String(J.interpolationSpace??"srgb").toLowerCase();if(!A.includes(K))K="srgb";J.interpolationSpace=K;let U=String(J.hueInterpolation??"shorter").toLowerCase();return J.hueInterpolation=S.includes(U)?U:"shorter",J}function V(j){let J=R(j),K={...J,interpolationSpace:J.interpolationSpace};if(D.has(J.interpolationSpace))K.hueInterpolation=J.hueInterpolation;else delete K.hueInterpolation;return K}function y(j){let J=R(j);if(J.interpolationSpace==="srgb")return"";if(D.has(J.interpolationSpace))return`in ${J.interpolationSpace} ${J.hueInterpolation} hue`;return`in ${J.interpolationSpace}`}function N(j){let J=R(j);if(D.has(J.interpolationSpace))return`${J.interpolationSpace}-${J.hueInterpolation||"shorter"}`;return J.interpolationSpace}function H(j){let J=String(j??"");for(let K of D){let U=`${K}-`;if(J.startsWith(U))return{interpolationSpace:K,hueInterpolation:J.slice(U.length)||"shorter"}}return{interpolationSpace:J||"srgb",hueInterpolation:"shorter"}}var P=0;class _ extends HTMLElement{#Q=null;#Y=null;#j=null;#Uj=`fig-fill-picker-dialog-${++P}`;#b="solid";anchorElement=null;#W="solid";#x="srgb";#K={h:0,s:0,v:85,a:1};#S="hex";#J={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#X={url:null,scaleMode:"fill",scale:50};#Z={url:null,scaleMode:"fill",scale:50};#$={stream:null,snapshot:null};#k={};#h={};#O=null;#L=null;#_=null;#f=null;#B=!1;#G=!1;#N=null;#w=null;#m=null;#C=null;#n=null;#v=0;#d=null;#c=null;#p=new Set;#s=new Set;constructor(){super();this.#d=this.#Vj.bind(this),this.#c=this.#_j.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#R(()=>{this.#Dj(),this.#Xj(),this.#z()})}disconnectedCallback(){if(this.#Zj(),this.#Rj(),this.#Tj(),this.#Y)this.#Y.removeAttribute("selected");if(this.#Q)this.#Q.removeEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c);this.#Q=null,this.#Y=null}#M(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#R(j){let J=requestAnimationFrame(()=>{if(this.#p.delete(J),this.isConnected)j()});return this.#p.add(J),J}#Rj(){this.#p.forEach((j)=>cancelAnimationFrame(j)),this.#p.clear()}#Tj(){if(this.#s.forEach((j)=>URL.revokeObjectURL(j)),this.#s.clear(),this.#$.snapshot?.startsWith("blob:")){if(this.#X.url===this.#$.snapshot)this.#X.url=null;this.#$.snapshot=null}}#Dj(){let j=Array.from(this.children).find((J)=>!J.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Y=document.createElement("fig-swatch"),this.#Y.setAttribute("background","#D9D9D9"),this.appendChild(this.#Y),this.#Q=this.#Y;else if(j.matches("fig-swatch, fig-chit"))this.#Y=j,this.#Q=j;else this.#Q=j,this.#Y=null;if(this.#F(),this.#Q.removeEventListener("click",this.#d),this.#Q.addEventListener("click",this.#d),this.#Q.removeEventListener("keydown",this.#c),this.#Q.addEventListener("keydown",this.#c),this.#Y)this.#R(()=>{let J=this.#Y.querySelector('input[type="color"]');if(J)J.remove();this.#F()})}#i(){return this.getAttribute("aria-label")||"Fill picker"}#F(){if(!this.#Q)return;let j=this.#M(),J=this.getAttribute("aria-labelledby");if(!this.#Q.hasAttribute("role"))this.#Q.setAttribute("role","button");if(this.#Q.setAttribute("tabindex",j?"-1":"0"),this.#Q.setAttribute("aria-disabled",j?"true":"false"),this.#Q.setAttribute("aria-haspopup","dialog"),this.#Q.setAttribute("aria-expanded",this.#j?.open?"true":"false"),this.#Q.setAttribute("aria-controls",this.#Uj),this.#Q.removeAttribute("aria-hidden"),J)this.#Q.setAttribute("aria-labelledby",J),this.#Q.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`),this.#Q.removeAttribute("aria-labelledby");else if(this.#Q.removeAttribute("aria-labelledby"),!this.#Q.hasAttribute("aria-label"))this.#Q.setAttribute("aria-label",`Open ${this.#i()}`);let K=this.getAttribute("aria-describedby");if(K)this.#Q.setAttribute("aria-describedby",K);else this.#Q.removeAttribute("aria-describedby")}#Vj(j){if(this.#M())return;j.stopPropagation(),j.preventDefault(),this.#l()}#_j(j){if(j.key!=="Enter"&&j.key!==" ")return;if(this.#M())return;j.preventDefault(),j.stopPropagation(),this.#l()}#Xj(){let j=this.getAttribute("value");if(!j)return;let J=["solid","gradient","image","video","webcam"];try{let K=JSON.parse(j);if(K.type)this.#W=K.type;if(K.color){if(typeof K.color==="string")this.#K=this.#I(K.color);else if(typeof K.color==="object"&&K.color.h!==void 0)this.#K=K.color}let U=K.alpha!==void 0?Number(K.alpha):K.opacity!==void 0?Number(K.opacity)/100:void 0;if(Number.isFinite(U))this.#K.a=Math.max(0,Math.min(1,U));if(this.#x="srgb",K.gradient)this.#J=R({...this.#J,...K.gradient});if(K.image)this.#X={...this.#X,...K.image};if(K.video)this.#Z={...this.#Z,...K.video};if(K.type&&!J.includes(K.type)){let{type:Q,...X}=K;this.#h[K.type]=X}}catch(K){if(j.startsWith("#"))this.#W="solid",this.#K=this.#I(j)}}#z(){if(!this.#Y)return;let j,J="cover",K="center";switch(this.#W){case"solid":j=this.#H(this.#K);break;case"gradient":j=this.#fj();break;case"image":if(this.#X.url){j=`url(${this.#X.url})`;let Q=this.#Yj(this.#X.scaleMode,this.#X.scale);J=Q.size,K=Q.position}else j="";break;case"video":if(this.#Z.url){j=`url(${this.#Z.url})`;let Q=this.#Yj(this.#Z.scaleMode,this.#Z.scale);J=Q.size,K=Q.position}else j="";break;default:j=this.#k[this.#W]?.element?.getAttribute("swatch-background")||"#D9D9D9"}if(this.#Y.setAttribute("background",j),this.#Y.style.setProperty("--swatch-bg-size",J),this.#Y.style.setProperty("--swatch-bg-position",K),this.#W==="solid")this.#Y.setAttribute("alpha",this.#K.a);else this.#Y.removeAttribute("alpha")}#Yj(j,J){switch(j){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${J}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#l(){if(this.#M())return;if(!this.#j)this.#qj();if(this.#m=JSON.stringify(this.value),this.#C=this.#m,this.#o(this.#W,{emit:!1}),this.#Y)this.#Y.setAttribute("selected","true");this.#j.open=!0,this.#F(),this.#R(()=>{this.#j?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#R(()=>{this.#E(),this.#T()})})}open(){this.#l()}close(){if(this.#j)this.#j.open=!1,this.#F()}#Fj(){if(!this.#j)return;for(let[j,{element:J}]of Object.entries(this.#k)){let K=Array.from(this.#j.querySelectorAll(".fig-fill-picker-tab")).find((U)=>U.dataset.tab===j);if(!K)continue;while(K.firstChild)J.appendChild(K.firstChild)}}#Zj(){if(this.#N)this.#N(),this.#N=null;if(this.#w?.disconnect(),this.#w=null,this.#r(),!this.#j)return;this.#Fj(),this.#j.remove(),this.#j=null,this.#n=null,this.#m=null,this.#C=null,this.#O=null,this.#L=null,this.#_=null,this.#f=null,this.#G=!1,this.#F()}#r(){if(this.#v+=1,this.#$.stream)this.#$.stream.getTracks().forEach((J)=>J.stop()),this.#$.stream=null;let j=this.#j?.querySelector(".fig-fill-picker-webcam-video");if(j)j.srcObject=null}#qj(){this.#k={},this.querySelectorAll('[slot^="mode-"]').forEach((Y)=>{let $=Y.getAttribute("slot").slice(5);this.#k[$]={element:Y,label:Y.getAttribute("label")||$.charAt(0).toUpperCase()+$.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.id=this.#Uj,this.#j.setAttribute("aria-label",this.#i()),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#Q;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let J=["solid","gradient","image","video","webcam"],K={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},U=this.getAttribute("mode"),Q;if(U){if(Q=U.split(",").map(($)=>$.trim().toLowerCase()).filter(($)=>J.includes($)||this.#k[$]),Q.length===0)Q=[...J]}else Q=[...J];let X={...K};for(let[Y,{label:$}]of Object.entries(this.#k))X[Y]=$;if(!Q.includes(this.#W))this.#W=Q[0],this.#b=Q[0];let Z;if(Q.length===1)Z=`<h3 class="fig-fill-picker-type-label">${k(X[Q[0]])}</h3>`;else{let Y=Q.map(($)=>`<fig-select-option value="${k($)}">${k(X[$])}</fig-select-option>`).join(`
             `);Z=`<fig-select class="fig-fill-picker-type" label="Fill type" value="${k(this.#W)}">
           <fig-select-options>
             ${Y}