@rogieking/figui3 6.4.2 → 6.4.4
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/components.css +21 -6
- package/dist/base.css +1 -1
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-lab.css +1 -1
- package/dist/fig-lab.js +3 -3
- package/dist/fig.css +1 -1
- package/fig-editor.css +5 -0
- package/fig-lab.css +41 -13
- package/fig-lab.js +115 -59
- package/package.json +1 -1
package/dist/fig-editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
fig-fill-picker{display:contents
|
|
1
|
+
:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;&>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}& .fig-fill-picker-gamut{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& fig-preview{overflow:visible}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex;& .input-combo,& fig-input-text{flex:1;min-width:0}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;&:after{display:none}}& .fig-fill-picker-gradient-header{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;& .fig-fill-picker-gradient-type{flex:1;min-width:0}&>:last-child fig-button{margin-left:auto}& .fig-fill-picker-gradient-center{& fig-input-number{width:48px}}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& .fig-fill-picker-media-header{& .fig-fill-picker-scale-mode{flex:none}& .fig-fill-picker-scale{width:56px}}& .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-2) var(--spacer-3) var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{width:auto;max-width:none;max-height:none}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}
|
package/dist/fig-lab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
fig-field-slider{border-radius:var(--radius-medium);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative}fig-field-slider:focus-within{outline:1px solid var(--figma-color-border-selected)}fig-field-slider label{pointer-events:none;z-index:1}fig-field-slider[disabled]:not([disabled=false]){pointer-events:none}fig-field-slider[disabled]:not([disabled=false]) label,fig-field-slider[disabled]:not([disabled=false]) input{color:var(--figma-color-text-disabled)}fig-field-slider[disabled]:not([disabled=false]) fig-slider{filter:grayscale()opacity(.5)}fig-field-slider[type=hue] label,fig-field-slider[type=hue] input{text-shadow:var(--field-text-shadow);color:#fff}fig-field-slider fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5);display:flex;position:relative}fig-field-slider fig-field:not([direction=vertical])>label{flex:auto;width:100%;min-width:0;max-width:none}fig-field-slider fig-field:not([direction=vertical]) fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;background-color:#0000;padding:0;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container{box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important}:is(fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:hover,fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:focus-within):after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider .fig-slider-input-container input[type=range]{border-radius:0!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}fig-field-slider fig-field:not([direction=vertical]) fig-slider[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}fig-field-slider fig-field:not([direction=vertical]) datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}fig-field-slider fig-field:not([direction=vertical]) fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number:hover,fig-field-slider fig-field:not([direction=vertical]) fig-input-number:has(input:focus){box-shadow:none!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}fig-field-slider fig-field:not([direction=vertical]) fig-input-number input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1.5px;--fig-canvas-control-line-stroke-width-hover:2.25px;display:contents}fig-canvas-control>fig-handle,fig-canvas-control>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}fig-canvas-control .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible}fig-canvas-control .fig-canvas-control-radius circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) * 2);filter:none}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}fig-canvas-control .fig-canvas-control-radius .fig-canvas-control-radius-hit:hover~circle:not(.fig-canvas-control-radius-halo){stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}fig-canvas-control.fig-canvas-control-ring-active .fig-canvas-control-radius circle:not(.fig-canvas-control-radius-hit):not(.fig-canvas-control-radius-halo){stroke:var(--fig-canvas-control-line-stroke-active);stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}fig-canvas-control .fig-canvas-control-angle-svg{pointer-events:none}fig-canvas-control .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}fig-canvas-control .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) * 2);stroke-linecap:butt;filter:none}fig-canvas-control fig-handle[size=small]{z-index:2}fig-canvas-control fig-handle[size=small] .fig-handle-hit-area{cursor:grab}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex}fig-input-angle>fig-input-number{flex:none;width:auto}fig-input-angle[full]:not([full=false]){width:100%;display:flex}fig-input-angle[full]:not([full=false])>fig-input-number{flex:auto;width:auto;min-width:0}fig-field:not([direction=vertical]) :is(fig-input-angle){flex:1;min-width:0}fig-field:not([direction=vertical]) :is(fig-input-angle) fig-input-number{flex:none;width:auto}fig-input-angle .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid}fig-input-angle .fig-input-angle-plane:focus,fig-input-angle .fig-input-angle-plane.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}fig-input-angle .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid}fig-input-angle .fig-input-angle-handle:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}
|
|
1
|
+
fig-field-slider{border-radius:var(--radius-medium);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;&:focus-within{outline:1px solid var(--figma-color-border-selected)}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5);display:flex;position:relative;&>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;background-color:#0000;padding:0;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}& .fig-slider-input-container{box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20065_164959)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0262 19.5947L11.287 25.3339C10.9185 25.7023 10.4442 25.9465 9.93021 26.0321L8.62726 26.2493C6.93521 26.5313 5.46827 25.0644 5.75028 23.3723L5.96744 22.0694C6.0531 21.5554 6.29721 21.081 6.66565 20.7126L12.4049 14.9733C11.7004 13.974 11.7951 12.5833 12.6891 11.6893C13.5832 10.7952 14.974 10.7005 15.9733 11.4051L18.1891 9.18929C19.4653 7.91315 21.5343 7.91314 22.8105 9.18928C24.0866 10.4654 24.0866 12.5345 22.8105 13.8106L20.5946 16.0265C21.2993 17.0258 21.2045 18.4165 20.3104 19.3106C19.4163 20.2047 18.0255 20.2994 17.0262 19.5947Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3963 14.6035L13.7926 14.9999L7.37288 21.4197C7.15181 21.6408 7.00534 21.9254 6.95395 22.2338L6.73679 23.5367C6.56758 24.5519 7.44775 25.4321 8.46298 25.2629L9.76592 25.0457C10.0743 24.9943 10.3589 24.8479 10.58 24.6268L16.9997 18.2071L17.3962 18.6035C18.0057 19.213 18.9939 19.213 19.6034 18.6035C20.2129 17.994 20.213 17.0059 19.6035 16.3963L19.2071 15.9999L22.1035 13.1035C22.9891 12.2179 22.9891 10.782 22.1035 9.89639C21.2179 9.01077 19.782 9.01077 18.8964 9.8964L16 12.7928L15.6035 12.3963C14.994 11.7869 14.0058 11.7869 13.3964 12.3964C12.7869 13.0059 12.7869 13.994 13.3963 14.6035ZM14.4997 15.7071L16.2926 17.5L9.87288 23.9197C9.79919 23.9934 9.70432 24.0422 9.60152 24.0593L8.29858 24.2765C7.96017 24.3329 7.66678 24.0395 7.72318 23.7011L7.94034 22.3982C7.95747 22.2954 8.00629 22.2005 8.07998 22.1268L14.4997 15.7071Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20065_164959\" x=\"2.71533\" y=\"6.23218\" width=\"24.0522\" height=\"24.052\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_164959\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_164959\" result=\"shape\"/></filter></defs></svg>") 8 24, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area{cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus,&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}
|
package/dist/fig-lab.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class b extends HTMLElement{#G=null;#J=null;#k=null;#_=null;#O=new Set;#$=0;#W=null;#Q=null;#j=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#G)this.#Z();if(this.#N(),this.#L(),this.#q(),!this.#_)this.#_=new MutationObserver((k)=>{let G=!1,J=!1;for(let Q of k)if(Q.type==="attributes"){if(Q.attributeName&&this.#j.has(Q.attributeName))continue;if(Q.attributeName==="label"||Q.attributeName==="direction")G=!0;else J=!0}if(G)this.#N();if(J)this.#L()});this.#_.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#_?.disconnect(),this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#B()}attributeChangedCallback(k,G,J){if(G===J||!this.#G)return;if(k==="label"||k==="direction")this.#N()}#Z(){let k=Array.from(this.childNodes).filter((Z)=>{return Z.nodeType!==Node.TEXT_NODE||Boolean(Z.textContent?.trim())}),G=document.createElement("fig-field"),J=document.createElement("label"),Q=document.createElement("fig-slider");Q.setAttribute("text","true");for(let Z of this.#K()){let _=this.getAttribute(Z);Q.setAttribute(Z,_??"")}G.append(J,Q),this.#G=G,this.#J=J,this.#k=Q,this.replaceChildren(G);for(let Z of k)this.#k.appendChild(Z)}#N(){if(!this.#G||!this.#J)return;let k=this.hasAttribute("label"),G=this.getAttribute("label");if(k&&(G??"").trim()===""){if(this.#J.parentElement===this.#G)this.#J.remove()}else if(this.#J.textContent=k?G??"":"Label",this.#J.parentElement!==this.#G)this.#G.prepend(this.#J);this.#G.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#L(){if(!this.#k)return;let k=this.#K(),G=new Set(k.filter((Q)=>Q!=="text"));for(let Q of this.#O)if(!G.has(Q))this.#k.removeAttribute(Q);for(let Q of k){if(Q==="text")continue;let Z=this.getAttribute(Q);this.#k.setAttribute(Q,Z??"")}this.#k.removeAttribute("variant"),this.#k.removeAttribute("color"),this.#k.removeAttribute("transform"),this.#k.removeAttribute("full"),this.#k.setAttribute("text","true");let J=(this.getAttribute("type")||"range").toLowerCase();if(J==="delta"||J==="stepper")this.#k.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#k.removeAttribute("default");if(J==="stepper")this.#k.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#k.removeAttribute("step");if(J==="opacity")this.#k.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#k.style.removeProperty("--color");this.#O=G,this.#X()}#K(){let k=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((G)=>!k.has(G)&&!this.#j.has(G))}#X(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#Y()})}#Y(){if(!this.#k)return;let k=this.#k.querySelector("fig-input-number");if(!k)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){k.removeAttribute("steppers");return}let J=this.getAttribute("steppers");k.setAttribute("steppers",J??"")}#q(){if(!this.#k)return;if(!this.#W)this.#W=this.#z.bind(this,"input");if(!this.#Q)this.#Q=this.#z.bind(this,"change");this.#k.addEventListener("input",this.#W),this.#k.addEventListener("change",this.#Q)}#B(){if(!this.#k)return;if(this.#W)this.#k.removeEventListener("input",this.#W);if(this.#Q)this.#k.removeEventListener("change",this.#Q)}#z(k,G){G.stopPropagation();let J=G instanceof CustomEvent&&G.detail!==void 0?G.detail:this.#k?.value;this.dispatchEvent(new CustomEvent(k,{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",b);class A extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#G=50;#J=50;#k=75;#_=75;#O=0;#$=!1;#W=0;#Q=null;#j=null;#Z=null;#N=null;#L=null;#K=null;#X=null;#Y=null;#q=null;#B=!1;#z=!1;#V=!1;#E=!1;#D="";get#F(){return this.getAttribute("type")||"point"}get#h(){return this.#F==="point-radius"||this.#F==="point-radius-angle"}get#C(){return this.#F==="point-radius-angle"}get#M(){return this.#F==="point-point"}get#v(){return this.#F==="point-radius-angle"||this.#F==="point-point"}get#b(){let k=this.getAttribute("tooltips");return k===null||k!=="false"}get#S(){let k=this.getAttribute("snapping");if(k===null)return"false";let G=k.trim().toLowerCase();if(G==="modifier")return"modifier";if(G===""||G==="true")return"true";return"false"}#R(k){let G=this.#S;if(G==="true")return!0;if(G==="modifier")return!!k;return!1}get#U(){let k=this.getAttribute("name");if(k)return k.split(",")[0].trim();return`${Math.round(this.#G)}%, ${Math.round(this.#J)}%`}get#H(){let k=this.getAttribute("name");if(k){let G=k.split(",");if(G.length>1)return G[1].trim()}return`${Math.round(this.#k)}%, ${Math.round(this.#_)}%`}get#u(){return this.getAttribute("drag-surface")||"parent"}get#f(){let k=this.#u;if(k==="parent")return this.parentElement;return this.closest(k)}get#p(){let k=this.#u;if(k==="parent"){let G=this.parentElement;if(G)return G.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return k}#g(k){if(this.#$)return this.#O/100*k;return this.#O}#s(){if(this.#$)return`Radius ${Math.round(this.#O)}%`;return`Radius ${Math.round(this.#O)}`}connectedCallback(){this.#d(),this.#m()}disconnectedCallback(){this.#$k()}attributeChangedCallback(k,G,J){if(G===J)return;if(k==="value"&&!this.#B&&!this.#z&&!this.#V&&!this.#E)if(this.#d(),this.#Q)this.#I();else this.#m();if(k==="type")this.#d(),this.#m();if(k==="color"&&this.#Q)if(J)this.#Q.setAttribute("color",J);else this.#Q.removeAttribute("color");if(k==="disabled")this.#m();if(k==="tooltips")this.#m();if(k==="snapping"&&this.#Q){if(this.#Q.setAttribute("drag-snapping",J||"false"),this.#j)this.#j.setAttribute("drag-snapping",J||"false")}if(k==="name"){if(this.#K)this.#K.setAttribute("text",this.#U);if(this.#X)this.#X.setAttribute("text",this.#H)}}#d(){let k=this.getAttribute("value");if(!k)return;try{let G=JSON.parse(k);if(typeof G.x==="number")this.#G=G.x;if(typeof G.y==="number")this.#J=G.y;if(G.radius!==void 0){let J=String(G.radius);if(J.endsWith("%"))this.#$=!0,this.#O=parseFloat(J);else this.#$=!1,this.#O=parseFloat(J);if(!Number.isFinite(this.#O))this.#O=0}if(typeof G.angle==="number")this.#W=G.angle;if(typeof G.x2==="number")this.#k=G.x2;if(typeof G.y2==="number")this.#_=G.y2}catch{}}get value(){let k={x:this.#G,y:this.#J};if(this.#F==="color"){let G=this.getAttribute("color")||this.#Q?.getAttribute("color");if(G)k.color=G}if(this.#h)k.radius=this.#$?`${this.#O}%`:this.#O;if(this.#C)k.angle=this.#W;if(this.#M)k.x2=this.#k,k.y2=this.#_;return k}set value(k){if(typeof k==="object")this.setAttribute("value",JSON.stringify(k));else if(typeof k==="string")this.setAttribute("value",k)}#m(){this.innerHTML="",this.#Q=null,this.#j=null,this.#Z=null,this.#N=null,this.#L=null,this.#K=null,this.#X=null,this.#Y=null,this.#q=null;let k=this.hasAttribute("disabled"),G=this.#F,J=this.#b,Q=this.#p,Z=document.createElement("fig-handle");if(Z.setAttribute("drag","true"),Z.setAttribute("drag-surface",Q),Z.setAttribute("drag-axes","x,y"),Z.setAttribute("drag-snapping",this.#S),Z.setAttribute("value",`${this.#G}% ${this.#J}%`),k)Z.setAttribute("disabled","");if(G==="color"){Z.setAttribute("type","color");let _=this.getAttribute("color");if(_)Z.setAttribute("color",_)}else Z.setAttribute("type","canvas");if(this.#M)Z.setAttribute("hit-area","12 circle"),Z.setAttribute("hit-area-mode","delegate");if(this.#Q=Z,this.#h)this.#t();if(this.#v)this.#n();if(J){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#U),_.appendChild(Z),this.appendChild(_),this.#K=_}else this.appendChild(Z);if(this.#C)this.#kk(k,J,Q);if(this.#M)this.#Gk(k,J,Q);this.#Zk(),this.#i(),requestAnimationFrame(()=>this.#I())}#o(k,G,J,Q){if(!k)return;let Z=()=>{if(Q&&Q())return;let $=G();if(!$)return;if(J)$.setAttribute("text",J());$.setAttribute("show","true"),$.showPopup?.()},_=()=>{if(Q&&Q())return;let $=G();if(!$)return;$.removeAttribute("show")};k.addEventListener("pointerenter",Z),k.addEventListener("pointerleave",_)}#i(){if(this.#Q)this.#o(this.#Q,()=>this.#K,()=>this.#U,()=>this.#B||!!this.#Q?.querySelector("fig-color-tip"));if(this.#Z)this.#o(this.#Z,()=>this.#q,()=>`Angle ${Math.round(this.#W)}°`,()=>this.#E||this.#V);if(this.#j)this.#o(this.#j,()=>this.#X,()=>this.#H,()=>this.#z);if(this.#N){let k=this.#N.querySelector(".fig-canvas-control-radius-hit");this.#a(k||this.#N)}if(this.#F==="color"&&this.#Q&&this.#K)new MutationObserver(()=>{if(this.#Q?.querySelector("fig-color-tip"))this.#K?.removeAttribute("show"),this.#K?.hidePopup?.()}).observe(this.#Q,{childList:!0,subtree:!0})}#c(k,G){let J=this.#Y;if(!J?.popup)return;let Q=G-8;J.popup.anchor={getBoundingClientRect:()=>({left:k,top:Q,right:k,bottom:Q,width:0,height:0,x:k,y:Q})},J.popup.queueReposition?.()}#a(k){if(!k)return;k.addEventListener("pointerenter",(G)=>{let J=this.#Y;if(!J)return;J.setAttribute("text",this.#s()),J.setAttribute("show","true"),J.showPopup?.(),this.#c(G.clientX,G.clientY)}),k.addEventListener("pointermove",(G)=>{if(this.#V)return;this.#c(G.clientX,G.clientY)}),k.addEventListener("pointerleave",()=>{if(this.#V)return;let G=this.#Y;if(!G)return;G.removeAttribute("show")})}#t(){let G=document.createElementNS("http://www.w3.org/2000/svg","svg");G.classList.add("fig-canvas-control-radius"),G.setAttribute("overflow","visible");let J=document.createElementNS("http://www.w3.org/2000/svg","circle");J.classList.add("fig-canvas-control-radius-hit"),G.appendChild(J);let Q=document.createElementNS("http://www.w3.org/2000/svg","circle");Q.classList.add("fig-canvas-control-radius-halo"),G.appendChild(Q);let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");if(G.appendChild(Z),this.#N=G,this.#b){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#s()),_.appendChild(G),this.appendChild(_),this.#Y=_}else this.appendChild(G);this.#_k(J)}#n(){let G=document.createElementNS("http://www.w3.org/2000/svg","svg");if(G.classList.add("fig-canvas-control-angle-svg"),G.setAttribute("overflow","visible"),G.style.position="absolute",G.style.pointerEvents="none",this.#M){let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-hit"),Z.setAttribute("stroke","transparent"),Z.setAttribute("stroke-width","12"),Z.setAttribute("stroke-linecap","round"),Z.style.pointerEvents="stroke",Z.style.cursor="move",G.appendChild(Z),this.#e(Z)}let J=document.createElementNS("http://www.w3.org/2000/svg","line");J.classList.add("fig-canvas-control-angle-line-halo"),G.appendChild(J);let Q=document.createElementNS("http://www.w3.org/2000/svg","line");Q.classList.add("fig-canvas-control-angle-line"),G.appendChild(Q),this.#L=G,this.appendChild(G)}#e(k){k.addEventListener("pointerdown",(G)=>{if(this.hasAttribute("disabled"))return;G.preventDefault(),G.stopPropagation();let J=this.#f;if(!J)return;let Q=J.getBoundingClientRect(),Z=G.clientX,_=G.clientY,$=this.#G,O=this.#J,q=this.#k,W=this.#_;this.#B=!0,this.#z=!0;let z=document.body.style.cursor;document.body.style.cursor="move",k.style.pointerEvents="none";let X=(j)=>{let K=J.getBoundingClientRect(),B=K.width>0?(j.clientX-Z)/K.width*100:0,E=K.height>0?(j.clientY-_)/K.height*100:0,V=-Math.min($,q),F=100-Math.max($,q),M=-Math.min(O,W),I=100-Math.max(O,W),U=Math.max(V,Math.min(F,B)),N=Math.max(M,Math.min(I,E));this.#G=$+U,this.#J=O+N,this.#k=q+U,this.#_=W+N,this.#I(),this.#P()},Y=()=>{document.body.style.cursor=z,k.style.pointerEvents="stroke",this.#A(),this.#w(),window.removeEventListener("pointermove",X),window.removeEventListener("pointerup",Y),requestAnimationFrame(()=>{this.#B=!1,this.#z=!1})};window.addEventListener("pointermove",X),window.addEventListener("pointerup",Y)})}#kk(k,G,J){let Q=document.createElement("fig-handle");if(Q.setAttribute("type","canvas"),Q.setAttribute("drag","true"),Q.setAttribute("drag-surface",J),Q.setAttribute("drag-axes","x,y"),Q.setAttribute("size","small"),Q.setAttribute("hit-area","12 circle"),Q.setAttribute("hit-area-mode","delegate"),k)Q.setAttribute("disabled","");if(this.#Z=Q,G){let Z=document.createElement("fig-tooltip");Z.setAttribute("action","manual"),Z.setAttribute("theme","canvas"),Z.setAttribute("pointer","false"),Z.setAttribute("text",`${Math.round(this.#W)}°`),Z.appendChild(Q),this.appendChild(Z),this.#q=Z}else this.appendChild(Q)}#Gk(k,G,J){let Q=document.createElement("fig-handle");if(Q.setAttribute("type","canvas"),Q.setAttribute("drag","true"),Q.setAttribute("drag-surface",J),Q.setAttribute("drag-axes","x,y"),Q.setAttribute("drag-snapping",this.#S),Q.setAttribute("hit-area","12 circle"),Q.setAttribute("hit-area-mode","delegate"),Q.setAttribute("value",`${this.#k}% ${this.#_}%`),k)Q.setAttribute("disabled","");if(this.#j=Q,G){let Z=document.createElement("fig-tooltip");Z.setAttribute("action","manual"),Z.setAttribute("theme","canvas"),Z.setAttribute("pointer","false"),Z.setAttribute("text",this.#H),Z.appendChild(Q),this.appendChild(Z),this.#X=Z}else this.appendChild(Q)}#y(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#x(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#Jk(){if(!this.#Z||!this.#C)return;let k=this.#Z.querySelector(".fig-handle-hit-area");if(!k)return;k.style.cursor=this.#x(this.#W)}#T(){return Math.atan2(this.#_-this.#J,this.#k-this.#G)*180/Math.PI}#Qk(){if(!this.#M)return;let k=this.#T(),G=(J,Q)=>{if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(Z)Z.style.cursor=this.#x(Q)};G(this.#Q,k+180),G(this.#j,k)}#r(k,G,J,Q){k.style.setProperty("--fig-handle-position-translate","-50% -50%"),k.style.left=`${G/100*Q.width}px`,k.style.top=`${J/100*Q.height}px`}#I(){let k=this.#f;if(!k||!this.#Q)return;let G=k.getBoundingClientRect();if(this.#r(this.#Q,this.#G,this.#J,G),this.#N){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z=this.#g(G.width),_=this.#N,$=Math.max(Z*2,1);_.style.position="absolute",_.style.width=`${$}px`,_.style.height=`${$}px`,_.style.left=`${J-Z}px`,_.style.top=`${Q-Z}px`,_.setAttribute("viewBox",`0 0 ${$} ${$}`);let O=_.querySelectorAll("circle");for(let q of O)q.setAttribute("cx",String(Z)),q.setAttribute("cy",String(Z)),q.setAttribute("r",String(Math.max(Z-1,0)))}if(this.#L&&this.#v){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z,_;if(this.#M)Z=this.#k/100*G.width,_=this.#_/100*G.height;else{let q=this.#g(G.width),W=this.#W*Math.PI/180;Z=J+q*Math.cos(W),_=Q+q*Math.sin(W)}let $=this.#L;$.style.width=`${G.width}px`,$.style.height=`${G.height}px`,$.style.left="0",$.style.top="0",$.setAttribute("viewBox",`0 0 ${G.width} ${G.height}`);let O=$.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let q of O)q.setAttribute("x1",String(J)),q.setAttribute("y1",String(Q)),q.setAttribute("x2",String(Z)),q.setAttribute("y2",String(_))}if(this.#Z&&this.#C){let J=this.#G/100*G.width,Q=this.#J/100*G.height,Z=this.#g(G.width),_=this.#W*Math.PI/180,$=J+Z*Math.cos(_),O=Q+Z*Math.sin(_),q=G.width>0?$/G.width*100:0,W=G.height>0?O/G.height*100:0;this.#r(this.#Z,q,W,G)}if(this.#j&&this.#M)this.#r(this.#j,this.#k,this.#_,G);this.#Jk(),this.#Qk()}#P(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#w(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#A(){this.setAttribute("value",JSON.stringify(this.value))}#Zk(){if(!this.#Q)return;if(this.#Q.addEventListener("input",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#P();return}if(!this.#B&&this.#M)this.#D=document.body.style.cursor;this.#B=!0;let G=k.detail?.px??this.#G/100,J=k.detail?.py??this.#J/100;if(this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#J=Math.round(Math.max(0,Math.min(100,J*100))),this.#K)this.#K.removeAttribute("show"),this.#K.hidePopup?.();if(this.#I(),this.#M)document.body.style.cursor=this.#y(this.#T());this.#P()}),this.#Q.addEventListener("change",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#w();return}let G=k.detail?.px??this.#G/100,J=k.detail?.py??this.#J/100;if(this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#J=Math.round(Math.max(0,Math.min(100,J*100))),this.#K)this.#K.removeAttribute("show");if(this.#M)document.body.style.cursor=this.#D??"";this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#B=!1})}),this.#Z)this.#Z.addEventListener("input",(k)=>{k.stopPropagation(),this.#E=!0,this.classList.add("fig-canvas-control-ring-active");let G=this.#f;if(!G)return;let J=G.getBoundingClientRect(),Q=this.#G/100*J.width,Z=this.#J/100*J.height,_=k.detail?.x??0,$=k.detail?.y??0,O=this.#Z.offsetWidth/2,q=this.#Z.offsetHeight/2,W=_+O-Q,z=$+q-Z,X=Math.atan2(z,W)*180/Math.PI;if(this.#R(k.detail?.shiftKey))X=Math.round(X/15)*15;this.#W=X;let Y=Math.sqrt(W*W+z*z);if(this.#R(k.detail?.shiftKey)){let j=this.#$?5:10;if(this.#$){let K=Y/J.width*100;K=Math.round(K/j)*j,Y=K/100*J.width}else Y=Math.round(Y/j)*j}if(this.#$)this.#O=Math.max(0,Y/J.width*100);else this.#O=Math.max(0,Y);if(this.#q)this.#q.setAttribute("text",`Angle ${Math.round(this.#W)}°`),this.#q.setAttribute("show","true"),this.#q.showPopup?.();this.#I(),this.#P()}),this.#Z.addEventListener("change",(k)=>{if(k.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#q)this.#q.removeAttribute("show");this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#E=!1})}),this.#Z.addEventListener("hitareadown",(k)=>{k.stopPropagation();let G=k.detail?.originalEvent;if(!G)return;G.preventDefault(),this.#E=!0,this.classList.add("fig-canvas-control-ring-active");let J=this.#f;if(!J)return;if(this.#q)this.#q.setAttribute("show","true"),this.#q.showPopup?.();let Q=document.body.style.cursor,Z=Math.round(this.#W);document.body.style.cursor=this.#x(Z);let _=(O)=>{let q=J.getBoundingClientRect(),W=this.#G/100*q.width,z=this.#J/100*q.height,X=O.clientX-q.left-W,Y=O.clientY-q.top-z,j=Math.atan2(Y,X)*180/Math.PI;if(this.#R(O.shiftKey))j=Math.round(j/15)*15;if(this.#W=j,this.#q)this.#q.setAttribute("text",`Angle ${Math.round(j)}°`);this.#I();let K=Math.round(j);if(K!==Z)Z=K,document.body.style.cursor=this.#x(K);this.#P()},$=()=>{if(this.#E=!1,this.classList.remove("fig-canvas-control-ring-active"),document.body.style.cursor=Q,this.#q)this.#q.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",_),window.removeEventListener("pointerup",$)};window.addEventListener("pointermove",_),window.addEventListener("pointerup",$)});if(this.#j)this.#j.addEventListener("input",(k)=>{if(k.stopPropagation(),!this.#z)this.#D=document.body.style.cursor;this.#z=!0;let G=k.detail?.px??this.#k/100,J=k.detail?.py??this.#_/100;if(this.#k=Math.round(Math.max(0,Math.min(100,G*100))),this.#_=Math.round(Math.max(0,Math.min(100,J*100))),this.#X)this.#X.removeAttribute("show"),this.#X.hidePopup?.();this.#I(),document.body.style.cursor=this.#y(this.#T()),this.#P()}),this.#j.addEventListener("change",(k)=>{if(k.stopPropagation(),document.body.style.cursor=this.#D??"",this.#X)this.#X.removeAttribute("show");this.#I(),this.#A(),this.#w(),requestAnimationFrame(()=>{this.#z=!1})}),this.#l(this.#Q,!0),this.#l(this.#j,!1)}#l(k,G){if(!k)return;k.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault(),this.#B=!0;let Z=this.#f;if(!Z)return;let _=Z.getBoundingClientRect(),$=G?this.#k:this.#G,O=G?this.#_:this.#J,q=G?this.#G:this.#k,W=G?this.#J:this.#_,z=$/100*_.width,X=O/100*_.height,Y=q/100*_.width,j=W/100*_.height,K=Math.sqrt((Y-z)**2+(j-X)**2),B=G?this.#K:this.#X;if(B)B.removeAttribute("show"),B.hidePopup?.();let E=document.body.style.cursor,V=this.#T(),F=Math.round(G?V+180:V);document.body.style.cursor=this.#x(F);let M=(U)=>{let N=Z.getBoundingClientRect(),L=$/100*N.width,R=O/100*N.height,S=U.clientX-N.left-L,x=U.clientY-N.top-R,f=Math.atan2(x,S);if(this.#R(U.shiftKey))f=Math.round(f*180/Math.PI/15)*15*Math.PI/180;let T=L+K*Math.cos(f),H=R+K*Math.sin(f),P=Math.max(0,Math.min(100,T/N.width*100)),w=Math.max(0,Math.min(100,H/N.height*100));if(G)this.#G=P,this.#J=w;else this.#k=P,this.#_=w;this.#I();let C=Math.round(G?this.#T()+180:this.#T());if(C!==F)F=C,document.body.style.cursor=this.#x(C);this.#P()},I=()=>{if(this.#B=!1,document.body.style.cursor=E,B)B.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",M),window.removeEventListener("pointerup",I)};window.addEventListener("pointermove",M),window.addEventListener("pointerup",I)})}#_k(k){if(!k)return;k.addEventListener("pointermove",(J)=>{if(this.#V)return;let Q=this.#f;if(!Q)return;let Z=Q.getBoundingClientRect(),_=this.#G/100*Z.width,$=this.#J/100*Z.height,O=Math.atan2(J.clientY-Z.top-$,J.clientX-Z.left-_)*180/Math.PI;k.style.cursor=this.#y(O)});let G=(J)=>{if(this.hasAttribute("disabled"))return;J.preventDefault(),J.stopPropagation(),this.#V=!0,this.classList.add("fig-canvas-control-ring-active");let Q=this.#f;if(!Q)return;if(this.#Y)this.#Y.setAttribute("show","true"),this.#Y.showPopup?.(),this.#c(J.clientX,J.clientY);if(this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();let Z=this.#Z?.style.pointerEvents,_=this.#Z?.querySelector(".fig-handle-hit-area"),$=_?.style.pointerEvents;if(this.#Z)this.#Z.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let O=document.body.style.cursor;k.style.pointerEvents="none";let q=Q.getBoundingClientRect(),W=this.#G/100*q.width,z=this.#J/100*q.height,X=Math.atan2(J.clientY-q.top-z,J.clientX-q.left-W)*180/Math.PI,Y=Math.round(X);document.body.style.cursor=this.#y(Y);let j=(B)=>{let E=Q.getBoundingClientRect(),V=this.#G/100*E.width,F=this.#J/100*E.height,M=B.clientX-E.left-V,I=B.clientY-E.top-F,U=Math.round(Math.atan2(I,M)*180/Math.PI);if(U!==Y)Y=U,document.body.style.cursor=this.#y(U);let N=Math.sqrt(M*M+I*I);if(this.#R(B.shiftKey)){let L=this.#$?5:10;if(this.#$){let R=N/E.width*100;R=Math.round(R/L)*L,N=R/100*E.width}else N=Math.round(N/L)*L}if(this.#$)this.#O=Math.max(0,N/E.width*100);else this.#O=Math.max(0,N);if(this.#Y)this.#Y.setAttribute("text",this.#s()),this.#c(B.clientX,B.clientY);this.#I(),this.#P()},K=()=>{if(this.#V=!1,this.classList.remove("fig-canvas-control-ring-active"),k.style.pointerEvents="",this.#Z)this.#Z.style.pointerEvents=Z??"";if(_)_.style.pointerEvents=$??"";if(document.body.style.cursor=O,this.#Y)this.#Y.removeAttribute("show");this.#A(),this.#w(),window.removeEventListener("pointermove",j),window.removeEventListener("pointerup",K)};window.addEventListener("pointermove",j),window.addEventListener("pointerup",K)};k.addEventListener("pointerdown",G),this._radiusDragCleanup=()=>k.removeEventListener("pointerdown",G)}#$k(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",A);class D extends HTMLElement{#G;#J;#k=null;#_;#O;#$;#W;#Q;#j;constructor(){super();this.angle=0,this.#G=1,this.#J=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#_=this.#F.bind(this),this.#O=this.#H.bind(this),this.#$=this.#u.bind(this),this.#W=this.#f.bind(this),this.#Q=this.#p.bind(this),this.#j=this.#h.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let k=this.getAttribute("units")||"°";if(k==="deg")k="°";if(this.units=k,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#N("dial",!0),this.showRotations=this.#L(),this.#Z(),this.#E(),this.#U(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#D()}#Z(){this.innerHTML=this.#K()}#N(k,G=!1){let J=this.getAttribute(k);if(J===null)return G;let Q=J.trim().toLowerCase();if(Q===""||Q==="true")return!0;if(Q==="false")return!1;return!0}#L(){if(this.hasAttribute("rotations"))return this.#N("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#N("show-rotations",!1);return!1}#K(){let k=this.#q(),G=this.min!==null?`min="${this.min}"`:"",J=this.max!==null?`max="${this.max}"`:"";return`
|
|
1
|
+
class S extends HTMLElement{#q=null;#G=null;#k=null;#Q=null;#$=new Set;#Z=0;#O=null;#J=null;#W=new Set(["variant","color","text","full"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#q)this.#N();if(this.#Y(),this.#I(),this.#_(),!this.#Q)this.#Q=new MutationObserver((k)=>{let q=!1,G=!1;for(let J of k)if(J.type==="attributes"){if(J.attributeName&&this.#W.has(J.attributeName))continue;if(J.attributeName==="label"||J.attributeName==="direction")q=!0;else G=!0}if(q)this.#Y();if(G)this.#I()});this.#Q.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#Q?.disconnect(),this.#Z)cancelAnimationFrame(this.#Z),this.#Z=0;this.#z()}attributeChangedCallback(k,q,G){if(q===G||!this.#q)return;if(k==="label"||k==="direction")this.#Y()}#N(){let k=Array.from(this.childNodes).filter((N)=>{return N.nodeType!==Node.TEXT_NODE||Boolean(N.textContent?.trim())}),q=document.createElement("fig-field"),G=document.createElement("label"),J=document.createElement("fig-slider");J.setAttribute("text","true");for(let N of this.#j()){let Q=this.getAttribute(N);J.setAttribute(N,Q??"")}q.append(G,J),this.#q=q,this.#G=G,this.#k=J,this.replaceChildren(q);for(let N of k)this.#k.appendChild(N)}#Y(){if(!this.#q||!this.#G)return;let k=this.hasAttribute("label"),q=this.getAttribute("label");if(k&&(q??"").trim()===""){if(this.#G.parentElement===this.#q)this.#G.remove()}else if(this.#G.textContent=k?q??"":"Label",this.#G.parentElement!==this.#q)this.#q.prepend(this.#G);this.#q.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#I(){if(!this.#k)return;let k=this.#j(),q=new Set(k.filter((J)=>J!=="text"));for(let J of this.#$)if(!q.has(J))this.#k.removeAttribute(J);for(let J of k){if(J==="text")continue;let N=this.getAttribute(J);this.#k.setAttribute(J,N??"")}this.#k.removeAttribute("variant"),this.#k.removeAttribute("color"),this.#k.removeAttribute("transform"),this.#k.removeAttribute("full"),this.#k.setAttribute("text","true");let G=(this.getAttribute("type")||"range").toLowerCase();if(G==="delta"||G==="stepper")this.#k.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#k.removeAttribute("default");if(G==="stepper")this.#k.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#k.removeAttribute("step");if(G==="opacity")this.#k.style.setProperty("--color","var(--figma-color-bg-tertiary)");else this.#k.style.removeProperty("--color");this.#$=q,this.#B()}#j(){let k=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((q)=>!k.has(q)&&!this.#W.has(q))}#B(){if(this.#Z)cancelAnimationFrame(this.#Z);this.#Z=requestAnimationFrame(()=>{this.#Z=0,this.#K()})}#K(){if(!this.#k)return;let k=this.#k.querySelector("fig-input-number");if(!k)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){k.removeAttribute("steppers");return}let G=this.getAttribute("steppers");k.setAttribute("steppers",G??"")}#_(){if(!this.#k)return;if(!this.#O)this.#O=this.#X.bind(this,"input");if(!this.#J)this.#J=this.#X.bind(this,"change");this.#k.addEventListener("input",this.#O),this.#k.addEventListener("change",this.#J)}#z(){if(!this.#k)return;if(this.#O)this.#k.removeEventListener("input",this.#O);if(this.#J)this.#k.removeEventListener("change",this.#J)}#X(k,q){q.stopPropagation();let G=q instanceof CustomEvent&&q.detail!==void 0?q.detail:this.#k?.value;this.dispatchEvent(new CustomEvent(k,{detail:G,bubbles:!0,cancelable:!0,composed:!0}))}}customElements.define("fig-field-slider",S);class D extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#q=50;#G=50;#k=75;#Q=75;#$=0;#Z=!1;#O=0;#J=null;#W=null;#N=null;#Y=null;#I=null;#j=null;#B=null;#K=null;#_=null;#z=!1;#X=!1;#V=!1;#F=!1;#R=null;#P="";#H="";#U=null;get#f(){return this.getAttribute("type")||"point"}get#v(){return this.#f==="point-radius"||this.#f==="point-radius-angle"}get#b(){return this.#f==="point-radius-angle"}get#M(){return this.#f==="point-point"}get#T(){return this.#f==="point-radius-angle"||this.#f==="point-point"}get#E(){let k=this.getAttribute("tooltips");return k===null||k!=="false"}get#x(){let k=this.getAttribute("snapping");if(k===null)return"false";let q=k.trim().toLowerCase();if(q==="modifier")return"modifier";if(q===""||q==="true")return"true";return"false"}#C(k){let q=this.#x;if(q==="true")return!0;if(q==="modifier")return!!k;return!1}get#m(){let k=this.getAttribute("name");if(k)return k.split(",")[0].trim();return`${Math.round(this.#q)}%, ${Math.round(this.#G)}%`}get#y(){let k=this.getAttribute("name");if(k){let q=k.split(",");if(q.length>1)return q[1].trim()}return`${Math.round(this.#k)}%, ${Math.round(this.#Q)}%`}get#a(){return this.getAttribute("drag-surface")||"parent"}get#w(){let k=this.#a;if(k==="parent")return this.parentElement;return this.closest(k)}get#e(){let k=this.#a;if(k==="parent"){let q=this.parentElement;if(q)return q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return k}#p(k){if(this.#Z)return this.#$/100*k;return this.#$}#g(){if(this.#Z)return`Radius ${Math.round(this.#$)}%`;return`Radius ${Math.round(this.#$)}`}connectedCallback(){this.#c(),this.#h()}disconnectedCallback(){this.#Yk(),this.#s(),document.body.classList.remove("fig-lab-move-active")}attributeChangedCallback(k,q,G){if(q===G)return;if(k==="value"&&!this.#z&&!this.#X&&!this.#V&&!this.#F)if(this.#c(),this.#J)this.#L();else this.#h();if(k==="type")this.#c(),this.#h();if(k==="color"&&this.#J)if(G)this.#J.setAttribute("color",G);else this.#J.removeAttribute("color");if(k==="disabled")this.#h();if(k==="tooltips")this.#h();if(k==="snapping"&&this.#J){if(this.#J.setAttribute("drag-snapping",G||"false"),this.#W)this.#W.setAttribute("drag-snapping",G||"false")}if(k==="name"){if(this.#j)this.#j.setAttribute("text",this.#m);if(this.#B)this.#B.setAttribute("text",this.#y)}}#c(){let k=this.getAttribute("value");if(!k)return;try{let q=JSON.parse(k);if(typeof q.x==="number")this.#q=q.x;if(typeof q.y==="number")this.#G=q.y;if(q.radius!==void 0){let G=String(q.radius);if(G.endsWith("%"))this.#Z=!0,this.#$=parseFloat(G);else this.#Z=!1,this.#$=parseFloat(G);if(!Number.isFinite(this.#$))this.#$=0}if(typeof q.angle==="number")this.#O=q.angle;if(typeof q.x2==="number")this.#k=q.x2;if(typeof q.y2==="number")this.#Q=q.y2}catch{}}get value(){let k={x:this.#q,y:this.#G};if(this.#f==="color"){let q=this.getAttribute("color")||this.#J?.getAttribute("color");if(q)k.color=q}if(this.#v)k.radius=this.#Z?`${this.#$}%`:this.#$;if(this.#b)k.angle=this.#O;if(this.#M)k.x2=this.#k,k.y2=this.#Q;return k}set value(k){if(typeof k==="object")this.setAttribute("value",JSON.stringify(k));else if(typeof k==="string")this.setAttribute("value",k)}#h(){this.innerHTML="",this.#J=null,this.#W=null,this.#N=null,this.#Y=null,this.#I=null,this.#j=null,this.#B=null,this.#K=null,this.#_=null;let k=this.hasAttribute("disabled"),q=this.#f,G=this.#E,J=this.#e,N=document.createElement("fig-handle");if(N.setAttribute("drag","true"),N.setAttribute("drag-surface",J),N.setAttribute("drag-axes","x,y"),N.setAttribute("drag-snapping",this.#x),N.setAttribute("value",`${this.#q}% ${this.#G}%`),k)N.setAttribute("disabled","");if(q==="color"){N.setAttribute("type","color");let Q=this.getAttribute("color");if(Q)N.setAttribute("color",Q)}else N.setAttribute("type","canvas");if(this.#M)N.setAttribute("hit-area","12 circle"),N.setAttribute("hit-area-mode","delegate");if(this.#J=N,this.#v)this.#Jk();if(this.#T)this.#Nk();if(G){let Q=document.createElement("fig-tooltip");Q.setAttribute("action","manual"),Q.setAttribute("theme","canvas"),Q.setAttribute("pointer","false"),Q.setAttribute("text",this.#m),Q.appendChild(N),this.appendChild(Q),this.#j=Q}else this.appendChild(N);if(this.#b)this.#Zk(k,G,J);if(this.#M)this.#_k(k,G,J);this.#d(this.#J),this.#d(this.#N),this.#d(this.#W),this.#jk(),this.#qk(),requestAnimationFrame(()=>this.#L())}#d(k){if(!k)return;k.addEventListener("pointerdown",(q)=>this.#kk(q),{capture:!0})}#kk(k){if(this.hasAttribute("disabled"))return;if(k?.button!==void 0&&k.button!==0)return;if(k?.isPrimary===!1)return;if(this.#R===null)this.#P=document.body.style.getPropertyValue("cursor"),this.#H=document.body.style.getPropertyPriority("cursor");if(this.#R=k?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#U)this.#U=(q)=>{if(q?.pointerId!==void 0&&this.#R!==null&&q.pointerId!==this.#R)return;if(q?.type==="blur")this.#s();else requestAnimationFrame(()=>this.#s())};window.addEventListener("pointerup",this.#U),window.addEventListener("pointercancel",this.#U),window.addEventListener("blur",this.#U)}#s(){if(this.#R===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#P)document.body.style.setProperty("cursor",this.#P,this.#H);else document.body.style.removeProperty("cursor");if(this.#R=null,this.#P="",this.#H="",this.#U)window.removeEventListener("pointerup",this.#U),window.removeEventListener("pointercancel",this.#U),window.removeEventListener("blur",this.#U)}#l(k,q,G,J){if(!k)return;let N=()=>!!J?.(),Q=()=>{let _=q();if(!_)return;_.removeAttribute("show"),_.hidePopup?.()},Z=()=>{if(N()){Q();return}let _=q();if(!_)return;if(G)_.setAttribute("text",G());_.setAttribute("show","true"),_.showPopup?.()},$=()=>{Q()};k.addEventListener("pointerenter",Z),k.addEventListener("pointerleave",$)}#r(){return this.#z||this.#X||this.#V||this.#F}#qk(){if(this.#J)this.#l(this.#J,()=>this.#j,()=>this.#m,()=>this.#r()||!!this.#J?.querySelector("fig-color-tip"));if(this.#N)this.#l(this.#N,()=>this.#_,()=>`Angle ${Math.round(this.#O)}°`,()=>this.#r());if(this.#W)this.#l(this.#W,()=>this.#B,()=>this.#y,()=>this.#r());if(this.#Y){let k=this.#Y.querySelector(".fig-canvas-control-radius-hit");this.#Gk(k||this.#Y)}if(this.#f==="color"&&this.#J&&this.#j)new MutationObserver(()=>{if(this.#J?.querySelector("fig-color-tip"))this.#j?.removeAttribute("show"),this.#j?.hidePopup?.()}).observe(this.#J,{childList:!0,subtree:!0})}#u(k,q){let G=this.#K;if(!G?.popup)return;let J=q-8;G.popup.anchor={getBoundingClientRect:()=>({left:k,top:J,right:k,bottom:J,width:0,height:0,x:k,y:J})},G.popup.queueReposition?.()}#Gk(k){if(!k)return;k.addEventListener("pointerenter",(q)=>{let G=this.#K;if(!G)return;G.setAttribute("text",this.#g()),G.setAttribute("show","true"),G.showPopup?.(),this.#u(q.clientX,q.clientY)}),k.addEventListener("pointermove",(q)=>{if(this.#V)return;this.#u(q.clientX,q.clientY)}),k.addEventListener("pointerleave",()=>{if(this.#V)return;let q=this.#K;if(!q)return;q.removeAttribute("show")})}#Jk(){let q=document.createElementNS("http://www.w3.org/2000/svg","svg");q.classList.add("fig-canvas-control-radius"),q.setAttribute("overflow","visible");let G=document.createElementNS("http://www.w3.org/2000/svg","circle");G.classList.add("fig-canvas-control-radius-hit"),q.appendChild(G);let J=document.createElementNS("http://www.w3.org/2000/svg","circle");J.classList.add("fig-canvas-control-radius-halo"),q.appendChild(J);let N=document.createElementNS("http://www.w3.org/2000/svg","circle");if(q.appendChild(N),this.#Y=q,this.#E){let Q=document.createElement("fig-tooltip");Q.setAttribute("action","manual"),Q.setAttribute("theme","canvas"),Q.setAttribute("pointer","false"),Q.setAttribute("text",this.#g()),Q.appendChild(q),this.appendChild(Q),this.#K=Q}else this.appendChild(q);this.#Kk(G)}#Nk(){let q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(q.classList.add("fig-canvas-control-angle-svg"),q.setAttribute("overflow","visible"),q.style.position="absolute",q.style.pointerEvents="none",this.#M){let N=document.createElementNS("http://www.w3.org/2000/svg","line");N.classList.add("fig-canvas-control-angle-line-hit"),N.setAttribute("stroke","transparent"),N.setAttribute("stroke-width","12"),N.setAttribute("stroke-linecap","round"),N.style.pointerEvents="stroke",q.appendChild(N),this.#Qk(N)}let G=document.createElementNS("http://www.w3.org/2000/svg","line");G.classList.add("fig-canvas-control-angle-line-halo"),q.appendChild(G);let J=document.createElementNS("http://www.w3.org/2000/svg","line");J.classList.add("fig-canvas-control-angle-line"),q.appendChild(J),this.#I=q,this.appendChild(q)}#Qk(k){k.addEventListener("pointerdown",(q)=>{if(this.hasAttribute("disabled"))return;q.preventDefault(),q.stopPropagation();let G=this.#w;if(!G)return;let J=G.getBoundingClientRect(),N=q.clientX,Q=q.clientY,Z=this.#q,$=this.#G,_=this.#k,W=this.#Q;this.#z=!0,this.#X=!0,document.body.classList.add("fig-lab-move-active"),k.style.pointerEvents="none";let B=(j)=>{let K=G.getBoundingClientRect(),X=K.width>0?(j.clientX-N)/K.width*100:0,Y=K.height>0?(j.clientY-Q)/K.height*100:0,z=-Math.min(Z,_),M=100-Math.max(Z,_),I=-Math.min($,W),F=100-Math.max($,W),U=Math.max(z,Math.min(M,X)),E=Math.max(I,Math.min(F,Y));this.#q=Z+U,this.#G=$+E,this.#k=_+U,this.#Q=W+E,this.#L(),this.#S()},O=()=>{document.body.classList.remove("fig-lab-move-active"),k.style.pointerEvents="stroke",this.#A(),this.#D(),window.removeEventListener("pointermove",B),window.removeEventListener("pointerup",O),requestAnimationFrame(()=>{this.#z=!1,this.#X=!1})};window.addEventListener("pointermove",B),window.addEventListener("pointerup",O)})}#Zk(k,q,G){let J=document.createElement("fig-handle");if(J.setAttribute("type","canvas"),J.setAttribute("drag","true"),J.setAttribute("drag-surface",G),J.setAttribute("drag-axes","x,y"),J.setAttribute("size","small"),J.setAttribute("hit-area","12 circle"),J.setAttribute("hit-area-mode","delegate"),k)J.setAttribute("disabled","");if(this.#N=J,q){let N=document.createElement("fig-tooltip");N.setAttribute("action","manual"),N.setAttribute("theme","canvas"),N.setAttribute("pointer","false"),N.setAttribute("text",`${Math.round(this.#O)}°`),N.appendChild(J),this.appendChild(N),this.#_=N}else this.appendChild(J)}#_k(k,q,G){let J=document.createElement("fig-handle");if(J.setAttribute("type","canvas"),J.setAttribute("drag","true"),J.setAttribute("drag-surface",G),J.setAttribute("drag-axes","x,y"),J.setAttribute("drag-snapping",this.#x),J.setAttribute("hit-area","12 circle"),J.setAttribute("hit-area-mode","delegate"),J.setAttribute("value",`${this.#k}% ${this.#Q}%`),k)J.setAttribute("disabled","");if(this.#W=J,q){let N=document.createElement("fig-tooltip");N.setAttribute("action","manual"),N.setAttribute("theme","canvas"),N.setAttribute("pointer","false"),N.setAttribute("text",this.#y),N.appendChild(J),this.appendChild(N),this.#B=N}else this.appendChild(J)}#o(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#t(k){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(k-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#$k(){if(!this.#N||!this.#b)return;let k=this.#N.querySelector(".fig-handle-hit-area");if(!k)return;k.style.cursor=this.#t(this.#O)}#Wk(){return Math.atan2(this.#Q-this.#G,this.#k-this.#q)*180/Math.PI}#Ok(){if(!this.#M)return;let k=this.#Wk(),q=(G,J)=>{if(!G)return;let N=G.querySelector(".fig-handle-hit-area");if(N)N.style.cursor=this.#t(J)};q(this.#J,k+180),q(this.#W,k)}#i(k,q,G,J){k.style.setProperty("--fig-handle-position-translate","-50% -50%"),k.style.left=`${q/100*J.width}px`,k.style.top=`${G/100*J.height}px`}#L(){let k=this.#w;if(!k||!this.#J)return;let q=k.getBoundingClientRect();if(this.#i(this.#J,this.#q,this.#G,q),this.#Y){let G=this.#q/100*q.width,J=this.#G/100*q.height,N=this.#p(q.width),Q=this.#Y,Z=Math.max(N*2,1);Q.style.position="absolute",Q.style.width=`${Z}px`,Q.style.height=`${Z}px`,Q.style.left=`${G-N}px`,Q.style.top=`${J-N}px`,Q.setAttribute("viewBox",`0 0 ${Z} ${Z}`);let $=Q.querySelectorAll("circle");for(let _ of $)_.setAttribute("cx",String(N)),_.setAttribute("cy",String(N)),_.setAttribute("r",String(Math.max(N-1,0)))}if(this.#I&&this.#T){let G=this.#q/100*q.width,J=this.#G/100*q.height,N,Q;if(this.#M)N=this.#k/100*q.width,Q=this.#Q/100*q.height;else{let _=this.#p(q.width),W=this.#O*Math.PI/180;N=G+_*Math.cos(W),Q=J+_*Math.sin(W)}let Z=this.#I;Z.style.width=`${q.width}px`,Z.style.height=`${q.height}px`,Z.style.left="0",Z.style.top="0",Z.setAttribute("viewBox",`0 0 ${q.width} ${q.height}`);let $=Z.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo");for(let _ of $)_.setAttribute("x1",String(G)),_.setAttribute("y1",String(J)),_.setAttribute("x2",String(N)),_.setAttribute("y2",String(Q))}if(this.#N&&this.#b){let G=this.#q/100*q.width,J=this.#G/100*q.height,N=this.#p(q.width),Q=this.#O*Math.PI/180,Z=G+N*Math.cos(Q),$=J+N*Math.sin(Q),_=q.width>0?Z/q.width*100:0,W=q.height>0?$/q.height*100:0;this.#i(this.#N,_,W,q)}if(this.#W&&this.#M)this.#i(this.#W,this.#k,this.#Q,q);this.#$k(),this.#Ok()}#S(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#D(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}#A(){this.setAttribute("value",JSON.stringify(this.value))}#jk(){if(!this.#J)return;if(this.#J.addEventListener("input",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#S();return}this.#z=!0;let q=k.detail?.px??this.#q/100,G=k.detail?.py??this.#G/100;if(this.#q=Math.round(Math.max(0,Math.min(100,q*100))),this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#j)this.#j.removeAttribute("show"),this.#j.hidePopup?.();this.#L(),this.#S()}),this.#J.addEventListener("change",(k)=>{if(k.stopPropagation(),k.detail?.color){this.setAttribute("color",k.detail.color),this.#D();return}let q=k.detail?.px??this.#q/100,G=k.detail?.py??this.#G/100;if(this.#q=Math.round(Math.max(0,Math.min(100,q*100))),this.#G=Math.round(Math.max(0,Math.min(100,G*100))),this.#j)this.#j.removeAttribute("show");this.#L(),this.#A(),this.#D(),requestAnimationFrame(()=>{this.#z=!1})}),this.#N)this.#N.addEventListener("input",(k)=>{k.stopPropagation();let q=this.#w;if(!q)return;this.#F=!0,this.classList.add("fig-canvas-control-ring-active");let G=q.getBoundingClientRect(),J=this.#q/100*G.width,N=this.#G/100*G.height,Q=k.detail?.x??0,Z=k.detail?.y??0,$=this.#N.offsetWidth/2,_=this.#N.offsetHeight/2,W=Q+$-J,B=Z+_-N,O=Math.atan2(B,W)*180/Math.PI;if(this.#C(k.detail?.shiftKey))O=Math.round(O/15)*15;this.#O=O;let j=Math.sqrt(W*W+B*B);if(this.#C(k.detail?.shiftKey)){let K=this.#Z?5:10;if(this.#Z){let X=j/G.width*100;X=Math.round(X/K)*K,j=X/100*G.width}else j=Math.round(j/K)*K}if(this.#Z)this.#$=Math.max(0,j/G.width*100);else this.#$=Math.max(0,j);if(this.#_)this.#_.setAttribute("text",`Angle ${Math.round(this.#O)}°`),this.#_.setAttribute("show","true"),this.#_.showPopup?.();this.#L(),this.#S()}),this.#N.addEventListener("change",(k)=>{if(k.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#_)this.#_.removeAttribute("show");this.#L(),this.#A(),this.#D(),requestAnimationFrame(()=>{this.#F=!1})}),this.#N.addEventListener("hitareadown",(k)=>{k.stopPropagation();let q=k.detail?.originalEvent;if(!q)return;q.preventDefault();let G=this.#w;if(!G)return;if(this.#F=!0,this.classList.add("fig-canvas-control-ring-active"),this.#N.setAttribute("selected",""),this.#_)this.#_.setAttribute("show","true"),this.#_.showPopup?.();let J=(Q)=>{let Z=G.getBoundingClientRect(),$=this.#q/100*Z.width,_=this.#G/100*Z.height,W=Q.clientX-Z.left-$,B=Q.clientY-Z.top-_,O=Math.atan2(B,W)*180/Math.PI;if(this.#C(Q.shiftKey))O=Math.round(O/15)*15;if(this.#O=O,this.#_)this.#_.setAttribute("text",`Angle ${Math.round(O)}°`);this.#L(),this.#S()},N=()=>{if(this.#F=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#N.removeAttribute("selected"),this.#_)this.#_.removeAttribute("show");this.#A(),this.#D(),window.removeEventListener("pointermove",J),window.removeEventListener("pointerup",N)};window.addEventListener("pointermove",J),window.addEventListener("pointerup",N)});if(this.#W)this.#W.addEventListener("input",(k)=>{k.stopPropagation(),this.#X=!0;let q=k.detail?.px??this.#k/100,G=k.detail?.py??this.#Q/100;if(this.#k=Math.round(Math.max(0,Math.min(100,q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,G*100))),this.#B)this.#B.removeAttribute("show"),this.#B.hidePopup?.();this.#L(),this.#S()}),this.#W.addEventListener("change",(k)=>{if(k.stopPropagation(),this.#B)this.#B.removeAttribute("show");this.#L(),this.#A(),this.#D(),requestAnimationFrame(()=>{this.#X=!1})}),this.#n(this.#J,!0),this.#n(this.#W,!1)}#n(k,q){if(!k)return;k.addEventListener("hitareadown",(G)=>{G.stopPropagation();let J=G.detail?.originalEvent;if(!J)return;J.preventDefault();let N=this.#w;if(!N)return;this.#z=!0;let Q=N.getBoundingClientRect(),Z=q?this.#k:this.#q,$=q?this.#Q:this.#G,_=q?this.#q:this.#k,W=q?this.#G:this.#Q,B=Z/100*Q.width,O=$/100*Q.height,j=_/100*Q.width,K=W/100*Q.height,X=Math.sqrt((j-B)**2+(K-O)**2),Y=q?this.#j:this.#B;if(Y)Y.removeAttribute("show"),Y.hidePopup?.();let z=(I)=>{let F=N.getBoundingClientRect(),U=Z/100*F.width,E=$/100*F.height,L=I.clientX-F.left-U,V=I.clientY-F.top-E,f=Math.atan2(V,L);if(this.#C(I.shiftKey))f=Math.round(f*180/Math.PI/15)*15*Math.PI/180;let w=U+X*Math.cos(f),A=E+X*Math.sin(f),b=Math.max(0,Math.min(100,w/F.width*100)),R=Math.max(0,Math.min(100,A/F.height*100));if(q)this.#q=b,this.#G=R;else this.#k=b,this.#Q=R;this.#L(),this.#S()},M=()=>{if(this.#z=!1,Y)Y.removeAttribute("show");this.#A(),this.#D(),window.removeEventListener("pointermove",z),window.removeEventListener("pointerup",M)};window.addEventListener("pointermove",z),window.addEventListener("pointerup",M)})}#Kk(k){if(!k)return;k.addEventListener("pointermove",(G)=>{if(this.#V)return;let J=this.#w;if(!J)return;let N=J.getBoundingClientRect(),Q=this.#q/100*N.width,Z=this.#G/100*N.height,$=Math.atan2(G.clientY-N.top-Z,G.clientX-N.left-Q)*180/Math.PI;k.style.cursor=this.#o($)});let q=(G)=>{if(this.hasAttribute("disabled"))return;G.preventDefault(),G.stopPropagation(),this.#V=!0,this.classList.add("fig-canvas-control-ring-active");let J=this.#w;if(!J)return;if(this.#K)this.#K.setAttribute("show","true"),this.#K.showPopup?.(),this.#u(G.clientX,G.clientY);if(this.#_)this.#_.removeAttribute("show"),this.#_.hidePopup?.();let N=this.#N?.style.pointerEvents,Q=this.#N?.querySelector(".fig-handle-hit-area"),Z=Q?.style.pointerEvents;if(this.#N)this.#N.style.pointerEvents="none";if(Q)Q.style.pointerEvents="none";let $=document.body.style.cursor;k.style.pointerEvents="none";let _=J.getBoundingClientRect(),W=this.#q/100*_.width,B=this.#G/100*_.height,O=Math.atan2(G.clientY-_.top-B,G.clientX-_.left-W)*180/Math.PI,j=Math.round(O);document.body.style.cursor=this.#o(j);let K=(Y)=>{let z=J.getBoundingClientRect(),M=this.#q/100*z.width,I=this.#G/100*z.height,F=Y.clientX-z.left-M,U=Y.clientY-z.top-I,E=Math.round(Math.atan2(U,F)*180/Math.PI);if(E!==j)j=E,document.body.style.cursor=this.#o(E);let L=Math.sqrt(F*F+U*U);if(this.#C(Y.shiftKey)){let V=this.#Z?5:10;if(this.#Z){let f=L/z.width*100;f=Math.round(f/V)*V,L=f/100*z.width}else L=Math.round(L/V)*V}if(this.#Z)this.#$=Math.max(0,L/z.width*100);else this.#$=Math.max(0,L);if(this.#K)this.#K.setAttribute("text",this.#g()),this.#u(Y.clientX,Y.clientY);this.#L(),this.#S()},X=()=>{if(this.#V=!1,this.classList.remove("fig-canvas-control-ring-active"),k.style.pointerEvents="",this.#N)this.#N.style.pointerEvents=N??"";if(Q)Q.style.pointerEvents=Z??"";if(document.body.style.cursor=$,this.#K)this.#K.removeAttribute("show");this.#A(),this.#D(),window.removeEventListener("pointermove",K),window.removeEventListener("pointerup",X)};window.addEventListener("pointermove",K),window.addEventListener("pointerup",X)};k.addEventListener("pointerdown",q),this._radiusDragCleanup=()=>k.removeEventListener("pointerdown",q)}#Yk(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}}customElements.define("fig-canvas-control",D);class C extends HTMLElement{#q;#G;#k=null;#Q;#$;#Z;#O;#J;#W;constructor(){super();this.angle=0,this.#q=1,this.#G=0,this.isDragging=!1,this.isShiftHeld=!1,this.handle=null,this.angleInput=null,this.plane=null,this.units="°",this.min=null,this.max=null,this.dial=!0,this.showRotations=!1,this.rotationSpan=null,this.#Q=this.#P.bind(this),this.#$=this.#x.bind(this),this.#Z=this.#C.bind(this),this.#O=this.#m.bind(this),this.#J=this.#y.bind(this),this.#W=this.#H.bind(this)}connectedCallback(){requestAnimationFrame(()=>{this.precision=this.getAttribute("precision")||1,this.precision=parseInt(this.precision),this.text=this.getAttribute("text")==="true";let k=this.getAttribute("units")||"°";if(k==="deg")k="°";if(this.units=k,this.min=this.hasAttribute("min")?Number(this.getAttribute("min")):null,this.max=this.hasAttribute("max")?Number(this.getAttribute("max")):null,this.dial=this.#Y("dial",!0),this.showRotations=this.#I(),this.#N(),this.#F(),this.#E(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision))})}disconnectedCallback(){this.#R()}#N(){this.innerHTML=this.#j()}#Y(k,q=!1){let G=this.getAttribute(k);if(G===null)return q;let J=G.trim().toLowerCase();if(J===""||J==="true")return!0;if(J==="false")return!1;return!0}#I(){if(this.hasAttribute("rotations"))return this.#Y("rotations",!1);if(this.hasAttribute("show-rotations"))return this.#Y("show-rotations",!1);return!1}#j(){let k=this.#_(),q=this.min!==null?`min="${this.min}"`:"",G=this.max!==null?`max="${this.max}"`:"";return`
|
|
2
2
|
${this.dial?`<div class="fig-input-angle-plane" tabindex="0">
|
|
3
3
|
<div class="fig-input-angle-handle"></div>
|
|
4
4
|
</div>`:""}
|
|
@@ -6,9 +6,9 @@ class b extends HTMLElement{#G=null;#J=null;#k=null;#_=null;#O=new Set;#$=0;#W=n
|
|
|
6
6
|
name="angle"
|
|
7
7
|
step="${k}"
|
|
8
8
|
value="${this.angle}"
|
|
9
|
+
${q}
|
|
9
10
|
${G}
|
|
10
|
-
${J}
|
|
11
11
|
units="${this.units}">
|
|
12
12
|
${this.showRotations?'<span slot="append" class="fig-input-angle-rotations"></span>':""}
|
|
13
13
|
</fig-input-number>`:""}
|
|
14
|
-
`}#
|
|
14
|
+
`}#B(){let k=Math.abs(this.#z(this.angle));return Math.floor(k/360)}#K(){if(!this.rotationSpan)return;let k=this.#B();if(k>1)this.rotationSpan.textContent=`×${k}`,this.rotationSpan.style.display="";else this.rotationSpan.textContent="",this.rotationSpan.style.display="none"}#_(){switch(this.units){case"rad":return 0.01;case"turn":return 0.001;default:return 0.1}}#z(k){switch(this.units){case"rad":return k*180/Math.PI;case"turn":return k*360;default:return k}}#X(k){switch(this.units){case"rad":return k*Math.PI/180;case"turn":return k/360;default:return k}}#V(k,q,G){let J;switch(q){case"rad":J=k*180/Math.PI;break;case"turn":J=k*360;break;default:J=k}switch(G){case"rad":return J*Math.PI/180;case"turn":return J/360;default:return J}}#F(){if(this.handle=this.querySelector(".fig-input-angle-handle"),this.plane=this.querySelector(".fig-input-angle-plane"),this.angleInput=this.querySelector("fig-input-number[name='angle']"),this.rotationSpan=this.querySelector(".fig-input-angle-rotations"),this.#K(),this.plane?.addEventListener("mousedown",this.#$),this.plane?.addEventListener("touchstart",this.#Z),window.addEventListener("keydown",this.#O),window.addEventListener("keyup",this.#J),this.text&&this.angleInput)this.angleInput.addEventListener("input",this.#W);this.addEventListener("change",this.#Q,!0)}#R(){if(this.plane?.removeEventListener("mousedown",this.#$),this.plane?.removeEventListener("touchstart",this.#Z),window.removeEventListener("keydown",this.#O),window.removeEventListener("keyup",this.#J),this.text&&this.angleInput)this.angleInput.removeEventListener("input",this.#W);this.removeEventListener("change",this.#Q,!0)}#P(k){if(!k.target?.matches?.("input"))return;let G=k.target.value.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);if(G){let J=parseFloat(G[1]),N=G[2].toLowerCase();if(N==="deg")N="°";if(N!==this.units){let Q=this.#V(J,N,this.units);k.target.value=String(Q)}}}#H(k){k.stopPropagation(),this.angle=Number(k.target.value),this.#U(),this.#E(),this.#K(),this.#M(),this.#T()}#U(){let q=this.#z(this.angle)*Math.PI/180;this.#q=Math.cos(q),this.#G=Math.sin(q)}#f(k){if(!this.isShiftHeld)return k;let q=45;return Math.round(k/q)*q}#v(k){let q=this.plane.getBoundingClientRect(),G=q.left+q.width/2,J=q.top+q.height/2,N=k.clientX-G,Q=k.clientY-J;return Math.atan2(Q,N)*180/Math.PI}#b(k){let G=(this.#v(k)%360+360)%360;if(G=this.#f(G),this.min!==null||this.max!==null)this.angle=this.#X(G);else if(this.#k===null){this.#k=G;let Q=(this.#z(this.angle)%360+360)%360,Z=G-Q;if(Z>180)Z-=360;if(Z<-180)Z+=360;this.angle+=this.#X(Z)}else{let N=G-this.#k;if(N>180)N-=360;if(N<-180)N+=360;this.angle+=this.#X(N),this.#k=G}if(this.#U(),this.#E(),this.text&&this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K(),this.#M()}#M(){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#T(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,detail:{value:this.value,angle:this.angle}}))}#E(){if(this.handle){let q=this.#z(this.angle)*Math.PI/180,G=this.plane.offsetWidth/2-this.handle.offsetWidth/2,J=Math.cos(q)*G,N=Math.sin(q)*G;this.handle.style.transform=`translate(${J}px, ${N}px)`}}#x(k){this.isDragging=!0,this.#k=null,this.#b(k);let q=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#b(J)},G=()=>{this.isDragging=!1,this.#k=null,this.plane.classList.remove("dragging"),window.removeEventListener("mousemove",q),window.removeEventListener("mouseup",G),this.#T()};window.addEventListener("mousemove",q),window.addEventListener("mouseup",G)}#C(k){k.preventDefault(),this.isDragging=!0,this.#k=null,this.#b(k.touches[0]);let q=(J)=>{if(this.plane.classList.add("dragging"),this.isDragging)this.#b(J.touches[0])},G=()=>{this.isDragging=!1,this.#k=null,this.plane.classList.remove("dragging"),window.removeEventListener("touchmove",q),window.removeEventListener("touchend",G),this.#T()};window.addEventListener("touchmove",q),window.addEventListener("touchend",G)}#m(k){if(k.key==="Shift")this.isShiftHeld=!0}#y(k){if(k.key==="Shift")this.isShiftHeld=!1}focus(){this.plane?.focus()}static get observedAttributes(){return["value","precision","text","min","max","units","dial","rotations","show-rotations"]}get value(){return this.angle}get adjacent(){return this.#q}get opposite(){return this.#G}set value(k){if(isNaN(k)){console.error("Invalid value: must be a number.");return}if(this.angle=k,this.#U(),this.#E(),this.angleInput)this.angleInput.setAttribute("value",this.angle.toFixed(this.precision));this.#K()}attributeChangedCallback(k,q,G){switch(k){case"value":if(this.isDragging)break;this.value=Number(G);break;case"precision":this.precision=parseInt(G);break;case"text":if(G!==q){if(this.text=G?.toLowerCase()==="true",this.isConnected)this.#N(),this.#F(),this.#E()}break;case"dial":if(this.dial=this.#Y("dial",!0),this.isConnected)this.#N(),this.#F(),this.#E();break;case"units":{let J=G||"°";if(J==="deg")J="°";if(this.units=J,this.isConnected)this.#N(),this.#F(),this.#E();break}case"min":if(this.min=G!==null?Number(G):null,this.isConnected)this.#N(),this.#F(),this.#E();break;case"max":if(this.max=G!==null?Number(G):null,this.isConnected)this.#N(),this.#F(),this.#E();break;case"rotations":case"show-rotations":if(this.showRotations=this.#I(),this.isConnected)this.#N(),this.#F(),this.#E();break}}}customElements.define("fig-input-angle",C);
|