The following tutorial demonstrates the tool for editing any visuals on scene containing text rendering, including such complex shapes as Lithology or LogMudLogSection
Double click on any text, except Index track and Index track header to edit text content.
Use Ctrl+Enter to submit changes, or Escape to rollback changes you made.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { RgbaColor } from "@int/geotoolkit/util/RgbaColor.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { HeaderType as LogAxisVisualHeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { TrackType as WellLogTrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { LogAnnotation } from "@int/geotoolkit/welllog/LogAnnotation.ts";
import { LabelFillMode, LineType, LogLithology, NameOrientation } from "@int/geotoolkit/welllog/LogLithology.ts";
import { FillMode, LogMudLogSection, SymbolPosition, WrapMode } from "@int/geotoolkit/welllog/LogMudLogSection.ts";
import { Events as SelectionEvents } from "@int/geotoolkit/controls/tools/Selection.ts";
import { LogAnnotationEditor } from "@int/geotoolkit/welllog/widgets/tools/html/LogAnnotationEditor.ts";
import { LogMudLogSectionEditor } from "@int/geotoolkit/welllog/widgets/tools/html/LogMudLogSectionEditor.ts";
import { LogLithologyEditor } from "@int/geotoolkit/welllog/widgets/tools/html/LogLithologyEditor.ts";
import { LogVisualHeader } from "@int/geotoolkit/welllog/header/LogVisualHeader.ts";
import { LogTrackVisualHeader } from "@int/geotoolkit/welllog/header/LogTrackVisualHeader.ts";
import { LogTrackVisualHeaderEditor } from "@int/geotoolkit/welllog/widgets/tools/html/LogTrackVisualHeaderEditor.ts";
import { LogLithologyHeader } from "@int/geotoolkit/welllog/header/LogLithologyHeader.ts";
import { LogLithologyHeaderEditor } from "@int/geotoolkit/welllog/widgets/tools/html/LogLithologyHeaderEditor.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
import { AdaptiveLogLithologyHeader } from "@int/geotoolkit/welllog/header/AdaptiveLogLithologyHeader.ts";
import {
AdaptiveLogLithologyHeaderEditor
} from "@int/geotoolkit/welllog/widgets/tools/html/AdaptiveLogLithologyHeaderEditor.ts";
const depths = [98, 150, 230, 310];
function createLogLithology() {
const lithologyNames = ["Default Range \u21161", "Default Range \u21162", "Default Range \u21163"];
const lithologyTitles = ["Title \u21161", "Title \u21162", "Title \u21163"];
const fillStyles = [
KnownColors.Green,
KnownColors.Grey,
KnownColors.Yellow
];
const lineTypes = [
LineType.DISCONTINUE,
LineType.DISCONTINUE,
LineType.CONTINUE,
LineType.DISCONTINUE
];
return new LogLithology({
"depths": depths,
"fillstyles": fillStyles,
"linetypes": lineTypes,
"names": lithologyNames,
"titles": lithologyTitles,
"nameorientation": NameOrientation.Regular,
"labelfillmode": LabelFillMode.NONE
});
}
function createCalloutMudLogSection() {
const sections = [
"SET 7' CASING @ 11,800.SET CEMENT PLUG. TOPPED PLUG TO KOP @ 11456.BEGIN TIME DRILLING @ 1'/HR. NB#4: 6 1/8,HUGHES,5WL13JF, OPEN",
"LS: WH-CM-BF,OPQ,PRED CHKY- MOD DNS,TRS MOD SUC AND DNS, XF-VF-FXLN,MST MOD SFT-FRM,CLN-FOSS,TRSV SL ARG,SME VIS PP POR AND STN,NO ODOR,10% FNT BL FLU, FST BLMG BL HALO,P BLWH WET RNG CUT ON SMPL",
"LS- CRM BUF WH OFFWH TN VF-FX CHKY-DNS CLON FOSS IPTR PP POR SM BN OIL STN NO ODOR 10-20% FNT BL FLUR POOR-FAIR BLWH WET CUT WITH BLWH RING"
];
const mudLogSection = new LogMudLogSection({
"selectedsymbol": (depth, text, index, symbol) => symbol == null ? null : symbol.clone().setLineStyle(symbol.getLineStyle().clone().setWidth(2)),
"selectedfillstyle": (depth, text, index, fillStyle) => fillStyle == null ? null : fillStyle.clone().setColor(new RgbaColor(fillStyle.getColor()).setAlpha(1)),
"selectedtextstyle": (depth, text, index, textStyle) => textStyle == null ? null : textStyle.clone().setColor("black"),
"selectedlinestyle": (depth, text, index, lineStyle) => lineStyle == null ? null : lineStyle.clone().setWidth(3),
"oddtextstyle": {
"color": "green",
"font": "10px sans-serif"
},
"eventextstyle": {
"color": "blue",
"font": "10px sans-serif"
},
"oddfillstyle": "rgba(255,255,155, 0.5)",
"evenfillstyle": "rgba(155,255,155, 0.5)",
"oddlinestyle": "blue",
"evenlinestyle": "red"
}).setName("Callout Mud Log Section").setSymbols([
new SymbolShape({
"width": 10,
"height": 10,
"alignment": AnchorType.Center,
"sizeisindevicespace": true,
"painter": CirclePainter,
"linestyle": "blue",
"fillstyle": "rgba(155,255,155, 0.5)"
}),
new SymbolShape({
"width": 10,
"height": 10,
"alignment": AnchorType.Center,
"sizeisindevicespace": true,
"painter": DiamondPainter,
"linestyle": "red",
"fillstyle": "rgba(255,255,155, 0.5)"
})
]).setCornerRadius(8).setFillMode(FillMode.Callout).setPaddingStyle("2mm").setMarginsStyle("2mm").setSymbolMarginsStyle("2mm").setSymbolMarginsStyle({
"left": 0
}, true).setWrapMode(WrapMode.WrappedWidth).setSymbolPosition(SymbolPosition.EvenOdd).setDepthsAndValues(depths, sections).setEllipsisString(" ... more");
return mudLogSection;
}
class InlineEditing {
constructor(canvas) {
this._widget = this.createBasicWellLogWidget();
this.addWidgetToCanvas(canvas, this._widget);
}
dispose() {
if (this._plot != null) {
this._plot.dispose();
}
}
getPlot() {
return this._plot;
}
createBasicWellLogWidget() {
const widget = createWellLogWidget().setAxisHeaderType(LogAxisVisualHeaderType.Simple).setDepthLimits(50, 400);
widget.addTrack(WellLogTrackType.IndexTrack);
const lithologyTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName("Lithology section track").addChild([
createLogLithology()
]);
widget.getTrackHeader(lithologyTrack).setVisibleTrackTitle(true);
widget.addTrack(WellLogTrackType.IndexTrack);
const remarksTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName("MudLog section track").addChild([
createCalloutMudLogSection()
]);
widget.getTrackHeader(remarksTrack).setVisibleTrackTitle(true);
widget.addTrack(WellLogTrackType.IndexTrack);
const annotationsTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName("Annotations section track").addChild([
new LogAnnotation({
"bounds": new Rect(0, 100, 1, 200),
"text": "<b>Model</b> size annotation",
"textstyle": "black",
"fillstyle": "#fdd835"
}).setFixedHeight(false),
new LogAnnotation({
"bounds": new Rect(0, 250, 1, 300),
"text": "<b>Device</b> size annotation",
"textstyle": "black",
"fillstyle": "#fdd835"
}).setFixedHeight(true)
]);
widget.getTrackHeader(annotationsTrack).setVisibleTrackTitle(true);
widget.addTrack(WellLogTrackType.IndexTrack);
return widget;
}
addWidgetToCanvas(canvas, widget) {
this._widget = widget;
this._plot = new Plot({
"canvaselement": canvas,
"root": widget
});
this._widget.setHeaderHeight("auto").fitToWidth().fitToHeight();
widget.on(
SelectionEvents.onDoubleClick,
(event, sender, eventArgs) => {
const logVisual = eventArgs.getSelection().filter(
(node) => node instanceof LogVisualHeader || node instanceof LogAnnotation || node instanceof LogMudLogSection || node instanceof LogLithology
)[0];
const plot = eventArgs.getPlot();
const plotPoint = eventArgs.getPlotPoint();
let editor = null;
if (logVisual != null) {
if (logVisual instanceof LogVisualHeader) {
if (logVisual instanceof LogTrackVisualHeader) {
editor = LogTrackVisualHeaderEditor.editVisual(logVisual, plot, plotPoint);
} else if (logVisual instanceof LogLithologyHeader) {
editor = LogLithologyHeaderEditor.editVisual(logVisual, plot, plotPoint);
} else if (logVisual instanceof AdaptiveLogLithologyHeader) {
editor = AdaptiveLogLithologyHeaderEditor.editVisual(logVisual, plot, plotPoint);
}
} else if (logVisual instanceof LogAnnotation) {
editor = LogAnnotationEditor.editVisual(logVisual, plot, plotPoint);
} else if (logVisual instanceof LogMudLogSection) {
editor = LogMudLogSectionEditor.editVisual(logVisual, plot, plotPoint);
} else if (logVisual instanceof LogLithology) {
editor = LogLithologyEditor.editVisual(logVisual, plot, plotPoint);
}
}
if (editor != null) {
eventArgs.stopPropagation();
}
}
);
}
}
function createScene(canvas) {
return new InlineEditing(canvas);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));