@linkurious/ogma-annotations 2.1.3 → 2.1.4

package/dist/types/{Control-BiYdzv0K.d.ts → Control-Cv1I3e3C.d.ts}

@@ -1077,6 +1077,18 @@ declare class Control extends EventEmitter<FeatureEvents> {
     /** Is `id` rendered and hit-testable right now, per the `isVisible`
      * option? `false` for an unknown id. */
     isAnnotationVisible(id: Id): boolean;
+    /**
+     * (Re-)apply `id`'s handler attachment (drag/resize/text-edit) to match
+     * `isEditable` right now, instead of waiting for a deselect/reselect -
+     * this is the same call a selection change makes internally. Call it
+     * directly after changing whatever external state your `isEditable`
+     * predicate depends on (e.g. a `locked` flag kept outside the
+     * annotation - see the lock-toolbar-item.ts example): closes any open
+     * text editor and detaches the handler if `id` just became
+     * non-editable, or attaches it if `id` is selected and just became
+     * editable again.
+     */
+    editFeature(id: Id): this;
     /**
      * Add an annotation to the controller
      * @param annotation The annotation to add

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import { P as Polygon, B as Bounds, a as Point, C as Color, R as RgbaColor, b as ClientMouseEvent, A as AnnotationCollection, c as Arrow, S as Side, d as Annotation, H as HexColor, e as RgbColor, f as Box, T as Text, I as Id } from './Control-BiYdzv0K.js';
-export { g as AnnotationFeature, h as AnnotationGetter, i as AnnotationOptions, j as AnnotationProps, k as AnnotationType, l as ArrowProperties, m as ArrowStyles, n as AuthorLineStyle, o as BoxMagnet, p as BoxProperties, q as BoxStyle, r as COMMENT_MODE_COLLAPSED, s as COMMENT_MODE_EXPANDED, t as ClickEvent, u as Comment, v as CommentProps, w as CommentStyle, x as Control, y as ControllerOptions, z as Cursor, D as DATA_ATTR, E as DEFAULT_EDIT_ICON, F as DEFAULT_SEND_ICON, G as DeepPartial, J as DragEvent, K as EVT_ADD, L as EVT_CANCEL_DRAWING, M as EVT_CLICK, N as EVT_COMPLETE_DRAWING, O as EVT_DRAG, Q as EVT_DRAG_END, U as EVT_DRAG_START, V as EVT_HISTORY, W as EVT_HOVER, X as EVT_LINK, Y as EVT_REMOVE, Z as EVT_SELECT, _ as EVT_UNHOVER, $ as EVT_UNSELECT, a0 as EVT_UPDATE, a1 as EdgeMagnet, a2 as ExportedLink, a3 as Extremity, a4 as FeatureEvent, a5 as FeatureEvents, a6 as FeaturesEvent, a7 as HL_BRIGHTEN, a8 as HistoryEvent, a9 as LAYERS, aa as Link, ab as Magnet, ac as NONE, ad as NodeMagnet, ae as PolygonMagnet, af as PolygonProperties, ag as PolygonStyle, ah as SIDE_END, ai as SIDE_START, aj as Stroke, ak as StrokeOptions, al as StrokeStyle, am as StrokeType, an as TARGET_TYPES, ao as TEXT_LINE_HEIGHT, ap as TargetType, aq as TextProperties, ar as TextStyle, as as Vector, at as asColor, au as asHexColor, av as asRgbColor, aw as asRgbaColor, ax as calculateCommentZoomThreshold, ay as createArrow, az as createBox, aA as createComment, aB as createCommentWithArrow, aC as createPolygon, aD as createText, aE as cursors, aF as defaultArrowOptions, aG as defaultArrowStyle, aH as defaultBoxOptions, aI as defaultBoxStyle, aJ as defaultCommentOptions, aK as defaultCommentStyle, aL as defaultPolygonProperties, aM as defaultPolygonStyle, aN as defaultTextOptions, aO as defaultTextStyle, aP as detectArrow, aQ as detectBox, aR as detectComment, aS as detectPolygon, aT as detectText, aU as getCommentPosition, aV as getCommentSize, aW as getCommentZoomThreshold, aX as handleDetectionThreshold, aY as handleRadius, aZ as isAnnotationCollection, a_ as isArrow, a$ as isBox, b0 as isColor, b1 as isComment, b2 as isHexColor, b3 as isPolygon, b4 as isRgbColor, b5 as isRgbaColor, b6 as isRigidConnector, b7 as isStickyNote, b8 as isText, b9 as toggleCommentMode } from './Control-BiYdzv0K.js';
+import { P as Polygon, B as Bounds, a as Point, C as Color, R as RgbaColor, b as ClientMouseEvent, A as AnnotationCollection, c as Arrow, S as Side, d as Annotation, H as HexColor, e as RgbColor, f as Box, T as Text, I as Id } from './Control-Cv1I3e3C.js';
+export { g as AnnotationFeature, h as AnnotationGetter, i as AnnotationOptions, j as AnnotationProps, k as AnnotationType, l as ArrowProperties, m as ArrowStyles, n as AuthorLineStyle, o as BoxMagnet, p as BoxProperties, q as BoxStyle, r as COMMENT_MODE_COLLAPSED, s as COMMENT_MODE_EXPANDED, t as ClickEvent, u as Comment, v as CommentProps, w as CommentStyle, x as Control, y as ControllerOptions, z as Cursor, D as DATA_ATTR, E as DEFAULT_EDIT_ICON, F as DEFAULT_SEND_ICON, G as DeepPartial, J as DragEvent, K as EVT_ADD, L as EVT_CANCEL_DRAWING, M as EVT_CLICK, N as EVT_COMPLETE_DRAWING, O as EVT_DRAG, Q as EVT_DRAG_END, U as EVT_DRAG_START, V as EVT_HISTORY, W as EVT_HOVER, X as EVT_LINK, Y as EVT_REMOVE, Z as EVT_SELECT, _ as EVT_UNHOVER, $ as EVT_UNSELECT, a0 as EVT_UPDATE, a1 as EdgeMagnet, a2 as ExportedLink, a3 as Extremity, a4 as FeatureEvent, a5 as FeatureEvents, a6 as FeaturesEvent, a7 as HL_BRIGHTEN, a8 as HistoryEvent, a9 as LAYERS, aa as Link, ab as Magnet, ac as NONE, ad as NodeMagnet, ae as PolygonMagnet, af as PolygonProperties, ag as PolygonStyle, ah as SIDE_END, ai as SIDE_START, aj as Stroke, ak as StrokeOptions, al as StrokeStyle, am as StrokeType, an as TARGET_TYPES, ao as TEXT_LINE_HEIGHT, ap as TargetType, aq as TextProperties, ar as TextStyle, as as Vector, at as asColor, au as asHexColor, av as asRgbColor, aw as asRgbaColor, ax as calculateCommentZoomThreshold, ay as createArrow, az as createBox, aA as createComment, aB as createCommentWithArrow, aC as createPolygon, aD as createText, aE as cursors, aF as defaultArrowOptions, aG as defaultArrowStyle, aH as defaultBoxOptions, aI as defaultBoxStyle, aJ as defaultCommentOptions, aK as defaultCommentStyle, aL as defaultPolygonProperties, aM as defaultPolygonStyle, aN as defaultTextOptions, aO as defaultTextStyle, aP as detectArrow, aQ as detectBox, aR as detectComment, aS as detectPolygon, aT as detectText, aU as getCommentPosition, aV as getCommentSize, aW as getCommentZoomThreshold, aX as handleDetectionThreshold, aY as handleRadius, aZ as isAnnotationCollection, a_ as isArrow, a$ as isBox, b0 as isColor, b1 as isComment, b2 as isHexColor, b3 as isPolygon, b4 as isRgbColor, b5 as isRgbaColor, b6 as isRigidConnector, b7 as isStickyNote, b8 as isText, b9 as toggleCommentMode } from './Control-Cv1I3e3C.js';
 import { Point as Point$1 } from '@linkurious/ogma';
 import { Position, BBox, Feature, FeatureCollection, Geometry, LineString, Polygon as Polygon$1 } from 'geojson';
 import 'eventemitter3';
@@ -112,6 +112,20 @@ declare function clientToContainerPosition(evt: ClientMouseEvent, container?: HT
     x: number;
     y: number;
 };
+/**
+ * Inverse of clientToContainerPosition: turns a point already relative to
+ * the container's top-left (e.g. from ogma.view.graphToScreenCoordinates)
+ * into viewport-relative clientX/clientY, for code paths that synthesize a
+ * MouseEvent-shaped object and hand it to something (like Handler.onDragStart)
+ * that normalizes via clientToContainerPosition itself.
+ */
+declare function containerToClientPosition(point: {
+    x: number;
+    y: number;
+}, container?: HTMLElement | null): {
+    x: number;
+    y: number;
+};
 declare function colorToRgba(color: Color, alpha: number): RgbaColor;
 declare function parseColor(color: Color): {
     r: number;
@@ -268,4 +282,4 @@ declare function getCascadeDeleteIds(features: Record<Id, Annotation>, id: Id):
  */
 declare function getCommentLeftOrphanedBy(features: Record<Id, Annotation>, arrowId: Id): Id | null;
 
-export { Annotation, AnnotationCollection, Arrow, Bounds, Box, ClientMouseEvent, Color, HexColor, Id, MAX_FONT_SCALE, MIN_FONT_SCALE, Point, Polygon, RgbColor, RgbaColor, Side, Text, adjustColorBrightness, brighten, bringToTop, canDetachArrowEnd, canDetachArrowStart, clientToContainerPosition, colorToRgba, createSVGElement, darken, debounce, debounceTail, getAnnotationsBounds, getArrowEnd, getArrowEndPoints, getArrowSide, getArrowStart, getAttachmentPointOnNode, getBbox, getBoxCenter, getBoxPosition, getBoxSize, getBrowserWindow, getCascadeDeleteIds, getCommentLeftOrphanedBy, getCommentLinkId, getCoordinates, getEffectiveFontSize, getHandleId, getPolygonBounds, getPolygonCenter, getBbox as getTextBbox, getBoxPosition as getTextPosition, getBoxSize as getTextSize, hexShortToLong, hexToRgba, isCommentArrow, migrateBoxOrTextIfNeeded, parseColor, rgbToRgba, scaleGeometry, scalePolygon, setArrowEnd, setArrowEndPoint, setArrowStart, setBbox, setBbox as setTextBbox, simplify as simplifyPolygon, throttle, translatePolygon, updateBbox, updatePolygonBbox, updateBbox as updateTextBbox };
+export { Annotation, AnnotationCollection, Arrow, Bounds, Box, ClientMouseEvent, Color, HexColor, Id, MAX_FONT_SCALE, MIN_FONT_SCALE, Point, Polygon, RgbColor, RgbaColor, Side, Text, adjustColorBrightness, brighten, bringToTop, canDetachArrowEnd, canDetachArrowStart, clientToContainerPosition, colorToRgba, containerToClientPosition, createSVGElement, darken, debounce, debounceTail, getAnnotationsBounds, getArrowEnd, getArrowEndPoints, getArrowSide, getArrowStart, getAttachmentPointOnNode, getBbox, getBoxCenter, getBoxPosition, getBoxSize, getBrowserWindow, getCascadeDeleteIds, getCommentLeftOrphanedBy, getCommentLinkId, getCoordinates, getEffectiveFontSize, getHandleId, getPolygonBounds, getPolygonCenter, getBbox as getTextBbox, getBoxPosition as getTextPosition, getBoxSize as getTextSize, hexShortToLong, hexToRgba, isCommentArrow, migrateBoxOrTextIfNeeded, parseColor, rgbToRgba, scaleGeometry, scalePolygon, setArrowEnd, setArrowEndPoint, setArrowStart, setBbox, setBbox as setTextBbox, simplify as simplifyPolygon, throttle, translatePolygon, updateBbox, updatePolygonBbox, updateBbox as updateTextBbox };

package/dist/types/ui.d.ts

@@ -44,6 +44,12 @@ interface AnnotationPanelOptions {
     /**
      * Element the panel mounts into. The panel creates and manages its own root
      * `<div class="annotation-panel">` inside it. Defaults to `document.body`.
+     * If the Ogma graph itself is embedded in a smaller/offset container
+     * elsewhere on the page (not fullscreen), pass that same container here —
+     * otherwise the panel docks to the corner of the page instead of the
+     * graph. That container also needs CSS `position: relative` (or other
+     * non-`static` position) for the panel's `position: absolute` docking to
+     * be relative to it rather than the next positioned ancestor.
      */
     container?: HTMLElement;
     /**
@@ -147,6 +153,12 @@ interface AnnotationToolbarOptions {
      * Element the toolbar mounts into. The toolbar creates and manages its
      * own root `<div class="annotation-toolbar">` inside it. Defaults to
      * `document.body`.
+     * If the Ogma graph itself is embedded in a smaller/offset container
+     * elsewhere on the page (not fullscreen), pass that same container here —
+     * otherwise the toolbar docks to the corner of the page instead of the
+     * graph. That container also needs CSS `position: relative` (or other
+     * non-`static` position) for the toolbar's `position: absolute` docking
+     * to be relative to it rather than the next positioned ancestor.
      */
     container?: HTMLElement;
     /**
@@ -603,6 +615,7 @@ declare class DropdownItemCell implements ToolbarCell {
     private item;
     readonly element: HTMLElement;
     private dropdown;
+    private optionElements;
     constructor(ctx: ToolbarCellContext, item: ToolbarDropdownItem);
     update(annotation: Text): void;
     destroy(): void;

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 {

package/dist/ui.js

@@ -1,48 +1,48 @@
-"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=`
+"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||c.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||c.defaultTextStyle.color);const o=typeof e.fontSize=="number"?e.fontSize:typeof c.defaultTextStyle.fontSize=="number"?c.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||c.defaultTextStyle.background))}
-      ${this.section("Font",`<div class="custom-select-section">${this.fontSelector(e.font||c.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||c.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)">${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}">
+    `,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">${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>
+    `).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=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">
+    `).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(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>
+      </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,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>`}slider(t,e,o,i,n){return`${this.section(t,`<div class="slider-section">
+      <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">${L.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 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;
+    `).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;