@rogieking/figui3 6.8.8 → 6.9.1

package/dist/fig.js

@@ -191,8 +191,8 @@ var D1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var R1={};var O0=D1(()=>{/*! Vendored from @
         <line class="fig-easing-curve-target" x1="0" y1="40" x2="200" y2="40"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="180" x2="0" y2="180"/>
         <path class="fig-easing-curve-path"/>
-        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" drag aria-label="Spring bounce handle"></fig-handle></foreignObject>
-        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" drag drag-axes="x" aria-label="Spring duration handle"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" aria-label="Spring bounce handle"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" aria-label="Spring duration handle"></fig-handle></foreignObject>
       </svg></div>${$}`;return`${Z}<div class="fig-easing-curve-svg-container"><svg viewBox="0 0 200 200" class="fig-easing-curve-svg">
       <rect class="fig-easing-curve-bounds" x="0" y="0" width="200" height="200"/>
       <line class="fig-easing-curve-diagonal" x1="0" y1="200" x2="200" y2="0"/>
@@ -201,8 +201,8 @@ var D1=(Q,Z)=>()=>(Q&&(Z=Q(Q=0)),Z);var R1={};var O0=D1(()=>{/*! Vendored from @
       <path class="fig-easing-curve-path"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#C}"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#C}"/>
-      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" drag aria-label="First easing control point"></fig-handle></foreignObject>
-      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" drag aria-label="Second easing control point"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" aria-label="First easing control point"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" aria-label="Second easing control point"></fig-handle></foreignObject>
     </svg></div>${$}`}#v(Q,Z){let $=getComputedStyle(this).getPropertyValue(Q).trim();if(!$)return Z;let J=Number.parseFloat($);return Number.isFinite(J)?J:Z}#b(){this.#C=this.#v("--easing-bezier-endpoint-radius",this.#C),this.#S=this.#v("--easing-duration-bar-radius",this.#S)}#p(){this.#_=this.querySelector(".fig-easing-curve-svg"),this.#G=this.querySelector(".fig-easing-curve-path"),this.#X=this.querySelector('[data-arm="1"]'),this.#W=this.querySelector('[data-arm="2"]'),this.#Y=this.querySelector('[data-handle="1"]')||this.querySelector('[data-handle="bounce"]'),this.#K=this.querySelector('[data-handle="2"]')||this.querySelector('[data-handle="duration"]'),this.#U=this.querySelector('[data-endpoint="start"]'),this.#N=this.querySelector('[data-endpoint="end"]'),this.#L=this.querySelector(".fig-easing-curve-dropdown"),this.#H=this.querySelector(".fig-easing-curve-value-input"),this.#M=this.querySelector(".fig-easing-curve-target"),this.#z=this.querySelector(".fig-easing-curve-bounds"),this.#P=this.querySelector(".fig-easing-curve-diagonal")}#m(){let Q=this.#Y?.querySelector("fig-handle"),Z=this.#K?.querySelector("fig-handle");if(Q){let $=Q.offsetWidth||this.#E*2,J=Q.offsetHeight||this.#E*2;this.#E=Math.max($,J)/2,this.#Y.setAttribute("width",$),this.#Y.setAttribute("height",J)}if(Z){let $=Z.offsetWidth||this.#R,J=Z.offsetHeight||this.#f;if(this.#$==="spring")this.#R=$,this.#f=J;this.#K.setAttribute("width",$),this.#K.setAttribute("height",J)}}#d(){if(this.#D||!window.ResizeObserver)return;this.#D=new ResizeObserver(()=>{if(this.#i())this.#s()}),this.#D.observe(this)}#i(){if(!this.#_)return!1;let Q=this.#_.getBoundingClientRect(),Z=Math.max(1,Math.round(Q.width||200)),$=Math.max(1,Math.round(Q.height||200)),J=Z!==this.#O||$!==this.#A;return this.#O=Z,this.#A=$,this.#_.setAttribute("viewBox",`0 0 ${Z} ${$}`),J}#l(Q,Z){return{x:Q*this.#O,y:(1-Z)*this.#A}}#t(Q,Z){return{x:Q/this.#O,y:1-Z/this.#A}}#u={minVal:0,maxVal:1.2,totalTime:1};#c(Q,Z){let J=this.#A-40,{minVal:j,maxVal:_}=this.#u,q=_-j||1;return{x:Q*this.#O,y:20+(1-(Z-j)/q)*J}}#s(){if(this.#i(),this.#$==="spring")this.#J0();else this.#Z0()}#Q0(){this.#X?.classList.toggle("is-active",this.#$==="bezier"&&this.#q===1),this.#W?.classList.toggle("is-active",this.#$==="bezier"&&this.#q===2)}#Z0(){if(this.#z)this.#z.setAttribute("x","0"),this.#z.setAttribute("y","0"),this.#z.setAttribute("width",this.#O),this.#z.setAttribute("height",this.#A);if(this.#P)this.#P.setAttribute("x1","0"),this.#P.setAttribute("y1",this.#A),this.#P.setAttribute("x2",this.#O),this.#P.setAttribute("y2","0");let Q=this.#l(0,0),Z=this.#l(this.#Z.x,this.#Z.y),$=this.#l(this.#Q.x,this.#Q.y),J=this.#l(1,1);this.#G.setAttribute("d",`M${Q.x},${Q.y} C${Z.x},${Z.y} ${$.x},${$.y} ${J.x},${J.y}`),this.#X.setAttribute("x1",Q.x),this.#X.setAttribute("y1",Q.y),this.#X.setAttribute("x2",Z.x),this.#X.setAttribute("y2",Z.y),this.#W.setAttribute("x1",J.x),this.#W.setAttribute("y1",J.y),this.#W.setAttribute("x2",$.x),this.#W.setAttribute("y2",$.y);let j=this.#E;if(this.#Y.setAttribute("x",Z.x-j),this.#Y.setAttribute("y",Z.y-j),this.#K.setAttribute("x",$.x-j),this.#K.setAttribute("y",$.y-j),this.#U)this.#U.setAttribute("cx",Q.x),this.#U.setAttribute("cy",Q.y);if(this.#N)this.#N.setAttribute("cx",J.x),this.#N.setAttribute("cy",J.y);this.#$0()}#$0(){if(!this.#_||!this.#Y||!this.#K)return;let Q=this.#Z.y>=this.#Q.y?[this.#Y,this.#K]:[this.#K,this.#Y];for(let Z of Q)this.#_.append(Z)}#J0(){if(this.#z)this.#z.setAttribute("x","0"),this.#z.setAttribute("y","0"),this.#z.setAttribute("width",this.#O),this.#z.setAttribute("height",this.#A);let Q=this.#x();if(!Q.length)return;let Z=Q[Q.length-1].t||1,$=0,J=1;for(let W of Q){if(W.value<$)$=W.value;if(W.value>J)J=W.value}let j=Math.max(Math.abs($-1),Math.abs(J-1),0.01),_=0;this.#u={minVal:1-j-_,maxVal:1+j+_,totalTime:Z};let q=Math.max(0.05,Math.min(0.95,this.#F)),G="";for(let W=0;W<Q.length;W++){let R=Q[W].t/Z*q,H=this.#c(R,Q[W].value);G+=(W===0?"M":"L")+H.x.toFixed(1)+","+H.y.toFixed(1)}let X=this.#c(q,1),K=this.#c(1,1);if(G+=`L${X.x.toFixed(1)},${X.y.toFixed(1)} L${K.x.toFixed(1)},${K.y.toFixed(1)}`,this.#G.setAttribute("d",G),this.#M){let W=this.#c(0,1),R=this.#c(1,1);this.#M.setAttribute("x1",W.x),this.#M.setAttribute("y1",W.y),this.#M.setAttribute("x2",R.x),this.#M.setAttribute("y2",R.y)}let N=this.#j0(Q),M=N.t/Z*q,L=this.#c(M,N.value),z=this.#E;this.#Y.setAttribute("x",L.x-z),this.#Y.setAttribute("y",L.y-z);let U=this.#c(q,1);this.#K.setAttribute("x",U.x-this.#R/2),this.#K.setAttribute("y",U.y-this.#f/2)}#j0(Q){let Z={t:0,value:1},$=!1;for(let J of Q){if(J.value>=0.99)$=!0;if($&&J.value>Z.value)Z={t:J.t,value:J.value}}return Z}#n(){if(!this.#L)return;this.#L.value=this.#B,this.#N0()}#r(){if(!this.#H)return;this.#H.setAttribute("value",this.value)}#e(Q){let Z=Q.split(",").map(($)=>Number.parseFloat($.trim()));if(Z.length!==4||Z.some(($)=>!Number.isFinite($)))return null;if(Z[0]<0||Z[0]>1||Z[2]<0||Z[2]>1)return null;return Z}#a(Q,Z){let $=this.#e(Q);if(!$){if(Z==="change")this.#r();return}let J=this.#$;if(this.#$="bezier",this.#Z.x=$[0],this.#Z.y=$[1],this.#Q.x=$[2],this.#Q.y=$[3],this.#B=this.#T(),J!==this.#$)this.#I();else if(this.#s(),this.#n(),Z==="change")this.#r();this.#o(Z)}#_0(Q,Z,$){if(!Q)return;for(let J of Q.querySelectorAll("option"))if(J.value===Z)J.innerHTML=`${$} ${Z}`}#N0(){if(!this.#L)return;if(!this.#w())return;let Q=g.curveIcon(this.#Z.x,this.#Z.y,this.#Q.x,this.#Q.y),Z=g.#g(this.#J);this.#_0(this.#L,"Custom bezier",Q),this.#_0(this.#L,"Custom spring",Z),this.#_0(this.#L.select,"Custom bezier",Q),this.#_0(this.#L.select,"Custom spring",Z)}#K0(Q){this.#s(),this.#B=this.#T(),this.#n(),this.#r(),this.#o(Q)}#W0(Q,Z){let $=Q.shiftKey?0.1:0.01,J=Z===1?this.#Z:this.#Q;switch(Q.key){case"ArrowLeft":J.x-=$;break;case"ArrowRight":J.x+=$;break;case"ArrowUp":J.y+=$;break;case"ArrowDown":J.y-=$;break;case"Home":J.x=0,J.y=0;break;case"End":J.x=1,J.y=1;break;default:return!1}return J.x=Math.max(0,Math.min(1,Math.round(J.x*100)/100)),J.y=Math.round(J.y*100)/100,this.#K0("input"),this.#o("change"),!0}#U0(Q,Z){let $=Q.shiftKey?10:1;if(Z==="bounce")switch(Q.key){case"ArrowUp":this.#J.damping=Math.max(1,Math.round(this.#J.damping-$));break;case"ArrowDown":this.#J.damping=Math.max(1,Math.round(this.#J.damping+$));break;case"Home":this.#J.damping=1;break;case"End":this.#J.damping=50;break;default:return!1}else{let J=$*2;switch(Q.key){case"ArrowLeft":this.#F=Math.max(0.05,this.#F-J/200),this.#J.stiffness=Math.max(10,Math.round(this.#J.stiffness+J*1.5));break;case"ArrowRight":this.#F=Math.min(0.95,this.#F+J/200),this.#J.stiffness=Math.max(10,Math.round(this.#J.stiffness-J*1.5));break;case"Home":this.#F=0.05;break;case"End":this.#F=0.95;break;default:return!1}}return this.#K0("input"),this.#o("change"),!0}#q0(Q,Z){let $=Q?.querySelector("fig-handle");if(!$)return;$.addEventListener("pointerdown",(J)=>{if(J.preventDefault(),J.stopImmediatePropagation(),this.#$==="bezier")this.#G0(J,Number(Z));else this.#X0(J,Z)},{capture:!0}),$.addEventListener("keydown",(J)=>{if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(J.key))return;if(!(this.#$==="bezier"?this.#W0(J,Number(Z)):this.#U0(J,Z)))return;J.preventDefault(),J.stopImmediatePropagation()},{capture:!0})}#o(Q){this.dispatchEvent(new CustomEvent(Q,{bubbles:!0,detail:{mode:this.#$,value:this.value,cssValue:this.cssValue,preset:this.#B}}))}#L0(){if(this.#_&&this.#$==="bezier"){this.#q0(this.#Y,"1"),this.#q0(this.#K,"2"),this.#Y.addEventListener("pointerdown",(Z)=>this.#G0(Z,1)),this.#K.addEventListener("pointerdown",(Z)=>this.#G0(Z,2));let Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",(Z)=>{if(Z.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#G0(Z,this.#B0(Z))})}else if(this.#_){this.#q0(this.#Y,"bounce"),this.#q0(this.#K,"duration"),this.#Y.addEventListener("pointerdown",(Z)=>{Z.stopPropagation(),this.#X0(Z,"bounce")}),this.#K.addEventListener("pointerdown",(Z)=>{Z.stopPropagation(),this.#X0(Z,"duration")});let Q=this.querySelector(".fig-easing-curve-svg-container");if(Q)Q.addEventListener("pointerdown",(Z)=>{if(Z.target?.closest?.(".fig-easing-curve-handle, fig-handle"))return;this.#X0(Z,"duration")})}if(this.#L)this.#L.addEventListener("change",(Q)=>{let Z=Q.detail,$=g.PRESETS.find((J)=>J.name===Z);if(!$)return;if($.type==="bezier"){if($.value)this.#Z.x=$.value[0],this.#Z.y=$.value[1],this.#Q.x=$.value[2],this.#Q.y=$.value[3];if(this.#B=Z,this.#$!=="bezier")this.#$="bezier",this.#I();else if(this.#_)this.#s(),this.#r()}else if($.type==="spring"){if($.spring)this.#J={...$.spring};if(this.#B=Z,this.#$!=="spring")this.#$="spring",this.#I();else if(this.#_)this.#s(),this.#r()}this.#o("input"),this.#o("change")});if(this.#H)this.#H.addEventListener("input",(Q)=>{Q.stopPropagation();let Z=Q.detail??Q.target?.value;if(typeof Z!=="string")return;this.#a(Z,"input")}),this.#H.addEventListener("change",(Q)=>{Q.stopPropagation();let Z=Q.detail??Q.target?.value;if(typeof Z!=="string")return;this.#a(Z,"change")})}#Y0(Q){let Z=this.#_.getScreenCTM();if(!Z)return{x:0,y:0};let $=Z.inverse();return{x:$.a*Q.clientX+$.c*Q.clientY+$.e,y:$.b*Q.clientX+$.d*Q.clientY+$.f}}#B0(Q){return this.#Y0(Q).x<=this.#O/2?1:2}#G0(Q,Z){Q.preventDefault(),this.#q=Z,this.#Q0();let $=(j)=>{if(!this.#q)return;let _=this.#Y0(j),q=this.#t(_.x,_.y);if(q.x=Math.round(q.x*100)/100,q.y=Math.round(q.y*100)/100,q.x=Math.max(0,Math.min(1,q.x)),this.#q===1)this.#Z.x=q.x,this.#Z.y=q.y;else this.#Q.x=q.x,this.#Q.y=q.y;this.#s(),this.#B=this.#T(),this.#n(),this.#r(),this.#o("input")},J=()=>{this.#q=null,this.#Q0(),document.removeEventListener("pointermove",$),document.removeEventListener("pointerup",J),this.#o("change")};document.addEventListener("pointermove",$),document.addEventListener("pointerup",J)}#X0(Q,Z){Q.preventDefault(),this.#q=Z;let $=this.#J.damping,J=this.#J.stiffness,j=this.#F,_=Q.clientY,q=Q.clientX,G=(K)=>{if(!this.#q)return;if(Z==="bounce"){let N=K.clientY-_;this.#J.damping=Math.max(1,Math.round($+N*0.15))}else{let N=K.clientX-q;this.#F=Math.max(0.05,Math.min(0.95,j+N/200)),this.#J.stiffness=Math.max(10,Math.round(J-N*1.5))}this.#s(),this.#B=this.#T(),this.#n(),this.#r(),this.#o("input")},X=()=>{this.#q=null,document.removeEventListener("pointermove",G),document.removeEventListener("pointerup",X),this.#o("change")};document.addEventListener("pointermove",G),document.addEventListener("pointerup",X)}}customElements.define("fig-easing-curve",g);class e0 extends HTMLElement{#Z=0;#Q=0;#J=0;#$=1;#j=!1;#q=!1;#_=null;#G=null;#X=null;#W=null;#Y=(Q)=>this.#T(Q);#K=null;#U=[];#N={};#L={};static get observedAttributes(){return["value","precision","aspect-ratio","fields","perspective","perspective-origin","transform-origin","selected","drag"]}connectedCallback(){this.#$=parseInt(this.getAttribute("precision")||"1"),V(this,"--aspect-ratio",this.getAttribute("aspect-ratio")),V(this,"--perspective",this.getAttribute("perspective")),V(this,"--perspective-origin",this.getAttribute("perspective-origin")),this.#M(this.getAttribute("transform-origin")),this.#A(this.getAttribute("fields"));let Q=this.getAttribute("value");if(Q)this.#z(Q);if(this.querySelector(".fig-3d-rotate-container"))this.#H();else this.#P();this.#O(this.getAttribute("selected")),this.#F()}disconnectedCallback(){this.#j=!1,this.#B()}#H(){this.#G=this.querySelector(".fig-3d-rotate-container"),this.#_=this.querySelector(".fig-3d-rotate-cube"),this.#D(),this.#C(),this.#S()}#B(){if(this.#K?.abort(),this.#K=null,this.#X)window.removeEventListener("keydown",this.#X),window.removeEventListener("keyup",this.#W),this.#X=null,this.#W=null}#M(Q){if(!Q||!Q.trim()){this.style.removeProperty("--transform-origin");return}let Z=Q.trim().split(/\s+/);if(Z.length===2)this.style.setProperty("--transform-origin",`${Z[0]} ${Z[1]} -50cqi`);else this.style.setProperty("--transform-origin",Q.trim())}#F(){if(!this.#G)return;this.#G.style.cursor=this.#k?"":"default"}#O(Q){if(!this.#_)return;let Z=this.#_.querySelectorAll(".fig-3d-rotate-face"),$=Q?Q.trim().toLowerCase():"";for(let J of Z)J.classList.toggle("selected",$!==""&&J.classList.contains($))}#A(Q){if(!Q||!Q.trim()){this.#U=[];return}let Z=["rotateX","rotateY","rotateZ"];this.#U=Q.split(",").map(($)=>$.trim()).filter(($)=>Z.includes($))}attributeChangedCallback(Q,Z,$){if(Q==="aspect-ratio"){V(this,"--aspect-ratio",$);return}if(Q==="perspective"){V(this,"--perspective",$);return}if(Q==="perspective-origin"){V(this,"--perspective-origin",$);return}if(Q==="transform-origin"){this.#M($);return}if(Q==="selected"){this.#O($);return}if(Q==="drag"){this.#F();return}if(Q==="fields"){if(this.#A($),this.#_)this.#P();return}if(!this.#_)return;if(Q==="value"&&$){if(this.#j)return;this.#z($),this.#C(),this.#E()}if(Q==="precision")this.#$=parseInt($||"1")}get value(){let Q=this.#$;return`rotateX(${this.#Z.toFixed(Q)}deg) rotateY(${this.#Q.toFixed(Q)}deg) rotateZ(${this.#J.toFixed(Q)}deg)`}set value(Q){this.setAttribute("value",Q)}get rotateX(){return this.#Z}get rotateY(){return this.#Q}get rotateZ(){return this.#J}#z(Q){let Z=Q.match(/rotateX\(\s*(-?[\d.]+)\s*deg\s*\)/),$=Q.match(/rotateY\(\s*(-?[\d.]+)\s*deg\s*\)/),J=Q.match(/rotateZ\(\s*(-?[\d.]+)\s*deg\s*\)/);if(Z)this.#Z=parseFloat(Z[1]);if($)this.#Q=parseFloat($[1]);if(J)this.#J=parseFloat(J[1])}#P(){let Q={rotateX:"X",rotateY:"Y",rotateZ:"Z"},Z={rotateX:this.#Z,rotateY:this.#Q,rotateZ:this.#J},$=this.#U.map((J)=>`<fig-input-number
             name="${J}"
             step="1"

package/fig-editor.css

@@ -80,9 +80,8 @@ fig-fill-picker {
 
   & > fig-header {
     padding: var(--spacer-2);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    min-width: 0;
+    overflow: hidden;
   }
 
   fig-tab {

package/fig.js

@@ -12270,8 +12270,8 @@ class FigEasingCurve extends HTMLElement {
         <line class="fig-easing-curve-target" x1="0" y1="${targetY}" x2="${size}" y2="${targetY}"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="${startY}" x2="0" y2="${startY}"/>
         <path class="fig-easing-curve-path"/>
-        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" drag aria-label="Spring bounce handle"></fig-handle></foreignObject>
-        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" drag drag-axes="x" aria-label="Spring duration handle"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" aria-label="Spring bounce handle"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" aria-label="Spring duration handle"></fig-handle></foreignObject>
       </svg></div>${valueInput}`;
     }
 
@@ -12283,8 +12283,8 @@ class FigEasingCurve extends HTMLElement {
       <path class="fig-easing-curve-path"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#bezierEndpointRadius}"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#bezierEndpointRadius}"/>
-      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" drag aria-label="First easing control point"></fig-handle></foreignObject>
-      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" drag aria-label="Second easing control point"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" aria-label="First easing control point"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" aria-label="Second easing control point"></fig-handle></foreignObject>
     </svg></div>${valueInput}`;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.8.8",
+  "version": "6.9.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",