fix: custom nodes not getting styled properly

* BezierEdge.tsx not drawing paths correctly

examples/CustomNode/ColorSelectorNode.vue

@@ -1,31 +1,30 @@
 <template>
+  <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
   <div>
-    <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
-    <div>
-      Custom Color Picker Node: <strong>{{ data.color }}</strong>
-    </div>
-    <input class="nodrag" type="color" :value="data.color" @input="onChange" />
-    <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
-    <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+    Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>
+  <input class="nodrag" type="color" :value="data.color" @input="onChange" />
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>
 <script lang="ts">
-import { CSSProperties, defineComponent } from 'vue';
+import { CSSProperties, defineComponent, PropType } from 'vue';
 import { Handle, Position, Connection, Edge } from '../../src';
 
 const ColorSelectorNode = defineComponent({
   components: { Handle },
+  inheritAttrs: false,
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<{ color: string; onChange: (event: any) => any }>,
       required: false,
-      default: () => ({})
+      default: () => {}
     }
   },
   setup(props) {
     const targetHandleStyle: CSSProperties = { background: '#555' };
-    const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
-    const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
+    const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' };
+    const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px', top: 'auto' };
 
     const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
@@ -35,7 +34,7 @@ const ColorSelectorNode = defineComponent({
       sourceHandleStyleA,
       sourceHandleStyleB,
       onConnect,
-      onChange: props.data.onChange as any
+      onChange: props.data.onChange
     };
   }
 });

examples/CustomNode/CustomNode.vue

@@ -95,7 +95,7 @@ const CustomNodeFlow = defineComponent({
           id: '2',
           type: 'selectorNode',
           data: { onChange: onChange, color: bgColor.value },
-          style: { border: '1px solid #777', padding: 10 },
+          style: { border: '1px solid #777', padding: '10px' },
           position: { x: 250, y: 50 }
         },
         {