Components Selection modes

The following tutorial will illustrate the behavior of various BoundsCalculation approaches paired with MultiDiameterSelectionMode modes.

BoundsCalculation implementations are:

  • RectangularBoundsCalculation - represents rectangular area bounding the whole component
  • PolygonalBoundsCalculation - represents union of rectangular areas bounding every MD-range of the component
  • ShapesBoundsCalculation: union of areas covering every shape for every MD-range of the component

MultiDiameterSelectionMode matters in case multi-diameter components are used for schematics visualization (for more info see "Multi Diameter components" tutorial in "Schematics" section).

Note that if "regular" (non-multi-diameter component) is selected then its rectangular bounds look exactly the same as its polygonal bounds.

import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { MultiDiameterSelectionMode } from "@int/geotoolkit/schematics/widgets/MultiDiameterSelectionMode.ts";
import { PointerMode } from "@int/geotoolkit/controls/tools/PointerMode.ts";
import { ComponentNodeFactoryRegistry } from "@int/geotoolkit/schematics/factory/ComponentNodeFactoryRegistry.ts";
import { ViewMode } from "@int/geotoolkit/schematics/scene/WellBoreNode.ts";
import { CustomMultiDiameterComponentNode } from "/src/code/Schematics/ComponentSelection/customMultiDiameterComponentNode.ts";
const data = [
  {
    "name": "custom",
    "data": {
      "description": ["Range-1", "Range-2", "Range-3"],
      "geometry": [
        {
          "depth": {
            "from": 0,
            "to": 341
          },
          "diameter": {
            "outer": 26,
            "inner": 22
          }
        },
        {
          "depth": {
            "from": 341,
            "to": 1020
          },
          "diameter": {
            "outer": 18,
            "inner": 14
          }
        },
        {
          "depth": {
            "from": 1020,
            "to": 3e3
          },
          "diameter": {
            "outer": 10,
            "inner": 6
          }
        }
      ]
    }
  }
];
function createScene(canvas) {
  const factoryRegistry = new ComponentNodeFactoryRegistry();
  factoryRegistry.setFactory(
    "custom",
    (data2) => new CustomMultiDiameterComponentNode(data2)
  );
  const widget = new CompositeSchematicsWidget({
    "wellborenode": {
      "viewmode": ViewMode.Regular,
      "registry": factoryRegistry
    },
    "multidiameterselectionmode": MultiDiameterSelectionMode.Whole,
    "annotationssizes": { "south": 0 },
    "data": { "elements": new WellBoreData(data) }
  });
  widget.getToolByName("pick").setPointerMode(PointerMode.Hover);
  return new Plot({
    "canvaselement": canvas,
    "root": widget
  });
}
export { createScene };

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