@linkurious/ogma-annotations 2.1.2 → 2.1.3

package/dist/ui-styles.css

@@ -481,93 +481,355 @@ input:checked + .toggle-slider:before {
   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 {
+/* --- Shared horizontal-toolbar system ---
+   `.oa-toolbar` is a bare marker class every toolbar bar in both packages
+   carries alongside its own root class (`.annotation-toolbar`,
+   `.annotation-style-toolbar`, React's `.add-menu`/`.view-controls`) -
+   it sets no properties of its own, it just wires up the shared tooltip
+   system below with a single selector instead of a 4-way list. `AddMenu`/
+   `ViewControls` keep their own bar layout and button visuals entirely
+   (`packages/react/src/ui/toolbar.css`) - only the marker is shared with
+   them. `.oa-toolbar-bar` is the actual shared bar layout, a *second*
+   class added only where core's own two toolbars want to look/behave
+   alike (row of small inset buttons) - kept separate from the marker so
+   applying it can't leak into `AddMenu`/`ViewControls`'s different design. */
+.oa-toolbar-bar {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 5px;
+  flex-direction: row;
+  gap: 3px;
+  padding: 0 4px;
+  min-height: 40px;
 }
 
 .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;
+/* Small inset button - used for every plain toolbar action/toggle
+   (AnnotationToolbar's drawing/undo/redo/erase/delete buttons,
+   TextAnnotationToolbar's Bold/Delete/author-toggle cells, a dropdown's
+   trigger). `position: relative` doubles as the tooltip's anchor. */
+.oa-toolbar-button {
+  position: relative;
+  margin: 1px;
+  padding: 4px;
   border: 1px solid transparent;
   cursor: pointer;
   border-radius: 5px;
   background: transparent;
-  color: var(--oa-muted-color);
+  color: var(--oa-muted-color, #666);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 }
 
-.annotation-toolbar button:hover {
-  background: var(--oa-control-bg);
-  color: var(--oa-text-color);
+.oa-toolbar-button:hover {
+  background: var(--oa-control-bg, #eee);
+  color: var(--oa-text-color, #333);
 }
 
-.annotation-toolbar button.active {
-  background: var(--oa-accent);
+.oa-toolbar-button.active {
+  background: var(--oa-accent, #3a03cf);
   color: #fff;
 }
 
-.annotation-toolbar button:disabled {
+.oa-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;
+.oa-toolbar-button-danger:hover {
+  color: #d92d20;
+}
+
+/* `align-self: stretch` (not a hardcoded height) so the divider always
+   matches the bar's actual height - driven by `.oa-toolbar-bar`'s
+   `min-height: 40px` today, but this way it can't fall out of sync if that
+   number ever changes. */
+.oa-toolbar-separator {
+  border-left: 1px solid var(--oa-toolbar-divider, #ccc);
+  margin: 0 3px;
+  align-self: stretch;
 }
 
-.annotation-toolbar[data-orientation="vertical"] .separator {
+.annotation-toolbar[data-orientation="vertical"] .oa-toolbar-separator {
   border-left: none;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--oa-toolbar-divider, #ccc);
+  align-self: auto;
   width: 20px;
   height: 0;
-  margin: 4px 0;
-}
-
-/* Tooltips, shown on hover via the `data-tooltip` attribute. */
-.annotation-toolbar [data-tooltip] {
+  margin: 3px 0;
+}
+
+/* Tooltips, shown on hover via the `data-tooltip` attribute - one
+   definition shared by every toolbar in both packages (anything carrying
+   `.oa-toolbar`; React's `AddMenu`/`ViewControls` import this stylesheet
+   wholesale, see `packages/react/src/ui/styles.css`, and add no tooltip CSS
+   of their own). Previously each toolbar had its own near-duplicate block
+   (slightly different colors/radius/offsets, addressed by an earlier
+   4-selector-list version of this comment); worth keeping as one rule set
+   so they can't drift out of sync, or - as happened once - collide when a
+   scoped and an unscoped copy both matched the same element and fought
+   over properties neither set (see the git history on this block for
+   that). Dark pill + pointer triangle, matching the Figma "Sticky Note
+   Toolbar" spec `TextAnnotationToolbar`'s cells were originally built
+   against. */
+.oa-toolbar [data-tooltip] {
   position: relative;
 }
 
-.annotation-toolbar [data-tooltip]::after {
-  content: attr(data-tooltip);
+.oa-toolbar [data-tooltip]::after,
+.oa-toolbar [data-tooltip]::before {
   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;
+  transform: translateX(-50%);
   pointer-events: none;
-  z-index: 99;
   opacity: 0;
   transition: opacity 0.15s;
+  z-index: 99;
+}
+
+/* margin-bottom (not `bottom: calc(100% - Npx)` + a shared translateY) so
+   the pill and the triangle below it stack with a clean, exact seam - the
+   triangle's `border` trick makes its box 0-height, so its margin-bottom
+   directly sets the gap between the pill's bottom edge and the target;
+   getting this via two competing `bottom`/`transform` offsets previously
+   left the triangle's flat top 2px inside the pill's own box, where the
+   pill (painted after, per pseudo-element order) covered all but a sliver
+   of it - functionally invisible. */
+.oa-toolbar [data-tooltip]::after {
+  content: attr(data-tooltip);
+  margin-bottom: 8px;
+  background: var(--oa-tooltip-bg, #303030);
+  color: var(--oa-tooltip-fg, #ffffff);
+  white-space: nowrap;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.oa-toolbar [data-tooltip]::before {
+  content: "";
+  margin-bottom: 0px;
+  border: 4px solid transparent;
+  border-top-color: var(--oa-tooltip-bg, #303030);
 }
 
-.annotation-toolbar [data-tooltip]:hover::after {
+.oa-toolbar [data-tooltip]:hover::after,
+.oa-toolbar [data-tooltip]:hover::before {
   opacity: 1;
 }
+
+/* --- Floating text-annotation toolbar (TextAnnotationToolbar) ---
+   Anchored above the selected Text/sticky-note annotation via an Ogma
+   overlay layer, not docked like `.annotation-panel`/`.annotation-toolbar`
+   above. `.annotation-style-toolbar-anchor` is the element handed to
+   `ogma.layers.addOverlay()` - Ogma writes its own `transform`
+   (translate/rotate/scale) onto it directly on every pan/zoom/rotate, so it
+   must stay zero-size and untouched by our own CSS `transform`.
+   `.annotation-style-toolbar` (the actual visible pill, a child of the
+   anchor) carries all the positioning that's ours to set - centered
+   horizontally and lifted fully above the anchor point - plus every visual
+   rule. Keeping the two separate is what avoids fighting Ogma for control
+   of one element's `transform` property.
+
+   z-index: this overlay is a sibling of every other Ogma layer inside the
+   same container (Shapes, the resize-Handles canvas, a TextArea edit
+   overlay) - without an explicit z-index it paints in creation order,
+   which (Handles is created once, early, at Control construction, long
+   before any selection) puts it *underneath* the note it's editing and
+   the resize handles around it. `Handles` (`renderer/handles.ts`) hits the
+   same problem the other way and fixes it the same way: a permanent CSS
+   z-index, no reordering. 1000 is Handles' own value (to stay above a
+   TextArea edit overlay); this needs to beat *that*, hence 1100. */
+.annotation-style-toolbar-anchor {
+  position: relative;
+  width: 0;
+  height: 0;
+  z-index: 1100;
+}
+
+/* Slide-up-and-fade on appear. A fresh `.annotation-style-toolbar` element
+   is created every time the pill (re)appears (see `AnnotationStyleToolbar`
+   - `TextAnnotationToolbar` destroys and recreates it, never reuses one
+   across a hide/show), so this just replays naturally on each mount - no
+   JS needed. Only animates `transform`/`opacity`, which are exclusively
+   this element's own (Ogma only ever touches its parent
+   `.annotation-style-toolbar-anchor`'s transform - see that rule's own
+   comment), so there's nothing here to fight for control of either
+   property. */
+@keyframes oa-toolbar-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-100% + 6px));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+  }
+}
+
+.annotation-style-toolbar {
+  --oa-toolbar-bg: #ffffff;
+  --oa-toolbar-radius: 12px;
+  --oa-toolbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -100%);
+  animation: oa-toolbar-pop-in 150ms ease-out;
+
+  background: var(--oa-toolbar-bg);
+  border-radius: var(--oa-toolbar-radius);
+  box-shadow: var(--oa-toolbar-shadow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .annotation-style-toolbar {
+    animation: none;
+  }
+}
+
+/* The dropdown cells' (Color, Font family, Font size) outer wrapper - just
+   a popover-positioning context, all visible styling is on
+   `.oa-toolbar-dropdown-trigger` (an `.oa-toolbar-button`) inside it. */
+.oa-toolbar-dropdown {
+  position: relative;
+}
+
+.oa-toolbar-dropdown-trigger {
+  font-size: 14px;
+}
+
+.oa-toolbar-dropdown-label:empty {
+  display: none;
+}
+
+.oa-toolbar-dropdown-chevron {
+  display: inline-flex;
+  transition: transform 0.15s;
+}
+
+.oa-toolbar-dropdown.open .oa-toolbar-dropdown-chevron {
+  transform: rotate(180deg);
+}
+
+.oa-toolbar-dropdown-panel {
+  display: none;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--oa-toolbar-bg);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+  z-index: 1;
+}
+
+.oa-toolbar-dropdown.open .oa-toolbar-dropdown-panel {
+  display: block;
+}
+
+.oa-toolbar-dropdown-option {
+  display: block;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 6px 12px;
+  font-size: 14px;
+  text-align: left;
+  white-space: nowrap;
+  border-radius: 4px;
+  color: var(--oa-text-color, #333);
+}
+
+.oa-toolbar-dropdown-option:hover {
+  background: var(--oa-control-bg, #eee);
+}
+
+/* Color cell */
+.oa-toolbar-swatch {
+  --oa-swatch-fill: #fff;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--oa-swatch-fill);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  flex-shrink: 0;
+}
+
+.oa-toolbar-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 28px);
+  gap: 4px;
+}
+
+.oa-toolbar-swatch-cell {
+  --oa-swatch-fill: #fff;
+  --oa-swatch-stroke: #ccc;
+  width: 28px;
+  height: 28px;
+  border-radius: 2px;
+  border: none;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.oa-toolbar-swatch-cell::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--oa-swatch-fill);
+  border: 1px solid var(--oa-swatch-stroke);
+}
+
+/* "transparent" swatch - a checkerboard circle instead of a solid fill
+   (which, for `background: transparent`, would be indistinguishable from
+   an empty/missing swatch against the white cell/trigger behind it). Same
+   "no fill" convention `ui/config.ts`'s `BACKGROUNDS` already uses for the
+   docked `AnnotationPanel`, just drawn instead of dashed-bordered since
+   these swatches are filled circles, not outlined ones. */
+.oa-toolbar-swatch-transparent,
+.oa-toolbar-swatch-cell-transparent::after {
+  background-image: conic-gradient(
+    #ccc 90deg,
+    transparent 90deg 180deg,
+    #ccc 180deg 270deg,
+    transparent 270deg
+  );
+  background-size: 8px 8px;
+  background-color: #fff;
+}
+
+.oa-toolbar-more-colors {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  border: none;
+  border-top: 1px solid var(--oa-toolbar-divider, #ccc);
+  background: transparent;
+  cursor: pointer;
+  padding: 8px 4px 0;
+  font-size: 13px;
+  color: var(--oa-muted-color, #666);
+  text-align: center;
+}
+
+.oa-toolbar-more-colors:hover {
+  color: var(--oa-text-color, #333);
+}
+
+.oa-toolbar-more-colors-host {
+  margin-top: 8px;
+}

package/dist/ui.js

@@ -1,48 +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=`
+"use strict";var j=Object.defineProperty;var X=(s,t,e)=>t in s?j(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var r=(s,t,e)=>X(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("vanilla-colorful/lib/entrypoints/rgba"),c=require("./Polygon-DVGwsFvt.cjs"),C="rgba-color-picker";class J extends K.RgbaBase{}function k(){return customElements.get(C)||customElements.define(C,J),document.createElement(C)}const x=[{value:"#f5f5f5",style:"--circle-color: #f5f5f5;"},{value:"#EDE6FF",style:"--circle-color: #EDE6FF;"},{value:"transparent",style:"--circle-color: white; border: 2px dashed #ccc;"}],g=[{value:"sans-serif",label:"Sans Serif",icon:"type"},{value:"serif",label:"Serif",icon:"italic"},{value:"monospace",label:"Monospace",icon:"code"}],P=[{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"}],L=[{value:"plain",icon:"circle"},{value:"dashed",icon:"circle-dashed"}],M=["#0099FF","#FF7523","#44AA99"];function E(s){return`rgba(${s.r}, ${s.g}, ${s.b}, ${s.a})`}const N=3;function $(){return{colors:[...M],activeIndex:0}}function F(s,t){const e=s.colors.indexOf(t);return e===-1?{colors:[t,...s.colors].slice(0,N),activeIndex:0}:{colors:s.colors,activeIndex:e}}const O={"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"/>',bold:'<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/>',user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',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 y(s,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">${O[s]}</svg>`}const Z=150;function A(s,{onShow:t,onHide:e,hideWhenNotEditable:o=!0}){const n=u=>!o||s.isAnnotationEditable(u);let i=null,a=null,h=null,p=null;const d=()=>{p!==null&&(clearTimeout(p),p=null)},l=()=>{if(d(),i){const u=i;i=null,n(u.id)?(a=u,t(u)):m();return}if(!a&&h!=null){const u=s.getAnnotation(h);u&&n(u.id)&&(a=u,t(u))}},m=()=>{d(),i=null,a=null,e()},f=u=>{if(d(),u.ids.length===1){const b=s.getAnnotation(u.ids[0]);if(!b)return;if(h=u.ids[0],i=b,s.isDrawing()){s.once("cancelDrawing",l),s.once("completeDrawing",l);return}p=setTimeout(l,Z)}else h=null,m()},v=()=>m(),w=u=>{const b=i??a;b&&!u.ids.includes(b.id)||(h=null,m())};return s.on("select",f),s.on("click",l),s.on("dragend",l),s.on("dragstart",v),s.on("unselect",w),()=>{d(),s.off("select",f),s.off("click",l),s.off("dragend",l),s.off("dragstart",v),s.off("unselect",w),s.off("cancelDrawing",l),s.off("completeDrawing",l)}}const B="right",I="vertical",_=["arrow","text","box","comment","polygon"];function D(s){return c.isArrow(s)?"arrow":c.isText(s)?"text":c.isBox(s)?"box":c.isComment(s)?"comment":c.isPolygon(s)?"polygon":null}class Q{constructor(t){r(this,"control");r(this,"panel");r(this,"panelBody");r(this,"mode",null);r(this,"currentAnnotation",null);r(this,"currentColor","#0099FF");r(this,"recent",$());r(this,"colorCircles",[]);r(this,"colorPickerOverlay",null);r(this,"colorPicker",null);r(this,"detachVisibility");r(this,"documentClickHandler");r(this,"enabledTypes");r(this,"hide",()=>{this.panel.style.display="none",this.closeColorPicker(),this.currentAnnotation=null,this.mode=null});this.control=t.control,this.enabledTypes=t.enabledTypes??_;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??B,this.panel.dataset.orientation=t.orientation??I,this.panelBody=document.createElement("div"),this.panelBody.className="panel-body",this.panel.appendChild(this.panelBody),e.appendChild(this.panel),this.detachVisibility=A(this.control,{onShow:o=>{const n=D(o);if(!n||!this.enabledTypes.includes(n)){this.hide();return}this.setAnnotation(o),this.show()},onHide:this.hide,hideWhenNotEditable:t.hideWhenNotEditable}),["click","mousedown","mousemove"].forEach(o=>this.panel.addEventListener(o,n=>n.stopPropagation())),this.documentClickHandler=o=>{this.colorPickerOverlay&&!this.colorPickerOverlay.contains(o.target)&&!this.colorCircles.some(n=>n.contains(o.target))&&this.closeColorPicker(),this.panelBody.querySelectorAll(".custom-select").forEach(n=>n.classList.remove("open"))},document.addEventListener("click",this.documentClickHandler)}setAnnotation(t){this.currentAnnotation=t,c.isArrow(t)?(this.mode="arrow",this.renderArrow(t)):c.isText(t)||c.isBox(t)||c.isComment(t)?(this.mode="text",this.renderText(t)):c.isPolygon(t)&&(this.mode="polygon",this.renderPolygon(t))}renderArrow(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.strokeColor||c.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.slider("Stroke width","line-width",e.strokeWidth||c.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.bind()}renderText(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.color||c.defaultTextStyle.color);const o=typeof e.fontSize=="number"?e.fontSize:typeof c.defaultTextStyle.fontSize=="number"?c.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.section("Background",this.backgroundSelector(e.background||c.defaultTextStyle.background))}
+      ${this.section("Font",`<div class="custom-select-section">${this.fontSelector(e.font||c.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.slider("Stroke width","line-width",e.strokeWidth||c.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)=>`
+    `,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)">${y(t)}</span>`:y(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})=>`
+    `).join("")}</div>`}backgroundSelector(t){return`<div class="color-selector">${x.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}>
+    `).join("")}</div>`}fontSelector(t){const e=g.find(o=>o.value===t)||g[0];return this.dropdown("font",e,g.map(o=>({...o,selected:o.value===t})))}extremitySelector(t,e){var a;const o=((a=e.properties.style)==null?void 0:a[t])||"none",n=P.map(h=>({...h,icon:h.value==="arrow"&&t==="tail"?"arrow-left":h.value==="arrow"?"arrow-right":h.icon,selected:h.value===o,rotate:h.value==="arrow-plain"&&t==="tail"})),i=n.find(h=>h.selected)||n[0];return`<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t,i,n,`data-end="${t}"`)}</div>`}dropdown(t,e,o,n=""){return`<div class="custom-select" data-type="${t}" ${n}>
       <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 class="custom-select-options">${o.map(i=>`
+        <div class="custom-select-option ${i.selected?"selected":""}" data-value="${i.value}" data-icon="${i.icon}" data-rotate="${i.rotate?"1":""}" title="${i.label}">
+          ${this.icon(i.icon,i.rotate)}
+          <span>${i.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>`}slider(t,e,o,n,i){return`${this.section(t,`<div class="slider-section">
+      <input type="range" id="${e}-slider" class="slider" min="${n}" max="${i}" 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})=>`
+    </div>`)}`}lineTypeButtons(t){return`${this.section("Line type",`<div class="linetype-section">${L.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;
+    `).join("")}</div>`)}`}bind(){this.colorCircles=Array.from(this.panelBody.querySelectorAll("[data-index]")),this.colorCircles.forEach((t,e)=>{t.addEventListener("click",o=>{o.stopPropagation();const n=this.recent.activeIndex===e&&t.classList.contains("color-circle-primary");this.recent={...this.recent,activeIndex:e},this.currentColor=this.recent.colors[e],this.updateColorCircles(),n?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",n=>{n.stopPropagation(),this.panelBody.querySelectorAll(".custom-select").forEach(i=>{i!==t&&i.classList.remove("open")}),t.classList.toggle("open")}),o.forEach(n=>{n.addEventListener("click",i=>{i.stopPropagation();const a=n.dataset.value;o.forEach(v=>v.classList.remove("selected")),n.classList.add("selected");const h=n.dataset.icon,p=n.dataset.rotate==="1",d=n.querySelector("span").textContent||"",l=e.querySelector("svg, span[style]");l&&(l.outerHTML=this.icon(h,p)),e.querySelector("span").textContent=d,t.classList.remove("open");const m=t.dataset.type,f=t.dataset.end;m==="font"?this.updateStyle({font:a}):f==="head"?this.updateStyle({head:a}):f==="tail"&&this.updateStyle({tail:a})})})}),["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 n=parseInt(e.value,10);o.textContent=n.toString(),t==="line-width"?this.updateStyle(this.mode==="text"?{strokeWidth:n,strokeColor:this.currentColor}:{strokeWidth:n}):t==="font-size"&&this.updateStyle({fontSize:n})})}),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=F(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=k(),this.colorPicker.color=c.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=E(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&&(c.isArrow(this.currentAnnotation)?this.control.updateStyle(this.currentAnnotation.id,t):c.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 tt="bottom",et="horizontal",T=["arrow","comment","sticky-note","box","text","polygon"];class ot{constructor(t){r(this,"control");r(this,"root");r(this,"activeButton",null);r(this,"undoButton");r(this,"redoButton");r(this,"handleDrawingEnd",()=>this.setActiveMode(null));r(this,"handleHistory",()=>this.updateUndoRedo());this.control=t.control;const e=t.container??document.body;this.root=document.createElement("div"),this.root.className="annotation-toolbar oa-toolbar oa-toolbar-bar",this.root.dataset.placement=t.placement??tt,this.root.dataset.orientation=t.orientation??et,e.appendChild(this.root),["click","mousedown","mousemove"].forEach(a=>this.root.addEventListener(a,h=>h.stopPropagation()));const o=t.enabledTypes??T,n=t.styles??{};T.filter(a=>o.includes(a)).forEach(a=>this.root.appendChild(this.drawingButton(a,n))),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 i=t.deleteMode??"erase";(i==="erase"||i==="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"))}))),(i==="select"||i==="both")&&(i==="select"&&this.root.appendChild(this.separator()),this.root.appendChild(this.button(null,"trash","Delete selected",()=>{const h=this.control.getSelectedAnnotations().features.filter(p=>this.control.isAnnotationEditable(p.id));h.length>0&&this.control.remove({type:"FeatureCollection",features:h})}))),(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(c.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.on(c.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.on(c.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 i,a,h,p;const o=(i=e.comment)==null?void 0:i.commentStyle,n=(a=e.comment)==null?void 0:a.arrowStyle;this.control.enableCommentDrawing({offsetX:((h=e.comment)==null?void 0:h.offsetX)??200,offsetY:((p=e.comment)==null?void 0:p.offsetY)??-150,commentStyle:{content:"",...o,style:{color:"#3A03CF",background:"#EDE6FF",fontSize:16,font:"IBM Plex Sans",...o==null?void 0:o.style}},arrowStyle:{...n,style:{strokeType:"plain",strokeColor:"#3A03CF",strokeWidth:2,head:"halo-dot",...n==null?void 0:n.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,n){const i=document.createElement("button");return i.className="oa-toolbar-button",i.dataset.tooltip=o,i.innerHTML=y(e,16),i.addEventListener("click",n),t&&(i.dataset.mode=t),i}separator(){const t=document.createElement("span");return t.className="oa-toolbar-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(c.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.off(c.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.off(c.EVT_HISTORY,this.handleHistory),this.root.remove()}}class H{constructor(t,e){r(this,"element");r(this,"onClick",()=>{this.item.action(this.ctx)});this.ctx=t,this.item=e,this.element=document.createElement("button"),this.element.type="button",this.element.className=e.danger?"oa-toolbar-button oa-toolbar-button-danger":"oa-toolbar-button",this.element.dataset.tooltip=e.title,this.element.innerHTML=y(e.icon,16),this.element.addEventListener("click",this.onClick)}update(t){if(!this.item.isActive)return;const e=this.item.isActive(t);this.element.classList.toggle("active",e),this.element.setAttribute("aria-pressed",String(e))}destroy(){this.element.removeEventListener("click",this.onClick)}}function R(s,t){const e=document.createElement("div");e.className="oa-toolbar-dropdown";const o=document.createElement("button");o.type="button",o.className="oa-toolbar-button oa-toolbar-dropdown-trigger",o.dataset.tooltip=s;const n=document.createElement("span");n.className="oa-toolbar-dropdown-label",n.textContent=t;const i=document.createElement("span");i.className="oa-toolbar-dropdown-chevron",i.innerHTML=y("chevron-down",14),o.appendChild(n),o.appendChild(i);const a=document.createElement("div");a.className="oa-toolbar-dropdown-panel";const h=()=>e.classList.remove("open");return o.addEventListener("click",p=>{var l;p.stopPropagation();const d=!e.classList.contains("open");(l=e.closest(".annotation-style-toolbar"))==null||l.querySelectorAll(".oa-toolbar-dropdown.open").forEach(m=>{m!==e&&m.classList.remove("open")}),e.classList.toggle("open",d)}),e.appendChild(o),e.appendChild(a),{element:e,panel:a,close:h,setLabel:p=>{n.textContent=p}}}class z{constructor(t,e){r(this,"element");r(this,"dropdown");this.ctx=t,this.item=e,this.dropdown=R(e.title,""),this.element=this.dropdown.element,e.options.forEach(o=>{const n=document.createElement("button");n.type="button",n.className="oa-toolbar-dropdown-option",n.textContent=o.label,o.style&&Object.assign(n.style,o.style),n.addEventListener("click",i=>{i.stopPropagation(),e.onSelect(o.value,this.ctx),this.dropdown.close()}),this.dropdown.panel.appendChild(n)})}update(t){const e=this.item.getValue(t),o=this.item.options.find(i=>i.value===e),n=this.item.getLabel?this.item.getLabel(e,t):(o==null?void 0:o.label)??`${e}`;this.dropdown.setLabel(n),this.element.title=(o==null?void 0:o.label)??`${e}`}destroy(){}}const nt=12;class V{constructor(t,e){r(this,"control");r(this,"ogma");r(this,"options");r(this,"annotationId");r(this,"overlay");r(this,"anchor");r(this,"root");r(this,"cells",[]);r(this,"documentClickHandler",t=>{this.root.contains(t.target)||this.root.querySelectorAll(".oa-toolbar-dropdown.open").forEach(e=>e.classList.remove("open"))});this.control=t.control,this.options=t,this.ogma=this.control.getOgma(),this.annotationId=e.id,this.anchor=document.createElement("div"),this.anchor.className="annotation-style-toolbar-anchor",this.root=document.createElement("div"),this.root.className="annotation-style-toolbar oa-toolbar oa-toolbar-bar",this.anchor.appendChild(this.root),["click","mousedown","mousemove"].forEach(n=>this.root.addEventListener(n,i=>i.stopPropagation()));const o={getAnnotation:()=>this.control.getAnnotation(this.annotationId),updateStyle:n=>this.control.updateStyle(this.annotationId,n),deleteAnnotation:()=>{const n=this.control.getAnnotation(this.annotationId);n&&this.control.remove(n)}};this.setItems(this.getItems(o),o),this.cells.forEach(n=>n.update(e)),this.overlay=this.ogma.layers.addOverlay({element:this.anchor,position:this.getAnchor(e),scaled:!1}),document.addEventListener("click",this.documentClickHandler)}buildCell(t,e){switch(t.kind){case"separator":return null;case"custom":return t.build(e);case"button":return new H(e,t);case"dropdown":return new z(e,t)}}setItems(t,e){this.cells=[],t.forEach(o=>{if(o.kind==="separator"){const i=document.createElement("span");i.className="oa-toolbar-separator",this.root.appendChild(i);return}const n=this.buildCell(o,e);this.cells.push(n),this.root.appendChild(n.element)})}getAnchor(t){var l;const e=this.control.getZoom(),o=this.control.getRotation(),n=((l=t.properties.style)==null?void 0:l.fixedSize)===!0;let{height:i}=c.getBoxSize(t);n&&(i/=e);const a=c.getBoxCenter(t),h=-(i/2+nt/e),p=Math.sin(o),d=Math.cos(o);return{x:a.x-h*p,y:a.y+h*d}}update(t){this.cells.forEach(e=>e.update(t)),this.overlay.setPosition(this.getAnchor(t))}destroy(){document.removeEventListener("click",this.documentClickHandler),this.cells.forEach(t=>t.destroy()),this.overlay.destroy()}}class W{constructor(t,e){r(this,"element");r(this,"dropdown");r(this,"swatch");r(this,"more");r(this,"morePicker",null);r(this,"morePickerHost",null);this.ctx=t,this.options=e;const{swatches:o}=e;this.dropdown=R("Color",""),this.element=this.dropdown.element,this.element.classList.add("oa-toolbar-color-cell"),this.swatch=document.createElement("span"),this.swatch.className="oa-toolbar-swatch",this.dropdown.element.querySelector(".oa-toolbar-dropdown-trigger").insertBefore(this.swatch,this.dropdown.element.querySelector(".oa-toolbar-dropdown-label"));const n=document.createElement("div");n.className="oa-toolbar-swatch-grid",o.forEach(i=>{const a=document.createElement("button");a.type="button",a.className="oa-toolbar-swatch-cell",a.classList.toggle("oa-toolbar-swatch-cell-transparent",i.fill==="transparent"),a.title=i.fill,a.style.setProperty("--oa-swatch-fill",i.fill),a.style.setProperty("--oa-swatch-stroke",i.stroke),a.addEventListener("click",h=>{h.stopPropagation(),this.pick(i.fill),this.dropdown.close()}),n.appendChild(a)}),this.dropdown.panel.appendChild(n),this.more=document.createElement("button"),this.more.type="button",this.more.className="oa-toolbar-more-colors",this.more.textContent="More colors…",this.more.addEventListener("click",i=>{i.stopPropagation(),this.openMorePicker()}),this.dropdown.panel.appendChild(this.more)}pick(t){this.ctx.updateStyle({background:t})}openMorePicker(){var e;if(this.options.onMoreColors){this.dropdown.close(),this.options.onMoreColors(this.ctx,this.more);return}if(this.morePickerHost){this.closeMorePicker();return}this.morePickerHost=document.createElement("div"),this.morePickerHost.className="oa-toolbar-more-colors-host",this.morePicker=k();const t=((e=this.ctx.getAnnotation().properties.style)==null?void 0:e.background)||c.defaultTextStyle.background;this.morePicker.color=c.parseColor(t),this.morePicker.addEventListener("color-changed",o=>{this.pick(E(o.detail.value))}),this.morePickerHost.appendChild(this.morePicker),this.dropdown.panel.appendChild(this.morePickerHost)}closeMorePicker(){var t;(t=this.morePickerHost)==null||t.remove(),this.morePickerHost=null,this.morePicker=null}update(t){var o;const e=((o=t.properties.style)==null?void 0:o.background)||c.defaultTextStyle.background;this.swatch.style.setProperty("--oa-swatch-fill",e),this.swatch.classList.toggle("oa-toolbar-swatch-transparent",e==="transparent")}destroy(){this.closeMorePicker()}}const U=[{fill:"#FFE49B",stroke:"#D9A926"},{fill:"#FFC8A7",stroke:"#CC8C66"},{fill:"#FFA7B5",stroke:"#C2707D"},{fill:"#D9F3B0",stroke:"#A2C270"},{fill:"#C7F7EF",stroke:"#8CD9CC"},{fill:"#99D6FF",stroke:"#5CA5D6"},{fill:"#D1C7FA",stroke:"#9B8CD9"},{fill:"#C3DAFE",stroke:"#668ECC"},{fill:"transparent",stroke:"#CCCCCC"}],q=[{value:"sans-serif",label:"Sans Serif"},{value:"serif",label:"Serif",style:{fontFamily:"serif"}},{value:"monospace",label:"Monospace",style:{fontFamily:"monospace"}},{value:"IBM Plex Sans",label:"IBM Plex Sans",style:{fontFamily:"IBM Plex Sans"}},{value:"IBM Plex Mono",label:"IBM Plex Mono",style:{fontFamily:"IBM Plex Mono"}}],Y=[12,14,16,18,24,32,48,64];class S extends V{getItems(t){var h,p;const e=this.options.fonts??q,o=this.options.fontSizes??Y,n=this.options.swatches??U,i=this.options.onMoreColors,a=[{kind:"custom",id:"color",build:d=>new W(d,{swatches:n,onMoreColors:i})},{kind:"separator"},{kind:"dropdown",id:"font",title:"Font",options:e,getValue:d=>{var l;return((l=d.properties.style)==null?void 0:l.font)||c.defaultTextStyle.font},getLabel:()=>"Aa",onSelect:(d,l)=>l.updateStyle({font:`${d}`})},{kind:"dropdown",id:"fontSize",title:"Font size",options:o.map(d=>({value:d,label:`${d}`})),getValue:d=>{const l=d.properties.style;return Math.round(c.getEffectiveFontSize((l==null?void 0:l.fontSize)??c.defaultTextStyle.fontSize,l==null?void 0:l.fontScale))},onSelect:(d,l)=>l.updateStyle({fontSize:d,fontScale:1})},{kind:"separator"},{kind:"button",id:"bold",title:"Bold",icon:"bold",isActive:d=>{var l;return((l=d.properties.style)==null?void 0:l.fontWeight)==="bold"},action:d=>{var m;const l=((m=d.getAnnotation().properties.style)==null?void 0:m.fontWeight)==="bold";d.updateStyle({fontWeight:l?"normal":"bold"})}},{kind:"separator"},{kind:"button",id:"showAuthor",title:"Show author",icon:"user",isActive:d=>{var l;return((l=d.properties.style)==null?void 0:l.showAuthor)===!0},action:d=>{var m;const l=((m=d.getAnnotation().properties.style)==null?void 0:m.showAuthor)===!0;d.updateStyle({showAuthor:!l})}},{kind:"separator"},{kind:"button",id:"delete",title:"Delete",icon:"trash",danger:!0,action:d=>d.deleteAnnotation()}];return((p=(h=this.options).items)==null?void 0:p.call(h,a,t))??a}}class G extends S{}class it{constructor(t){r(this,"control");r(this,"options");r(this,"current",null);r(this,"detachVisibility");r(this,"handleUpdate",t=>{this.current&&t.id===this.current.annotationId&&c.isText(t)&&this.current.update(t)});this.control=t.control,this.options=t,this.detachVisibility=A(this.control,{onShow:e=>this.show(e),onHide:()=>this.hide(),hideWhenNotEditable:t.hideWhenNotEditable}),this.control.on(c.EVT_UPDATE,this.handleUpdate)}show(t){if(!c.isText(t)){this.hide();return}const e=c.isStickyNote(t)?G:S;if(this.current&&this.current.annotationId===t.id&&this.current instanceof e){this.current.update(t);return}this.hide(),this.current=new e(this.options,t)}hide(){var t;(t=this.current)==null||t.destroy(),this.current=null}destroy(){this.detachVisibility(),this.control.off(c.EVT_UPDATE,this.handleUpdate),this.hide()}}exports.ALL_PANEL_ANNOTATION_TYPES=_;exports.AnnotationPanel=Q;exports.AnnotationStyleToolbar=V;exports.AnnotationToolbar=ot;exports.BACKGROUNDS=x;exports.ButtonItemCell=H;exports.ColorCell=W;exports.DEFAULT_PANEL_ORIENTATION=I;exports.DEFAULT_PANEL_PLACEMENT=B;exports.DEFAULT_RECENT_COLORS=M;exports.DEFAULT_TOOLBAR_FONTS=q;exports.DEFAULT_TOOLBAR_FONT_SIZES=Y;exports.DropdownItemCell=z;exports.EXTREMITY_OPTIONS=P;exports.FONTS=g;exports.ICON_PATHS=O;exports.LINE_TYPES=L;exports.MAX_RECENT_COLORS=N;exports.STICKY_SWATCHES=U;exports.StickyNoteStyleToolbar=G;exports.TextAnnotationToolbar=it;exports.TextStyleToolbar=S;exports.attachPanelVisibility=A;exports.classifyPanelAnnotationType=D;exports.createRgbaColorPicker=k;exports.initialRecentColors=$;exports.rgbaToString=E;exports.svgIcon=y;exports.withColorFromAnnotation=F;