@linkurious/ogma-annotations 2.1.2 → 2.1.4

package/dist/ui-styles.css

@@ -406,6 +406,7 @@ input:checked + .toggle-slider:before {
   cursor: pointer;
   padding: 0 8px;
   font-size: 14px;
+  font-family: inherit;
   color: var(--oa-text-color);
   display: flex;
   align-items: center;
@@ -462,6 +463,13 @@ input:checked + .toggle-slider:before {
   transition: background 0.15s;
   font-size: 14px;
   color: var(--oa-text-color);
+  /* Neutralize UA <button> chrome - these rows are real buttons (keyboard
+     focusable, role="option") rather than divs, see
+     packages/react/src/ui/controllers/{Font,Extremity}Controller.tsx. */
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: inherit;
 }
 
 .custom-select-option:hover {
@@ -481,93 +489,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;
 }
 
-.annotation-toolbar[data-orientation="vertical"] .separator {
+/* `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"] .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;
 }
 
-.annotation-toolbar [data-tooltip]:hover::after {
+/* 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);
+}
+
+.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 c=(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"),h=require("./Polygon-BLMsKlFz.cjs"),C="rgba-color-picker";class J extends K.RgbaBase{}function k(){return customElements.get(C)||customElements.define(C,J),document.createElement(C)}const T=[{value:"#f5f5f5",style:"--circle-color: #f5f5f5;"},{value:"#EDE6FF",style:"--circle-color: #EDE6FF;"},{value:"transparent",style:"--circle-color: white; border: 2px dashed #ccc;"}],A=[{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 $=3;function N(){return{colors:[...M],activeIndex:0}}function O(s,t){const e=s.colors.indexOf(t);return e===-1?{colors:[t,...s.colors].slice(0,$),activeIndex:0}:{colors:s.colors,activeIndex:e}}const B={"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 f(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" aria-hidden="true">${B[s]}</svg>`}const Z=150;function S(s,{onShow:t,onHide:e,hideWhenNotEditable:o=!0}){const i=m=>!o||s.isAnnotationEditable(m);let n=null,r=null,d=null,u=null;const a=()=>{u!==null&&(clearTimeout(u),u=null)},l=()=>{if(a(),n){const m=n;n=null,i(m.id)?(r=m,t(m)):p();return}if(!r&&d!=null){const m=s.getAnnotation(d);m&&i(m.id)&&(r=m,t(m))}},p=()=>{a(),n=null,r=null,e()},b=m=>{if(a(),m.ids.length===1){const v=s.getAnnotation(m.ids[0]);if(!v)return;if(d=m.ids[0],n=v,s.isDrawing()){s.once("cancelDrawing",l),s.once("completeDrawing",l);return}u=setTimeout(l,Z)}else d=null,p()},y=()=>p(),g=m=>{const v=n??r;v&&!m.ids.includes(v.id)||(d=null,p())};return s.on("select",b),s.on("click",l),s.on("dragend",l),s.on("dragstart",y),s.on("unselect",g),()=>{a(),s.off("select",b),s.off("click",l),s.off("dragend",l),s.off("dragstart",y),s.off("unselect",g),s.off("cancelDrawing",l),s.off("completeDrawing",l)}}const F="right",I="vertical",_=["arrow","text","box","comment","polygon"];function D(s){return h.isArrow(s)?"arrow":h.isText(s)?"text":h.isBox(s)?"box":h.isComment(s)?"comment":h.isPolygon(s)?"polygon":null}class Q{constructor(t){c(this,"control");c(this,"panel");c(this,"panelBody");c(this,"mode",null);c(this,"currentAnnotation",null);c(this,"currentColor","#0099FF");c(this,"recent",N());c(this,"colorCircles",[]);c(this,"colorPickerOverlay",null);c(this,"colorPicker",null);c(this,"detachVisibility");c(this,"documentClickHandler");c(this,"enabledTypes");c(this,"hide",()=>{this.panel.style.display="none",this.closeColorPicker(),this.currentAnnotation=null,this.mode=null});var i,n,r,d;this.control=t.control,this.enabledTypes=t.enabledTypes??_;const e=t.container??document.body,o=(d=(r=(n=(i=this.control).getOgma)==null?void 0:n.call(i))==null?void 0:r.getContainer)==null?void 0:d.call(r);!t.container&&o&&o!==document.body&&console.error("[ogma-annotations-control] AnnotationPanel: no `container` option given, defaulting to document.body. If this panel should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."),this.panel=document.createElement("div"),this.panel.className="annotation-panel",this.panel.setAttribute("role","region"),this.panel.setAttribute("aria-label","Annotation style panel"),this.panel.style.display="none",this.panel.dataset.placement=t.placement??F,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=S(this.control,{onShow:u=>{const a=D(u);if(!a||!this.enabledTypes.includes(a)){this.hide();return}this.setAnnotation(u),this.show()},onHide:this.hide,hideWhenNotEditable:t.hideWhenNotEditable}),["click","mousedown","mousemove"].forEach(u=>this.panel.addEventListener(u,a=>a.stopPropagation())),this.documentClickHandler=u=>{this.colorPickerOverlay&&!this.colorPickerOverlay.contains(u.target)&&!this.colorCircles.some(a=>a.contains(u.target))&&this.closeColorPicker(),this.panelBody.querySelectorAll(".custom-select").forEach(a=>{var l;a.classList.remove("open"),(l=a.querySelector(".custom-select-trigger"))==null||l.setAttribute("aria-expanded","false")})},document.addEventListener("click",this.documentClickHandler)}setAnnotation(t){this.currentAnnotation=t,h.isArrow(t)?(this.mode="arrow",this.renderArrow(t)):h.isText(t)||h.isBox(t)||h.isComment(t)?(this.mode="text",this.renderText(t)):h.isPolygon(t)&&(this.mode="polygon",this.renderPolygon(t))}renderArrow(t){const e=t.properties.style||{};this.updateColorFromAnnotation(e.strokeColor||h.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||h.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||h.defaultTextStyle.color);const o=typeof e.fontSize=="number"?e.fontSize:typeof h.defaultTextStyle.fontSize=="number"?h.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||h.defaultTextStyle.background))}
+      ${this.section("Font",`<div class="custom-select-section">${this.fontSelector(e.font||h.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||h.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.section("Fill",this.backgroundSelector(e.background||"transparent","Fill"))}
       ${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}">
+    `,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)">${f(t)}</span>`:f(t)}colorSelector(){return`<div class="color-selector" role="group" aria-label="Color">${this.recent.colors.map((t,e)=>`
+      <button type="button" class="color-circle ${e===0?"color-circle-primary":""}" data-index="${e}" data-color="${t}" aria-label="Set color to ${t}" aria-pressed="${e===0}">
         <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>
+    `).join("")}</div>`}backgroundSelector(t,e="Background"){return`<div class="color-selector" role="group" aria-label="${e}">${T.map(({value:o,style:i})=>`
+      <button type="button" class="color-circle ${o===t?"color-circle-primary":""}" data-background-color="${o}" aria-label="${o==="transparent"?"No background":`Background ${o}`}" aria-pressed="${o===t}">
+        <div class="color-inner" style="${i}"></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">
+    `).join("")}</div>`}fontSelector(t){const e=A.find(o=>o.value===t)||A[0];return this.dropdown("font",e,A.map(o=>({...o,selected:o.value===t})))}extremitySelector(t,e){var r;const o=((r=e.properties.style)==null?void 0:r[t])||"none",i=P.map(d=>({...d,icon:d.value==="arrow"&&t==="tail"?"arrow-left":d.value==="arrow"?"arrow-right":d.icon,selected:d.value===o,rotate:d.value==="arrow-plain"&&t==="tail"})),n=i.find(d=>d.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=""){const n=t==="font"?"Font":t;return`<div class="custom-select" data-type="${t}" ${i}>
+      <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="${n}: ${e.label}">
         ${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>
+      </button>
+      <div class="custom-select-options" role="listbox" aria-label="${n} options">${o.map(r=>`
+        <button type="button" role="option" aria-selected="${r.selected?"true":"false"}" class="custom-select-option ${r.selected?"selected":""}" data-value="${r.value}" data-icon="${r.icon}" data-rotate="${r.rotate?"1":""}" title="${r.label}">
+          ${this.icon(r.icon,r.rotate)}
+          <span>${r.label}</span>
+        </button>
       `).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}">
+      <input type="range" id="${e}-slider" class="slider" aria-label="${t}" 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}">
+    </div>`)}`}lineTypeButtons(t){return`${this.section("Line type",`<div class="linetype-section" role="group" aria-label="Line type">${L.map(({value:e,icon:o})=>`
+      <button type="button" class="linetype-button ${t===e?"active":""}" data-linetype="${e}" title="${e}" aria-label="${e} line" aria-pressed="${t===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 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"),i=t.dataset.type==="font"?"Font":t.dataset.type;e.addEventListener("click",n=>{n.stopPropagation(),this.panelBody.querySelectorAll(".custom-select").forEach(d=>{var u;d!==t&&(d.classList.remove("open"),(u=d.querySelector(".custom-select-trigger"))==null||u.setAttribute("aria-expanded","false"))});const r=!t.classList.contains("open");t.classList.toggle("open",r),e.setAttribute("aria-expanded",String(r))}),o.forEach(n=>{n.addEventListener("click",r=>{r.stopPropagation();const d=n.dataset.value;o.forEach(g=>{g.classList.remove("selected"),g.setAttribute("aria-selected","false")}),n.classList.add("selected"),n.setAttribute("aria-selected","true");const u=n.dataset.icon,a=n.dataset.rotate==="1",l=n.querySelector("span").textContent||"",p=e.querySelector("svg, span[style]");p&&(p.outerHTML=this.icon(u,a)),e.querySelector("span").textContent=l,e.setAttribute("aria-label",`${i}: ${l}`),t.classList.remove("open"),e.setAttribute("aria-expanded","false");const b=t.dataset.type,y=t.dataset.end;b==="font"?this.updateStyle({font:d}):y==="head"?this.updateStyle({head:d}):y==="tail"&&this.updateStyle({tail:d})})})}),["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"),o.setAttribute("aria-pressed","false")}),t.classList.add("active"),t.setAttribute("aria-pressed","true"),this.updateStyle({strokeType:e})})})}updateColorFromAnnotation(t){this.recent=O(this.recent,t),this.currentColor=t}updateColorCircles(){this.colorCircles.forEach((t,e)=>{t.setAttribute("data-color",this.recent.colors[e]),t.setAttribute("aria-label",`Set color to ${this.recent.colors[e]}`),t.style.setProperty("--circle-color",this.recent.colors[e]);const o=e===this.recent.activeIndex;t.classList.toggle("color-circle-primary",o),t.setAttribute("aria-pressed",String(o))})}toggleColorPicker(t){if(this.colorPickerOverlay){this.closeColorPicker();return}this.colorPickerOverlay=document.createElement("div"),this.colorPickerOverlay.className="color-picker-overlay",this.colorPickerOverlay.setAttribute("role","dialog"),this.colorPickerOverlay.setAttribute("aria-label","Custom color picker"),document.body.appendChild(this.colorPickerOverlay),this.colorPicker=k(),this.colorPicker.color=h.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&&(h.isArrow(this.currentAnnotation)?this.control.updateStyle(this.currentAnnotation.id,t):h.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",x=["arrow","comment","sticky-note","box","text","polygon"];class ot{constructor(t){c(this,"control");c(this,"root");c(this,"activeButton",null);c(this,"undoButton");c(this,"redoButton");c(this,"handleDrawingEnd",()=>this.setActiveMode(null));c(this,"handleHistory",()=>this.updateUndoRedo());var d,u,a,l;this.control=t.control;const e=t.container??document.body,o=(l=(a=(u=(d=this.control).getOgma)==null?void 0:u.call(d))==null?void 0:a.getContainer)==null?void 0:l.call(a);!t.container&&o&&o!==document.body&&console.error("[ogma-annotations-control] AnnotationToolbar: no `container` option given, defaulting to document.body. If this toolbar should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."),this.root=document.createElement("div"),this.root.className="annotation-toolbar oa-toolbar oa-toolbar-bar",this.root.setAttribute("role","group"),this.root.setAttribute("aria-label","Annotation tools"),this.root.dataset.placement=t.placement??tt,this.root.dataset.orientation=t.orientation??et,e.appendChild(this.root),["click","mousedown","mousemove"].forEach(p=>this.root.addEventListener(p,b=>b.stopPropagation()));const i=t.enabledTypes??x,n=t.styles??{};x.filter(p=>i.includes(p)).forEach(p=>this.root.appendChild(this.drawingButton(p,n))),i.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 r=t.deleteMode??"erase";(r==="erase"||r==="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"))}))),(r==="select"||r==="both")&&(r==="select"&&this.root.appendChild(this.separator()),this.root.appendChild(this.button(null,"trash","Delete selected",()=>{const b=this.control.getSelectedAnnotations().features.filter(y=>this.control.isAnnotationEditable(y.id));b.length>0&&this.control.remove({type:"FeatureCollection",features:b})}))),(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(h.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.on(h.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.on(h.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,r,d,u;const o=(n=e.comment)==null?void 0:n.commentStyle,i=(r=e.comment)==null?void 0:r.arrowStyle;this.control.enableCommentDrawing({offsetX:((d=e.comment)==null?void 0:d.offsetX)??200,offsetY:((u=e.comment)==null?void 0:u.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.type="button",n.className="oa-toolbar-button",n.dataset.tooltip=o,n.setAttribute("aria-label",o),t&&n.setAttribute("aria-pressed","false"),n.innerHTML=f(e,16),n.addEventListener("click",i),t&&(n.dataset.mode=t),n}separator(){const t=document.createElement("span");return t.className="oa-toolbar-separator",t}setActiveMode(t){this.activeButton&&(this.activeButton.classList.remove("active"),this.activeButton.setAttribute("aria-pressed","false")),this.activeButton=t?this.root.querySelector(`[data-mode="${t}"]`):null,this.activeButton&&(this.activeButton.classList.add("active"),this.activeButton.setAttribute("aria-pressed","true"))}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(h.EVT_COMPLETE_DRAWING,this.handleDrawingEnd),this.control.off(h.EVT_CANCEL_DRAWING,this.handleDrawingEnd),this.control.off(h.EVT_HISTORY,this.handleHistory),this.root.remove()}}class H{constructor(t,e){c(this,"element");c(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.setAttribute("aria-label",e.title),this.element.innerHTML=f(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,o.setAttribute("aria-haspopup","listbox"),o.setAttribute("aria-expanded","false"),o.setAttribute("aria-label",s);const i=document.createElement("span");i.className="oa-toolbar-dropdown-label",i.textContent=t;const n=document.createElement("span");n.className="oa-toolbar-dropdown-chevron",n.innerHTML=f("chevron-down",14),o.appendChild(i),o.appendChild(n);const r=document.createElement("div");r.className="oa-toolbar-dropdown-panel",r.setAttribute("role","listbox"),r.setAttribute("aria-label",`${s} options`);const d=a=>o.setAttribute("aria-expanded",String(a)),u=()=>{e.classList.remove("open"),d(!1)};return o.addEventListener("click",a=>{var p;a.stopPropagation();const l=!e.classList.contains("open");(p=e.closest(".annotation-style-toolbar"))==null||p.querySelectorAll(".oa-toolbar-dropdown.open").forEach(b=>{var y;b!==e&&(b.classList.remove("open"),(y=b.querySelector(".oa-toolbar-dropdown-trigger"))==null||y.setAttribute("aria-expanded","false"))}),e.classList.toggle("open",l),d(l)}),e.appendChild(o),e.appendChild(r),{element:e,panel:r,close:u,setLabel:a=>{i.textContent=a,o.setAttribute("aria-label",`${s}: ${a||t}`)}}}class z{constructor(t,e){c(this,"element");c(this,"dropdown");c(this,"optionElements",[]);this.ctx=t,this.item=e,this.dropdown=R(e.title,""),this.element=this.dropdown.element,e.options.forEach(o=>{const i=document.createElement("button");i.type="button",i.className="oa-toolbar-dropdown-option",i.setAttribute("role","option"),i.setAttribute("aria-selected","false"),i.textContent=o.label,o.style&&Object.assign(i.style,o.style),i.addEventListener("click",n=>{n.stopPropagation(),e.onSelect(o.value,this.ctx),this.dropdown.close()}),this.dropdown.panel.appendChild(i),this.optionElements.push(i)})}update(t){const e=this.item.getValue(t),o=this.item.options.find(n=>n.value===e),i=this.item.getLabel?this.item.getLabel(e,t):(o==null?void 0:o.label)??`${e}`;this.dropdown.setLabel(i),this.element.title=(o==null?void 0:o.label)??`${e}`,this.optionElements.forEach((n,r)=>{n.setAttribute("aria-selected",String(this.item.options[r].value===e))})}destroy(){}}const it=12;class V{constructor(t,e){c(this,"control");c(this,"ogma");c(this,"options");c(this,"annotationId");c(this,"overlay");c(this,"anchor");c(this,"root");c(this,"cells",[]);c(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.root.setAttribute("role","group"),this.root.setAttribute("aria-label","Text style toolbar"),this.anchor.appendChild(this.root),["click","mousedown","mousemove"].forEach(i=>this.root.addEventListener(i,n=>n.stopPropagation()));const o={getAnnotation:()=>this.control.getAnnotation(this.annotationId),updateStyle:i=>this.control.updateStyle(this.annotationId,i),deleteAnnotation:()=>{const i=this.control.getAnnotation(this.annotationId);i&&this.control.remove(i)}};this.setItems(this.getItems(o),o),this.cells.forEach(i=>i.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 n=document.createElement("span");n.className="oa-toolbar-separator",this.root.appendChild(n);return}const i=this.buildCell(o,e);this.cells.push(i),this.root.appendChild(i.element)})}getAnchor(t){var l;const e=this.control.getZoom(),o=this.control.getRotation(),i=((l=t.properties.style)==null?void 0:l.fixedSize)===!0;let{height:n}=h.getBoxSize(t);i&&(n/=e);const r=h.getBoxCenter(t),d=-(n/2+it/e),u=Math.sin(o),a=Math.cos(o);return{x:r.x-d*u,y:r.y+d*a}}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 q{constructor(t,e){c(this,"element");c(this,"dropdown");c(this,"swatch");c(this,"more");c(this,"morePicker",null);c(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 i=document.createElement("div");i.className="oa-toolbar-swatch-grid",o.forEach(n=>{const r=document.createElement("button");r.type="button",r.className="oa-toolbar-swatch-cell",r.classList.toggle("oa-toolbar-swatch-cell-transparent",n.fill==="transparent"),r.title=n.fill,r.setAttribute("aria-label",n.fill==="transparent"?"No background":`Background ${n.fill}`),r.style.setProperty("--oa-swatch-fill",n.fill),r.style.setProperty("--oa-swatch-stroke",n.stroke),r.addEventListener("click",d=>{d.stopPropagation(),this.pick(n.fill),this.dropdown.close()}),i.appendChild(r)}),this.dropdown.panel.appendChild(i),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",n=>{n.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)||h.defaultTextStyle.background;this.morePicker.color=h.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)||h.defaultTextStyle.background;this.swatch.style.setProperty("--oa-swatch-fill",e),this.swatch.classList.toggle("oa-toolbar-swatch-transparent",e==="transparent")}destroy(){this.closeMorePicker()}}const W=[{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"}],U=[{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 w extends V{getItems(t){var d,u;const e=this.options.fonts??U,o=this.options.fontSizes??Y,i=this.options.swatches??W,n=this.options.onMoreColors,r=[{kind:"custom",id:"color",build:a=>new q(a,{swatches:i,onMoreColors:n})},{kind:"separator"},{kind:"dropdown",id:"font",title:"Font",options:e,getValue:a=>{var l;return((l=a.properties.style)==null?void 0:l.font)||h.defaultTextStyle.font},getLabel:()=>"Aa",onSelect:(a,l)=>l.updateStyle({font:`${a}`})},{kind:"dropdown",id:"fontSize",title:"Font size",options:o.map(a=>({value:a,label:`${a}`})),getValue:a=>{const l=a.properties.style;return Math.round(h.getEffectiveFontSize((l==null?void 0:l.fontSize)??h.defaultTextStyle.fontSize,l==null?void 0:l.fontScale))},onSelect:(a,l)=>l.updateStyle({fontSize:a,fontScale:1})},{kind:"separator"},{kind:"button",id:"bold",title:"Bold",icon:"bold",isActive:a=>{var l;return((l=a.properties.style)==null?void 0:l.fontWeight)==="bold"},action:a=>{var p;const l=((p=a.getAnnotation().properties.style)==null?void 0:p.fontWeight)==="bold";a.updateStyle({fontWeight:l?"normal":"bold"})}},{kind:"separator"},{kind:"button",id:"showAuthor",title:"Show author",icon:"user",isActive:a=>{var l;return((l=a.properties.style)==null?void 0:l.showAuthor)===!0},action:a=>{var p;const l=((p=a.getAnnotation().properties.style)==null?void 0:p.showAuthor)===!0;a.updateStyle({showAuthor:!l})}},{kind:"separator"},{kind:"button",id:"delete",title:"Delete",icon:"trash",danger:!0,action:a=>a.deleteAnnotation()}];return((u=(d=this.options).items)==null?void 0:u.call(d,r,t))??r}}class G extends w{}class nt{constructor(t){c(this,"control");c(this,"options");c(this,"current",null);c(this,"detachVisibility");c(this,"handleUpdate",t=>{this.current&&t.id===this.current.annotationId&&h.isText(t)&&this.current.update(t)});this.control=t.control,this.options=t,this.detachVisibility=S(this.control,{onShow:e=>this.show(e),onHide:()=>this.hide(),hideWhenNotEditable:t.hideWhenNotEditable}),this.control.on(h.EVT_UPDATE,this.handleUpdate)}show(t){if(!h.isText(t)){this.hide();return}const e=h.isStickyNote(t)?G:w;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(h.EVT_UPDATE,this.handleUpdate),this.hide()}}exports.ALL_PANEL_ANNOTATION_TYPES=_;exports.AnnotationPanel=Q;exports.AnnotationStyleToolbar=V;exports.AnnotationToolbar=ot;exports.BACKGROUNDS=T;exports.ButtonItemCell=H;exports.ColorCell=q;exports.DEFAULT_PANEL_ORIENTATION=I;exports.DEFAULT_PANEL_PLACEMENT=F;exports.DEFAULT_RECENT_COLORS=M;exports.DEFAULT_TOOLBAR_FONTS=U;exports.DEFAULT_TOOLBAR_FONT_SIZES=Y;exports.DropdownItemCell=z;exports.EXTREMITY_OPTIONS=P;exports.FONTS=A;exports.ICON_PATHS=B;exports.LINE_TYPES=L;exports.MAX_RECENT_COLORS=$;exports.STICKY_SWATCHES=W;exports.StickyNoteStyleToolbar=G;exports.TextAnnotationToolbar=nt;exports.TextStyleToolbar=w;exports.attachPanelVisibility=S;exports.classifyPanelAnnotationType=D;exports.createRgbaColorPicker=k;exports.initialRecentColors=N;exports.rgbaToString=E;exports.svgIcon=f;exports.withColorFromAnnotation=O;