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

chore(core): cleanup and replace const with function

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-07 12:27:41 +01:00
committed by Braks
parent 5abe4ca2e5
commit bb2c4f449a
16 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+5 -12
View File
@@ -19,14 +19,9 @@ const {
getEdges,
getNodesInitialized,
getEdgeTypes,
noPanClassName,
elevateEdgesOnSelect,
} = $(useVueFlow())
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
const focusable = (f?: boolean) => (typeof f === 'undefined' ? edgesFocusable : f)
const sourceNode = $(
controlledComputed(
() => connectionStartHandle?.nodeId,
@@ -73,7 +68,11 @@ onBeforeUnmount(() => {
stop?.()
})
const getType = (type?: string, template?: GraphEdge['template']) => {
const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
function getType(type?: string, template?: GraphEdge['template']) {
const name = type || 'default'
let edgeType = template ?? getEdgeTypes[name]
const instance = getCurrentInstance()
@@ -96,11 +95,6 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
return slot
}
const getClass = (edge: GraphEdge) => {
const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
return [noPanClassName, extraClass]
}
</script>
<script lang="ts">
@@ -124,7 +118,6 @@ export default {
:selectable="selectable(edge.selectable)"
:updatable="updatable(edge.updatable)"
:focusable="focusable(edge.focusable)"
:class="getClass(edge)"
/>
</g>
</svg>
packages/core/src/container/NodeRenderer/NodeRenderer.vue
+7 -6
View File
@@ -17,11 +17,6 @@ const {
emits,
} = $(useVueFlow())
const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
const connectable = (c?: HandleConnectable) => (typeof c === 'undefined' ? nodesConnectable : c)
const focusable = (f?: boolean) => (typeof f === 'undefined' ? nodesFocusable : f)
let resizeObserver = $ref<ResizeObserver>()
until(() => nodes.length > 0 && getNodesInitialized.length === nodes.length)
@@ -49,7 +44,13 @@ onMounted(() => {
onBeforeUnmount(() => resizeObserver?.disconnect())
const getType = (type?: string, template?: GraphNode['template']) => {
const draggable = (nodeDraggable?: boolean) => (typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable)
const selectable = (nodeSelectable?: boolean) => (typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable)
const connectable = (nodeConnectable?: HandleConnectable) =>
typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
const focusable = (nodeFocusable?: boolean) => (typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable)
function getType(type?: string, template?: GraphNode['template']) {
const name = type || 'default'
let nodeType = template ?? getNodeTypes[name]
const instance = getCurrentInstance()
packages/core/src/container/Viewport/Viewport.vue
+35 -27
View File
@@ -44,9 +44,6 @@ let zoomedWithRightMouseButton = $ref(false)
let mouseButton = $ref(0)
const isRightClickPan = (pan: FlowOptions['panOnDrag'], usedButton: number) =>
usedButton === 2 && Array.isArray(pan) && pan.includes(2)
const panKeyPressed = useKeyPress(panActivationKeyCode)
const isConnecting = $computed(() => !!connectionStartHandle)
@@ -57,30 +54,6 @@ const isSelecting = computed(
() => (selectionKeyCode !== true && selectionKeyPressed) || (selectionKeyCode === true && shouldPanOnDrag.value !== true),
)
const viewChanged = (prevViewport: ViewportTransform, eventTransform: ZoomTransform): boolean =>
(prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
(prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
(prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
const eventToFlowTransform = (eventTransform: ZoomTransform): ViewportTransform => ({
x: eventTransform.x,
y: eventTransform.y,
zoom: eventTransform.k,
})
const setDimensions = () => {
if (!viewportEl.value) return
const { width, height } = getDimensions(viewportEl.value)
if (width === 0 || height === 0) warn('The Vue Flow parent container needs a width and a height to render the graph.')
dimensions.width = width || 500
dimensions.height = height || 500
}
const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
let prevTransform = $ref<ViewportTransform>({
x: 0,
y: 0,
@@ -286,6 +259,41 @@ onMounted(() => {
return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
})
})
function isRightClickPan(pan: FlowOptions['panOnDrag'], usedButton: number) {
return usedButton === 2 && Array.isArray(pan) && pan.includes(2)
}
function viewChanged(prevViewport: ViewportTransform, eventTransform: ZoomTransform) {
return (
(prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
(prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
(prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
)
}
function eventToFlowTransform(eventTransform: ZoomTransform): ViewportTransform {
return {
x: eventTransform.x,
y: eventTransform.y,
zoom: eventTransform.k,
}
}
function setDimensions() {
if (!viewportEl.value) return
const { width, height } = getDimensions(viewportEl.value)
if (width === 0 || height === 0) warn('The Vue Flow parent container needs a width and a height to render the graph.')
dimensions.width = width || 500
dimensions.height = height || 500
}
function isWrappedWithClass(event: Event, className: string | undefined) {
return (event.target as Element).closest(`.${className}`)
}
</script>
<script lang="ts">