Tadpole

import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { Layer } from "@int/geotoolkit/scene/Layer.ts";
import { TadPole } from "@int/geotoolkit/welllog/TadPole.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
import { PointerMode } from "@int/geotoolkit/controls/tools/PointerMode.ts";
function createScene(canvas) {
  const depths = [120, 150, 190, 200, 220, 270, 300, 305, 315, 390];
  const values = [20, 30, 80, 70, 65, 44, 65, 58, 50, 15];
  const angles = [2, 3, 6, 1, 1.5, 0, 5, 4, 4.5, 5];
  function createDatasource() {
    const tadPoles = angles.map((angle) => ({
      "angle": angle,
      "legs": [
        {
          "angle": angle,
          "length": 1
        }
      ]
    }));
    return new LogData({
      "name": "TADPOLE",
      "depths": depths,
      "values": values,
      "metainfos": tadPoles
    });
  }
  function createLogCurve(dataSource2, fillColor) {
    const symbol = new TadPole(
      {
        "ax": 0,
        "ay": 0,
        "width": 15,
        "height": 15,
        "sizeisindevicespace": true
      }
    ).setFillStyle(fillColor || KnownColors.Yellow).setLineStyle(KnownColors.Orange);
    return new LogCurve(dataSource2, true).setSymbol(symbol).setDisplayMode(["symbol"]).setNormalizationLimits(0, 90);
  }
  const dataSource = createDatasource();
  const hlVisual = createLogCurve(new LogData(), "red");
  const vars = {
    "plot": null,
    "hlVisual": hlVisual,
    "dataSource": dataSource,
    "selection": []
  };
  const widget = createWellLogWidget({
    "tools": {
      "crosshair": {
        "enabled": false
      }
    }
  }).setAxisHeaderType(HeaderType.Scale).setDepthLimits(100, 400);
  widget.addTrack(TrackType.IndexTrack);
  const curve = createLogCurve(dataSource);
  const linearTrack = widget.addTrack(TrackType.LinearTrack).setWidth(300).addChild([
    curve
  ]);
  const trackManipulatorLayer = new Layer().addChild(hlVisual);
  linearTrack.addChild(trackManipulatorLayer);
  curve.on(PointerMode.Click, (event, sender, eventArgs) => {
    const position = eventArgs.getPlotPoint();
    hlVisual.getDataSource().clear();
    if (isNaN(position.getY()) || isNaN(position.getX())) {
      return;
    }
    eventArgs.stopPropagation();
    vars.selection = curve.hitTest(new Point(position.getX(), position.getY()), 2);
    const depths2 = [], values2 = [], infos = [];
    vars.selection.forEach((idx) => {
      depths2.push(dataSource.getDepth(idx));
      values2.push(dataSource.getValue(idx));
      infos.push(dataSource.getMetaInfo(idx));
    });
    widget.getHeaderContainer().setDisplayMarkerDepth(depths2[0]);
    hlVisual.getDataSource().setValues(depths2, values2, infos);
  });
  widget.on(PointerMode.Click, () => {
    hlVisual.getDataSource().clear();
  });
  widget.addTrack(TrackType.IndexTrack);
  vars["plot"] = new Plot({
    "canvaselement": canvas,
    "root": widget
  });
  return vars;
}
function deleteSelection(options) {
  options.hlVisual.getDataSource().clear();
  if (options.selection) {
    options.selection.sort((a, b) => a - b);
    for (let i = options.selection.length - 1; i >= 0; --i) {
      options.dataSource.removeValues(options.selection[i], 1);
    }
    options.selection = [];
  }
}
export { createScene, deleteSelection };

createScene(document.querySelector('[ref="plot"]'));