@linkurious/ogma-annotations 2.1.1 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Polygon-DVFVmDbR.js → Polygon-BsnVN6js.js} +287 -277
- package/dist/index.js +6 -6
- package/dist/index.mjs +1898 -1748
- package/dist/types/index.d.ts +65 -3
- package/dist/types/ui.d.ts +8 -0
- package/dist/ui.js +1 -1
- package/dist/ui.mjs +3 -3
- package/package.json +1 -1
package/dist/types/index.d.ts
CHANGED
|
@@ -173,6 +173,15 @@ export declare interface BoxStyle extends StrokeOptions {
|
|
|
173
173
|
*/
|
|
174
174
|
export declare const brighten: (color: Color) => RgbaColor;
|
|
175
175
|
|
|
176
|
+
/**
|
|
177
|
+
* Move `el` to the end of `root`'s children. SVG paint order is DOM order,
|
|
178
|
+
* so this is how a shape gets raised to the top of its group. Safe to call
|
|
179
|
+
* every render even when `el` is already last - `appendChild` on an
|
|
180
|
+
* existing child just re-positions it, it doesn't clone or re-trigger
|
|
181
|
+
* insertion.
|
|
182
|
+
*/
|
|
183
|
+
export declare function bringToTop(root: Element, el: Element): void;
|
|
184
|
+
|
|
176
185
|
/**
|
|
177
186
|
* Calculate optimal zoom threshold for auto-collapse based on comment dimensions
|
|
178
187
|
*
|
|
@@ -324,6 +333,14 @@ export declare interface CommentStyle extends TextStyle {
|
|
|
324
333
|
shadow?: boolean;
|
|
325
334
|
/** Expand to full width when selected (default: false) */
|
|
326
335
|
expandOnSelect?: boolean;
|
|
336
|
+
/**
|
|
337
|
+
* Connector-line behavior when the attachment point moves (default: "rigid").
|
|
338
|
+
* - "rigid": the comment translates by the same offset as the moved
|
|
339
|
+
* attachment point — the arrow keeps its length/angle, whole callout moves.
|
|
340
|
+
* - "elastic": the comment stays put; the arrow re-anchors to the nearest
|
|
341
|
+
* point on the comment box, so the line can stretch/rotate.
|
|
342
|
+
*/
|
|
343
|
+
connectorMode?: "rigid" | "elastic";
|
|
327
344
|
}
|
|
328
345
|
|
|
329
346
|
/**
|
|
@@ -1472,6 +1489,42 @@ export { getBoxSize as getTextSize }
|
|
|
1472
1489
|
/** @private */
|
|
1473
1490
|
export declare function getBrowserWindow(): HTMLElement | undefined;
|
|
1474
1491
|
|
|
1492
|
+
/**
|
|
1493
|
+
* Ids that removing `id` should take with it: `id` itself, plus every arrow
|
|
1494
|
+
* attached to it when it's a comment or text annotation - deleting the
|
|
1495
|
+
* anchor takes its connectors along, since a detached comment-arrow has
|
|
1496
|
+
* nothing to point at.
|
|
1497
|
+
*
|
|
1498
|
+
* @param features - The full feature map (pre-deletion)
|
|
1499
|
+
* @param id - The id being removed
|
|
1500
|
+
* @returns The complete set of ids to delete
|
|
1501
|
+
*/
|
|
1502
|
+
export declare function getCascadeDeleteIds(features: Record<Id, Annotation>, id: Id): Set<Id>;
|
|
1503
|
+
|
|
1504
|
+
/**
|
|
1505
|
+
* Comments must always keep at least one arrow. Returns the comment's id
|
|
1506
|
+
* when deleting `arrowId` would leave it with none, so the caller can block
|
|
1507
|
+
* the deletion instead - or `null` when it's safe to proceed.
|
|
1508
|
+
*
|
|
1509
|
+
* @param features - The full feature map (pre-deletion)
|
|
1510
|
+
* @param arrowId - The arrow being removed
|
|
1511
|
+
*/
|
|
1512
|
+
export declare function getCommentLeftOrphanedBy(features: Record<Id, Annotation>, arrowId: Id): Id | null;
|
|
1513
|
+
|
|
1514
|
+
/**
|
|
1515
|
+
* Get the id of the comment an arrow is connected to, if any.
|
|
1516
|
+
*
|
|
1517
|
+
* A comment is one visual annotation together with the arrow that connects
|
|
1518
|
+
* it - callers that raise a comment's z-order (e.g. bringing a newly
|
|
1519
|
+
* created/selected comment to the front) should raise this arrow along with
|
|
1520
|
+
* it, not just the comment bubble.
|
|
1521
|
+
*
|
|
1522
|
+
* @param arrow - The arrow feature to check
|
|
1523
|
+
* @returns The linked comment's id, or undefined if the arrow isn't attached
|
|
1524
|
+
* to a comment
|
|
1525
|
+
*/
|
|
1526
|
+
export declare function getCommentLinkId(arrow: Arrow): Id | undefined;
|
|
1527
|
+
|
|
1475
1528
|
/**
|
|
1476
1529
|
* Get the position (center) of a comment
|
|
1477
1530
|
*
|
|
@@ -1567,9 +1620,8 @@ export declare const isComment: (a: AnnotationFeature<Geometry, AnnotationProps>
|
|
|
1567
1620
|
* These functions provide utilities for:
|
|
1568
1621
|
* - Checking if an arrow is connected to a comment
|
|
1569
1622
|
* - Determining if arrow endpoints can be detached from comments
|
|
1570
|
-
*
|
|
1571
|
-
*
|
|
1572
|
-
* in store/index.ts removeFeature() method, not here.
|
|
1623
|
+
* - Cascading a comment's delete to its arrows, and blocking deletion of a
|
|
1624
|
+
* comment's last remaining arrow (store/index.ts:removeFeature uses both)
|
|
1573
1625
|
*/
|
|
1574
1626
|
/**
|
|
1575
1627
|
* Check if an arrow is connected to a comment
|
|
@@ -1603,6 +1655,16 @@ export declare function isRgbaColor(color: string): color is RgbaColor;
|
|
|
1603
1655
|
*/
|
|
1604
1656
|
export declare function isRgbColor(color: string): color is RgbColor;
|
|
1605
1657
|
|
|
1658
|
+
/**
|
|
1659
|
+
* Whether a comment's connector line should rigidly follow its attachment
|
|
1660
|
+
* point (translate the comment by the same offset) rather than elastically
|
|
1661
|
+
* re-anchoring to the nearest point on the comment box.
|
|
1662
|
+
*
|
|
1663
|
+
* @param comment - Comment annotation
|
|
1664
|
+
* @returns True unless the comment's style explicitly sets `connectorMode: "elastic"`
|
|
1665
|
+
*/
|
|
1666
|
+
export declare function isRigidConnector(comment: Comment_2): boolean;
|
|
1667
|
+
|
|
1606
1668
|
export declare const isText: (a: AnnotationFeature<Geometry, AnnotationProps>) => a is Text_2;
|
|
1607
1669
|
|
|
1608
1670
|
/** @private */
|
package/dist/types/ui.d.ts
CHANGED
|
@@ -346,6 +346,14 @@ declare interface CommentStyle extends TextStyle {
|
|
|
346
346
|
shadow?: boolean;
|
|
347
347
|
/** Expand to full width when selected (default: false) */
|
|
348
348
|
expandOnSelect?: boolean;
|
|
349
|
+
/**
|
|
350
|
+
* Connector-line behavior when the attachment point moves (default: "rigid").
|
|
351
|
+
* - "rigid": the comment translates by the same offset as the moved
|
|
352
|
+
* attachment point — the arrow keeps its length/angle, whole callout moves.
|
|
353
|
+
* - "elastic": the comment stays put; the arrow re-anchors to the nearest
|
|
354
|
+
* point on the comment box, so the line can stretch/rotate.
|
|
355
|
+
*/
|
|
356
|
+
connectorMode?: "rigid" | "elastic";
|
|
349
357
|
}
|
|
350
358
|
|
|
351
359
|
/**
|
package/dist/ui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"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-
|
|
1
|
+
"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=`
|
|
2
2
|
${this.section("Color",this.colorSelector())}
|
|
3
3
|
${this.section("Extremities",`<div class="custom-select-section">
|
|
4
4
|
${this.extremitySelector("head",t)}
|
package/dist/ui.mjs
CHANGED
|
@@ -2,7 +2,7 @@ var x = Object.defineProperty;
|
|
|
2
2
|
var $ = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
3
|
var l = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
4
|
import { RgbaBase as M } from "vanilla-colorful/lib/entrypoints/rgba";
|
|
5
|
-
import { j as g, s as L, t as T, i as P, v as k, h as b, G as d,
|
|
5
|
+
import { j as g, s as L, t as T, i as P, v as k, h as b, G as d, aJ as B, D as C, ak as E, af as S } from "./Polygon-BsnVN6js.js";
|
|
6
6
|
const y = "rgba-color-picker";
|
|
7
7
|
class D extends M {
|
|
8
8
|
}
|
|
@@ -350,7 +350,7 @@ class Z {
|
|
|
350
350
|
this.closeColorPicker(), this.detachVisibility(), document.removeEventListener("click", this.documentClickHandler), this.panel.remove();
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
|
-
const j = "bottom",
|
|
353
|
+
const j = "bottom", J = "horizontal", A = [
|
|
354
354
|
"arrow",
|
|
355
355
|
"comment",
|
|
356
356
|
"sticky-note",
|
|
@@ -369,7 +369,7 @@ class tt {
|
|
|
369
369
|
l(this, "handleHistory", () => this.updateUndoRedo());
|
|
370
370
|
this.control = t.control;
|
|
371
371
|
const e = t.container ?? document.body;
|
|
372
|
-
this.root = document.createElement("div"), this.root.className = "annotation-toolbar", this.root.dataset.placement = t.placement ?? j, this.root.dataset.orientation = t.orientation ??
|
|
372
|
+
this.root = document.createElement("div"), this.root.className = "annotation-toolbar", this.root.dataset.placement = t.placement ?? j, this.root.dataset.orientation = t.orientation ?? J, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
|
|
373
373
|
(s) => this.root.addEventListener(s, (a) => a.stopPropagation())
|
|
374
374
|
);
|
|
375
375
|
const o = t.enabledTypes ?? A, i = t.styles ?? {};
|