@linkurious/ogma-annotations-react/dist/index.mjs

A react component to add ogma annotations with react

import { Control as V, EVT_SELECT as B, isArrow as H, isText as N, EVT_UNSELECT as _, EVT_ADD as k, EVT_REMOVE as z, EVT_UPDATE as W, EVT_HISTORY as U } from "@linkurious/ogma-annotations";
import { createBox as ae, createComment as ce, createPolygon as le, getAnnotationsBounds as ie, isBox as ue, isComment as fe, isPolygon as Ce } from "@linkurious/ogma-annotations";
import { useOgma as I } from "@linkurious/ogma-react";
import M, { createContext as F, useContext as O, useState as a, useEffect as g } from "react";
const y = [8, 10, 12, 14, 16, 24, 32, 48, 64, 72], x = "none", S = "#333333", X = [
  "#FFFFFF",
  "#F44E3B",
  "#FE9200",
  "#FCDC00",
  "#A4DD00",
  "#68CCCA",
  "#73D8FF",
  "#AEA1FF",
  "#1E88E5",
  "#333333",
  "#808080",
  "#cccccc"
], Z = [
  "Roboto",
  "Helvetica Neue",
  "Helvetica",
  "Arial",
  "sans-serif",
  "Georgia, serif",
  "Menlo",
  "Monaco",
  "Consolas",
  "Courier New",
  "monospace"
].sort((r, o) => r.toLocaleLowerCase().localeCompare(o.toLocaleLowerCase())), G = {
  head: "arrow",
  strokeColor: S,
  strokeWidth: 5
}, K = 0.25, Y = {
  font: "Roboto",
  fontSize: y[2],
  padding: y[2] * K,
  color: S,
  strokeType: x,
  background: x
}, T = F(
  void 0
), $ = () => O(T);
function ee() {
  return F(null);
}
function j(r) {
  return r.reduce((o, s) => o + s, 0) / r.length;
}
function te(r, o = 0, s = 1) {
  return o + (s - o) * r;
}
function oe(r, o = 0, s = 1) {
  return (r - o) / (s - o);
}
const ne = ({
  children: r,
  annotations: o
}) => {
  const s = I(), [D, i] = a(
    o || {
      type: "FeatureCollection",
      features: []
    }
  ), [n, u] = a(null), [l, f] = a(G), [C, E] = a(Y), [e, d] = a(), [w, A] = a(1), [R, m] = a(1), [b, h] = a(!1), [P, v] = a(!1);
  return g(() => {
    if (!s) return;
    const t = new V(s, {
      minArrowHeight: 1
    }), L = j(s.getNodes().getAttribute("radius")) / 5, p = w;
    return f({
      ...l,
      strokeWidth: (l.strokeWidth || 1) * p
    }), A(p), m(L), t.on(B, () => {
      t.getSelectedAnnotations().features.forEach((c) => {
        c && (H(c) ? f({
          ...c.properties.style || {}
        }) : N(c) && E({
          ...c.properties.style || {}
        }), u(c));
      });
    }).on(_, () => {
      u(null);
    }).on(k, () => {
      i(t.getAnnotations());
    }).on(z, () => {
      i(t.getAnnotations());
    }).on(W, () => {
      i(t.getAnnotations());
    }).on(U, () => {
      h(t.canUndo()), v(t.canRedo());
    }), d(t), o && (t.add(o), t.clearHistory()), () => {
      t.destroy();
    };
  }, [s]), g(() => {
    e && n && (n == null ? void 0 : n.properties.type) === "arrow" && e.updateStyle(n.id, l);
  }, [e, l, n]), g(() => {
    e && n && (n == null ? void 0 : n.properties.type) === "text" && e.updateStyle(n.id, C);
  }, [e, C, n]), /* @__PURE__ */ M.createElement(
    T.Provider,
    {
      value: {
        annotations: D,
        currentAnnotation: n,
        setCurrentAnnotation: u,
        textStyle: C,
        setTextStyle: E,
        arrowStyle: l,
        setArrowStyle: f,
        arrowWidthFactor: w,
        setArrowWidthFactor: A,
        textSizeFactor: R,
        setTextSizeFactor: m,
        editor: e,
        setEditor: d,
        // History management
        canUndo: b,
        canRedo: P,
        undo: () => (e == null ? void 0 : e.undo()) || !1,
        redo: () => (e == null ? void 0 : e.redo()) || !1,
        clearHistory: () => e == null ? void 0 : e.clearHistory(),
        // Annotation management
        add: (t) => e == null ? void 0 : e.add(t),
        remove: (t) => e == null ? void 0 : e.remove(t),
        cancelDrawing: () => e == null ? void 0 : e.cancelDrawing(),
        select: (t) => e == null ? void 0 : e.select(t),
        // Drawing methods
        enableBoxDrawing: (t) => e == null ? void 0 : e.enableBoxDrawing(t),
        enablePolygonDrawing: (t) => e == null ? void 0 : e.enablePolygonDrawing(t),
        enableCommentDrawing: (t) => e == null ? void 0 : e.enableCommentDrawing(t)
      }
    },
    r
  );
};
export {
  ne as AnnotationsContextProvider,
  S as BLACK,
  K as RELATIVE_PADDING,
  x as TRANSPARENT,
  ee as createAnnotationsContext,
  ae as createBox,
  ce as createComment,
  le as createPolygon,
  G as defaultArrowStyle,
  X as defaultColors,
  Y as defaultTextStyle,
  y as fontSizes,
  Z as fonts,
  ie as getAnnotationsBounds,
  te as interpolate,
  ue as isBox,
  fe as isComment,
  Ce as isPolygon,
  j as mean,
  oe as normalize,
  $ as useAnnotationsContext
};