chore(docs): update example styles (#1469)

* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples

docs/examples/custom-node/App.vue

@@ -21,8 +21,6 @@ const nodes = ref([
   },
 ])
 
-const colorSelectorData = toRef(() => nodes.value[0].data)
-
 const edges = ref([
   {
     id: 'e1a-2',
@@ -30,19 +28,21 @@ const edges = ref([
     sourceHandle: 'a',
     target: '2',
     animated: true,
-    style: () => ({
-      stroke: colorSelectorData.value?.color,
-    }),
+    style: {
+      stroke: presets.ayame,
+    },
   },
 ])
 
+const colorSelectorData = toRef(() => nodes.value[0].data)
+
 // minimap stroke color functions
 function nodeStroke(n) {
   switch (n.type) {
     case 'input':
       return '#0041d0'
     case 'color-selector':
-      return presets.sumi
+      return n.data.color
     case 'output':
       return '#ff0072'
     default:
@@ -52,7 +52,7 @@ function nodeStroke(n) {
 
 function nodeColor(n) {
   if (n.type === 'color-selector') {
-    return colorSelectorData.value?.color
+    return n.data.color
   }
 
   return '#fff'
@@ -66,11 +66,10 @@ function nodeColor(n) {
     class="custom-node-flow"
     :class="[colorSelectorData?.isGradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: colorSelectorData?.color }"
-    :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
-    <template #node-color-selector="{ id }">
-      <ColorSelectorNode :id="id" />
+    <template #node-color-selector="props">
+      <ColorSelectorNode :id="props.id" :data="props.data" />
     </template>
 
     <template #node-output>

docs/examples/custom-node/ColorSelectorNode.vue

@@ -7,12 +7,23 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  data: {
+    type: Object,
+    required: true,
+  },
 })
 
-const { updateNodeData } = useVueFlow()
+const { updateNodeData, getConnectedEdges } = useVueFlow()
 
 function onSelect(color) {
   updateNodeData(props.id, { color, isGradient: false })
+
+  const connectedEdges = getConnectedEdges(props.id)
+  for (const edge of connectedEdges) {
+    edge.style = {
+      stroke: color,
+    }
+  }
 }
 
 function onGradient() {
@@ -28,6 +39,7 @@ function onGradient() {
       v-for="{ name: colorName, value: color } of colors"
       :key="colorName"
       :title="colorName"
+      :class="{ selected: color === data.color }"
       :style="{ backgroundColor: color }"
       type="button"
       @click="onSelect(color)"

docs/examples/custom-node/OutputNode.vue

@@ -9,6 +9,10 @@ const nodesData = useNodesData(() => connections.value[0]?.source)
 </script>
 
 <template>
-  <Handle type="target" :position="Position.Left" :style="{ backgroundColor: nodesData.data?.color, filter: 'invert(100%)' }" />
+  <Handle
+    type="target"
+    :position="Position.Left"
+    :style="{ height: '16px', width: '6px', backgroundColor: nodesData.data?.color, filter: 'invert(100%)' }"
+  />
   {{ nodesData.data?.isGradient ? 'GRADIENT' : nodesData.data?.color }}
 </template>

docs/examples/custom-node/style.css

@@ -1,8 +1,14 @@
-.custom-node-flow .vue-flow__edges {
+.vue-flow__edges {
   filter: invert(100%);
 }
 
-.custom-node-flow .vue-flow__node-color-selector {
+.vue-flow__handle {
+  height: 24px;
+  width: 8px;
+  border-radius: 4px;
+}
+
+.vue-flow__node-color-selector {
   border: 1px solid #777;
   padding: 10px;
   border-radius: 10px;
@@ -15,7 +21,7 @@
   max-width: 250px;
 }
 
-.custom-node-flow .vue-flow__node-color-selector .color-selector {
+.vue-flow__node-color-selector .color-selector {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -25,20 +31,30 @@
   gap: 4px
 }
 
-.custom-node-flow .vue-flow__node-color-selector .color-selector button {
-  border: 1px solid #777;
+.vue-flow__node-color-selector .color-selector button {
+  border: none;
   cursor: pointer;
   padding: 5px;
   width: 25px;
   height: 25px;
-  border-radius: 25px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
-.custom-node-flow .vue-flow__node-color-selector .color-selector button:hover {
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  transform: scale(105%);
-  transition: 250ms all ease;
+.vue-flow__node-color-selector .color-selector button:hover {
+  box-shadow: 0 0 0 2px #2563eb;
+  transition: box-shadow 0.2s;
+}
+
+.vue-flow__node-color-selector .color-selector button.selected {
+  box-shadow: 0 0 0 2px #2563eb;
+}
+
+.vue-flow__node-color-selector .vue-flow__handle {
+  background-color: #ec4899;
+  height: 24px;
+  width: 8px;
+  border-radius: 4px;
 }
 
 .animated-bg-gradient {