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

update: renaming stuff from react to "revue"

Browse Source
This commit is contained in:
Braks
2021-07-10 18:33:38 +02:00
parent 4661b685ad
commit 881655d483
35 changed files with 139 additions and 7009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -1,4 +1,5 @@
# React Flow in Vue3 = Revue Flow
[![contentful](./assets/Revueflow.png)](https://md-cf-docs.vercel.app/)
![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-flow)
[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg)](https://david-dm.org/bcakmakoglu/revue-flow)
[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-flow?type=dev)
@@ -7,16 +8,16 @@
![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-flow)
This repo is still a big construction site with nothing really finished.
Please check out [React Flow](https://reactflow.dev/) if you like the idea.
Please check out [revue Flow](https://reactflow.dev/) if you like the idea.
### Motivation
Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
love and attention, I decided to port the React Flow library to Vue.js.
Seeing as many libraries exist in the revue ecosystem and Vue sadly does not get the same
love and attention, I decided to port the revue Flow library to Vue.js.
### Usage
## Vue3
## Usage
Check the React Flow docs for usage. It's really the same.
### Vue3
```bash
# install revue flow
$ yarn add @braks/revue-flow
@@ -25,7 +26,7 @@ $ yarn add @braks/revue-flow
$ npm i --save @braks/revue-flow
```
## Vue2
### Vue2
This doesn't work with Vue2, sorry.
## Development

BIN
assets/Revueflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

2
rollup.config.js
View File

@@ -82,7 +82,7 @@ function createConfig(format, output, plugins = []) {
output.sourcemap = !!process.env.SOURCE_MAP;
output.banner = banner;
output.externalLiveBindings = false;
output.globals = { 'vue': 'Vue' };
output.globals = { vue: 'Vue' };
const isProductionBuild = /\.prod\.js$/.test(output.file);
const isGlobalBuild = format.startsWith('global');

4
src/Basic.tsx
View File

@@ -23,7 +23,7 @@ const BasicFlow = defineComponent({
const rfInstance = ref<OnLoadParams | null>(null);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
const onLoad = (reactFlowInstance: OnLoadParams) => (rfInstance.value = reactFlowInstance);
const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
const updatePos = () => {
elements.value = elements.value.map((el) => {
@@ -59,7 +59,7 @@ const BasicFlow = defineComponent({
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
class="react-flow-basic-example"
class="revue-flow-basic-example"
defaultZoom={1.5}
minZoom={0.2}
maxZoom={4}

2
src/additional-components/Background/index.tsx
View File

@@ -45,7 +45,7 @@ const Background = defineComponent({
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
const patternId = `pattern-${Math.floor(Math.random() * 100000)}`;
const bgClasses = ['react-flow__background'];
const bgClasses = ['revue-flow__background'];
const scaledGap = computed(() => props.gap && props.gap * transform.value[2]);
const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value);
const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value);

12
src/additional-components/Controls/index.tsx
View File

@@ -31,7 +31,7 @@ export const ControlButton = defineComponent({
},
setup(props, { slots }) {
return () => (
<button class={['react-flow__controls-button']} {...props}>
<button class={['revue-flow__controls-button']} {...props}>
{slots.default ? slots.default() : ''}
</button>
);
@@ -92,7 +92,7 @@ const Controls = defineComponent({
});
const isInteractive = pinia.nodesDraggable && pinia.nodesConnectable && pinia.elementsSelectable;
const mapClasses = ['react-flow__controls'];
const mapClasses = ['revue-flow__controls'];
const onZoomInHandler = () => {
zoomHelper.value.zoomIn?.();
@@ -122,21 +122,21 @@ const Controls = defineComponent({
<div class={mapClasses}>
{props.showZoom && (
<>
<ControlButton onClick={onZoomInHandler} class="react-flow__controls-zoomin">
<ControlButton onClick={onZoomInHandler} class="revue-flow__controls-zoomin">
<img src={'../../../assets/icons/plus.svg'} alt="Plus" />
</ControlButton>
<ControlButton onClick={onZoomOutHandler} class="react-flow__controls-zoomout">
<ControlButton onClick={onZoomOutHandler} class="revue-flow__controls-zoomout">
<img src={'../../../assets/icons/minus.svg'} alt="Minus" />
</ControlButton>
</>
)}
{props.showFitView && (
<ControlButton class="react-flow__controls-fitview" onClick={onFitViewHandler}>
<ControlButton class="revue-flow__controls-fitview" onClick={onFitViewHandler}>
<img src={'../../../assets/icons/fitview.svg'} alt="FitView" />
</ControlButton>
)}
{props.showInteractive && (
<ControlButton class="react-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
<ControlButton class="revue-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
{isInteractive ? (
<img src={'../../../assets/icons/unlock.svg'} alt="Unlock" />
) : (

2
src/additional-components/MiniMap/MiniMapNode.tsx
View File

@@ -67,7 +67,7 @@ const MiniMapNode = defineComponent({
return () => (
<rect
class={['react-flow__minimap-node']}
class={['revue-flow__minimap-node']}
x={props.x}
y={props.y}
rx={props.borderRadius}

4
src/additional-components/MiniMap/index.tsx
View File

@@ -58,7 +58,7 @@ const MiniMap = defineComponent({
const pinia = store();
const transform = computed(() => pinia.transform);
const mapClasses = ['react-flow__minimap'];
const mapClasses = ['revue-flow__minimap'];
const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number);
const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number);
const nodeColorFunc = (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc;
@@ -115,7 +115,7 @@ const MiniMap = defineComponent({
/>
))}
<path
class="react-flow__minimap-mask"
class="revue-flow__minimap-mask"
d={`M${x.value - offset.value},${y.value - offset.value}h${width.value + offset.value * 2}v${
height.value + offset.value * 2
}h${-width.value - offset.value * 2}z

4
src/additional-components/index.ts
View File

@@ -1,5 +1,5 @@
// These components are not used by React Flow directly
// but the user can add them as children of a React Flow component
// These components are not used by revue Flow directly
// but the user can add them as children of a revue Flow component
export { default as MiniMap } from './MiniMap';
export { default as Controls, ControlButton } from './Controls';

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

6
src/components/ConnectionLine/index.tsx
View File

@@ -117,7 +117,7 @@ const ConnectionLine = defineComponent({
// eslint-disable-next-line vue/no-setup-props-destructure
const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
return () => (
<g class="react-flow__connection">
<g class="revue-flow__connection">
<ConnectionLineComponent
sourceX={sourceX.value}
sourceY={sourceY.value}
@@ -171,8 +171,8 @@ const ConnectionLine = defineComponent({
}
return () => (
<g class="react-flow__connection">
<path d={dAttr.value} class="react-flow__connection-path" style={props.connectionLineStyle} />
<g class="revue-flow__connection">
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
</g>
);
}

2
src/components/Edges/BezierEdge.tsx
View File

@@ -157,7 +157,7 @@ const BezierEdge = defineComponent({
return () => (
<>
<path style={props.style} d={path.value} class="react-flow__edge-path" marker-end={markerEnd} />
<path style={props.style} d={path.value} class="revue-flow__edge-path" marker-end={markerEnd} />
{text}
</>
);

2
src/components/Edges/EdgeAnchor.tsx
View File

@@ -44,7 +44,7 @@ export const EdgeAnchor = defineComponent({
const radius = props.radius || 10;
return () => (
<circle
class="react-flow__edgeupdater"
class="revue-flow__edgeupdater"
cx={shiftX(props.centerX, radius, props.position)}
cy={shiftY(props.centerY, radius, props.position)}
r={radius}

6
src/components/Edges/EdgeText.tsx
View File

@@ -62,7 +62,7 @@ const EdgeText = defineComponent({
return (
<g
transform={`translate(${props.x - edgeTextBox.value.width / 2} ${props.y - edgeTextBox.value.height / 2})`}
class="react-flow__edge-textwrapper"
class="revue-flow__edge-textwrapper"
>
{props.labelShowBg && (
<rect
@@ -70,13 +70,13 @@ const EdgeText = defineComponent({
x={-props.labelBgPadding[0]}
y={-props.labelBgPadding[1]}
height={edgeTextBox.value.height + 2 * props.labelBgPadding[1]}
class="react-flow__edge-textbg"
class="revue-flow__edge-textbg"
style={props.labelBgStyle}
rx={props.labelBgBorderRadius}
ry={props.labelBgBorderRadius}
/>
)}
<text class="react-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
<text class="revue-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
{label}
</text>
{slots.default ? slots.default() : ''}

2
src/components/Edges/SmoothStepEdge.tsx
View File

@@ -131,7 +131,7 @@ const SmoothStepEdge = defineComponent({
return (
<>
<path style={props.style} class="react-flow__edge-path" d={path} marker-end={markerEnd} />
<path style={props.style} class="revue-flow__edge-path" d={path} marker-end={markerEnd} />
{text}
</>
);

2
src/components/Edges/StraightEdge.tsx
View File

@@ -31,7 +31,7 @@ const StraightEdge = defineComponent({
<>
<path
style={props.style}
class="react-flow__edge-path"
class="revue-flow__edge-path"
d={`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`}
marker-end={markerEnd}
/>

2
src/components/Edges/utils.ts
View File

@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
return `url(#${markerEndId})`;
}
return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none';
return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none';
};
export interface GetCenterParams {

4
src/components/Edges/wrapEdge.tsx
View File

@@ -14,8 +14,8 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
const updating = ref<boolean>(false);
const inactive = !props.elementsSelectable && !props.onClick;
const edgeClasses = computed(() => [
'react-flow__edge',
`react-flow__edge-${props.type}`,
'revue-flow__edge',
`revue-flow__edge-${props.type}`,
{ selected: props.selected, animated: props.animated, inactive, updating: updating.value }
]);

16
src/components/Handle/handler.ts
View File

@@ -79,8 +79,8 @@ function checkElementBelowIsValid(
}
function resetRecentHandle(hoveredHandle: Element): void {
hoveredHandle?.classList.remove('react-flow__handle-valid');
hoveredHandle?.classList.remove('react-flow__handle-connecting');
hoveredHandle?.classList.remove('revue-flow__handle-valid');
hoveredHandle?.classList.remove('revue-flow__handle-connecting');
}
export function onMouseDown(
@@ -99,8 +99,8 @@ export function onMouseDown(
onConnectStop?: OnConnectStopFunc,
onConnectEnd?: OnConnectEndFunc
): void {
const reactFlowNode = (event.target as Element).closest('.react-flow');
// when react-flow is used inside a shadow root we can't use document
const revueFlowNode = (event.target as Element).closest('.revue-flow');
// when revue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement);
if (!doc) {
@@ -111,12 +111,12 @@ export function onMouseDown(
const elementBelowIsTarget = elementBelow?.classList.contains('target');
const elementBelowIsSource = elementBelow?.classList.contains('source');
if (!reactFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
return;
}
const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
const containerBounds = reactFlowNode.getBoundingClientRect();
const containerBounds = revueFlowNode.getBoundingClientRect();
let recentHoveredHandle: Element;
setPosition({
@@ -151,8 +151,8 @@ export function onMouseDown(
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow;
elementBelow.classList.add('react-flow__handle-connecting');
elementBelow.classList.toggle('react-flow__handle-valid', isValid);
elementBelow.classList.add('revue-flow__handle-connecting');
elementBelow.classList.toggle('revue-flow__handle-valid', isValid);
}
}

4
src/components/Handle/index.tsx
View File

@@ -68,8 +68,8 @@ const Handle = defineComponent({
};
const handleClasses = [
'react-flow__handle',
`react-flow__handle-${props.position}`,
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: !isTarget,

4
src/components/Nodes/wrapNode.tsx
View File

@@ -162,8 +162,8 @@ export default (NodeComponent: any) => {
}
const nodeClasses = [
'react-flow__node',
`react-flow__node-${props.type}`,
'revue-flow__node',
`revue-flow__node-${props.type}`,
{
selected: props.selected,
selectable: props.isSelectable

10
src/components/UserSelection/index.tsx
View File

@@ -10,12 +10,12 @@ type UserSelectionProps = {
};
function getMousePosition(event: MouseEvent): XYPosition | void {
const reactFlowNode = (event.target as Element).closest('.react-flow');
if (!reactFlowNode) {
const revueFlowNode = (event.target as Element).closest('.revue-flow');
if (!revueFlowNode) {
return;
}
const containerBounds = reactFlowNode.getBoundingClientRect();
const containerBounds = revueFlowNode.getBoundingClientRect();
return {
x: event.clientX - containerBounds.left,
@@ -33,7 +33,7 @@ const SelectionRect = defineComponent({
return () => (
<div
class="react-flow__selection"
class="revue-flow__selection"
style={{
width: pinia.userSelectionRect.width,
height: pinia.userSelectionRect.height,
@@ -91,7 +91,7 @@ export default defineComponent({
return () => (
<div
class="react-flow__selectionpane"
class="revue-flow__selectionpane"
onMousedown={onMouseDown}
onMousemove={onMouseMove}
onMouseup={onMouseUp}

6
src/container/EdgeRenderer/MarkerDefinitions.tsx
View File

@@ -14,7 +14,7 @@ const Marker = defineComponent({
setup(props, { slots }) {
return () => (
<marker
class="react-flow__arrowhead"
class="revue-flow__arrowhead"
id={props.id}
markerWidth="12.5"
markerHeight="12.5"
@@ -44,7 +44,7 @@ const MarkerDefinitions = defineComponent({
setup(props) {
return () => (
<defs>
<Marker id="react-flow__arrowclosed">
<Marker id="revue-flow__arrowclosed">
<polyline
stroke={props.color}
stroke-linecap="round"
@@ -54,7 +54,7 @@ const MarkerDefinitions = defineComponent({
points="-5,-4 0,0 -5,4 -5,-4"
/>
</Marker>
<Marker id="react-flow__arrow">
<Marker id="revue-flow__arrow">
<polyline
stroke={props.color}
stroke-linecap="round"

2
src/container/EdgeRenderer/index.tsx
View File

@@ -318,7 +318,7 @@ const EdgeRenderer = defineComponent({
const renderConnectionLine = computed(() => pinia.connectionNodeId && pinia.connectionHandleType);
return () => (
<svg width={pinia.width} height={pinia.height} class="react-flow__edges">
<svg width={pinia.width} height={pinia.height} class="revue-flow__edges">
<g transform={transformStyle.value}>
{pinia.edges.map((edge: Edge) => (
<EdgeCmp

2
src/container/FlowRenderer/index.tsx
View File

@@ -189,7 +189,7 @@ const FlowRenderer = defineComponent({
zoomActivationKeyCode={props.zoomActivationKeyCode}
>
{slots.default ? slots.default() : ''}
<div class="react-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
<div class="revue-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
</ZoomPane>
);
}

2
src/container/NodeRenderer/index.tsx
View File

@@ -133,7 +133,7 @@ const NodeRenderer = defineComponent({
});
return () => (
<div class="react-flow__nodes" style={transformStyle.value}>
<div class="revue-flow__nodes" style={transformStyle.value}>
{visibleNodes.value.map((node) => {
const nodeType = node.type || 'default';
if (props.nodeTypes) {

2
src/container/RevueFlow/index.tsx
View File

@@ -461,7 +461,7 @@ const RevueFlow = defineComponent({
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
const reactFlowClasses = ['react-flow'];
const reactFlowClasses = ['revue-flow'];
return () => (
<div class={reactFlowClasses}>

6
src/container/ZoomPane/index.tsx
View File

@@ -271,14 +271,14 @@ const ZoomPane = defineComponent({
// when the target element is a node, we still allow zooming
if (
(event.target.closest('.react-flow__node') || event.target.closest('.react-flow__edge')) &&
(event.target.closest('.revue-flow__node') || event.target.closest('.revue-flow__edge')) &&
event.type !== 'wheel'
) {
return false;
}
// when the target element is a node selection, we still allow zooming
if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
if (event.target.closest('.revue-flow__nodesselection') && event.type !== 'wheel') {
return false;
}
@@ -303,7 +303,7 @@ const ZoomPane = defineComponent({
});
return () => (
<div class="react-flow__renderer react-flow__zoompane" ref={zoomPane}>
<div class="revue-flow__renderer revue-flow__zoompane" ref={zoomPane}>
{slots.default ? slots.default() : ''}
</div>
);

2
src/hooks/useResizeHandler.ts
View File

@@ -14,7 +14,7 @@ export default (rendererNode: HTMLDivElement) => {
const size = getDimensions(rendererNode);
if (size.height === 0 || size.width === 0) {
console.log('The React Flow parent container needs a width and a height to render the graph.');
console.log('The revue Flow parent container needs a width and a height to render the graph.');
}
pinia.updateSize(size);

2
src/hooks/useUpdateNodeInternals.ts
View File

@@ -5,7 +5,7 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
const pinia = store();
return (id: ElementId) => {
const nodeElement: HTMLDivElement | null = document.querySelector(`.react-flow__node[data-id="${id}"]`);
const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`);
if (nodeElement) {
pinia.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]);

5
src/store/utils.ts
View File

@@ -1,5 +0,0 @@
export function createAction<T extends string>(type: T): { type: T };
export function createAction<T extends string, P extends any>(type: T, payload: P): { type: T; payload: P };
export function createAction(type: string, payload?: unknown): Record<string, any> {
return { type, payload };
}

54
src/style.css
View File

@@ -1,13 +1,13 @@
.react-flow {
.revue-flow {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.react-flow__renderer,
.react-flow__pane,
.react-flow__selectionpane {
.revue-flow__renderer,
.revue-flow__pane,
.revue-flow__selectionpane {
width: 100%;
height: 100%;
position: absolute;
@@ -15,25 +15,25 @@
left: 0;
}
.react-flow__pane {
.revue-flow__pane {
z-index: 1;
}
.react-flow__renderer {
.revue-flow__renderer {
z-index: 4;
}
.react-flow__selectionpane {
.revue-flow__selectionpane {
z-index: 5;
}
.react-flow__selection {
.revue-flow__selection {
position: absolute;
top: 0;
left: 0;
}
.react-flow__edges {
.revue-flow__edges {
position: absolute;
top: 0;
left: 0;
@@ -41,7 +41,7 @@
z-index: 2;
}
.react-flow__edge {
.revue-flow__edge {
pointer-events: visibleStroke;
&.inactive {
@@ -55,20 +55,20 @@
}
}
.react-flow__edge-path {
.revue-flow__edge-path {
fill: none;
}
.react-flow__edge-textwrapper {
.revue-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge-text {
.revue-flow__edge-text {
pointer-events: none;
user-select: none;
}
.react-flow__connection {
.revue-flow__connection {
pointer-events: none;
.animated {
@@ -77,11 +77,11 @@
}
}
.react-flow__connection-path {
.revue-flow__connection-path {
fill: none;
}
.react-flow__nodes {
.revue-flow__nodes {
position: absolute;
width: 100%;
height: 100%;
@@ -90,14 +90,14 @@
z-index: 3;
}
.react-flow__node {
.revue-flow__node {
position: absolute;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
}
.react-flow__nodesselection {
.revue-flow__nodesselection {
z-index: 3;
position: absolute;
width: 100%;
@@ -114,7 +114,7 @@
}
}
.react-flow__handle {
.revue-flow__handle {
pointer-events: none;
&.connectable {
@@ -122,39 +122,39 @@
}
}
.react-flow__handle-bottom {
.revue-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-top {
.revue-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-left {
.revue-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.react-flow__handle-right {
.revue-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.react-flow__edgeupdater {
.revue-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
/* additional components */
.react-flow__background {
.revue-flow__background {
position: absolute;
top: 0;
left: 0;
@@ -162,7 +162,7 @@
height: 100%;
}
.react-flow__controls {
.revue-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
@@ -179,7 +179,7 @@
}
}
.react-flow__minimap {
.revue-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;

50
src/theme-default.css
View File

@@ -1,11 +1,11 @@
.react-flow__selection {
.revue-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__edge {
.revue-flow__edge {
&.selected {
.react-flow__edge-path {
.revue-flow__edge-path {
stroke: #555;
}
}
@@ -16,37 +16,37 @@
}
&.updating {
.react-flow__edge-path {
.revue-flow__edge-path {
stroke: #777;
}
}
}
.react-flow__edge-path {
.revue-flow__edge-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__edge-text {
.revue-flow__edge-text {
font-size: 10px;
}
.react-flow__edge-textbg {
.revue-flow__edge-textbg {
fill: white;
}
.react-flow__connection-path {
.revue-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__node {
.revue-flow__node {
cursor: grab;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
.revue-flow__node-default,
.revue-flow__node-input,
.revue-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
@@ -57,15 +57,15 @@
border-style: solid;
}
.react-flow__node-default.selectable,
.react-flow__node-input.selectable,
.react-flow__node-output.selectable {
.revue-flow__node-default.selectable,
.revue-flow__node-input.selectable,
.revue-flow__node-output.selectable {
&:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
}
.react-flow__node-input {
.revue-flow__node-input {
background: #fff;
border-color: #0041d0;
@@ -74,12 +74,12 @@
box-shadow: 0 0 0 0.5px #0041d0;
}
.react-flow__handle {
.revue-flow__handle {
background: #0041d0;
}
}
.react-flow__node-default {
.revue-flow__node-default {
background: #fff;
border-color: #1a192b;
@@ -88,12 +88,12 @@
box-shadow: 0 0 0 0.5px #1a192b;
}
.react-flow__handle {
.revue-flow__handle {
background: #1a192b;
}
}
.react-flow__node-output {
.revue-flow__node-output {
background: #fff;
border-color: #ff0072;
@@ -102,17 +102,17 @@
box-shadow: 0 0 0 0.5px #ff0072;
}
.react-flow__handle {
.revue-flow__handle {
background: #ff0072;
}
}
.react-flow__nodesselection-rect {
.revue-flow__nodesselection-rect {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__handle {
.revue-flow__handle {
position: absolute;
width: 6px;
height: 6px;
@@ -125,11 +125,11 @@
}
}
.react-flow__minimap {
.revue-flow__minimap {
background-color: #fff;
}
.react-flow__controls {
.revue-flow__controls {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
&-button {

6866
yarn-error.log
View File

File diff suppressed because it is too large Load Diff

44
yarn.lock
View File

@@ -702,30 +702,30 @@
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"
"@babel/plugin-transform-react-constant-elements@^7.12.1":
"@babel/plugin-transform-revue-constant-elements@^7.12.1":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.14.5.tgz#41790d856f7c5cec82d2bcf5d0e5064d682522ed"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-constant-elements/-/plugin-transform-revue-constant-elements-7.14.5.tgz#41790d856f7c5cec82d2bcf5d0e5064d682522ed"
integrity sha512-NBqLEx1GxllIOXJInJAQbrnwwYJsV3WaMHIcOwD8rhYS0AabTWn7kHdHgPgu5RmHLU0q4DMxhAMu8ue/KampgQ==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"
"@babel/plugin-transform-react-display-name@^7.14.5":
"@babel/plugin-transform-revue-display-name@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-display-name/-/plugin-transform-revue-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
integrity sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"
"@babel/plugin-transform-react-jsx-development@^7.14.5":
"@babel/plugin-transform-revue-jsx-development@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-jsx-development/-/plugin-transform-revue-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
integrity sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==
dependencies:
"@babel/plugin-transform-react-jsx" "^7.14.5"
"@babel/plugin-transform-revue-jsx" "^7.14.5"
"@babel/plugin-transform-react-jsx@^7.14.5":
"@babel/plugin-transform-revue-jsx@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-jsx/-/plugin-transform-revue-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
integrity sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==
dependencies:
"@babel/helper-annotate-as-pure" "^7.14.5"
@@ -734,9 +734,9 @@
"@babel/plugin-syntax-jsx" "^7.14.5"
"@babel/types" "^7.14.5"
"@babel/plugin-transform-react-pure-annotations@^7.14.5":
"@babel/plugin-transform-revue-pure-annotations@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-pure-annotations/-/plugin-transform-revue-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
integrity sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==
dependencies:
"@babel/helper-annotate-as-pure" "^7.14.5"
@@ -906,17 +906,17 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
"@babel/preset-react@^7.12.5":
"@babel/preset-revue@^7.12.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.14.5.tgz#0fbb769513f899c2c56f3a882fa79673c2d4ab3c"
resolved "https://registry.yarnpkg.com/@babel/preset-revue/-/preset-revue-7.14.5.tgz#0fbb769513f899c2c56f3a882fa79673c2d4ab3c"
integrity sha512-XFxBkjyObLvBaAvkx1Ie95Iaq4S/GUEIrejyrntQ/VCMKUYvKLoyKxOBzJ2kjA3b6rC9/KL6KXfDC2GqvLiNqQ==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"
"@babel/helper-validator-option" "^7.14.5"
"@babel/plugin-transform-react-display-name" "^7.14.5"
"@babel/plugin-transform-react-jsx" "^7.14.5"
"@babel/plugin-transform-react-jsx-development" "^7.14.5"
"@babel/plugin-transform-react-pure-annotations" "^7.14.5"
"@babel/plugin-transform-revue-display-name" "^7.14.5"
"@babel/plugin-transform-revue-jsx" "^7.14.5"
"@babel/plugin-transform-revue-jsx-development" "^7.14.5"
"@babel/plugin-transform-revue-pure-annotations" "^7.14.5"
"@babel/runtime@^7.8.4":
version "7.14.6"
@@ -1103,9 +1103,9 @@
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
"@svgr/babel-plugin-transform-revue-native-svg@^5.4.0":
version "5.4.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-revue-native-svg/-/babel-plugin-transform-revue-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
"@svgr/babel-plugin-transform-svg-component@^5.5.0":
@@ -1124,7 +1124,7 @@
"@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
"@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
"@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
"@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
"@svgr/babel-plugin-transform-revue-native-svg" "^5.4.0"
"@svgr/babel-plugin-transform-svg-component" "^5.5.0"
"@svgr/core@^5.5.0":
@@ -1168,9 +1168,9 @@
integrity sha512-EiZmH2VTr+Xzyb6Ga8XtGa9MEbiU3WQnB5vHmqhwAUqibU3uwuwr7MN+QwIh/gtBk1ucMim8BCfcRTlLVREM8A==
dependencies:
"@babel/core" "^7.12.3"
"@babel/plugin-transform-react-constant-elements" "^7.12.1"
"@babel/plugin-transform-revue-constant-elements" "^7.12.1"
"@babel/preset-env" "^7.12.1"
"@babel/preset-react" "^7.12.5"
"@babel/preset-revue" "^7.12.5"
"@svgr/core" "^5.5.0"
"@svgr/plugin-jsx" "^5.5.0"
"@svgr/plugin-svgo" "^5.5.0"