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

update: change name to vue flow

Browse Source 
* Add gif to readme

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 64a4b8c418
commit 2bfecf7148
49 changed files with 184 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Background/Background.vue
+1 -1
View File
@@ -24,7 +24,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
const store = useStore()
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
const bgClasses = ['revue-flow__background']
const bgClasses = ['vue-flow__background']
const background = computed(() => {
const scaledGap = props.gap && props.gap * store.transform[2]
const xOffset = scaledGap && store.transform[0] % scaledGap
src/additional-components/Controls/ControlButton.vue
+1 -1
View File
@@ -6,7 +6,7 @@ export interface ControlButtonProps extends ButtonHTMLAttributes {}
const props: any = defineProps<ControlButtonProps>()
</script>
<template>
<button :class="['revue-flow__controls-button']" v-bind="props">
<button :class="['vue-flow__controls-button']" v-bind="props">
<slot></slot>
</button>
</template>
src/additional-components/Controls/Controls.vue
+5 -5
View File
@@ -30,7 +30,7 @@ const store = useStore()
const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
const mapClasses = ['revue-flow__controls']
const mapClasses = ['vue-flow__controls']
const onZoomInHandler = () => {
zoomIn?.()
@@ -56,14 +56,14 @@ const onInteractiveChangeHandler = () => {
<div :class="mapClasses">
<template v-if="props.showZoom">
<slot name="control-zoom-in">
<ControlButton class="revue-flow__controls-zoomin" @click="onZoomInHandler">
<ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
<slot name="icon-zoom-in">
<PlusIcon />
</slot>
</ControlButton>
</slot>
<slot name="control-zoom-out">
<ControlButton class="revue-flow__controls-zoomout" @click="onZoomOutHandler">
<ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
<slot name="icon-zoom-out">
<MinusIcon />
</slot>
@@ -71,14 +71,14 @@ const onInteractiveChangeHandler = () => {
</slot>
</template>
<slot name="control-fitview">
<ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" @click="onFitViewHandler">
<ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
<slot name="icon-fitview">
<Fitview />
</slot>
</ControlButton>
</slot>
<slot name="control-interactive">
<ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<slot name="icon-unlock">
<Unlock v-if="isInteractive" />
</slot>
src/additional-components/MiniMap/MiniMap.vue
+2 -2
View File
@@ -73,7 +73,7 @@ const viewBox = computed(() => {
:width="elementWidth"
:height="elementHeight"
:viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
class="revue-flow__minimap"
class="vue-flow__minimap"
>
<slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
<template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
@@ -94,7 +94,7 @@ const viewBox = computed(() => {
</template>
</slot>
<path
class="revue-flow__minimap-mask"
class="vue-flow__minimap-mask"
:d="`
M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
v${viewBox.height + viewBox.offset * 2}
src/additional-components/MiniMap/MiniMapNode.vue
+1 -1
View File
@@ -22,7 +22,7 @@ const fill = computed(() => (props.color || styles.background || styles.backgrou
</script>
<template>
<rect
class="revue-flow__minimap-node"
class="vue-flow__minimap-node"
:x="props.x"
:y="props.y"
:rx="props.borderRadius"
src/additional-components/index.ts
+2 -2
View File
@@ -1,5 +1,5 @@
// These components are not used by revue Flow directly
// but the user can add them as children of a revue Flow component
// These components are not used by vue flow directly
// but the user can add them as children of a vue flow component
export { default as MiniMap } from './MiniMap/MiniMap.vue'
export { default as Controls } from './Controls/Controls.vue'
src/components/ConnectionLine/ConnectionLine.vue
+2 -2
View File
@@ -71,7 +71,7 @@ const dAttr = computed(() => {
})
</script>
<template>
<g class="revue-flow__connection">
<g class="vue-flow__connection">
<slot
v-bind="{
sourceX,
@@ -84,7 +84,7 @@ const dAttr = computed(() => {
connectionLineStyle: props.connectionLineStyle,
}"
>
<path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
<path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
</slot>
</g>
</template>
src/components/Edges/BezierEdge.vue
+1 -1
View File
@@ -52,7 +52,7 @@ const path = computed(() =>
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<EdgeText
v-if="props.label"
:x="centered[0]"
src/components/Edges/Edge.vue
+2 -2
View File
@@ -122,8 +122,8 @@ const edgePos = computed(() =>
<g
v-if="!props.edge.isHidden && isVisible(edgePos)"
:class="[
'revue-flow__edge',
`revue-flow__edge-${props.edge.type || 'default'}`,
'vue-flow__edge',
`vue-flow__edge-${props.edge.type || 'default'}`,
{
selected: isSelected,
animated: props.edge.animated,
src/components/Edges/EdgeAnchor.vue
+1 -1
View File
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<EdgeAnchorProps>(), {
</script>
<template>
<circle
class="revue-flow__edgeupdater"
class="vue-flow__edgeupdater"
:cx="shiftX(props.centerX, props.radius, props.position)"
:cy="shiftY(props.centerY, props.radius, props.position)"
:r="props.radius"
src/components/Edges/EdgeText.vue
+3 -3
View File
@@ -30,19 +30,19 @@ const edgeRef = templateRef<SVGTextElement>('edge-text', null)
const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
</script>
<template>
<g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="revue-flow__edge-textwrapper">
<g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
<rect
v-if="props.labelShowBg"
:width="width + 2 * props.labelBgPadding[0] + 'px'"
:height="height + 2 * props.labelBgPadding[1] + 'px'"
:x="-props.labelBgPadding[0]"
:y="-props.labelBgPadding[1]"
class="revue-flow__edge-textbg"
class="vue-flow__edge-textbg"
:style="props.labelBgStyle"
:rx="props.labelBgBorderRadius"
:ry="props.labelBgBorderRadius"
/>
<text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
<text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
<component
:is="props.label.component"
v-if="typeof props.label.component !== 'undefined'"
src/components/Edges/SmoothStepEdge.vue
+1 -1
View File
@@ -55,7 +55,7 @@ const path = computed(() =>
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<EdgeText
v-if="props.label"
:x="centered[0]"
src/components/Edges/StraightEdge.vue
+1 -1
View File
@@ -59,7 +59,7 @@ const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerE
<template>
<path
:style="props.style"
class="revue-flow__edge-path"
class="vue-flow__edge-path"
:d="`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`"
:marker-end="markerEnd"
/>
src/components/Edges/utils.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
return `url(#${markerEndId})`
}
return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none'
return typeof arrowHeadType !== 'undefined' ? `url(#vue-flow__${arrowHeadType})` : 'none'
}
export interface GetCenterParams {
src/components/Handle/Handle.vue
+2 -2
View File
@@ -32,8 +32,8 @@ const onMouseDownHandler = (event: MouseEvent) =>
:data-nodeid="nodeId"
:data-handlepos="props.position"
:class="[
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'vue-flow__handle',
`vue-flow__handle-${props.position}`,
'nodrag',
{
source: props.type !== 'target',
src/components/Nodes/Node.vue
+2 -2
View File
@@ -142,8 +142,8 @@ onMounted(() => {
<div
ref="node-element"
:class="[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
'vue-flow__node',
`vue-flow__node-${props.node.type}`,
{
selected: props.selected,
selectable: props.selectable,
src/components/NodesSelection/NodesSelection.vue
+2 -2
View File
@@ -70,7 +70,7 @@ const onContextMenu = (event: MouseEvent) => {
</script>
<template>
<div
class="revue-flow__nodesselection"
class="vue-flow__nodesselection"
:style="{
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
}"
@@ -83,7 +83,7 @@ const onContextMenu = (event: MouseEvent) => {
@move="onDrag"
@stop="onStop"
>
<div class="revue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
<div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
</Draggable>
</div>
</template>
src/components/UserSelection/SelectionRect.vue
+1 -1
View File
@@ -10,7 +10,7 @@ const props = defineProps<SelectionRectProps>()
</script>
<template>
<div
class="revue-flow__selection"
class="vue-flow__selection"
:style="{
width: `${props.width}px`,
height: `${props.height}px`,
src/components/UserSelection/UserSelection.vue
+1 -1
View File
@@ -37,7 +37,7 @@ useEventListener(el, 'mouseup', onMouseUp)
useEventListener(el, 'mouseleave', onMouseLeave)
</script>
<template>
<div ref="user-selection" class="revue-flow__selectionpane">
<div ref="user-selection" class="vue-flow__selectionpane">
<SelectionRect
v-if="store.userSelectionRect.draw"
:width="store.userSelectionRect.width"
src/components/UserSelection/utils.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { XYPosition } from '~/types'
export function getMousePosition(event: MouseEvent): XYPosition | void {
const revueFlowNode = (event.target as Element).closest('.revue-flow')
const revueFlowNode = (event.target as Element).closest('.vue-flow')
if (!revueFlowNode) {
return
}
src/composables/useHandle.ts
+6 -6
View File
@@ -64,8 +64,8 @@ export const checkElementBelowIsValid = (
}
const resetRecentHandle = (hoveredHandle: Element): void => {
hoveredHandle?.classList.remove('revue-flow__handle-valid')
hoveredHandle?.classList.remove('revue-flow__handle-connecting')
hoveredHandle?.classList.remove('vue-flow__handle-valid')
hoveredHandle?.classList.remove('vue-flow__handle-connecting')
}
export default () => {
@@ -82,8 +82,8 @@ export default () => {
},
elementEdgeUpdaterType?: HandleType,
) => {
const revueFlowNode = (event.target as Element).closest('.revue-flow')
// when revue-flow is used inside a shadow root we can't use document
const revueFlowNode = (event.target as Element).closest('.vue-flow')
// when vue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement)
if (!doc) return
@@ -130,8 +130,8 @@ export default () => {
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow
elementBelow.classList.add('revue-flow__handle-connecting')
elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
elementBelow.classList.add('vue-flow__handle-connecting')
elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
}
}
src/composables/useUpdateNodeInternals.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export default (): UpdateNodeInternals => {
const store = useStore()
return (id: ElementId) => {
const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)
const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
if (nodeElement) {
store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }])
src/composables/useZoom.ts
+2 -2
View File
@@ -149,13 +149,13 @@ export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
// when the target element is a node, we still allow zooming
if (
((event.target as Element).closest('.revue-flow__node') || (event.target as Element).closest('.revue-flow__edge')) &&
((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
event.type !== 'wheel'
)
return false
// when the target element is a node selection, we still allow zooming
if ((event.target as Element).closest('.revue-flow__nodesselection') && event.type !== 'wheel') return false
if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
src/container/EdgeRenderer/EdgeRenderer.vue
+1 -1
View File
@@ -29,7 +29,7 @@ const connectionLineVisible = computed(
)
</script>
<template>
<svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
<svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
<MarkerDefinitions :color="props.arrowHeadColor" />
<g
:transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
src/container/EdgeRenderer/Marker.vue
+1 -1
View File
@@ -8,7 +8,7 @@ const props = defineProps<MarkerProps>()
<template>
<marker
:id="props.id"
class="revue-flow__arrowhead"
class="vue-flow__arrowhead"
markerWidth="12.5"
markerHeight="12.5"
viewBox="-10 -10 20 20"
src/container/EdgeRenderer/MarkerDefinitions.vue
+2 -2
View File
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
</script>
<template>
<defs>
<Marker id="revue-flow__arrowclosed">
<Marker id="vue-flow__arrowclosed">
<polyline
:stroke="props.color"
stroke-linecap="round"
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
points="-5,-4 0,0 -5,4 -5,-4"
/>
</Marker>
<Marker id="revue-flow__arrow">
<Marker id="vue-flow__arrow">
<polyline
:stroke="props.color"
stroke-linecap="round"
src/container/Flow/Flow.vue
+1 -1
View File
@@ -132,7 +132,7 @@ const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
</script>
<template>
<div class="revue-flow">
<div class="vue-flow">
<ZoomPane
:selection-key-code="props.selectionKeyCode"
:zoom-activation-key-code="props.zoomActivationKeyCode"
src/container/NodeRenderer/NodeRenderer.vue
+1 -1
View File
@@ -40,7 +40,7 @@ const type = (node: TNode) => {
</script>
<template>
<div
class="revue-flow__nodes"
class="vue-flow__nodes"
:style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
>
<template v-for="node of getNodes" :key="node.id">
src/container/SelectionPane/SelectionPane.vue
+1 -1
View File
@@ -52,5 +52,5 @@ useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionAc
<slot></slot>
<UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
<NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
<div class="revue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
<div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
</template>
src/container/ZoomPane/ZoomPane.vue
+1 -1
View File
@@ -58,7 +58,7 @@ hooks.load.trigger({
})
</script>
<template>
<div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
<div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
<slot v-bind="{ transform, dimensions: { width, height } }"></slot>
</div>
</template>
src/store/useFlowStore.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
setActivePinia(pinia)
return defineStore({
id: `revue-flow-${Math.floor(Math.random() * 100)}`,
id: `vue-flow-${Math.floor(Math.random() * 100)}`,
state: () => ({
...preloadedState,
}),
src/style.css
+27 -27
View File
@@ -1,13 +1,13 @@
.revue-flow {
.vue-flow {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.revue-flow__renderer,
.revue-flow__pane,
.revue-flow__selectionpane {
.vue-flow__renderer,
.vue-flow__pane,
.vue-flow__selectionpane {
width: 100%;
height: 100%;
position: absolute;
@@ -15,25 +15,25 @@
left: 0;
}
.revue-flow__pane {
.vue-flow__pane {
z-index: 1;
}
.revue-flow__renderer {
.vue-flow__renderer {
z-index: 4;
}
.revue-flow__selectionpane {
.vue-flow__selectionpane {
z-index: 5;
}
.revue-flow__selection {
.vue-flow__selection {
position: absolute;
top: 0;
left: 0;
}
.revue-flow__edges {
.vue-flow__edges {
position: absolute;
top: 0;
left: 0;
@@ -41,7 +41,7 @@
z-index: 2;
}
.revue-flow__edge {
.vue-flow__edge {
pointer-events: visibleStroke;
&.inactive {
@@ -55,20 +55,20 @@
}
}
.revue-flow__edge-path {
.vue-flow__edge-path {
fill: none;
}
.revue-flow__edge-textwrapper {
.vue-flow__edge-textwrapper {
pointer-events: all;
}
.revue-flow__edge-text {
.vue-flow__edge-text {
pointer-events: none;
user-select: none;
}
.revue-flow__connection {
.vue-flow__connection {
pointer-events: none;
.animated {
@@ -77,11 +77,11 @@
}
}
.revue-flow__connection-path {
.vue-flow__connection-path {
fill: none;
}
.revue-flow__nodes {
.vue-flow__nodes {
position: absolute;
width: 100%;
height: 100%;
@@ -90,14 +90,14 @@
z-index: 3;
}
.revue-flow__node {
.vue-flow__node {
position: absolute;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
}
.revue-flow__nodesselection {
.vue-flow__nodesselection {
z-index: 3;
position: absolute;
width: 100%;
@@ -114,7 +114,7 @@
}
}
.revue-flow__handle {
.vue-flow__handle {
pointer-events: none;
&.connectable {
@@ -122,39 +122,39 @@
}
}
.revue-flow__handle-bottom {
.vue-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.revue-flow__handle-top {
.vue-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.revue-flow__handle-left {
.vue-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.revue-flow__handle-right {
.vue-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.revue-flow__edgeupdater {
.vue-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
/* additional components */
.revue-flow__background {
.vue-flow__background {
position: absolute;
top: 0;
left: 0;
@@ -162,7 +162,7 @@
height: 100%;
}
.revue-flow__controls {
.vue-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
@@ -179,7 +179,7 @@
}
}
.revue-flow__minimap {
.vue-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;
src/theme-default.css
+25 -25
View File
@@ -1,11 +1,11 @@
.revue-flow__selection {
.vue-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.revue-flow__edge {
.vue-flow__edge {
&.selected {
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #555;
}
}
@@ -16,37 +16,37 @@
}
&.updating {
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #777;
}
}
}
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.revue-flow__edge-text {
.vue-flow__edge-text {
font-size: 10px;
}
.revue-flow__edge-textbg {
.vue-flow__edge-textbg {
fill: white;
}
.revue-flow__connection-path {
.vue-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.revue-flow__node {
.vue-flow__node {
cursor: grab;
}
.revue-flow__node-default,
.revue-flow__node-input,
.revue-flow__node-output {
.vue-flow__node-default,
.vue-flow__node-input,
.vue-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
@@ -57,15 +57,15 @@
border-style: solid;
}
.revue-flow__node-default.selectable,
.revue-flow__node-input.selectable,
.revue-flow__node-output.selectable {
.vue-flow__node-default.selectable,
.vue-flow__node-input.selectable,
.vue-flow__node-output.selectable {
&:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
}
.revue-flow__node-input {
.vue-flow__node-input {
background: #fff;
border-color: #0041d0;
@@ -74,12 +74,12 @@
box-shadow: 0 0 0 0.5px #0041d0;
}
.revue-flow__handle {
.vue-flow__handle {
background: #0041d0;
}
}
.revue-flow__node-default {
.vue-flow__node-default {
background: #fff;
border-color: #1a192b;
@@ -88,12 +88,12 @@
box-shadow: 0 0 0 0.5px #1a192b;
}
.revue-flow__handle {
.vue-flow__handle {
background: #1a192b;
}
}
.revue-flow__node-output {
.vue-flow__node-output {
background: #fff;
border-color: #ff0072;
@@ -102,17 +102,17 @@
box-shadow: 0 0 0 0.5px #ff0072;
}
.revue-flow__handle {
.vue-flow__handle {
background: #ff0072;
}
}
.revue-flow__nodesselection-rect {
.vue-flow__nodesselection-rect {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.revue-flow__handle {
.vue-flow__handle {
position: absolute;
width: 6px;
height: 6px;
@@ -125,11 +125,11 @@
}
}
.revue-flow__minimap {
.vue-flow__minimap {
background-color: #fff;
}
.revue-flow__controls {
.vue-flow__controls {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
&-button {