{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Inline Editing","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"inline-editing","__idx":0},"children":["Inline Editing"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following tutorial demonstrates the tool for editing any visuals on scene containing text rendering, including such complex shapes as Lithology or LogMudLogSection",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Double click on any text, except Index track and Index track header to edit text content.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Use ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Ctrl"]},"+",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enter"]}," to submit changes, or ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Escape"]}," to rollback changes you made."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { DiamondPainter } from \"@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts\";\nimport { HeaderType as LogAxisVisualHeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { LogAnnotation } from \"@int/geotoolkit/welllog/LogAnnotation.ts\";\nimport { LabelFillMode, LineType, LogLithology, NameOrientation } from \"@int/geotoolkit/welllog/LogLithology.ts\";\nimport { FillMode, LogMudLogSection, SymbolPosition, WrapMode } from \"@int/geotoolkit/welllog/LogMudLogSection.ts\";\nimport { Events as SelectionEvents } from \"@int/geotoolkit/controls/tools/Selection.ts\";\nimport { LogAnnotationEditor } from \"@int/geotoolkit/welllog/widgets/tools/html/LogAnnotationEditor.ts\";\nimport { LogMudLogSectionEditor } from \"@int/geotoolkit/welllog/widgets/tools/html/LogMudLogSectionEditor.ts\";\nimport { LogLithologyEditor } from \"@int/geotoolkit/welllog/widgets/tools/html/LogLithologyEditor.ts\";\nimport { LogVisualHeader } from \"@int/geotoolkit/welllog/header/LogVisualHeader.ts\";\nimport { LogTrackVisualHeader } from \"@int/geotoolkit/welllog/header/LogTrackVisualHeader.ts\";\nimport { LogTrackVisualHeaderEditor } from \"@int/geotoolkit/welllog/widgets/tools/html/LogTrackVisualHeaderEditor.ts\";\nimport { LogLithologyHeader } from \"@int/geotoolkit/welllog/header/LogLithologyHeader.ts\";\nimport { LogLithologyHeaderEditor } from \"@int/geotoolkit/welllog/widgets/tools/html/LogLithologyHeaderEditor.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nimport { AdaptiveLogLithologyHeader } from \"@int/geotoolkit/welllog/header/AdaptiveLogLithologyHeader.ts\";\nimport {\n  AdaptiveLogLithologyHeaderEditor\n} from \"@int/geotoolkit/welllog/widgets/tools/html/AdaptiveLogLithologyHeaderEditor.ts\";\nconst depths = [98, 150, 230, 310];\nfunction createLogLithology() {\n  const lithologyNames = [\"Default Range \\u21161\", \"Default Range \\u21162\", \"Default Range \\u21163\"];\n  const lithologyTitles = [\"Title \\u21161\", \"Title \\u21162\", \"Title \\u21163\"];\n  const fillStyles = [\n    KnownColors.Green,\n    KnownColors.Grey,\n    KnownColors.Yellow\n  ];\n  const lineTypes = [\n    LineType.DISCONTINUE,\n    LineType.DISCONTINUE,\n    LineType.CONTINUE,\n    LineType.DISCONTINUE\n  ];\n  return new LogLithology({\n    \"depths\": depths,\n    \"fillstyles\": fillStyles,\n    \"linetypes\": lineTypes,\n    \"names\": lithologyNames,\n    \"titles\": lithologyTitles,\n    \"nameorientation\": NameOrientation.Regular,\n    \"labelfillmode\": LabelFillMode.NONE\n  });\n}\nfunction createCalloutMudLogSection() {\n  const sections = [\n    \"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\",\n    \"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\",\n    \"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\"\n  ];\n  const mudLogSection = new LogMudLogSection({\n    \"selectedsymbol\": (depth, text, index, symbol) => symbol == null ? null : symbol.clone().setLineStyle(symbol.getLineStyle().clone().setWidth(2)),\n    \"selectedfillstyle\": (depth, text, index, fillStyle) => fillStyle == null ? null : fillStyle.clone().setColor(new RgbaColor(fillStyle.getColor()).setAlpha(1)),\n    \"selectedtextstyle\": (depth, text, index, textStyle) => textStyle == null ? null : textStyle.clone().setColor(\"black\"),\n    \"selectedlinestyle\": (depth, text, index, lineStyle) => lineStyle == null ? null : lineStyle.clone().setWidth(3),\n    \"oddtextstyle\": {\n      \"color\": \"green\",\n      \"font\": \"10px sans-serif\"\n    },\n    \"eventextstyle\": {\n      \"color\": \"blue\",\n      \"font\": \"10px sans-serif\"\n    },\n    \"oddfillstyle\": \"rgba(255,255,155, 0.5)\",\n    \"evenfillstyle\": \"rgba(155,255,155, 0.5)\",\n    \"oddlinestyle\": \"blue\",\n    \"evenlinestyle\": \"red\"\n  }).setName(\"Callout Mud Log Section\").setSymbols([\n    new SymbolShape({\n      \"width\": 10,\n      \"height\": 10,\n      \"alignment\": AnchorType.Center,\n      \"sizeisindevicespace\": true,\n      \"painter\": CirclePainter,\n      \"linestyle\": \"blue\",\n      \"fillstyle\": \"rgba(155,255,155, 0.5)\"\n    }),\n    new SymbolShape({\n      \"width\": 10,\n      \"height\": 10,\n      \"alignment\": AnchorType.Center,\n      \"sizeisindevicespace\": true,\n      \"painter\": DiamondPainter,\n      \"linestyle\": \"red\",\n      \"fillstyle\": \"rgba(255,255,155, 0.5)\"\n    })\n  ]).setCornerRadius(8).setFillMode(FillMode.Callout).setPaddingStyle(\"2mm\").setMarginsStyle(\"2mm\").setSymbolMarginsStyle(\"2mm\").setSymbolMarginsStyle({\n    \"left\": 0\n  }, true).setWrapMode(WrapMode.WrappedWidth).setSymbolPosition(SymbolPosition.EvenOdd).setDepthsAndValues(depths, sections).setEllipsisString(\" ... more\");\n  return mudLogSection;\n}\nclass InlineEditing {\n  constructor(canvas) {\n    this._widget = this.createBasicWellLogWidget();\n    this.addWidgetToCanvas(canvas, this._widget);\n  }\n  dispose() {\n    if (this._plot != null) {\n      this._plot.dispose();\n    }\n  }\n  getPlot() {\n    return this._plot;\n  }\n  createBasicWellLogWidget() {\n    const widget = createWellLogWidget().setAxisHeaderType(LogAxisVisualHeaderType.Simple).setDepthLimits(50, 400);\n    widget.addTrack(WellLogTrackType.IndexTrack);\n    const lithologyTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName(\"Lithology section track\").addChild([\n      createLogLithology()\n    ]);\n    widget.getTrackHeader(lithologyTrack).setVisibleTrackTitle(true);\n    widget.addTrack(WellLogTrackType.IndexTrack);\n    const remarksTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName(\"MudLog section track\").addChild([\n      createCalloutMudLogSection()\n    ]);\n    widget.getTrackHeader(remarksTrack).setVisibleTrackTitle(true);\n    widget.addTrack(WellLogTrackType.IndexTrack);\n    const annotationsTrack = widget.addTrack(WellLogTrackType.LinearTrack).setName(\"Annotations section track\").addChild([\n      new LogAnnotation({\n        \"bounds\": new Rect(0, 100, 1, 200),\n        \"text\": \"<b>Model</b> size annotation\",\n        \"textstyle\": \"black\",\n        \"fillstyle\": \"#fdd835\"\n      }).setFixedHeight(false),\n      new LogAnnotation({\n        \"bounds\": new Rect(0, 250, 1, 300),\n        \"text\": \"<b>Device</b> size annotation\",\n        \"textstyle\": \"black\",\n        \"fillstyle\": \"#fdd835\"\n      }).setFixedHeight(true)\n    ]);\n    widget.getTrackHeader(annotationsTrack).setVisibleTrackTitle(true);\n    widget.addTrack(WellLogTrackType.IndexTrack);\n    return widget;\n  }\n  addWidgetToCanvas(canvas, widget) {\n    this._widget = widget;\n    this._plot = new Plot({\n      \"canvaselement\": canvas,\n      \"root\": widget\n    });\n    this._widget.setHeaderHeight(\"auto\").fitToWidth().fitToHeight();\n    widget.on(\n      SelectionEvents.onDoubleClick,\n      (event, sender, eventArgs) => {\n        const logVisual = eventArgs.getSelection().filter(\n          (node) => node instanceof LogVisualHeader || node instanceof LogAnnotation || node instanceof LogMudLogSection || node instanceof LogLithology\n        )[0];\n        const plot = eventArgs.getPlot();\n        const plotPoint = eventArgs.getPlotPoint();\n        let editor = null;\n        if (logVisual != null) {\n          if (logVisual instanceof LogVisualHeader) {\n            if (logVisual instanceof LogTrackVisualHeader) {\n              editor = LogTrackVisualHeaderEditor.editVisual(logVisual, plot, plotPoint);\n            } else if (logVisual instanceof LogLithologyHeader) {\n              editor = LogLithologyHeaderEditor.editVisual(logVisual, plot, plotPoint);\n            } else if (logVisual instanceof AdaptiveLogLithologyHeader) {\n              editor = AdaptiveLogLithologyHeaderEditor.editVisual(logVisual, plot, plotPoint);\n            }\n          } else if (logVisual instanceof LogAnnotation) {\n            editor = LogAnnotationEditor.editVisual(logVisual, plot, plotPoint);\n          } else if (logVisual instanceof LogMudLogSection) {\n            editor = LogMudLogSectionEditor.editVisual(logVisual, plot, plotPoint);\n          } else if (logVisual instanceof LogLithology) {\n            editor = LogLithologyEditor.editVisual(logVisual, plot, plotPoint);\n          }\n        }\n        if (editor != null) {\n          eventArgs.stopPropagation();\n        }\n      }\n    );\n  }\n}\nfunction createScene(canvas) {\n  return new InlineEditing(canvas);\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/InlineEditing/inlineEditing?section=introduction&extract=true","width":"100%","height":"580.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Inline Editing","id":"inline-editing","depth":1}],"frontmatter":{"title":"Inline Editing","seo":{"title":"Inline Editing"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/inline-editing","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}