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

fix: add intrinsicattributes to shims

Browse Source 
* remove declaration from shims-vue.d.ts
This commit is contained in:
Braks
2021-08-08 21:53:35 +02:00
parent 2653c70334
commit 545eb0ede7
11 changed files with 607 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -71,20 +71,17 @@
"rollup": "^2.52.2",
"rollup-plugin-dts": "^3.0.2",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-vue": "^6.0.0-beta.10",
"rollup-plugin-vue-inline-svg": "^1.1.2",
"tslib": "^2.3.0",
"typescript": "^4.3.5",
"vite": "^2.3.8",
"vite-svg-loader": "^2.1.0",
"vue": "^3.2.0-beta.8",
"vue-loader": "^16.4.1",
"vue-router": "4",
"vue-tsc": "^0.0.24"
"vue-tsc": "^0.2.2"
},
"peerDependencies": {
"vue": ">=3.0.5"

4
rollup.ts
View File

@@ -5,7 +5,6 @@ import { OutputOptions, RollupOptions } from 'rollup';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import vue from 'rollup-plugin-vue';
// @ts-ignore
import svg from 'rollup-plugin-svg';
import postcss from 'rollup-plugin-postcss';
@@ -93,8 +92,7 @@ for (const { external, iife } of activePackages) {
extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
exclude: 'node_modules/**',
babelHelpers: 'bundled'
}),
vue()
})
],
external: ['vue', ...(external || [])]
});

97
src/components/Nodes/Node.vue → src/components/Nodes/Node.tsx
View File

@@ -1,42 +1,4 @@
<template>
<DraggableCore
cancel=".nodrag"
:scale="transform[2]"
:disabled="!isDraggable"
:grid="grid"
:enableUserSelectHack="false"
@start="onDragStart"
@move="onDrag"
@stop="onDragStop"
>
<div
ref="nodeElement"
:class="nodeClasses"
:style="nodeStyle"
:data-id="node.id"
@mouseenter="onMouseEnterHandler"
@mousemove="onMouseMoveHandler"
@mouseleave="onMouseLeaveHandler"
@contextmenu="onContextMenuHandler"
@click="onSelectNodeHandler"
>
<component
:is="type"
:data="node.data"
:type="node.type"
:x-pos="node.__rf.position.x"
:y-pos="node.__rf.position.y"
:selected="selected"
:is-connectable="isConnectable"
:source-position="node.sourcePosition"
:target-position="node.targetPosition"
:is-dragging="node.__rf.isDragging"
/>
</div>
</DraggableCore>
</template>
<script lang="ts">
import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
import { computed, CSSProperties, defineComponent, h, inject, PropType, provide } from 'vue';
import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
@@ -57,7 +19,7 @@ export default defineComponent({
required: true
},
type: {
type: [Object, String],
type: Object,
required: true
},
snapToGrid: {
@@ -235,24 +197,41 @@ export default defineComponent({
}
]);
return {
nodeClasses,
grid,
nodeStyle,
nodeElement,
onDragStart,
onDrag,
onDragStop,
onContextMenuHandler,
onMouseEnterHandler,
onMouseLeaveHandler,
onMouseMoveHandler,
onSelectNodeHandler,
transform,
isConnectable,
isDraggable,
selected
};
return () => (
<DraggableCore
cancel=".nodrag"
scale={transform.value[2]}
disabled={!isDraggable.value}
grid={grid.value}
enableUserSelectHack={false}
onStart={onDragStart}
onMove={onDrag}
onStop={onDragStop}
>
<div
ref="nodeElement"
class={nodeClasses.value}
style={nodeStyle.value}
data-id={props.node.id}
onMouseenter={onMouseEnterHandler}
onMousemove={onMouseMoveHandler}
onMouseleave={onMouseLeaveHandler}
onContextmenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
>
{h(props.type, {
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
selected: selected.value,
isConnectable: isConnectable.value,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
isDragging: props.node.__rf.isDragging
})}
</div>
</DraggableCore>
);
}
});
</script>

79
src/container/GraphView/GraphView.vue → src/container/GraphView/index.tsx
View File

@@ -1,42 +1,3 @@
<template>
<FlowRenderer
:delete-key-code="deleteKeyCode"
:selection-key-code="selectionKeyCode"
:multi-selection-key-code="multiSelectionKeyCode"
:zoom-activation-key-code="zoomActivationKeyCode"
:elements-selectable="elementsSelectable"
:zoom-on-scroll="zoomOnScroll"
:zoom-on-pinch="zoomOnPinch"
:zoom-on-double-click="zoomOnDoubleClick"
:pan-on-scroll="panOnScroll"
:pan-on-scroll-speed="panOnScrollSpeed"
:pan-on-scroll-mode="panOnScrollMode"
:pane-moveable="paneMoveable"
:default-position="defaultPosition"
:default-zoom="defaultZoom"
:translate-extent="translateExtent"
>
<NodeRenderer
:node-types="nodeTypes"
:select-nodes-on-drag="selectNodesOnDrag"
:snap-to-grid="snapToGrid"
:snap-grid="snapGrid"
:only-render-visible-elements="onlyRenderVisibleElements"
/>
<EdgeRenderer
:edge-types="edgeTypes"
:connection-line-type="connectionLineType"
:connection-line-style="connectionLineStyle"
:connection-line-component="connectionLineComponent"
:connection-mode="connectionMode"
:arrow-head-color="arrowHeadColor"
:marker-end-id="markerEndId"
:only-render-visible-elements="onlyRenderVisibleElements"
:edge-updater-radius="edgeUpdaterRadius"
/>
</FlowRenderer>
</template>
<script lang="ts">
import { defineComponent, inject, PropType, watchEffect } from 'vue';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
@@ -275,6 +236,44 @@ export default defineComponent({
watchEffect(() => {
init();
});
return () => (
<FlowRenderer
deleteKeyCode={props.deleteKeyCode}
selectionKeyCode={props.selectionKeyCode}
multiSelectionKeyCode={props.multiSelectionKeyCode}
zoomActivationKeyCode={props.zoomActivationKeyCode}
elementsSelectable={props.elementsSelectable}
zoomOnScroll={props.zoomOnScroll}
zoomOnPinch={props.zoomOnPinch}
zoomOnDoubleClick={props.zoomOnDoubleClick}
panOnScroll={props.panOnScroll}
panOnScrollSpeed={props.panOnScrollSpeed}
panOnScrollMode={props.panOnScrollMode}
paneMoveable={props.paneMoveable}
defaultPosition={props.defaultPosition}
defaultZoom={props.defaultZoom}
translateExtent={props.translateExtent}
>
<NodeRenderer
nodeTypes={props.nodeTypes}
selectNodesOnDrag={props.selectNodesOnDrag}
snapToGrid={props.snapToGrid}
snapGrid={props.snapGrid}
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
/>
<EdgeRenderer
edgeTypes={props.edgeTypes}
connectionLineType={props.connectionLineType}
connectionLineStyle={props.connectionLineStyle}
connectionLineComponent={props.connectionLineComponent}
connectionMode={props.connectionMode}
arrowHeadColor={props.arrowHeadColor}
markerEndId={props.markerEndId}
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
edgeUpdaterRadius={props.edgeUpdaterRadius}
/>
</FlowRenderer>
);
}
});
</script>

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

@@ -1,5 +1,5 @@
import { computed, defineComponent, inject, PropType } from 'vue';
import Node from '../../components/Nodes/Node.vue';
import Node from '../../components/Nodes/Node';
import { getNodesInside } from '../../utils/graph';
import { NodeType, RevueFlowStore } from '../../types';

90
src/container/RevueFlow/RevueFlow.vue → src/container/RevueFlow/index.tsx
View File

@@ -1,49 +1,8 @@
<template>
<div class="revue-flow">
<GraphView
:node-types="nodeTypesParsed().value"
:edge-types="edgeTypesParsed().value"
:connection-mode="connectionMode"
:connection-line-type="connectionLineType"
:connection-line-style="connectionLineStyle"
:connection-line-component="connectionLineComponent"
:selection-key-code="selectionKeyCode"
:delete-key-code="deleteKeyCode"
:multi-selection-key-code="multiSelectionKeyCode"
:zoom-activation-key-code="zoomActivationKeyCode"
:snap-to-grid="snapToGrid"
:snap-grid="snapGrid"
:only-render-visible-elements="onlyRenderVisibleElements"
:nodes-draggable="nodesDraggable"
:nodes-connectable="nodesConnectable"
:elements-selectable="elementsSelectable"
:select-nodes-on-drag="selectNodesOnDrag"
:min-zoom="minZoom"
:max-zoom="maxZoom"
:default-zoom="defaultZoom"
:default-position="defaultPosition"
:translate-extent="translateExtent"
:node-extent="nodeExtent"
:arrow-head-color="arrowHeadColor"
:marker-end-id="markerEndId"
:zoom-on-scroll="zoomOnScroll"
:zoom-on-pinch="zoomOnPinch"
:zoom-on-double-click="zoomOnDoubleClick"
:pan-on-scroll="panOnScroll"
:pan-on-scroll-speed="panOnScrollSpeed"
:pan-on-scroll-mode="panOnScrollMode"
:pane-moveable="paneMoveable"
:edge-updater-radius="edgeUpdaterRadius"
/>
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
import { reactify, useVModel } from '@vueuse/core';
import '../../style.css';
import '../../theme-default.css';
import GraphView from '../GraphView/GraphView.vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
@@ -260,7 +219,7 @@ export default defineComponent({
}
},
emits: Object.keys(useRevueFlow()),
setup(props, { emit }) {
setup(props, { emit, slots }) {
const store = configureStore(initialState)();
provide<RevueFlowStore>('store', store);
const hooks = useRevueFlow().bind(emit);
@@ -284,10 +243,45 @@ export default defineComponent({
const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
return {
nodeTypesParsed,
edgeTypesParsed
};
return () => (
<div class="revue-flow">
<GraphView
nodeTypes={nodeTypesParsed().value}
edgeTypes={edgeTypesParsed().value}
connectionMode={props.connectionMode}
connectionLineType={props.connectionLineType}
connectionLineStyle={props.connectionLineStyle}
connectionLineComponent={props.connectionLineComponent}
selectionKeyCode={props.selectionKeyCode}
deleteKeyCode={props.deleteKeyCode}
multiSelectionKeyCode={props.multiSelectionKeyCode}
zoomActivationKeyCode={props.zoomActivationKeyCode}
snapToGrid={props.snapToGrid}
snapGrid={props.snapGrid}
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
nodesDraggable={props.nodesDraggable}
nodesConnectable={props.nodesConnectable}
elementsSelectable={props.elementsSelectable}
selectNodesOnDrag={props.selectNodesOnDrag}
minZoom={props.minZoom}
maxZoom={props.maxZoom}
defaultZoom={props.defaultZoom}
defaultPosition={props.defaultPosition}
translateExtent={props.translateExtent}
nodeExtent={props.nodeExtent}
arrowHeadColor={props.arrowHeadColor}
markerEndId={props.markerEndId}
zoomOnScroll={props.zoomOnScroll}
zoomOnPinch={props.zoomOnPinch}
zoomOnDoubleClick={props.zoomOnDoubleClick}
panOnScroll={props.panOnScroll}
panOnScrollSpeed={props.panOnScrollSpeed}
panOnScrollMode={props.panOnScrollMode}
paneMoveable={props.paneMoveable}
edgeUpdaterRadius={props.edgeUpdaterRadius}
/>
{slots.default ? slots.default() : ''}
</div>
);
}
});
</script>

2
src/index.ts
View File

@@ -1,4 +1,4 @@
export { default as default } from './container/RevueFlow/RevueFlow.vue';
export { default as default } from './container/RevueFlow';
export { default as Handle } from './components/Handle';
export { default as EdgeText } from './components/Edges/EdgeText';
export { getBezierPath } from './components/Edges/BezierEdge';

4
src/shims-tsx.d.ts vendored
View File

@@ -11,5 +11,9 @@ declare global {
interface IntrinsicElements {
[elem: string]: any;
}
interface IntrinsicAttributes {
[prop: string]: any;
}
}
}

6
src/shims-vue.d.ts vendored
View File

@@ -4,9 +4,3 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare namespace JSX {
export interface IntrinsicElements {
[key: string]: any;
}
}

4
tsconfig.json
View File

@@ -9,7 +9,8 @@
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"lib": ["es6", "dom", "es2016", "es2017", "es2020"],
"types": ["@types/node"],
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
@@ -21,7 +22,6 @@
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"types": ["node"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules", "build", "dist", "example"]

692
yarn.lock
View File

File diff suppressed because it is too large Load Diff