Replacing a Component

import { ViewMode } from "@int/geotoolkit/schematics/scene/WellBoreNode.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { HorizontalBoxLayout } from "@int/geotoolkit/layout/HorizontalBoxLayout.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Tools } from "@int/geotoolkit/controls/tools/Tools.ts";
import { init } from "@int/geotoolkit/base.js";
import { ColorUtil } from "@int/geotoolkit/util/ColorUtil.ts";
import { SimpleComponentNodeFactory } from "@int/geotoolkit/schematics/factory/SimpleComponentNodeFactory.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import { FixedTrackWidthStrategy } from "@int/geotoolkit/schematics/FixedTrackWidthStrategy.ts";
import { MyComponent } from "/src/code/Schematics/ReplaceComponent/myComponent.ts";
import data from "/src/assets/data/wellBoreData.json?import";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { Mode } from "@int/geotoolkit/schematics/labeling/Mode.ts";
init({ "imports": [Tools] });
function createWidget(data2) {
  return new CompositeSchematicsWidget({
    "wellborenode": {
      "viewmode": ViewMode.Compressed,
      "data": data2
    },
    "annotationssizes": {
      "north": 0,
      "south": 0,
      "east": 0,
      "west": 0
    },
    "labeling": {
      "mode": Mode.NoLabels
    },
    "trackwidthstrategy": new FixedTrackWidthStrategy(170),
    "gap": {
      "left": {
        "resizable": false,
        "visible": true,
        "size": 20
      },
      "right": {
        "resizable": false,
        "visible": true,
        "size": 10
      }
    },
    "border": {
      "width": 0
    },
    "linestyle": {
      "width": 0
    },
    "units": {
      "x": "inch",
      "y": "ft"
    }
  });
}
class ReplaceComponent {
  constructor(canvas, isCustom) {
    const wellboreData = new WellBoreData(data);
    this.widget = createWidget(wellboreData);
    this.widgetRef = createWidget(wellboreData);
    const registry = this.widget.getWellBoreWithLabels().getWellBoreNode().getFactoryRegistry();
    this.factoryMap = {};
    wellboreData.getProperties()["elements"].forEach((component) => {
      const { name } = component;
      if (this.factoryMap.hasOwnProperty(name))
        return;
      const factoryDefault = registry.getFactory(name);
      const fillColor = ColorUtil.getRandomColorRgb(21);
      const factoryCustom = new SimpleComponentNodeFactory(
        (data2) => new MyComponent(data2, fillColor)
      );
      this.factoryMap[name] = {
        "factoryDefault": factoryDefault,
        "factoryCustom": factoryCustom,
        "fillColor": fillColor
      };
    });
    const rootGroup = new Group().addChild([
      this.widget,
      this.widgetRef
    ]);
    new HorizontalBoxLayout(new Rect(0, 0, 400, 700)).add([
      this.widget,
      this.widgetRef
    ]).layout();
    this.plot = new Plot({
      "canvaselement": canvas,
      "root": rootGroup
    });
    this.update(isCustom === true);
  }
  dispose() {
    if (this.plot) {
      this.plot.dispose();
    }
  }
  update(value) {
    for (const name in this.factoryMap) {
      if (this.factoryMap.hasOwnProperty(name)) {
        const factory = value ? this.factoryMap[name]["factoryCustom"] : this.factoryMap[name]["factoryDefault"];
        this.widget.getWellBoreWithLabels().getWellBoreNode().getFactoryRegistry().setFactory(name, factory);
        this.widget.getWellBoreWithLabels().getWellBoreNode().replaceComponent(name);
      }
    }
  }
}
export { ReplaceComponent };

createScene();