Function installGraph

packages/client/src/graph.ts:129–367

(host: GraphHost)

// ─── Public functions: install + small handlers ──────────────────────────

export function installGraph(host: GraphHost): void {
  const { SocialCalc, win, doc } = host;
  const palette = makePalette();

  function updateGraphRangeProposal(editor: {
    range: { hasrange: boolean; left: number; top: number; right: number; bottom: number };
  }): void {
    const ss = SocialCalc.GetSpreadsheetControlObject?.();
    if (!ss?.idPrefix) return;
    const ele = doc.getElementById(ss.idPrefix + 'graphlist') as HTMLSelectElement | null;
    if (!ele || !ele.options[0]) return;
    if (editor.range.hasrange) {
      ele.options[0].text =
        SocialCalc.crToCoord!(editor.range.left, editor.range.top) +
        ':' +
        SocialCalc.crToCoord!(editor.range.right, editor.range.bottom);
    } else {
      ele.options[0].text = SocialCalc.LocalizeString?.('[select range]') ?? '[select range]';
    }
  }

  const onClick: GraphOnClickFn = (s) => {
    palette.reset();
    const SCLoc = SocialCalc.LocalizeString ?? ((x: string) => x);
    const namelist: string[] = [];
    const nl = doc.getElementById((s.idPrefix ?? '') + 'graphlist') as HTMLSelectElement | null;
    // Refresh range proposal when the user drags a new selection.
    (s.editor as unknown as { RangeChangeCallback: Record<string, unknown> }).RangeChangeCallback.graph =
      updateGraphRangeProposal;
    for (const name of Object.keys(s.sheet.names ?? {})) namelist.push(name);
    namelist.sort();
    if (!nl) return;
    nl.length = 0;
    nl.options[0] = new Option(SCLoc('[select range]'));
    for (let i = 0; i < namelist.length; i++) {
      const name = namelist[i]!;
      nl.options[i + 1] = new Option(name, name);
      if (name === s.graphrange) nl.options[i + 1]!.selected = true;
    }
    if (s.graphrange === '') nl.options[0]!.selected = true;
    updateGraphRangeProposal(s.editor as unknown as Parameters<typeof updateGraphRangeProposal>[0]);
    const tnl = doc.getElementById((s.idPrefix ?? '') + 'graphtype') as HTMLSelectElement | null;
    if (!tnl) return;
    tnl.length = 0;
    const gti = SocialCalc.GraphTypesInfo!;
    for (let i = 0; i < gti.displayorder.length; i++) {
      const name = gti.displayorder[i]!;
      const info = gti[name] as { display: string; func: GraphDrawFn };
      tnl.options[i] = new Option(SCLoc(info.display), name);
      if (name === s.graphtype) tnl.options[i]!.selected = true;
    }
    if (!s.graphtype) {
      tnl.options[0]!.selected = true;
      s.graphtype = tnl.options[0]!.value;
    }
    doGraph(false, true);
  };