This tutorial details how to use the adaptive and collapsible log visual headers. For header basics, see the Basics Headers The Header class incorporates:
1. A set of default and/or custom textual elements. Every element's internal state is defined by following properties:
- 'visible', 'textstyle', 'cut' - if defined specifies direction to shorten textual content
- 'text' - for static text assignment
- 'updatemethod' - for dynamic text assignment; if defined, overrides contents set by 'text' property
- 'anchor' and 'section' - properties used in the layout process.
The following settings define general behavior of textual elements:
- 'gap' - minimal distance between texts
- 'order' - left-to-right spatial ordering if some elements have the same 'anchor' and 'section' values
- 'priority' - least-to-most important ordering
2. A set of graphical components (default and custom ones). The components have the only property called 'drawmethod'. As a default, the class instance contains following textual elements: 'Name', 'Tracking', 'Unit', 'ScaleFrom' and 'ScaleTo'. As a default, the class instance contains following graphical elements: 'Line' and 'Fill'.
# Default Adaptive Header
An adaptive header expands up to a maximum width and can shrink to a degree to fit a width narrower than optimal.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
function createScene(canvas) {
const widget = initializeWidget();
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Element Positioning
Header elements can be moved around using the setElement method. In the example below, the 'ScaleFrom' and 'ScaleTo' elements that describe the lower and upper limits of the data values, respectively, are moved to the top of the header above the line style element. The 'Tracking' element, which denotes the value at the current location of the cursor, is moved below the line style element.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
function createScene(canvas) {
const header = new AdaptiveLogCurveVisualHeader().setElement([Elements.ScaleFrom, Elements.ScaleTo], { "section": Sections.Top }).setElement([Elements.Tracking], { "section": Sections.Bottom });
const widget = initializeWidget(header);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Axis Element
LogCurve header can display 'Axis' element as well. In the examples below, we specify default 'Axis' behaviour and customize specific one.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { AdaptiveLogTickGenerator } from "@int/geotoolkit/axis/AdaptiveLogTickGenerator.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { ScaleType } from "@int/geotoolkit/welllog/data/ScaleType.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
function createScene(canvas) {
const header = new AdaptiveLogCurveVisualHeader().setElement([Elements.ScaleFrom, Elements.ScaleTo], { "visible": false }).setElement([Elements.Tracking], { "section": Sections.Top }).setElement([Elements.Line], { "visible": false }).setElement([Elements.Axis], {
"visible": true,
"section": Sections.Bottom,
"options": {
"tickgenerator": function(header2) {
const logCurve = header2 != null ? header2.getVisual() : null;
if (logCurve instanceof LogCurve && logCurve.getScaleType() === ScaleType.Logarithmic) {
return new AdaptiveLogTickGenerator({
"intermediateticks": true
});
}
return null;
},
"theme": function(header2) {
const lineStyle = header2.getVisual().getLineStyle();
const result = {
"textStyle": {
"color": lineStyle.getColor()
},
"baselineStyle": lineStyle,
"edgeStyle": {
"color": lineStyle.getColor(),
"width": 2,
"pixelsnapmode": true
},
"majorStyle": {
"color": lineStyle.getColor(),
"pixelsnapmode": true
},
"minorStyle": null
};
return result;
}
}
});
const widget = initializeWidget(header, TrackType.LogTrack);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Symbol Element
Adaptive headers supports symbols shape.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Dimension } from "@int/geotoolkit/util/Dimension.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { LogReferenceLine } from "@int/geotoolkit/welllog/LogReferenceLine.ts";
import { FillType as LogFillType } from "@int/geotoolkit/welllog/LogFill.ts";
import { Helpers } from "@int/geotoolkit/controls/util/Helpers.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
let showPropertiesDialogForSelection = null;
function getSelectedCurveOptions(logCurve) {
let dialogName = null;
let leftLogRef = null;
let rightLogRef = null;
let selected = null;
if (logCurve.getLeftFill() == null) {
logCurve.setLeftReferencePointSet(leftLogRef = new LogReferenceLine(0));
leftLogRef.setName("leftReferenceLine");
logCurve.getLeftFill().setVisible(false).setFillType(LogFillType.Right);
}
if (logCurve.getRightFill() == null) {
logCurve.setRightReferencePointSet(rightLogRef = new LogReferenceLine(1));
rightLogRef.setName("rightReferenceLine");
logCurve.getRightFill().setVisible(false).setFillType(LogFillType.Left);
}
selected = logCurve;
dialogName = "Curve";
return { selected, dialogName };
}
function createScene(canvas, propDialogFunc) {
showPropertiesDialogForSelection = propDialogFunc;
const header = new AdaptiveLogCurveVisualHeader().setElement("MyOilPainter", {
"anchor": AnchorType.RightCenter,
"size": new Dimension(10, 10),
"fillstyle": KnownColors.Orange,
"linestyle": KnownColors.DarkBlue,
"marginstyle": "0px 4px",
"symbol": new SymbolShape({
"alignment": AnchorType.Center,
"painter": CirclePainter
}),
"events": {
"enter": (eventType, header2, element, eventArgs) => {
const elementSize = element["size"];
element["size"] = elementSize.setSize(11, 11);
element["fillstyle"].setProperties({
"shadow": {
"enable": true,
"blur": 5,
"offsetx": 0,
"offsety": 0,
"color": "black"
}
});
header2.invalidate();
Helpers.setCss(eventArgs.getPlot(), { "cursor": "pointer" }, header2);
},
"leave": (eventType, header2, element, eventArgs) => {
const elementSize = element["size"];
element["size"] = elementSize.setSize(10, 10);
element["fillstyle"].setProperties({
"shadow": null
});
header2.invalidate();
Helpers.setCss(eventArgs.getPlot(), { "cursor": "default" }, header2);
},
"click": (eventType, clickHeader) => {
const visual = clickHeader.getVisual();
showPropertiesDialogForSelection(getSelectedCurveOptions(visual));
}
}
}).setElement(Elements.Tracking, { "section": Sections.Bottom });
const widget = initializeWidget(header);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), this.showPropertiesDialogForSelection);
# Custom Text Elements
Adaptive headers support custom text elements like 'WellName', which can be customized with a user-specified text style and can be added to the header.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
function createScene(canvas) {
const header = new AdaptiveLogCurveVisualHeader().setElement("WellName", {
"text": "Well_19157",
"anchor": AnchorType.LeftCenter,
"section": Sections.Top,
"cut": "left-to-right",
"textstyle": {
"color": "red",
"font": "bold 14px sans-serif"
}
}).setElement(Elements.Name, { "anchor": AnchorType.RightCenter }).setElement(Elements.Tracking, { "section": Sections.Bottom });
const widget = initializeWidget(header);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Custom Drawing Elements
Adaptive headers also support custom drawing elements, which are created using a custom painter.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LineStyle } from "@int/geotoolkit/attributes/LineStyle.ts";
import { FillStyle } from "@int/geotoolkit/attributes/FillStyle.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Dimension } from "@int/geotoolkit/util/Dimension.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { LogReferenceLine } from "@int/geotoolkit/welllog/LogReferenceLine.ts";
import { FillType as LogFillType } from "@int/geotoolkit/welllog/LogFill.ts";
import { Helpers } from "@int/geotoolkit/controls/util/Helpers.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
let showPropertiesDialogForSelection = null;
function getSelectedCurveOptions(logCurve) {
let dialogName = null;
let leftLogRef = null;
let rightLogRef = null;
let selected = null;
if (logCurve.getLeftFill() == null) {
logCurve.setLeftReferencePointSet(leftLogRef = new LogReferenceLine(0));
leftLogRef.setName("leftReferenceLine");
logCurve.getLeftFill().setVisible(false).setFillType(LogFillType.Right);
}
if (logCurve.getRightFill() == null) {
logCurve.setRightReferencePointSet(rightLogRef = new LogReferenceLine(1));
rightLogRef.setName("rightReferenceLine");
logCurve.getRightFill().setVisible(false).setFillType(LogFillType.Left);
}
selected = logCurve;
dialogName = "Curve";
return { selected, dialogName };
}
function createScene(canvas, propDialogFunc) {
showPropertiesDialogForSelection = propDialogFunc;
const shadow = {
"enable": true,
"blur": 5,
"offsetx": 0,
"offsety": 0,
"color": "black"
};
const darkblueLineStyle = new LineStyle(KnownColors.DarkBlue);
const darkblueLineStyleHover = new LineStyle({
"color": "white",
"shadow": shadow
});
const orangeFillStyle = new FillStyle(KnownColors.Orange);
const orangeFillStyleHover = new FillStyle({
"color": "red",
"shadow": shadow
});
const oilSymbol = new SymbolShape({
"width": 10,
"height": 10,
"sizeisindevicespace": true,
"alignment": AnchorType.Center,
"painter": CirclePainter,
"fillstyle": orangeFillStyle,
"linestyle": darkblueLineStyle
});
const oilSymbolHover = oilSymbol.clone().setLineStyle(darkblueLineStyleHover).setFillStyle(orangeFillStyleHover);
let activeHeader = null;
const header = new AdaptiveLogCurveVisualHeader().setElement("MyOilPainter", {
"drawmethod": (header2, rect, context) => {
if (!header2 || !rect || !context) {
return;
}
let offset = new Dimension(10, 10);
offset = context.getTransformation().inverseTransformDimension(offset, offset);
const symbol = activeHeader === header2 ? oilSymbolHover : oilSymbol;
symbol.setAnchor(rect.getLeft() + offset.getWidth(), rect.getTop() + offset.getHeight()).render(context);
return;
},
"events": {
"enter": (eventType, header2, element, eventArgs) => {
activeHeader = header2;
header2.invalidate();
Helpers.setCss(eventArgs.getPlot(), { "cursor": "pointer" }, header2);
},
"leave": (eventType, header2, element, eventArgs) => {
activeHeader = null;
header2.invalidate();
Helpers.setCss(eventArgs.getPlot(), { "cursor": "default" }, header2);
},
"click": (eventType, clickHeader) => {
const visual = clickHeader.getVisual();
showPropertiesDialogForSelection(getSelectedCurveOptions(visual));
}
}
}).setElement(Elements.Tracking, { "section": Sections.Bottom });
const widget = initializeWidget(header);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), this.showPropertiesDialogForSelection);
# Custom HTML Elements
Adaptive headers support HTML formatted text elements.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { BaseLineStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { initializeWidget } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
function createScene(canvas) {
const spanIconPrefix = '<span id="ID" style="border: 2px #D1D6D9;border-radius: 50%; background-color: #D1D6D9;font-weight: bold;font-size: 11px;padding: 4px 4px 0px 4px;">';
const spanIconTrail = "</span>";
const settingsSymbol = '<img id="emoji" width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAz0lEQVQ4T52SzwpBQRSH5z1Q4p0skChewU4eQspCRBaykshCeQZrC1kqD3HMNzXH3DtXF4tvOv3O78w588eISMTzcRVjjOOwW1sp9miwWk5kNh3ZUMxw0NfCZqPmNHLoxOCW0JgHDbSQ3bJMWfipdNS0oVQsSLVSTmig/uN+42YPk+fTVg3EYa7Trsv9diF+i0AXX+She9pnSQpfF/Jmv4yKl+PprmESci+H5e/nWMzHkeET/ve4QkDwu/W6rchIjgbEoIUhfGxfyOWl8yJiXhKnf1gSyNrEAAAAAElFTkSuQmCC"/>';
const icons = ["A", "B"];
let activeIconId = null;
const header = new AdaptiveLogCurveVisualHeader().setElement("Name", {
"textstyle": {
"baseline": BaseLineStyle.Middle
},
"updatemethod": function(header2) {
const visual = header2.getVisual();
let headerName = visual.getName();
for (let i = 0; i < icons.length; i++) {
const iconId = icons[i];
let iconPrefix = spanIconPrefix.replace('id="ID"', 'id="' + iconId + '"');
if (activeIconId === iconId) {
iconPrefix = iconPrefix.replace("background-color: #D1D6D9", "background-color: yellow");
iconPrefix = iconPrefix.replace("border: 2px #D1D6D9;", "border: 2px red;");
}
headerName += " " + iconPrefix + iconId + spanIconTrail;
}
return headerName + " " + settingsSymbol;
},
"anchor": AnchorType.RightCenter,
"section": Sections.Top,
"cut": function(text) {
return text;
},
"events": {
"hover": function(eventType, hoverHeader, hitElementInfo) {
activeIconId = null;
if (hitElementInfo["data"] != null && hitElementInfo["data"].length > 0) {
activeIconId = hitElementInfo["data"][0].id;
}
hoverHeader.invalidate();
},
"leave": function(eventType, leaverHeader) {
activeIconId = null;
leaverHeader.invalidate();
},
"click": function(eventType, clickHeader, hitElementInfo) {
activeIconId = null;
if (hitElementInfo["data"] != null && hitElementInfo["data"].length > 0) {
alert(hitElementInfo["data"][0].id);
}
}
}
}).setElement(Elements.Tracking, { "section": Sections.Bottom });
const widget = initializeWidget(header);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Collapsible Header
Headers can be specified to display as 'collapsed' by setting the display type as DisplayType.Minimized. A collapsible or minimized header reduces the header height by displaying only one curve header per track. The curve header displayed can be changed by selecting a different active visual for the track header.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { WellLogWidget } from "@int/geotoolkit/welllog/widgets/WellLogWidget.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType as LogAxisVisualHeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { DisplayType as HeaderContainerDisplayType } from "@int/geotoolkit/welllog/HeaderContainer.ts";
import { CompositeLogCurve } from "@int/geotoolkit/welllog/CompositeLogCurve.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { LogReferenceLine } from "@int/geotoolkit/welllog/LogReferenceLine.ts";
import { FillType as LogFillType } from "@int/geotoolkit/welllog/LogFill.ts";
import { from } from "@int/geotoolkit/selection/from.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { Node } from "@int/geotoolkit/scene/Node.ts";
import { Events } from "@int/geotoolkit/welllog/widgets/Events.ts";
import * as DropDownIcons from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/headerTool/dropDownIcons.ts";
import { Events as HeaderToolEvents, HeaderTool } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/headerTool/headerTool.ts";
import { createCurve, createTestData } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/HeaderType.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
const DEFAULT_INDENT = 4;
let showPropertiesDialogForSelection = null;
function adjustHeaderSize(widget) {
const headerHeight = widget.getHeaderHeight("auto");
widget.setHeaderHeight(headerHeight + DEFAULT_INDENT);
const footerHeight = widget.getFooterHeight("auto");
widget.setFooterHeight(footerHeight + DEFAULT_INDENT);
}
function attachHeaderTool(widget) {
const headerTool = new HeaderTool({
widget,
container: widget.getHeaderContainer(),
name: "headers-hover-manipulator"
});
const footerTool = new HeaderTool({
widget,
container: widget.getFooterContainer(),
name: "footers-hover-manipulator"
});
widget.getTool().insert(0, headerTool).insert(0, footerTool);
const callback = (evt, sender, eventArgs) => {
const container = eventArgs.header.getHeaderProvider().getHeaderType() === HeaderType.Header ? widget.getHeaderContainer() : widget.getFooterContainer();
if (eventArgs.args.name === "maximize") {
let displayType = container.getDisplayType();
let svgIcon = "";
let tooltip = "";
if (displayType === HeaderContainerDisplayType.Minimized) {
displayType = HeaderContainerDisplayType.Maximized;
svgIcon = DropDownIcons.Icons.Minimize;
tooltip = "Minimize";
} else {
displayType = HeaderContainerDisplayType.Minimized;
svgIcon = DropDownIcons.Icons.Maximize;
tooltip = "Maximize";
}
eventArgs.args.tooltip.innerHTML = tooltip;
DropDownIcons.setSvg(eventArgs.args.element.firstElementChild, svgIcon);
container.setDisplayType(displayType);
adjustHeaderSize(widget);
return;
}
const track = eventArgs.header.getTrack();
const visual = eventArgs.visual;
if (track == null && visual == null) {
return;
}
if (visual != null) {
showPropertiesDialogForSelection(getSelectedOptions(visual));
} else {
showPropertiesDialogForSelection(getSelectedOptions(track));
}
};
headerTool.on(HeaderToolEvents.DOMElementClick, callback);
footerTool.on(HeaderToolEvents.DOMElementClick, callback);
}
function getSelectedOptions(selection) {
let dialogName = null;
let logCurve = null;
let track = null;
let leftLogRef = null;
let rightLogRef = null;
let selected = null;
const visual = selection;
if (visual instanceof CompositeLogCurve) {
logCurve = visual;
} else if (visual instanceof LogTrack) {
track = visual;
}
let idx;
if (logCurve != null) {
if (logCurve.getLeftFill() == null) {
logCurve.setLeftReferencePointSet(leftLogRef = new LogReferenceLine(0));
leftLogRef.setName("leftReferenceLine");
logCurve.getLeftFill().setVisible(false).setFillType(LogFillType.Right);
}
if (logCurve.getRightFill() == null) {
logCurve.setRightReferencePointSet(rightLogRef = new LogReferenceLine(1));
rightLogRef.setName("rightReferenceLine");
logCurve.getRightFill().setVisible(false).setFillType(LogFillType.Left);
}
if (track != null) {
idx = track.indexOfChild(logCurve);
if (leftLogRef !== null) {
track.insertChild(idx + 1, leftLogRef);
}
if (rightLogRef !== null) {
track.insertChild(idx + 2, rightLogRef);
}
}
selected = logCurve;
dialogName = "Curve";
} else if (track != null) {
selected = track;
const axis = from(track).where((node) => node instanceof LogAxis).selectFirst();
if (axis == null) {
dialogName = "Track";
} else {
selected = Node.findParent(track, WellLogWidget).getHeaderContainer().getHeaderProvider().getHeader(axis);
dialogName = "Index track";
}
}
return { selected, dialogName };
}
function createScene(canvas, propDialogFunc) {
showPropertiesDialogForSelection = propDialogFunc;
const widget = createWellLogWidget({
"indent": 2,
"header": {
"displaytype": HeaderContainerDisplayType.Minimized,
"margin": 2,
"padding": 4,
"height": 155
},
"footer": {
"visible": true,
"displaytype": HeaderContainerDisplayType.Minimized,
"margin": 2,
"padding": 4,
"height": 155
},
"track": {
"header": {
"visibletracktitle": true,
"titlefirst": true,
"firsttolast": true,
"toptobottom": true
},
"footer": {
"visibletracktitle": true,
"titlefirst": true,
"firsttolast": true,
"toptobottom": false
}
}
}).setAxisHeaderType(LogAxisVisualHeaderType.Simple);
widget.getHeaderContainer().enableClipping(false).setCss(`
*[cssclass="trackHeader-headers-container"] {
linestyle: 1px solid #DFE0E3;
fillstyle: #FFFFFF;
}
`);
let spcurve, grcurve;
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1)
]);
const second = widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1),
spcurve = createCurve(createTestData(4500, 10, "SP"), "Violet", 1)
]);
const third = widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1),
createCurve(createTestData(4500, 10, "SP"), "Violet", 1),
grcurve = createCurve(createTestData(4500, 10, "GR"), "Red", 1)
]);
widget.getHeaderContainer().getTrackHeader(second).setActiveVisual(spcurve);
widget.getHeaderContainer().getTrackHeader(third).setActiveVisual(grcurve);
widget.getToolByName("horizontal-splitter").setEnabled(false);
widget.getToolByName("splitter").setEnabled(false);
attachHeaderTool(widget);
adjustHeaderSize(widget);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.fitToHeight();
widget.on(Events.VisualsSelected, () => {
widget.getToolByName("headers-hover-manipulator").setActiveHeader(null);
widget.getToolByName("footers-hover-manipulator").setActiveHeader(null);
});
widget.on(Events.OrientationChanged, () => {
widget.getToolByName("headers-hover-manipulator").setActiveHeader(null);
widget.getToolByName("footers-hover-manipulator").setActiveHeader(null);
});
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), this.showPropertiesDialogForSelection);
# Alignment
By default, all header components are aligned towards the top of the container. However, alignments and display types can be specified for both the header and the footer.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HoldTitle } from "@int/geotoolkit/welllog/header/HoldTitle.ts";
import { DisplayType as HeaderContainerDisplayType } from "@int/geotoolkit/welllog/HeaderContainer.ts";
import { createCurve, createTestData } from "/src/code/WellLog/Headers/AdaptiveAndCollapsible/common.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const widget = createWellLogWidget({
"indent": 2,
"header": {
"displaytype": HeaderContainerDisplayType.Maximized,
"height": 150
},
"footer": {
"visible": true,
"displaytype": HeaderContainerDisplayType.Maximized,
"height": 150
},
"track": {
"header": {
"visibletracktitle": true,
"titlefirst": false,
"firsttolast": true,
"toptobottom": false,
"holdtitle": HoldTitle.Top
},
"footer": {
"visibletracktitle": true,
"titlefirst": false,
"firsttolast": true,
"toptobottom": true,
"holdtitle": HoldTitle.Bottom
}
}
});
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1)
]);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1),
createCurve(createTestData(4500, 10, "SP"), "Violet", 1)
]);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "CALI"), "Green", 1),
createCurve(createTestData(4500, 10, "SP"), "Violet", 1),
createCurve(createTestData(4500, 10, "GR"), "Red", 1)
]);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto").setFooterHeight("auto").fitToHeight();
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));