alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): cleanup

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-05-02 23:27:09 +02:00
committed by Braks
parent af126607bc
commit 87c55541dd
9 changed files with 60 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Home.vue
-25
View File
@@ -9,31 +9,6 @@ const isMobile = smaller('md')
const { blobity } = useBlobity()
const usesDark = useDark({
storageKey: 'vuepress-color-scheme',
selector: 'html',
})
const dark = ref(false)
onMounted(() => {
const html = document.getElementsByTagName('html')![0]
usesDark.value = html.classList.contains('dark')
const observer = new MutationObserver((mutations) => {
for (const _ of mutations) {
dark.value = html.classList.contains('dark')
}
})
observer.observe(html, {
attributes: true,
attributeOldValue: true,
attributeFilter: ['class'],
})
})
onMounted(() => {
if (isMobile.value) {
blobity.value.destroy()
docs/components/home/edges/Custom.vue
+18 -20
View File
@@ -1,9 +1,15 @@
<script lang="ts" setup>
import { computed } from 'vue'
import type { EdgeProps, MarkerType, Position } from '@vue-flow/core'
import type { EdgeProps, Position } from '@vue-flow/core'
import { getBezierPath } from '@vue-flow/core'
import type { Colors } from '../flows/utils'
interface CustomEdgeProps extends EdgeProps {
interface EdgeData {
text?: string
color?: Colors
}
interface CustomEdgeProps extends EdgeProps<EdgeData> {
source: string
target: string
sourceHandleId?: string
@@ -15,24 +21,16 @@ interface CustomEdgeProps extends EdgeProps {
targetY: number
sourcePosition: Position
targetPosition: Position
markerEnd?: MarkerType
data?: {
markerEnd: string
data: {
text?: string
color?: 'red' | 'green' | 'blue'
color?: Colors
}
}
const props = defineProps<CustomEdgeProps>()
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const edgePath = computed(() => getBezierPath(props))
</script>
<script lang="ts">
@@ -43,15 +41,15 @@ export default {
<template>
<path
:id="props.id"
:id="id"
class="vue-flow__edge-path"
:style="{ stroke: props.data?.color }"
:style="{ stroke: data?.color, strokeWidth: '3' }"
:d="edgePath[0]"
:marker-end="props.markerEnd"
:marker-end="markerEnd"
/>
<text>
<textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
{{ props.data?.text }}
<textPath :href="`#${id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
{{ data?.text }}
</textPath>
</text>
</template>
docs/components/home/flows/Intro.vue
+9 -3
View File
@@ -6,13 +6,15 @@ import Heart from '~icons/mdi/heart'
const breakpoints = useBreakpoints(breakpointsTailwind)
const dark = ref(false)
const isDark = ref(false)
onMounted(() => {
const html = document.getElementsByTagName('html')![0]
isDark.value = html.classList.contains('dark')
const observer = new MutationObserver(() => {
dark.value = html.classList.contains('dark')
isDark.value = html.classList.contains('dark')
})
observer.observe(html, {
@@ -20,6 +22,10 @@ onMounted(() => {
attributeOldValue: true,
attributeFilter: ['class'],
})
onBeforeUnmount(() => {
observer.disconnect()
})
})
const initialEdges = [
@@ -186,7 +192,7 @@ function scrollTo() {
<template>
<VueFlow ref="el">
<Background variant="lines" :pattern-color="dark ? '#ffffff' : '#000000'" :size="0.7" :gap="100" />
<Background variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="0.7" :gap="100" />
<template #node-box="props">
<template v-if="props.id === 'intro'">
docs/components/home/flows/RGB.vue
+13 -13
View File
@@ -9,23 +9,18 @@ import type { MiniMapNodeFunc } from '@vue-flow/minimap'
import CustomEdge from '../edges/Custom.vue'
import RGBNode from '../nodes/Input.vue'
import RGBOutputNode from '../nodes/Output.vue'
import type { Colors } from './utils'
const emit = defineEmits(['pane'])
const breakpoints = useBreakpoints(breakpointsTailwind)
interface Colors {
red: number
green: number
blue: number
}
const { onPaneReady, getNode, panOnDrag } = useVueFlow({
const { onPaneReady, findNode, panOnDrag } = useVueFlow({
id: 'rgb-flow',
nodes: [
{ id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
{ id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
{ id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
{ id: '1', type: 'rgb', data: { color: 'green' }, position: { x: -25, y: 0 } },
{ id: '2', type: 'rgb', data: { color: 'red' }, position: { x: 50, y: -110 } },
{ id: '3', type: 'rgb', data: { color: 'blue' }, position: { x: 0, y: 110 } },
{ id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
],
edges: [
@@ -41,7 +36,7 @@ onPaneReady((i) => emit('pane', i))
const el = templateRef<HTMLDivElement>('el', null)
const color = ref<Colors>({
const color = ref<Record<Colors, number>>({
red: 222,
green: 45,
blue: 140,
@@ -52,14 +47,19 @@ watch(
() => {
const mobile = breakpoints.isSmaller('md')
if (mobile) {
getNode.value('4')!.position = { x: 300, y: -25 }
const node = findNode('4')
if (node) {
node.position = { x: 300, y: -25 }
}
}
panOnDrag.value = !mobile
},
{ immediate: true },
)
function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
function onChange({ color: c, val }: { color: Colors; val: number }) {
return (color.value[c] = Number(val))
}
docs/components/home/flows/confetti.ts
-69
View File
@@ -1,69 +0,0 @@
import confetti from 'canvas-confetti'
export function fireworks(colors?: string[]) {
return new Promise((resolve) => {
const duration = 15 * 1000
const animationEnd = Date.now() + duration
const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
function randomInRange(min: number, max: number) {
return Math.random() * (max - min) + min
}
const interval: any = setInterval(function () {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) {
clearInterval(interval)
return resolve(true)
}
const particleCount = 50 * (timeLeft / duration)
// since particles fall down, start a bit higher than random
confetti(
Object.assign({}, defaults, {
particleCount,
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
colors,
}),
)
confetti(
Object.assign({}, defaults, {
particleCount,
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
colors,
}),
)
}, 250)
})
}
export function cheer(colors: string[]) {
return new Promise((resolve) => {
const end = Date.now() + 2 * 1000
function frame() {
confetti({
particleCount: 2,
angle: 60,
spread: 75,
origin: { x: 0 },
colors,
})
confetti({
particleCount: 2,
angle: 120,
spread: 75,
origin: { x: 1 },
colors,
})
if (Date.now() < end) {
requestAnimationFrame(frame)
} else {
resolve(true)
}
}
frame()
})
}
docs/components/home/flows/utils.ts
+1
View File
@@ -0,0 +1 @@
export type Colors = 'red' | 'blue' | 'green'
docs/components/home/nodes/Input.vue
+14 -31
View File
@@ -1,50 +1,29 @@
<script lang="ts" setup>
import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
import type { Colors } from '../flows/utils'
interface RGBNodeProps extends NodeProps {
interface RGBNodeProps extends Pick<NodeProps<{ color: Colors }>, 'data'> {
data: {
color: 'r' | 'g' | 'b'
}
amount: {
red: number
green: number
blue: number
color: Colors
}
amount: Record<Colors, number>
}
const props = defineProps<RGBNodeProps>()
const emit = defineEmits(['change'])
const emit = defineEmits<{ (event: 'change', data: { color: Colors; val: number }): void }>()
const currentColor = computed(() => {
let color
const currentColor = toRef(props.data, 'color', 'red')
switch (props.data?.color) {
case 'r':
color = 'red'
break
case 'g':
color = 'green'
break
case 'b':
color = 'blue'
break
default:
color = 'red'
}
return color
})
function onChange(e: any) {
return emit('change', { color: currentColor.value, val: e.target.value })
function onChange(e: InputEvent) {
return emit('change', { color: currentColor.value, val: parseInt((e.target as HTMLInputElement).value) })
}
</script>
<template>
<div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
<div class="text-md" :style="{ color: currentColor }">{{ `${currentColor} Amount`.toUpperCase() }}</div>
<div class="text-md font-semibold text-center" :style="{ color: currentColor }">{{ `${currentColor}`.toUpperCase() }}</div>
<input
:model-value="amount[currentColor]"
@@ -56,6 +35,10 @@ function onChange(e: any) {
@input="onChange"
/>
<Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
<Handle
type="source"
:position="Position.Right"
:style="{ backgroundColor: currentColor, right: '-6px', width: '12px', height: '12px' }"
/>
</div>
</template>
docs/components/home/nodes/Output.vue
+5 -9
View File
@@ -1,21 +1,17 @@
<script lang="ts" setup>
import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
interface RBGOutputNodeProps extends NodeProps {
interface RBGOutputNodeProps {
rgb: string
}
const props = defineProps<RBGOutputNodeProps>()
defineProps<RBGOutputNodeProps>()
</script>
<template>
<div
:style="{ backgroundColor: props.rgb }"
class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white"
>
<div :style="{ backgroundColor: rgb }" class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
<div class="text-xl font-bold">Color Output</div>
<div class="font-semibold">{{ props.rgb }}</div>
<Handle type="target" :position="Position.Left" />
<div class="font-semibold">{{ rgb }}</div>
<Handle type="target" :position="Position.Left" :style="{ left: '-6px', width: '12px', height: '12px' }" />
</div>
</template>
pnpm-lock.yaml
Generated
-14
View File
@@ -58,9 +58,6 @@ importers:
blobity:
specifier: ^0.2.3
version: 0.2.3(react@18.2.0)(vue@3.2.47)
canvas-confetti:
specifier: ^1.6.0
version: 1.6.0
vue:
specifier: 3.2.47
version: 3.2.47
@@ -77,9 +74,6 @@ importers:
'@tooling/tsconfig':
specifier: workspace:*
version: link:../tooling/tsconfig
'@types/canvas-confetti':
specifier: ^1.6.0
version: 1.6.0
'@vitejs/plugin-vue':
specifier: ^4.1.0
version: 4.1.0(vite@4.3.0)(vue@3.2.47)
@@ -2646,10 +2640,6 @@ packages:
'@types/node': 18.15.12
dev: true
/@types/canvas-confetti@1.6.0:
resolution: {integrity: sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==}
dev: true
/@types/chrome@0.0.208:
resolution: {integrity: sha512-VDU/JnXkF5qaI7WBz14Azpa2VseZTgML0ia/g/B1sr9OfdOnHiH/zZ7P7qCDqxSlkqJh76/bPc8jLFcx8rHJmw==}
dependencies:
@@ -4320,10 +4310,6 @@ packages:
resolution: {integrity: sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==}
dev: true
/canvas-confetti@1.6.0:
resolution: {integrity: sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==}
dev: false
/caseless@0.12.0:
resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
dev: true