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

chore(lint): Update eslint rules

Browse Source 
* Remove semi
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 5ed1094dfe
commit 77eac0c12a
74 changed files with 2007 additions and 1827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Background/index.tsx
+21 -21
View File
@@ -1,18 +1,18 @@
import { BackgroundVariant, RevueFlowStore } from '../../types';
import { createGridDotsPath, createGridLinesPath } from './utils';
import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue';
import { BackgroundVariant, RevueFlowStore } from '../../types'
import { createGridDotsPath, createGridLinesPath } from './utils'
import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue'
export interface BackgroundProps extends HTMLAttributes {
variant?: BackgroundVariant;
gap?: number;
color?: string;
size?: number;
variant?: BackgroundVariant
gap?: number
color?: string
size?: number
}
const defaultColors = {
[BackgroundVariant.Dots]: '#81818a',
[BackgroundVariant.Lines]: '#eee'
};
}
const Background = defineComponent({
name: 'Background',
@@ -39,23 +39,23 @@ const Background = defineComponent({
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const transform = computed(() => store.transform);
const store = inject<RevueFlowStore>('store')!
const transform = computed(() => store.transform)
// 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 patternId = `pattern-${Math.floor(Math.random() * 100000)}`
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);
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)
const isLines = computed(() => props.variant === BackgroundVariant.Lines);
const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]));
const isLines = computed(() => props.variant === BackgroundVariant.Lines)
const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
const path = computed(() =>
isLines.value
? scaledGap.value && props.size && createGridLinesPath(scaledGap.value, props.size, bgColor.value)
: createGridDotsPath(props.size || 0.4 * transform.value[2], bgColor.value)
);
)
return () => (
<svg
@@ -77,8 +77,8 @@ const Background = defineComponent({
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
</svg>
);
)
}
});
})
export default Background;
export default Background
src/additional-components/Background/utils.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string) => {
return <path stroke={stroke} stroke-width={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />;
};
return <path stroke={stroke} stroke-width={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />
}
export const createGridDotsPath = (size: number, fill: string) => {
return <circle cx={size} cy={size} r={size} fill={fill} />;
};
return <circle cx={size} cy={size} r={size} fill={fill} />
}
src/additional-components/Controls/index.tsx
+44 -44
View File
@@ -1,24 +1,24 @@
import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '../../types';
import PlusIcon from '../../../assets/icons/plus.svg';
import MinusIcon from '../../../assets/icons/minus.svg';
import Fitview from '../../../assets/icons/fitview.svg';
import Lock from '../../../assets/icons/lock.svg';
import Unlock from '../../../assets/icons/unlock.svg';
import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue'
import useZoomPanHelper from '../../hooks/useZoomPanHelper'
import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '../../types'
import PlusIcon from '../../../assets/icons/plus.svg'
import MinusIcon from '../../../assets/icons/minus.svg'
import Fitview from '../../../assets/icons/fitview.svg'
import Lock from '../../../assets/icons/lock.svg'
import Unlock from '../../../assets/icons/unlock.svg'
export interface ControlProps extends HTMLAttributes {
showZoom?: boolean;
showFitView?: boolean;
showInteractive?: boolean;
fitViewParams?: FitViewParams;
onZoomIn?: () => void;
onZoomOut?: () => void;
onFitView?: () => void;
onInteractiveChange?: (interactiveStatus: boolean) => void;
showZoom?: boolean
showFitView?: boolean
showInteractive?: boolean
fitViewParams?: FitViewParams
onZoomIn?: () => void
onZoomOut?: () => void
onFitView?: () => void
onInteractiveChange?: (interactiveStatus: boolean) => void
}
export type ControlButtonProps = HTMLButtonElement;
export type ControlButtonProps = HTMLButtonElement
export const ControlButton = defineComponent({
props: {
@@ -38,9 +38,9 @@ export const ControlButton = defineComponent({
<button class={['revue-flow__controls-button']} {...props}>
{slots.default ? slots.default() : ''}
</button>
);
)
}
});
})
const Controls = defineComponent({
name: 'Controls',
@@ -87,41 +87,41 @@ const Controls = defineComponent({
}
},
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store')!;
const isVisible = ref<boolean>(false);
const zoomHelper = ref<ZoomPanHelperFunctions>();
const { onReady } = useZoomPanHelper();
const store = inject<RevueFlowStore>('store')!
const isVisible = ref<boolean>(false)
const zoomHelper = ref<ZoomPanHelperFunctions>()
const { onReady } = useZoomPanHelper()
onReady((helper) => {
zoomHelper.value = helper;
});
zoomHelper.value = helper
})
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable;
const mapClasses = ['revue-flow__controls'];
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
const mapClasses = ['revue-flow__controls']
const onZoomInHandler = () => {
zoomHelper.value?.zoomIn?.();
props.onZoomIn?.();
};
zoomHelper.value?.zoomIn?.()
props.onZoomIn?.()
}
const onZoomOutHandler = () => {
zoomHelper.value?.zoomOut?.();
props.onZoomOut?.();
};
zoomHelper.value?.zoomOut?.()
props.onZoomOut?.()
}
const onFitViewHandler = () => {
zoomHelper.value?.fitView?.(props.fitViewParams);
props.onFitView?.();
};
zoomHelper.value?.fitView?.(props.fitViewParams)
props.onFitView?.()
}
const onInteractiveChangeHandler = () => {
store.setInteractive?.(!isInteractive);
props.onInteractiveChange?.(!isInteractive);
};
store.setInteractive?.(!isInteractive)
props.onInteractiveChange?.(!isInteractive)
}
onMounted(() => {
isVisible.value = true;
});
isVisible.value = true
})
return () => (
<div class={mapClasses}>
@@ -147,8 +147,8 @@ const Controls = defineComponent({
)}
{slots.default ? slots.default() : ''}
</div>
);
)
}
});
})
export default Controls;
export default Controls
src/additional-components/MiniMap/MiniMapNode.tsx
+15 -15
View File
@@ -1,15 +1,15 @@
import { computed, defineComponent, PropType } from 'vue';
import { computed, defineComponent, PropType } from 'vue'
interface MiniMapNodeProps {
x: number;
y: number;
width: number;
height: number;
borderRadius: number;
color: string;
shapeRendering: string;
strokeColor: string;
strokeWidth: number;
x: number
y: number
width: number
height: number
borderRadius: number
color: string
shapeRendering: string
strokeColor: string
strokeWidth: number
}
const MiniMapNode = defineComponent({
@@ -62,8 +62,8 @@ const MiniMapNode = defineComponent({
}
},
setup(props, { attrs }: { attrs: Record<string, any> }) {
const styles = attrs.style || {};
const fill = computed(() => (props.color || styles.value.background || styles.value.backgroundColor) as string);
const styles = attrs.style || {}
const fill = computed(() => (props.color || styles.value.background || styles.value.backgroundColor) as string)
return () => (
<rect
@@ -79,8 +79,8 @@ const MiniMapNode = defineComponent({
stroke-width={props.strokeWidth}
shape-rendering={props.shapeRendering}
/>
);
)
}
});
})
export default MiniMapNode;
export default MiniMapNode
src/additional-components/MiniMap/index.tsx
+41 -39
View File
@@ -1,23 +1,23 @@
import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
import { Node, Rect, RevueFlowStore } from '../../types';
import MiniMapNode from './MiniMapNode';
import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue';
import { getRectOfNodes, getBoundsofRects } from '../../utils/graph'
import { Node, Rect, RevueFlowStore } from '../../types'
import MiniMapNode from './MiniMapNode'
import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue'
type StringFunc = (node: Node) => string;
type StringFunc = (node: Node) => string
export interface MiniMapProps extends HTMLAttributes {
nodeColor?: string | StringFunc;
nodeStrokeColor?: string | StringFunc;
nodeClassName?: string | StringFunc;
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
maskColor?: string;
nodeColor?: string | StringFunc
nodeStrokeColor?: string | StringFunc
nodeClassName?: string | StringFunc
nodeBorderRadius?: number
nodeStrokeWidth?: number
maskColor?: string
}
declare const window: any;
declare const window: any
const defaultWidth = 200;
const defaultHeight = 150;
const defaultWidth = 200
const defaultHeight = 150
const MiniMap = defineComponent({
name: 'MiniMap',
@@ -54,37 +54,39 @@ const MiniMap = defineComponent({
}
},
setup(props, { attrs }: { attrs: Record<string, any> }) {
const store = inject<RevueFlowStore>('store')!;
const transform = computed(() => store.transform);
const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number);
const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number);
const nodeColorFunc = computed(() => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc);
const store = inject<RevueFlowStore>('store')!
const transform = computed(() => store.transform)
const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number)
const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number)
const nodeColorFunc = computed(
() => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc
)
const nodeStrokeColorFunc = computed(
() => (props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor) as StringFunc
);
)
const nodeClassNameFunc = computed(
() => (props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName) as StringFunc
);
const hasNodes = computed(() => store.nodes && store.nodes.length);
const bb = computed(() => getRectOfNodes(store.nodes));
)
const hasNodes = computed(() => store.nodes && store.nodes.length)
const bb = computed(() => getRectOfNodes(store.nodes))
const viewBB = computed<Rect>(() => ({
x: -transform.value[0] / transform.value[2],
y: -transform.value[1] / transform.value[2],
width: store.width / transform.value[2],
height: store.height / transform.value[2]
}));
const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value));
const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value);
const scaledHeight = computed(() => boundingRect.value.height / elementHeight.value);
const viewScale = computed(() => Math.max(scaledWidth.value, scaledHeight.value));
const viewWidth = computed(() => viewScale.value * elementWidth.value);
const viewHeight = computed(() => viewScale.value * elementHeight.value);
const offset = computed(() => 5 * viewScale.value);
const x = computed(() => boundingRect.value.x - (viewWidth.value - boundingRect.value.width) / 2 - offset.value);
const y = computed(() => boundingRect.value.y - (viewHeight.value - boundingRect.value.height) / 2 - offset.value);
const width = computed(() => viewWidth.value + offset.value * 2);
const height = computed(() => viewHeight.value + offset.value * 2);
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
}))
const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value)
const scaledHeight = computed(() => boundingRect.value.height / elementHeight.value)
const viewScale = computed(() => Math.max(scaledWidth.value, scaledHeight.value))
const viewWidth = computed(() => viewScale.value * elementWidth.value)
const viewHeight = computed(() => viewScale.value * elementHeight.value)
const offset = computed(() => 5 * viewScale.value)
const x = computed(() => boundingRect.value.x - (viewWidth.value - boundingRect.value.width) / 2 - offset.value)
const y = computed(() => boundingRect.value.y - (viewHeight.value - boundingRect.value.height) / 2 - offset.value)
const width = computed(() => viewWidth.value + offset.value * 2)
const height = computed(() => viewHeight.value + offset.value * 2)
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
return () => (
<svg
@@ -121,8 +123,8 @@ const MiniMap = defineComponent({
fill-rule="evenodd"
/>
</svg>
);
)
}
});
})
export default MiniMap;
export default MiniMap
src/additional-components/index.ts
+3 -3
View File
@@ -1,6 +1,6 @@
// 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';
export { default as Background } from './Background';
export { default as MiniMap } from './MiniMap'
export { default as Controls, ControlButton } from './Controls'
export { default as Background } from './Background'