{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Annotated Widget","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":"annotated-widget","__idx":0},"children":["Annotated Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["AnnotatedWidget is a simple widget which consists of five special instances of",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/scene/Group"]},". The first one is the model to place shapes to be displayed in the main central part of the AnnotatedWidget. The remaining four groups are north, south, east and west annotations. Each of these is a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/scene/Group"]},". The annotations are convenient locations to place axes, titles, legends and such. AnnotatedWidget also has a layout that sizes these components and provides basic tools to work with central part, such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zoom"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Panning"]}," and others.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"In this tutorial we are going to focus on widget layout and style customization."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-annotated-widget","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets#create"},"children":["#"]}," Create Annotated Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create simple annotated widget with deactivated tools."]},{"$$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 { AnnotatedWidget } from \"@int/geotoolkit/widgets/AnnotatedWidget.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { createModel } from \"/src/code/Carnac/Widgets/AnnotatedWidget/createModel.ts\";\nfunction createScene(canvas) {\n  const axisFactory = AxisFactory.getInstance();\n  const annotatedWidget = new AnnotatedWidget({\n    \"model\": createModel(),\n    \"annotationssizes\": {\n      \"north\": 50,\n      \"south\": 40,\n      \"west\": 40,\n      \"east\": 40\n    },\n    \"border\": null,\n    \"tools\": {\n      \"verticalscroll\": {\n        \"visible\": false\n      },\n      \"horizontalscroll\": {\n        \"visible\": false\n      },\n      \"crosshair\": {\n        \"enabled\": false\n      }\n    },\n    \"north\": [\n      new Text({\n        \"text\": \"Annotated Widget Title\",\n        \"ax\": 0.5,\n        \"ay\": 0.5,\n        \"textstyle\": {\n          \"color\": \"#757575\",\n          \"font\": \"18px Roboto\"\n        }\n      }),\n      axisFactory.create({ \"location\": AnnotationLocation.North })\n    ],\n    \"east\": [\n      axisFactory.create({ \"location\": AnnotationLocation.East })\n    ],\n    \"west\": [\n      axisFactory.create({ \"location\": AnnotationLocation.West })\n    ],\n    \"south\": [\n      axisFactory.create({ \"location\": AnnotationLocation.South })\n    ]\n  });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": annotatedWidget\n  });\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#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets?section=create&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-annotations","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets#customizeAnnotations"},"children":["#"]}," Customize Annotations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize Annotations"]},{"$$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 { AnnotatedWidget } from \"@int/geotoolkit/widgets/AnnotatedWidget.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Border } from \"@int/geotoolkit/scene/shapes/Border.ts\";\nimport { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Spline } from \"@int/geotoolkit/scene/shapes/Spline.ts\";\nimport { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { KnownScales as ColorProviderKnownScales } from \"@int/geotoolkit/util/ColorProvider.ts\";\nimport { DiscreteGradientColorProvider } from \"@int/geotoolkit/util/DiscreteGradientColorProvider.ts\";\nimport { ColorBar } from \"@int/geotoolkit/controls/shapes/ColorBar.ts\";\nimport { ColorBarLocation } from \"@int/geotoolkit/controls/shapes/ColorBarLocation.ts\";\nimport { AxisHelper } from \"/src/helpers/axis.ts\";\nimport { createModel } from \"/src/code/Carnac/Widgets/AnnotatedWidget/createModel.ts\";\nfunction createColorBar(location) {\n  const colorProvider = new DiscreteGradientColorProvider({\n    \"bins\": 256\n  }).setScale(ColorProviderKnownScales.Rainbow, 0, 1);\n  const isVerical = location === ColorBarLocation.West || location === ColorBarLocation.East;\n  const COLORBOX_WIDTH = 15;\n  const AXIS_WIDTH = 35;\n  const TITLE_WIDTH = 25;\n  const COLORBAR_SIZE = COLORBOX_WIDTH + AXIS_WIDTH + TITLE_WIDTH;\n  return new ColorBar({\n    \"location\": location,\n    \"componentsizes\": {\n      \"colorbox\": 15,\n      \"axis\": 35,\n      \"title\": 25\n    },\n    \"colorprovider\": colorProvider,\n    \"flip\": true,\n    \"title\": {\n      \"text\": \"elevation\",\n      \"textstyle\": \"black\",\n      \"sizeisindevicespace\": true\n    }\n  }).setModelLimits(\n    isVerical ? new Rect(0, 0, COLORBAR_SIZE, 1) : new Rect(0, 0, 1, COLORBAR_SIZE)\n  );\n}\nfunction createLegend() {\n  return new Group().setBounds(new Rect(0, 0, 1, 1)).setModelLimits(new Rect(0, 0, 1, 1)).addChild(\n    [\n      new Border({\n        \"linestyle\": {\n          color: KnownColors.Gray,\n          pixelsnapmode: true\n        },\n        \"fillstyle\": KnownColors.LightGray\n      }),\n      new Rectangle({\n        \"left\": 0.1,\n        \"top\": 0.1,\n        \"width\": 0.1,\n        \"height\": 0.8,\n        \"fillstyle\": KnownColors.Blue\n      }),\n      new Text({\n        \"text\": \"rectangle\",\n        \"ax\": 0.35,\n        \"ay\": 0.5\n      }),\n      new Group().setBounds(new Rect(0.55, 0.1, 0.75, 0.9)).setModelLimits(new Rect(0, 0, 400, 400)).addChild([\n        new Spline({\n          \"x\": [100, 50, 150, 200, 300, 350],\n          \"y\": [350, 300, 200, 150, 50, 100],\n          \"linestyle\": KnownColors.Orange\n        })\n      ]),\n      new Text({\n        \"text\": \"spline\",\n        \"ax\": 0.85,\n        \"ay\": 0.5,\n        \"sizeisindevicespace\": true\n      })\n    ]\n  );\n}\nfunction createScene(canvas) {\n  const axisFactory = AxisFactory.getInstance();\n  const annotatedWidget = new AnnotatedWidget({\n    \"border\": \"LightGray\",\n    \"annotationssizes\": {\n      \"north\": 30,\n      \"south\": 70,\n      \"east\": 50,\n      \"west\": 75\n    },\n    \"tools\": {\n      \"verticalscroll\": {\n        \"visible\": false\n      },\n      \"horizontalscroll\": {\n        \"visible\": false\n      },\n      \"crosshair\": {\n        \"enabled\": false\n      },\n      \"panning\": {\n        \"enabled\": false\n      }\n    },\n    \"model\": createModel(),\n    \"north\": [\n      new Text({\n        \"text\": \"Custom Layout\",\n        \"ax\": 0.5,\n        \"ay\": 0.5,\n        \"textstyle\": {\n          \"color\": \"#757575\",\n          \"font\": \"18px Roboto\"\n        }\n      })\n    ],\n    \"south\": [\n      axisFactory.create({ \"location\": AnnotationLocation.South }).execute(function() {\n        this.getTickGenerator().setMinSpan(50);\n      }),\n      createLegend().setPaddingStyle(\"5px 1px\")\n    ],\n    \"west\": [\n      createColorBar(ColorBarLocation.West).setPaddingStyle({\n        \"right\": \"2px\"\n      })\n    ],\n    \"east\": [\n      axisFactory.create({ \"location\": AnnotationLocation.East }).execute(function() {\n        const tgEast = this.getTickGenerator();\n        tgEast.setMinSpan(50);\n        AxisHelper.initializeAxisTickGeneratorStyle(tgEast);\n      }),\n      new Text({\n        \"text\": \"East Title\",\n        \"ax\": 0.5,\n        \"ay\": 0.5,\n        \"textstyle\": {\n          \"color\": KnownColors.Green,\n          \"font\": \"20px Arial\"\n        }\n      }).rotate(Math.PI / 2)\n    ]\n  });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": annotatedWidget\n  });\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#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets?section=customizeAnnotations&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-css-style","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets#CSSStyle"},"children":["#"]}," Using CSS Style"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Сustomize look and fill width using CSS styles."]},{"$$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 { AnnotatedWidget } from \"@int/geotoolkit/widgets/AnnotatedWidget.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { createModel } from \"/src/code/Carnac/Widgets/AnnotatedWidget/createModel.ts\";\nfunction createScene(canvas) {\n  const axisFactory = AxisFactory.getInstance();\n  const annotatedWidget = new AnnotatedWidget({\n    \"model\": createModel(),\n    \"annotationssizes\": {\n      \"north\": 40,\n      \"south\": 40,\n      \"west\": 40,\n      \"east\": 40\n    },\n    \"border\": null,\n    \"tools\": {\n      \"verticalscroll\": {\n        \"visible\": false\n      },\n      \"horizontalscroll\": {\n        \"visible\": false\n      },\n      \"crosshair\": {\n        \"enabled\": false\n      },\n      \"panning\": {\n        \"enabled\": false\n      }\n    },\n    \"north\": [\n      axisFactory.create({ \"location\": AnnotationLocation.North })\n    ],\n    \"south\": [\n      axisFactory.create({ \"location\": AnnotationLocation.South })\n    ],\n    \"west\": [\n      axisFactory.create({ \"location\": AnnotationLocation.West })\n    ],\n    \"east\": [\n      axisFactory.create({ \"location\": AnnotationLocation.East })\n    ]\n  });\n  const css = `\n        *[cssclass~=\"vertical-middle\"] {\n            fillstyle: #303030;\n        }\n\n        *[cssclass~=\"left\"] {\n            fillstyle: #303030;\n        }\n\n        *[cssclass~=\"right\"] {\n            fillstyle: #303030;\n        }\n\n        .Axis {\n           tickgenerator-major-tickstyle-color: #FFD180;\n           tickgenerator-major-tickstyle-width: 2;\n           tickgenerator-major-labelstyle-color: #EFEFEF;\n           tickgenerator-major-labelstyle-font: bold 12px Roboto;\n\n           tickgenerator-minor-tickstyle-color: #EFEFEF;\n\n           tickgenerator-edge-tickstyle-color: #FFD180;\n           tickgenerator-edge-labelstyle-color: #EFEFEF;\n           tickgenerator-edge-labelstyle-font: bold 12px Roboto;\n        }\n\n        .Rectangle{\n           fillstyle: #81D4FA;\n        }\n\n        .Spline{\n           linestyle: 3 solid #FFF176;\n        }\n    `;\n  annotatedWidget.setCss({ \"css\": css });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": annotatedWidget\n  });\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#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets?section=CSSStyle&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"change-visible-limits","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets#changeVisibleLimits"},"children":["#"]}," Change Visible Limits"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the layout by modifying visible limits of the model."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Annotated node uses its own model coordinates system in order to display North, East, West, South annotations. To work directly with model and it limits you can use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnnotatedVidget``::getModel()"]}," to get the center model.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"With using model you can call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CompositeNode``::getModelLimits()"]}," to get model limits,",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::getVisibleModelLimits()"]}," returns the visible model limits in Model space",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"and the function ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::getVisibleDeviceLimits()"]}," returns the visible model limits in the plot coordinates;",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"You can also change model orientation, for example with using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::setVerticalFlip(true)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can alse use methods on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnnotatedWidget``::getVisibleModelLimits()"]}," to get visible model limits from center model or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::setVisibleModelLimits()"]}," to set it."]},{"$$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 { AnnotatedWidget } from \"@int/geotoolkit/widgets/AnnotatedWidget.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Spline } from \"@int/geotoolkit/scene/shapes/Spline.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Line } from \"@int/geotoolkit/scene/shapes/Line.ts\";\nimport { Grid } from \"@int/geotoolkit/axis/Grid.ts\";\nimport { AdaptiveTickGenerator } from \"@int/geotoolkit/axis/AdaptiveTickGenerator.ts\";\nfunction createModel() {\n  const splineX = [];\n  const splineY = [];\n  const offsetX = 100;\n  const offsetY = 50;\n  for (let x = 0; x < 400; x++) {\n    splineX.push(x);\n    splineY.push((x - offsetX) * (x - offsetX) / 100 + offsetY);\n  }\n  const hTickGenerator = new AdaptiveTickGenerator().setVisibleTickGrade(\"minor\", true);\n  hTickGenerator.getTickStyle(\"major\").setColor(\"rgba(100, 100, 100, 0.2)\");\n  hTickGenerator.getTickStyle(\"edge\").setColor(\"rgba(100, 100, 100, 0.5)\");\n  hTickGenerator.getTickStyle(\"minor\").setColor(\"rgba(100, 100, 100, 0.1)\").setPattern([4, 4]);\n  const vTickGenerator = new AdaptiveTickGenerator().setVisibleTickGrade(\"minor\", true);\n  vTickGenerator.getTickStyle(\"major\").setColor(\"rgba(100, 100, 100, 0.2)\");\n  vTickGenerator.getTickStyle(\"edge\").setColor(\"rgba(100, 100, 100, 0.5)\");\n  vTickGenerator.getTickStyle(\"minor\").setColor(\"rgba(100, 100, 100, 0.1)\").setPattern([4, 4]);\n  return new Group().setModelLimits(new Rect(0, 0, 400, 400)).addChild([\n    new Grid(hTickGenerator, vTickGenerator),\n    new Spline({\n      \"x\": splineX,\n      \"y\": splineY,\n      \"linestyle\": {\n        \"color\": KnownColors.Orange,\n        \"width\": 2\n      }\n    }),\n    new Line({\n      \"from\": { x: offsetX, y: 0 },\n      \"to\": { x: offsetX, y: 400 },\n      \"linestyle\": {\n        \"color\": KnownColors.Orange,\n        \"pixelsnapmode\": true\n      }\n    }),\n    new Line({\n      \"from\": { x: 0, y: offsetY },\n      \"to\": { x: 400, y: offsetY },\n      \"linestyle\": {\n        \"color\": KnownColors.Orange,\n        \"pixelsnapmode\": true\n      }\n    })\n  ]);\n}\nfunction createScene(canvas) {\n  const axisFactory = AxisFactory.getInstance();\n  const annotatedWidget = new AnnotatedWidget({\n    \"model\": createModel().setVerticalFlip(true),\n    \"annotationssizes\": {\n      \"north\": 30,\n      \"south\": 40,\n      \"west\": 50,\n      \"east\": 20\n    },\n    \"border\": \"rgba(100, 100, 100, 0.2)\",\n    \"tools\": {\n      \"verticalscroll\": {\n        \"floating\": true\n      },\n      \"horizontalscroll\": {\n        \"floating\": true\n      },\n      \"crosshair\": {\n        \"enabled\": false\n      },\n      \"panning\": {\n        \"enabled\": true\n      }\n    },\n    \"north\": [\n      new Text({\n        \"text\": \"Simple graph\",\n        \"ax\": 0.5,\n        \"ay\": 0.5,\n        \"textstyle\": {\n          \"color\": \"#757575\",\n          \"font\": \"18px Roboto\"\n        }\n      })\n    ],\n    \"south\": [\n      axisFactory.create({ \"location\": AnnotationLocation.South }),\n      new Text({\n        \"text\": \"x-axis\",\n        \"ax\": 0,\n        \"ay\": 1,\n        \"alignment\": AnchorType.LeftTop,\n        \"textstyle\": {\n          \"color\": \"#757575\"\n        }\n      })\n    ],\n    \"west\": [\n      new Text({\n        \"text\": \"y-axis\",\n        \"ax\": 1,\n        \"ay\": 1,\n        \"alignment\": AnchorType.LeftBottom,\n        \"textstyle\": {\n          \"color\": \"#757575\"\n        }\n      }).rotate(-Math.PI / 2),\n      axisFactory.create({ \"location\": AnnotationLocation.West })\n    ]\n  });\n  annotatedWidget.setVisibleModelLimits(new Rect(0, 0, 350, 350));\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": annotatedWidget\n  });\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#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets?section=changeVisibleLimits&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"internal-locked-axes","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets#internalLockedAxes"},"children":["#"]}," Internal Locked Axes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Illusion of a locked axes can be created by putting a group in the same place as the model and then connect the axis to the model."]},{"$$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 { AnnotatedWidget } from \"@int/geotoolkit/widgets/AnnotatedWidget.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { Axis } from \"@int/geotoolkit/axis/Axis.ts\";\nimport { AdaptiveLogTickGenerator } from \"@int/geotoolkit/axis/AdaptiveLogTickGenerator.ts\";\nimport { Events as NodeEvents } from \"@int/geotoolkit/scene/Node.ts\";\nimport { Polyline } from \"@int/geotoolkit/scene/shapes/Polyline.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { LabelPosition, TickPosition } from \"@int/geotoolkit/axis/TickInfo.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { AxisHelper } from \"/src/helpers/axis.ts\";\nimport { CssLayout } from \"@int/geotoolkit/layout/CssLayout.ts\";\nfunction createModel() {\n  const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], y = [\n    0,\n    0.2942140125669539,\n    0.03376712603494525,\n    0.8403971537481993,\n    0.511907295556739,\n    0.21692502405494452,\n    0.9026303198188543,\n    0.6066542339976877,\n    0.4515766170807183,\n    0.6822457714006305,\n    0.6191746226977557,\n    0.304504499072209,\n    0.3814454732928425,\n    0.12356831086799502,\n    0.021915478399023414,\n    0.42551541421562433,\n    0.288056978257373,\n    0.7553384704515338,\n    0.13983638840727508,\n    0.352386727463454,\n    0.19704886013641953,\n    0.5506594027392566,\n    0.2501351598184556,\n    0.6341288497205824,\n    0.43139789439737797,\n    0.08476797654293478,\n    0.9867885017301887,\n    0.562166113872081,\n    0.7035165049601346,\n    0.3304662255104631,\n    1\n  ];\n  const polyLine = new Polyline({\n    \"x\": x,\n    \"y\": y,\n    \"linestyle\": KnownColors.Orange\n  });\n  return new Group().setModelLimits(polyLine.getBounds()).addChild(polyLine);\n}\nfunction createScene(canvas) {\n  const axisFactory = AxisFactory.getInstance();\n  const annotatedWidget = new AnnotatedWidget({\n    \"annotationssizes\": {\n      \"north\": 0,\n      \"south\": 0,\n      \"west\": 0,\n      \"east\": 0\n    },\n    \"model\": createModel()\n  });\n  const axisContainer = new Group().setModelLimits(\n    annotatedWidget.getModel().getModelLimits()\n  ).enableClipping(true);\n  axisContainer.addChild([\n    axisFactory.create({ \"location\": AnnotationLocation.North }),\n    axisFactory.create({ \"location\": AnnotationLocation.South }),\n    new Axis(AxisHelper.initializeAxisTickGeneratorStyle(new AdaptiveLogTickGenerator()).setLabelStyle(\"minor\", AxisHelper.axisColor()[\"style\"]).setVisibleLabelGrade(\"minor\", true).setIntermediateTicks(false)).setOrientation(Orientation.Vertical).setTickPosition(TickPosition.Left).setLabelPosition(LabelPosition.Left),\n    new Axis(AxisHelper.initializeAxisTickGeneratorStyle(new AdaptiveLogTickGenerator()).setLabelStyle(\"minor\", AxisHelper.axisColor()[\"style\"]).setVisibleLabelGrade(\"minor\", true).setIntermediateTicks(false)).setOrientation(Orientation.Vertical).setTickPosition(TickPosition.Right).setLabelPosition(LabelPosition.Right)\n  ]);\n  annotatedWidget.getModel().on(NodeEvents.SceneTransformationChanged, () => {\n    const modelLimits = annotatedWidget.getVisibleCenterModelLimits();\n    axisContainer.setModelLimits(modelLimits).getChildren().forEach((axis) => axis.setBounds(modelLimits));\n  });\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": new Group().setLayout(new CssLayout()).addChild([\n      annotatedWidget.setLayoutStyle({\n        left: \"20px\",\n        top: \"20px\",\n        right: \"20px\",\n        bottom: \"20px\"\n      }),\n      axisContainer.setLayoutStyle({\n        left: \"20px\",\n        top: \"20px\",\n        right: \"20px\",\n        bottom: \"20px\"\n      })\n    ])\n  });\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#/Carnac/Widgets/AnnotatedWidget/annotatedWidgets?section=internalLockedAxes&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Annotated Widget","id":"annotated-widget","depth":1},{"value":"Create Annotated Widget","id":"create-annotated-widget","depth":3},{"value":"Customize Annotations","id":"customize-annotations","depth":3},{"value":"Using CSS Style","id":"using-css-style","depth":3},{"value":"Change Visible Limits","id":"change-visible-limits","depth":3},{"value":"Internal Locked Axes","id":"internal-locked-axes","depth":3}],"frontmatter":{"title":"Annotated Widget","seo":{"title":"Annotated Widget"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/widgets/annotated-widgets","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}