docs(examples): helper lines (#1915)

feat: add optional chaining to prevent types errors and add an example of helper lines (#1904)

* docs: code errors in "Updating Node Data" (#1900)

fix(docs): Example of fixing code errors in "Updating Node Data"

* fix: add optional chaining to prevent errors in link filtering

* feat: add an example of helper lines

* refactor: In the HelperLines example, replace the observer with dimensions

---------

Co-authored-by: Charles Lee <114982593+rookie-orange@users.noreply.github.com>
Co-authored-by: J <gongjie0422@163.com>

docs/examples/index.ts

@@ -24,6 +24,13 @@ import { LoopbackApp, LoopbackCSS, LoopbackEdge } from './loopback'
 import { MathApp, MathCSS, MathElements, MathIcon, MathOperatorNode, MathResultNode, MathValueNode } from './math'
 import { ConfirmApp, ConfirmDialog, useDialog } from './confirm-delete'
 import { EdgeMarkersApp, EdgeMarkersCSS, EdgeMarkersEdge, EdgeMarkersMarker } from './edge-markers'
+import {
+  HelperLinesApp,
+  HelperLinesComponent,
+  HelperLinesInitialElements,
+  HelperLinesStyle,
+  HelperLinesUtils,
+} from './helper-lines'
 
 export const exampleImports = {
   basic: {
@@ -176,4 +183,11 @@ export const exampleImports = {
     'CustomMarker.vue': EdgeMarkersMarker,
     'style.css': EdgeMarkersCSS,
   },
+  helperLines: {
+    'App.vue': HelperLinesApp,
+    'HelperLines.vue': HelperLinesComponent,
+    'utils.ts': HelperLinesUtils,
+    'initialElements.ts': HelperLinesInitialElements,
+    'style.css': HelperLinesStyle,
+  },
 }