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

feat: Create examples directory and add some examples

Browse Source 
* Add svg plugins for vite & rollup
update: more bundle stuff
This commit is contained in:
Braks
2021-07-10 23:51:04 +02:00
parent 4d52af09fa
commit e4f57c79e8
31 changed files with 1043 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Controls/index.tsx
+10 -9
View File
@@ -1,7 +1,12 @@
import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
import { FitViewParams } from '../../types';
import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
import store from '../../store';
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;
@@ -123,25 +128,21 @@ const Controls = defineComponent({
{props.showZoom && (
<>
<ControlButton onClick={onZoomInHandler} class="revue-flow__controls-zoomin">
<img src={'../../../assets/icons/plus.svg'} alt="Plus" />
<PlusIcon />
</ControlButton>
<ControlButton onClick={onZoomOutHandler} class="revue-flow__controls-zoomout">
<img src={'../../../assets/icons/minus.svg'} alt="Minus" />
<MinusIcon />
</ControlButton>
</>
)}
{props.showFitView && (
<ControlButton class="revue-flow__controls-fitview" onClick={onFitViewHandler}>
<img src={'../../../assets/icons/fitview.svg'} alt="FitView" />
<Fitview />
</ControlButton>
)}
{props.showInteractive && (
<ControlButton class="revue-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
{isInteractive ? (
<img src={'../../../assets/icons/unlock.svg'} alt="Unlock" />
) : (
<img src={'../../../assets/icons/lock.svg'} alt="Lock" />
)}
{isInteractive ? <Unlock /> : <Lock />}
</ControlButton>
)}
{slots.default ? slots.default() : ''}
src/additional-components/MiniMap/MiniMapNode.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { defineComponent, PropType } from 'vue';
import { computed, defineComponent, PropType } from 'vue';
interface MiniMapNodeProps {
x: number;
@@ -62,19 +62,19 @@ const MiniMapNode = defineComponent({
}
},
setup(props, { attrs }: { attrs: Record<string, any> }) {
const { background, backgroundColor } = attrs.style || {};
const fill = (props.color || background || backgroundColor) as string;
const styles = attrs.style || {};
const fill = computed(() => (props.color || styles.value.background || styles.value.backgroundColor) as string);
return () => (
<rect
class={['revue-flow__minimap-node']}
class="revue-flow__minimap-node"
x={props.x}
y={props.y}
rx={props.borderRadius}
ry={props.borderRadius}
width={props.width}
height={props.height}
fill={fill}
fill={fill.value}
stroke={props.strokeColor}
stroke-width={props.strokeWidth}
shape-rendering={props.shapeRendering}
src/additional-components/MiniMap/index.tsx
+14 -16
View File
@@ -24,17 +24,17 @@ const MiniMap = defineComponent({
name: 'MiniMap',
props: {
nodeStrokeColor: {
type: (String || Function) as PropType<MiniMapProps['nodeStrokeColor']>,
type: [String, Function] as PropType<MiniMapProps['nodeStrokeColor']>,
required: false,
default: '#555'
},
nodeColor: {
type: (String || Function) as PropType<MiniMapProps['nodeColor']>,
type: [String, Function] as PropType<MiniMapProps['nodeColor']>,
required: false,
default: '#fff'
},
nodeClassName: {
type: (String || Function) as PropType<MiniMapProps['nodeClassName']>,
type: [String, Function] as PropType<MiniMapProps['nodeClassName']>,
required: false,
default: ''
},
@@ -57,17 +57,15 @@ const MiniMap = defineComponent({
setup(props, { attrs }: { attrs: Record<string, any> }) {
const pinia = store();
const transform = computed(() => pinia.transform);
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;
const nodeStrokeColorFunc = (
props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor
) as StringFunc;
const nodeClassNameFunc = (
props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName
) as StringFunc;
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(() => pinia.nodes && pinia.nodes.length);
const bb = computed(() => getRectOfNodes(pinia.nodes));
const viewBB = computed<Rect>(() => ({
@@ -94,7 +92,7 @@ const MiniMap = defineComponent({
width={elementWidth.value}
height={elementHeight.value}
viewBox={`${x.value} ${y.value} ${width.value} ${height.value}`}
class={mapClasses}
class="revue-flow__minimap"
>
{pinia.nodes
.filter((node) => !node.isHidden)
@@ -106,10 +104,10 @@ const MiniMap = defineComponent({
width={node.__rf.width}
height={node.__rf.height}
style={node.style}
class={nodeClassNameFunc(node)}
color={nodeColorFunc(node)}
class={nodeClassNameFunc.value(node)}
color={nodeColorFunc.value(node)}
borderRadius={props.nodeBorderRadius}
strokeColor={nodeStrokeColorFunc(node)}
strokeColor={nodeStrokeColorFunc.value(node)}
strokeWidth={props.nodeStrokeWidth}
shapeRendering={shapeRendering}
/>