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/helper-lines/initialElements.ts

@@ -0,0 +1,36 @@
+import type { Edge, Node } from '@vue-flow/core'
+
+export const initialNodes: Node[] = [
+  {
+    id: '1',
+    position: { x: 0, y: 0 },
+    style: { width: '200px', height: '100px', backgroundColor: '#D6E4F0' },
+    data: { label: 'Move me around' },
+  },
+  {
+    id: '2',
+    position: { x: 400, y: 300 },
+    style: { width: '220px', height: '400px', backgroundColor: '#5CD882' },
+    data: { label: 'Move me around' },
+  },
+  {
+    id: '3',
+    position: { x: -55, y: 220 },
+    style: { width: '125px', height: '220px', backgroundColor: '#F6E5E5' },
+    data: { label: 'Move me around' },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: -200 },
+    style: { width: '180px', height: '180px', backgroundColor: '#FF0071' },
+    data: { label: 'Move me around' },
+  },
+  {
+    id: '5',
+    position: { x: -120, y: 500 },
+    style: { width: '300px', height: '120px', backgroundColor: '#FBC2EB' },
+    data: { label: 'Move me around' },
+  },
+]
+
+export const initialEdges: Edge[] = []