@linkurious/ogma-annotations 2.1.0 → 2.1.2

package/dist/ui-styles.css

@@ -0,0 +1,573 @@
+/**
+ * Canonical stylesheet for the annotation style panel and toolbar UI.
+ * Shared by the vanilla (core) and React packages.
+ *
+ * Theming: override the `--oa-*` custom properties on `.annotation-panel`
+ * / `.annotation-toolbar` (or any ancestor) to restyle. Defaults preserve
+ * the original look. The accent color falls back to the legacy `--brand`
+ * variable if set.
+ *
+ * Layout: both roots carry `data-placement` (which screen edge/corner they
+ * dock to — `right` (default for the panel), `left`, `top`,
+ * `bottom` (default for the toolbar), `top-left`, `top-right`,
+ * `bottom-left`, `bottom-right`) and `data-orientation` (`vertical`
+ * (default for the panel) or `horizontal` (default for the toolbar)), set
+ * via the `placement`/`orientation` options (vanilla) or props (React).
+ * Position either relative to its container by giving that container
+ * `position: relative`.
+ */
+
+.annotation-panel,
+.annotation-toolbar {
+  /* Theme tokens */
+  --oa-accent: var(--brand, #3a03cf);
+  --oa-panel-bg: #ffffff;
+  --oa-panel-radius: 10px;
+  --oa-panel-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  --oa-control-bg: #eeeeee;
+  --oa-text-color: #333333;
+  --oa-muted-color: #666666;
+  --oa-panel-margin: 10px;
+
+  position: absolute;
+  background: var(--oa-panel-bg);
+  z-index: 100;
+  box-shadow: var(--oa-panel-shadow);
+  border-radius: var(--oa-panel-radius);
+}
+
+.annotation-panel {
+  width: 228px;
+}
+
+/* Placement: which screen edge/corner the root docks to. */
+.annotation-panel:not([data-placement]),
+.annotation-panel[data-placement="right"],
+.annotation-toolbar[data-placement="right"] {
+  right: var(--oa-panel-margin);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.annotation-panel[data-placement="left"],
+.annotation-toolbar[data-placement="left"] {
+  left: var(--oa-panel-margin);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.annotation-panel[data-placement="top"],
+.annotation-toolbar[data-placement="top"] {
+  top: var(--oa-panel-margin);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.annotation-toolbar:not([data-placement]),
+.annotation-panel[data-placement="bottom"],
+.annotation-toolbar[data-placement="bottom"] {
+  bottom: var(--oa-panel-margin);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.annotation-panel[data-placement="top-left"],
+.annotation-toolbar[data-placement="top-left"] {
+  left: var(--oa-panel-margin);
+  top: var(--oa-panel-margin);
+}
+
+.annotation-panel[data-placement="top-right"],
+.annotation-toolbar[data-placement="top-right"] {
+  right: var(--oa-panel-margin);
+  top: var(--oa-panel-margin);
+}
+
+.annotation-panel[data-placement="bottom-left"],
+.annotation-toolbar[data-placement="bottom-left"] {
+  left: var(--oa-panel-margin);
+  bottom: var(--oa-panel-margin);
+}
+
+.annotation-panel[data-placement="bottom-right"],
+.annotation-toolbar[data-placement="bottom-right"] {
+  right: var(--oa-panel-margin);
+  bottom: var(--oa-panel-margin);
+}
+
+/* Orientation: lay sections out as a horizontal toolbar instead of a
+   vertically-stacked card. Every section is a `.section-header` + one
+   content sibling (`.color-selector`, `.slider-section`, ...); a 2-row
+   auto-flow grid regroups each consecutive pair into its own column
+   without any markup changes. */
+.annotation-panel[data-orientation="horizontal"] {
+  width: auto;
+  max-width: min(90vw, 640px);
+}
+
+.annotation-panel[data-orientation="horizontal"] .panel-body {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  align-items: start;
+  column-gap: 20px;
+  overflow-x: auto;
+}
+
+.annotation-panel[data-orientation="horizontal"] .section-header {
+  margin-top: 0;
+}
+
+.annotation-panel[data-orientation="horizontal"] .slider {
+  width: 120px;
+}
+
+.panel-header {
+  padding: 20px 20px 10px 20px;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.panel-body {
+  padding: 10px 20px 20px 20px;
+}
+
+/* Color Selector */
+.color-selector {
+  display: flex;
+  gap: 12px;
+}
+
+.color-circle {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+}
+
+.color-circle:hover {
+  transform: scale(1.05);
+}
+
+.color-circle .color-inner {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid #d4d4d8;
+  background: white;
+  position: relative;
+}
+
+.color-circle .color-inner::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--circle-color);
+}
+
+.color-circle-primary .color-inner {
+  border: 3px solid var(--oa-accent);
+}
+
+/* Color Picker Container */
+.color-picker-container {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f9f9f9;
+  border-radius: 4px;
+  display: none !important;
+}
+
+/* Toggle Section */
+.toggle-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0;
+  margin-bottom: 10px;
+}
+
+.toggle-section svg {
+  color: var(--oa-text-color);
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: var(--oa-text-color);
+  font-weight: 400;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 31px;
+  height: 15px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #eeeeee;
+  transition: 0.3s;
+  border-radius: 7.5px;
+  border: 0.5px solid #b6c2e2;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 2px;
+  bottom: 1.5px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+  background-color: var(--oa-accent);
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(15px);
+}
+
+/* Section Headers */
+.section-header {
+  margin-top: 10px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* Slider Section */
+.slider-section {
+  position: relative;
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.slider {
+  width: 85%;
+  height: 4.8px;
+  border-radius: 2.4px;
+  background: #e4e4e7;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  border: 3px solid var(--oa-accent);
+  cursor: pointer;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  border: 3px solid var(--oa-accent);
+  cursor: pointer;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.slider-value {
+  width: 15%;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.slider-value span {
+  font-size: 14px;
+  font-weight: 500;
+  color: black;
+}
+
+/* Line Type Section */
+.linetype-section {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  padding: 10px 0;
+}
+
+.linetype-button {
+  flex: 1;
+  height: 36px;
+  background: var(--oa-control-bg);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oa-muted-color);
+  transition: all 0.2s;
+  font-size: 18px;
+}
+
+.linetype-button:hover {
+  background: #e0e0e0;
+}
+
+.linetype-button.active {
+  background: var(--oa-accent);
+  color: white;
+}
+
+/* Color Picker Overlay */
+.color-picker-overlay {
+  position: fixed;
+  z-index: 10000;
+  background: white;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+/* Custom Select Section */
+.custom-select-section {
+  display: flex;
+  gap: 8px;
+}
+
+.extremity-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.extremity-wrapper label {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--oa-muted-color);
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.custom-select {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select-trigger {
+  width: 100%;
+  height: 36px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 0 8px;
+  font-size: 14px;
+  color: var(--oa-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.custom-select-trigger svg:first-child {
+  flex-shrink: 0;
+}
+
+.custom-select-trigger span {
+  display: none;
+}
+
+.custom-select-arrow {
+  font-size: 12px;
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.custom-select.open .custom-select-arrow {
+  transform: rotate(180deg);
+}
+
+.custom-select-options {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  margin-top: 4px;
+  margin-right: 24px;
+  overflow: hidden;
+  z-index: 1000;
+  display: none;
+}
+
+.custom-select.open .custom-select-options {
+  display: block;
+  width: 36px;
+}
+
+.custom-select-option {
+  padding: 10px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background 0.15s;
+  font-size: 14px;
+  color: var(--oa-text-color);
+}
+
+.custom-select-option:hover {
+  background: #f5f5f5;
+}
+
+.custom-select-option.selected {
+  background: #e8f4ff;
+  color: var(--oa-accent);
+}
+
+.custom-select-option svg {
+  flex-shrink: 0;
+}
+
+.custom-select-option span {
+  display: none;
+}
+
+/* --- Annotation Toolbar (AnnotationToolbar) ---
+   Drawing/undo-redo toolbar. Shares the placement rules above with
+   `.annotation-panel`; only its own button/orientation styling lives here. */
+.annotation-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px;
+}
+
+.annotation-toolbar[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.annotation-toolbar:not([data-orientation]),
+.annotation-toolbar[data-orientation="horizontal"] {
+  flex-direction: row;
+}
+
+.annotation-toolbar button {
+  margin: 2px;
+  padding: 5px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--oa-muted-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.annotation-toolbar button:hover {
+  background: var(--oa-control-bg);
+  color: var(--oa-text-color);
+}
+
+.annotation-toolbar button.active {
+  background: var(--oa-accent);
+  color: #fff;
+}
+
+.annotation-toolbar button:disabled {
+  color: #aaa;
+  cursor: not-allowed;
+}
+
+.annotation-toolbar .separator {
+  border-left: 1px solid #ccc;
+  margin: 0 4px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.annotation-toolbar[data-orientation="vertical"] .separator {
+  border-left: none;
+  border-top: 1px solid #ccc;
+  width: 20px;
+  height: 0;
+  margin: 4px 0;
+}
+
+/* Tooltips, shown on hover via the `data-tooltip` attribute. */
+.annotation-toolbar [data-tooltip] {
+  position: relative;
+}
+
+.annotation-toolbar [data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%) translateY(-6px);
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: 5px;
+  pointer-events: none;
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.annotation-toolbar [data-tooltip]:hover::after {
+  opacity: 1;
+}

package/dist/ui.js

@@ -0,0 +1,48 @@
+"use strict";var B=Object.defineProperty;var N=(r,t,e)=>t in r?B(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var a=(r,t,e)=>N(r,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("vanilla-colorful/lib/entrypoints/rgba"),l=require("./Polygon-D4SNG2xn.cjs"),m="rgba-color-picker";class F extends D.RgbaBase{}function E(){return customElements.get(m)||customElements.define(m,F),document.createElement(m)}const C=[{value:"#f5f5f5",style:"--circle-color: #f5f5f5;"},{value:"#EDE6FF",style:"--circle-color: #EDE6FF;"},{value:"transparent",style:"--circle-color: white; border: 2px dashed #ccc;"}],y=[{value:"sans-serif",label:"Sans Serif",icon:"type"},{value:"serif",label:"Serif",icon:"italic"},{value:"monospace",label:"Monospace",icon:"code"}],b=[{value:"none",label:"None",icon:"x"},{value:"arrow",label:"Open Arrow",icon:"arrow-left"},{value:"arrow-plain",label:"Filled Arrow",icon:"play"},{value:"halo-dot",label:"Halo Dot",icon:"circle-dot"},{value:"dot",label:"Dot",icon:"dot"}],k=[{value:"plain",icon:"circle"},{value:"dashed",icon:"circle-dashed"}],A=["#0099FF","#FF7523","#44AA99"];function S(r){return`rgba(${r.r}, ${r.g}, ${r.b}, ${r.a})`}const w=3;function x(){return{colors:[...A],activeIndex:0}}function T(r,t){const e=r.colors.indexOf(t);return e===-1?{colors:[t,...r.colors].slice(0,w),activeIndex:0}:{colors:r.colors,activeIndex:e}}const M={"chevron-down":'<path d="m6 9 6 6 6-6"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',"arrow-left":'<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',"arrow-right":'<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',play:'<polygon points="6 3 20 12 6 21 6 3"/>',"circle-dot":'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>',dot:'<circle cx="12.1" cy="12.1" r="1"/>',circle:'<circle cx="12" cy="12" r="10"/>',"circle-dashed":'<path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/>',type:'<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>',italic:'<line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/>',code:'<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',trash:'<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',undo:'<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>',redo:'<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/>',pentagon:'<path d="M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z"/>',"rectangle-horizontal":'<rect width="20" height="12" x="2" y="6" rx="2"/>',"message-square":'<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',"sticky-note":'<path d="M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z"/><path d="M15 3v5a1 1 0 0 0 1 1h5"/>',eraser:'<path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"/><path d="m5.082 11.09 8.828 8.828"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',camera:'<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',"rotate-cw":'<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>',"rotate-ccw":'<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',minimize:'<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'};function v(r,t=18){return`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${M[r]}</svg>`}const _=150;function $(r,{onShow:t,onHide:e}){let o=null,i=null;const n=()=>{i!==null&&(clearTimeout(i),i=null)},s=()=>{n(),o&&(t(o),o=null)},c=h=>{if(n(),h.ids.length===1){const p=r.getAnnotation(h.ids[0]);if(!p)return;if(o=p,r.isDrawing()){r.once("cancelDrawing",s),r.once("completeDrawing",s);return}i=setTimeout(s,_)}else o=null,e()},d=()=>{n(),o=null,e()},u=()=>{n(),o=null,e()};return r.on("select",c),r.on("click",s),r.on("dragend",s),r.on("dragstart",d),r.on("unselect",u),()=>{n(),r.off("select",c),r.off("click",s),r.off("dragend",s),r.off("dragstart",d),r.off("unselect",u),r.off("cancelDrawing",s),r.off("completeDrawing",s)}}const P="right",L="vertical";class R{constructor(t){a(this,"control");a(this,"panel");a(this,"panelBody");a(this,"mode",null);a(this,"currentAnnotation",null);a(this,"currentColor","#0099FF");a(this,"recent",x());a(this,"colorCircles",[]);a(this,"colorPickerOverlay",null);a(this,"colorPicker",null);a(this,"detachVisibility");a(this,"documentClickHandler");a(this,"hide",()=>{this.panel.style.display="none",this.closeColorPicker(),this.currentAnnotation=null,this.mode=null});this.control=t.control;const e=t.container??document.body;this.panel=document.createElement("div"),this.panel.className="annotation-panel",this.panel.style.display="none",this.panel.dataset.placement=t.placement??P,this.panel.dataset.orientation=t.orientation??L,this.panelBody=document.createElement("div"),this.panelBody.className="panel-body",this.panel.appendChild(this.panelBody),e.appendChild(this.panel),this.detachVisibility=$(this.control,{onShow:o=>{this.setAnnotation(o),this.show()},onHide:this.hide}),["click","mousedown","mousemove"].forEach(o=>this.panel.addEventListener(o,i=>i.stopPropagation())),this.documentClickHandler=o=>{this.colorPickerOverlay&&!this.colorPickerOverlay.contains(o.target)&&!this.colorCircles.some(i=>i.contains(o.target))&&this.closeColorPicker(),this.panelBody.querySelectorAll(".custom-select").forEach(i=>i.classList.remove("open"))},document.addEventListener("click",this.documentClickHandler)}setAnnotation(t){this.currentAnnotation=t,l.isArrow(t)?(this.mode="arrow",this.renderArrow(t)):l.isText(t)||l.isBox(t)||l.isComment(t)?(this.mode="text",this.renderText(t)):l.isPolygon(t)&&(this.mode="polygon",this.renderPolygon(t))}renderArrow(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.strokeColor||l.defaultArrowStyle.strokeColor),this.panelBody.innerHTML=`
+      ${this.section("Color",this.colorSelector())}
+      ${this.section("Extremities",`<div class="custom-select-section">
+        ${this.extremitySelector("head",t)}
+        ${this.extremitySelector("tail",t)}
+      </div>`)}
+      ${this.slider("Stroke width","line-width",e.strokeWidth||l.defaultArrowStyle.strokeWidth,1,20)}
+      ${this.lineTypeButtons(e.strokeType||"plain")}
+    `,this.bind()}renderText(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.color||l.defaultTextStyle.color);const o=typeof e.fontSize=="number"?e.fontSize:typeof l.defaultTextStyle.fontSize=="number"?l.defaultTextStyle.fontSize:18;this.panelBody.innerHTML=`
+      ${this.section("Color",this.colorSelector())}
+      ${this.section("Background",this.backgroundSelector(e.background||l.defaultTextStyle.background))}
+      ${this.section("Font",`<div class="custom-select-section">${this.fontSelector(e.font||l.defaultTextStyle.font)}</div>`)}
+      ${this.slider("Font size","font-size",o,8,72)}
+      ${this.slider("Stroke width","line-width",e.strokeWidth||l.defaultTextStyle.strokeWidth,1,20)}
+      ${this.lineTypeButtons(e.strokeType||"plain")}
+    `,this.bind()}renderPolygon(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.strokeColor||"#000000"),this.panelBody.innerHTML=`
+      ${this.section("Color",this.colorSelector())}
+      ${this.section("Fill",this.backgroundSelector(e.background||"transparent"))}
+      ${this.slider("Stroke width","line-width",e.strokeWidth||2,1,20)}
+      ${this.lineTypeButtons(e.strokeType||"plain")}
+    `,this.bind()}section(t,e){return`<div class="section-header"><h3>${t}</h3></div>${e}`}icon(t,e=!1){return e?`<span style="display:inline-flex;transform:rotate(180deg)">${v(t)}</span>`:v(t)}colorSelector(){return`<div class="color-selector">${this.recent.colors.map((t,e)=>`
+      <button class="color-circle ${e===0?"color-circle-primary":""}" data-index="${e}" data-color="${t}">
+        <div class="color-inner"></div>
+      </button>
+    `).join("")}</div>`}backgroundSelector(t){return`<div class="color-selector">${C.map(({value:e,style:o})=>`
+      <button class="color-circle ${e===t?"color-circle-primary":""}" data-background-color="${e}">
+        <div class="color-inner" style="${o}"></div>
+      </button>
+    `).join("")}</div>`}fontSelector(t){const e=y.find(o=>o.value===t)||y[0];return this.dropdown("font",e,y.map(o=>({...o,selected:o.value===t})))}extremitySelector(t,e){var s;const o=((s=e.properties.style)==null?void 0:s[t])||"none",i=b.map(c=>({...c,icon:c.value==="arrow"&&t==="tail"?"arrow-left":c.value==="arrow"?"arrow-right":c.icon,selected:c.value===o,rotate:c.value==="arrow-plain"&&t==="tail"})),n=i.find(c=>c.selected)||i[0];return`<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t,n,i,`data-end="${t}"`)}</div>`}dropdown(t,e,o,i=""){return`<div class="custom-select" data-type="${t}" ${i}>
+      <div class="custom-select-trigger">
+        ${this.icon(e.icon,e.rotate)}
+        <span>${e.label}</span>
+        ${this.icon("chevron-down")}
+      </div>
+      <div class="custom-select-options">${o.map(n=>`
+        <div class="custom-select-option ${n.selected?"selected":""}" data-value="${n.value}" data-icon="${n.icon}" data-rotate="${n.rotate?"1":""}" title="${n.label}">
+          ${this.icon(n.icon,n.rotate)}
+          <span>${n.label}</span>
+        </div>
+      `).join("")}</div>
+    </div>`}slider(t,e,o,i,n){return`${this.section(t,`<div class="slider-section">
+      <input type="range" id="${e}-slider" class="slider" min="${i}" max="${n}" value="${o}">
+      <div class="slider-value"><span id="${e}-value">${o}</span></div>
+    </div>`)}`}lineTypeButtons(t){return`${this.section("Line type",`<div class="linetype-section">${k.map(({value:e,icon:o})=>`
+      <button class="linetype-button ${t===e?"active":""}" data-linetype="${e}" title="${e}">
+        ${this.icon(o)}
+      </button>
+    `).join("")}</div>`)}`}bind(){this.colorCircles=Array.from(this.panelBody.querySelectorAll("[data-index]")),this.colorCircles.forEach((t,e)=>{t.addEventListener("click",o=>{o.stopPropagation();const i=this.recent.activeIndex===e&&t.classList.contains("color-circle-primary");this.recent={...this.recent,activeIndex:e},this.currentColor=this.recent.colors[e],this.updateColorCircles(),i?this.toggleColorPicker(t):this.mode==="arrow"?this.updateStyle({strokeColor:this.currentColor}):this.mode==="text"&&this.updateStyle({strokeColor:this.currentColor})})}),this.updateColorCircles(),this.panelBody.querySelectorAll("[data-background-color]").forEach(t=>{t.addEventListener("click",()=>this.updateStyle({background:t.dataset.backgroundColor}))}),this.panelBody.querySelectorAll(".custom-select").forEach(t=>{const e=t.querySelector(".custom-select-trigger"),o=t.querySelectorAll(".custom-select-option");e.addEventListener("click",i=>{i.stopPropagation(),this.panelBody.querySelectorAll(".custom-select").forEach(n=>{n!==t&&n.classList.remove("open")}),t.classList.toggle("open")}),o.forEach(i=>{i.addEventListener("click",n=>{n.stopPropagation();const s=i.dataset.value;o.forEach(O=>O.classList.remove("selected")),i.classList.add("selected");const c=i.dataset.icon,d=i.dataset.rotate==="1",u=i.querySelector("span").textContent||"",h=e.querySelector("svg, span[style]");h&&(h.outerHTML=this.icon(c,d)),e.querySelector("span").textContent=u,t.classList.remove("open");const p=t.dataset.type,f=t.dataset.end;p==="font"?this.updateStyle({font:s}):f==="head"?this.updateStyle({head:s}):f==="tail"&&this.updateStyle({tail:s})})})}),["line-width","font-size"].forEach(t=>{const e=this.panelBody.querySelector(`#${t}-slider`),o=this.panelBody.querySelector(`#${t}-value`);e&&o&&e.addEventListener("input",()=>{const i=parseInt(e.value,10);o.textContent=i.toString(),t==="line-width"?this.updateStyle(this.mode==="text"?{strokeWidth:i,strokeColor:this.currentColor}:{strokeWidth:i}):t==="font-size"&&this.updateStyle({fontSize:i})})}),this.panelBody.querySelectorAll(".linetype-button").forEach(t=>{t.addEventListener("click",()=>{const e=t.dataset.linetype;this.panelBody.querySelectorAll(".linetype-button").forEach(o=>o.classList.remove("active")),t.classList.add("active"),this.updateStyle({strokeType:e})})})}updateColorFromAnnotation(t){this.recent=T(this.recent,t),this.currentColor=t}updateColorCircles(){this.colorCircles.forEach((t,e)=>{t.setAttribute("data-color",this.recent.colors[e]),t.style.setProperty("--circle-color",this.recent.colors[e]),t.classList.toggle("color-circle-primary",e===this.recent.activeIndex)})}toggleColorPicker(t){if(this.colorPickerOverlay){this.closeColorPicker();return}this.colorPickerOverlay=document.createElement("div"),this.colorPickerOverlay.className="color-picker-overlay",document.body.appendChild(this.colorPickerOverlay),this.colorPicker=E(),this.colorPicker.color=l.parseColor(this.currentColor),this.colorPickerOverlay.appendChild(this.colorPicker);const e=t.getBoundingClientRect();this.colorPickerOverlay.style.right=`${window.innerWidth-e.right}px`,this.colorPickerOverlay.style.top=`${e.bottom+10}px`,this.colorPicker.addEventListener("color-changed",o=>{this.currentColor=S(o.detail.value),this.recent.colors[this.recent.activeIndex]=this.currentColor,this.updateColorCircles(),this.mode==="arrow"?this.updateStyle({strokeColor:this.currentColor}):this.mode==="text"?this.updateStyle({color:this.currentColor}):this.mode==="polygon"&&this.updateStyle({strokeColor:this.currentColor})})}closeColorPicker(){this.colorPickerOverlay&&(this.colorPickerOverlay.remove(),this.colorPickerOverlay=null,this.colorPicker=null)}updateStyle(t){this.currentAnnotation&&(l.isArrow(this.currentAnnotation)?this.control.updateStyle(this.currentAnnotation.id,t):l.isPolygon(this.currentAnnotation)?this.control.updateStyle(this.currentAnnotation.id,t):this.control.updateStyle(this.currentAnnotation.id,t))}setPlacement(t){this.panel.dataset.placement=t}setOrientation(t){this.panel.dataset.orientation=t}show(){this.panel.style.display="block"}destroy(){this.closeColorPicker(),this.detachVisibility(),document.removeEventListener("click",this.documentClickHandler),this.panel.remove()}}const I="bottom",H="horizontal",g=["arrow","comment","sticky-note","box","text","polygon"];class q{constructor(t){a(this,"control");a(this,"root");a(this,"activeButton",null);a(this,"undoButton");a(this,"redoButton");a(this,"handleDrawingEnd",()=>this.setActiveMode(null));a(this,"handleHistory",()=>this.updateUndoRedo());this.control=t.control;const e=t.container??document.body;this.root=document.createElement("div"),this.root.className="annotation-toolbar",this.root.dataset.placement=t.placement??I,this.root.dataset.orientation=t.orientation??H,e.appendChild(this.root),["click","mousedown","mousemove"].forEach(s=>this.root.addEventListener(s,c=>c.stopPropagation()));const o=t.enabledTypes??g,i=t.styles??{};g.filter(s=>o.includes(s)).forEach(s=>this.root.appendChild(this.drawingButton(s,i))),o.length>0&&this.root.appendChild(this.separator()),this.undoButton=this.button(null,"undo","Undo",()=>this.control.undo()),this.redoButton=this.button(null,"redo","Redo",()=>this.control.redo()),this.root.appendChild(this.undoButton),this.root.appendChild(this.redoButton);const n=t.deleteMode??"erase";(n==="erase"||n==="both")&&(this.root.appendChild(this.separator()),this.root.appendChild(this.button("erase","eraser","Erase (click annotations to delete them)",()=>{this.control.isEraseModeActive()?(this.control.disableEraseMode(),this.setActiveMode(null)):(this.control.enableEraseMode(),this.setActiveMode("erase"))}))),(n==="select"||n==="both")&&(n==="select"&&this.root.appendChild(this.separator()),this.root.appendChild(this.button(null,"trash","Delete selected",()=>{const s=this.control.getSelectedAnnotations();s.features.length>0&&this.control.remove(s)}))),(t.onJsonExport||t.onSvgExport)&&(this.root.appendChild(this.separator()),t.onJsonExport&&this.root.appendChild(this.button(null,"download","Export annotations",t.onJsonExport)),t.onSvgExport&&this.root.appendChild(this.button(null,"camera","Export SVG",t.onSvgExport))),this.control.on(l.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.on(l.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.on(l.EVT_HISTORY,this.handleHistory),this.updateUndoRedo()}drawingButton(t,e){switch(t){case"arrow":return this.button("arrow","arrow-right","Add arrow",()=>{this.control.enableArrowDrawing({strokeType:"plain",strokeColor:"#3A03CF",strokeWidth:2,head:"arrow",...e.arrow}),this.setActiveMode("arrow")});case"comment":return this.button("comment","message-square","Add comment",()=>{var n,s,c,d;const o=(n=e.comment)==null?void 0:n.commentStyle,i=(s=e.comment)==null?void 0:s.arrowStyle;this.control.enableCommentDrawing({offsetX:((c=e.comment)==null?void 0:c.offsetX)??200,offsetY:((d=e.comment)==null?void 0:d.offsetY)??-150,commentStyle:{content:"",...o,style:{color:"#3A03CF",background:"#EDE6FF",fontSize:16,font:"IBM Plex Sans",...o==null?void 0:o.style}},arrowStyle:{...i,style:{strokeType:"plain",strokeColor:"#3A03CF",strokeWidth:2,head:"halo-dot",...i==null?void 0:i.style}}}),this.setActiveMode("comment")});case"sticky-note":return this.button("sticky-note","sticky-note","Add sticky note",()=>{this.control.enableStickyNoteDrawing({...e.stickyNote}),this.setActiveMode("sticky-note")});case"box":return this.button("box","rectangle-horizontal","Add box",()=>{this.control.enableBoxDrawing({background:"#EDE6FF",borderRadius:8,padding:12,...e.box}),this.setActiveMode("box")});case"text":return this.button("text","type","Add text",()=>{this.control.enableTextDrawing({font:"IBM Plex Sans",fontSize:24,color:"#3A03CF",background:"#EDE6FF",borderRadius:8,padding:12,...e.text}),this.setActiveMode("text")});case"polygon":return this.button("polygon","pentagon","Add polygon (click points, Esc to finish)",()=>{this.control.enablePolygonDrawing({strokeColor:"#3A03CF",strokeWidth:2,background:"rgba(58, 3, 207, 0.15)",...e.polygon}),this.setActiveMode("polygon")})}}button(t,e,o,i){const n=document.createElement("button");return n.dataset.tooltip=o,n.innerHTML=v(e,16),n.addEventListener("click",i),t&&(n.dataset.mode=t),n}separator(){const t=document.createElement("span");return t.className="separator",t}setActiveMode(t){this.activeButton&&this.activeButton.classList.remove("active"),this.activeButton=t?this.root.querySelector(`[data-mode="${t}"]`):null,this.activeButton&&this.activeButton.classList.add("active")}updateUndoRedo(){this.undoButton.disabled=!this.control.canUndo(),this.redoButton.disabled=!this.control.canRedo()}setPlacement(t){this.root.dataset.placement=t}setOrientation(t){this.root.dataset.orientation=t}destroy(){this.control.off(l.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.off(l.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.off(l.EVT_HISTORY,this.handleHistory),this.root.remove()}}exports.AnnotationPanel=R;exports.AnnotationToolbar=q;exports.BACKGROUNDS=C;exports.DEFAULT_PANEL_ORIENTATION=L;exports.DEFAULT_PANEL_PLACEMENT=P;exports.DEFAULT_RECENT_COLORS=A;exports.EXTREMITY_OPTIONS=b;exports.FONTS=y;exports.ICON_PATHS=M;exports.LINE_TYPES=k;exports.MAX_RECENT_COLORS=w;exports.attachPanelVisibility=$;exports.createRgbaColorPicker=E;exports.initialRecentColors=x;exports.rgbaToString=S;exports.svgIcon=v;exports.withColorFromAnnotation=T;