Visual Components
/
/
/
Svg Components
Last updated

SVG Components

This SVG Schematics tutorial shows how to create a schematic shape that uses SVG (Scalable Vector Graphics) formatted components along with JS components.

# Components Registry

The key step is to define the components registry to connect with a SVG formatted visual representation and an element inside the data model:

(see last section of the tutorial for more info on the loader's 'path' parameter)

# Overwrite Registry

If a JavaScript-based schematics component representation is preferred over a SVG one then corresponding entry in "registrySVG" instance need to be overwritten, for example:

# SVG Schematics

After the "registrySVG" instance is filled in with all components, it is necessary to provide the registry to an instance of geotoolkit/schematics/widgets/CompositeSchematicsWidget

import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { ComponentNodeFactoryRegistry } from "@int/geotoolkit/schematics/factory/ComponentNodeFactoryRegistry.ts";
import { SVGComponentsLoader } from "@int/geotoolkit/schematics/factory/SVGComponentsLoader.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import data from "/src/assets/data/wellBoreData.json?import";
function createScene(canvas) {
  const widget = new CompositeSchematicsWidget({
    "annotationssizes": { "north": 30 },
    "gap": {
      "left": { "size": "20px" },
      "top": { "size": "20px" },
      "right": { "size": "20px" },
      "bottom": { "size": "20px" }
    }
  });
  const plot = new Plot({
    "canvaselement": canvas,
    "autorootbounds": true,
    "root": widget
  });
  const registrySVG = new ComponentNodeFactoryRegistry(false);
  const loader = new SVGComponentsLoader({
    "registry": registrySVG,
    "path": RESOURCES + "svg/components.json"
  });
  loader.load().then(() => {
    if (plot.isDisposed())
      return;
    const registryJS = new ComponentNodeFactoryRegistry(true);
    registrySVG.setFactory("casing", registryJS.getFactory("casing"));
    registrySVG.setFactory("perforation", registryJS.getFactory("perforation"));
    widget.setProperties({ "wellborenode": { "registry": registrySVG } });
    widget.setData(new WellBoreData(data));
  });
  return plot;
}
export { createScene };

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

# SVG Components Catalog

In the Components Registry code section above, global variable RESOURCES is a string containing relative path to resources, SVG-components path is RESOURCES + '/svg/components.json'.
The JSON-file is essentially a catalog listing SVG-components provided with GeoToolkit (and, if necessary, extended by customer).
So, simplest format of an entry is just a component (SVG-file) name.

If a component needs to be displayed as a flipped one then pair of "name" and "flipped" is used.

If flipping direction matters then extra parameter "left" is used:

Selection

Track Schematics