mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-18 16:02:10 +00:00
integrate svelte-grid in codebase
This commit is contained in:
Ruben Fiszel
Generated
-13
@@ -48,7 +48,6 @@
|
||||
"@types/vscode": "~1.74.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.49.0",
|
||||
"@typescript-eslint/parser": "^5.48.0",
|
||||
"@windmill-labs/svelte-grid": "^5.1.6",
|
||||
"@zerodevx/svelte-toast": "^0.8.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"cssnano": "^5.1.14",
|
||||
@@ -1601,12 +1600,6 @@
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@windmill-labs/svelte-grid": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.6.tgz",
|
||||
"integrity": "sha512-wXHIG7XeMxwxnfaHajhjvz9c0u5uGgiQtTk/QxAVyViGdshsclfIfIWZF113QQBKCKp2jY/zP1cj64BrqioRoQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@zeit/schemas": {
|
||||
"version": "2.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
|
||||
@@ -9284,12 +9277,6 @@
|
||||
"eslint-visitor-keys": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@windmill-labs/svelte-grid": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.6.tgz",
|
||||
"integrity": "sha512-wXHIG7XeMxwxnfaHajhjvz9c0u5uGgiQtTk/QxAVyViGdshsclfIfIWZF113QQBKCKp2jY/zP1cj64BrqioRoQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@zeit/schemas": {
|
||||
"version": "2.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
"@types/vscode": "~1.74.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.49.0",
|
||||
"@typescript-eslint/parser": "^5.48.0",
|
||||
"@windmill-labs/svelte-grid": "^5.1.6",
|
||||
"@zerodevx/svelte-toast": "^0.8.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"cssnano": "^5.1.14",
|
||||
|
||||
Vendored
-77
@@ -1,79 +1,2 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
declare type Item = import('svelte-dnd-action').Item
|
||||
declare type DndEvent<ItemType = Item> = import('svelte-dnd-action').DndEvent<ItemType>
|
||||
declare namespace svelte.JSX {
|
||||
interface HTMLAttributes<T> {
|
||||
onconsider?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void
|
||||
onfinalize?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@windmill-labs/svelte-grid' {
|
||||
import type { SvelteComponentTyped } from 'svelte'
|
||||
|
||||
export interface Size {
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export interface Positon {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
interface ItemLayout extends Size, Positon {
|
||||
fixed?: boolean
|
||||
resizable?: boolean
|
||||
draggable?: boolean
|
||||
customDragger?: boolean
|
||||
customResizer?: boolean
|
||||
min?: Size
|
||||
max?: Size
|
||||
}
|
||||
|
||||
export type Item<T> = T & { [width: number]: ItemLayout; data: any }
|
||||
export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any }
|
||||
|
||||
export interface Props<T> {
|
||||
fillSpace?: boolean
|
||||
items: FilledItem<T>[]
|
||||
rowHeight: number
|
||||
cols: [number, number][]
|
||||
gap?: [number, number]
|
||||
fastStart?: boolean
|
||||
throttleUpdate?: number
|
||||
throttleResize?: number
|
||||
onTopId?: string
|
||||
scroller?: undefined
|
||||
sensor?: number
|
||||
parentWidth?: number
|
||||
}
|
||||
|
||||
export interface Slots<T> {
|
||||
default: { item: ItemLayout; dataItem: Item<T> }
|
||||
}
|
||||
|
||||
export default class Grid<T = {}> extends SvelteComponentTyped<
|
||||
Props<T>,
|
||||
{
|
||||
pointerup: CustomEvent<{ id: string }>
|
||||
mount: CustomEvent<>
|
||||
},
|
||||
Slots<T>
|
||||
> { }
|
||||
}
|
||||
|
||||
declare module '@windmill-labs/svelte-grid/build/helper/index.mjs' {
|
||||
import { ItemLayout } from '@windmill-labs/svelte-grid'
|
||||
|
||||
const x: {
|
||||
normalize(items: any[], col: any): unknown[]
|
||||
adjust(items: any[], col: any): unknown[]
|
||||
findSpace(item: any, items: any, cols: any): unknown
|
||||
|
||||
item<T>(obj: ItemLayout): Required<ItemLayout>
|
||||
}
|
||||
|
||||
export default x
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext, afterUpdate, setContext } from 'svelte'
|
||||
import { getContext, afterUpdate } from 'svelte'
|
||||
import type { App, AppEditorContext, AppViewerContext, GridItem } from '../types'
|
||||
import Grid from '@windmill-labs/svelte-grid'
|
||||
import { classNames } from '$lib/utils'
|
||||
import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
@@ -11,8 +10,9 @@
|
||||
import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
|
||||
import Component from './component/Component.svelte'
|
||||
import { deepEqual } from 'fast-equals'
|
||||
import { push, type History } from '$lib/history'
|
||||
import { push } from '$lib/history'
|
||||
import { expandGriditem, findGridItem } from './appUtils'
|
||||
import Grid from '../svelte-grid/Grid.svelte'
|
||||
|
||||
export let policy: Policy
|
||||
|
||||
@@ -215,6 +215,7 @@
|
||||
if (gridItem) {
|
||||
toggleFixed(gridItem)
|
||||
}
|
||||
$app = $app
|
||||
}}
|
||||
on:expand={() => {
|
||||
push(history, $app)
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { classNames } from '$lib/utils'
|
||||
import { createEventDispatcher, getContext } from 'svelte'
|
||||
import Grid from '@windmill-labs/svelte-grid'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
|
||||
import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
|
||||
import Component from './component/Component.svelte'
|
||||
import { expandGriditem, findGridItem } from './appUtils'
|
||||
import { push } from '$lib/history'
|
||||
import Grid from '../svelte-grid/Grid.svelte'
|
||||
|
||||
export let containerHeight: number
|
||||
let classes = ''
|
||||
@@ -63,6 +63,7 @@
|
||||
if (fComponent) {
|
||||
fComponent = toggleFixed(fComponent)
|
||||
}
|
||||
$app = $app
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { getNextId } from '$lib/components/flows/flowStateUtils'
|
||||
import type { App, EditorBreakpoint, FocusedGrid, GridItem } from '../types'
|
||||
import { getRecommendedDimensionsByComponent, type AppComponent } from './component'
|
||||
import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
|
||||
import { gridColumns } from '../gridUtils'
|
||||
import { allItems } from '../utils'
|
||||
import type { Output, World } from '../rx'
|
||||
import gridHelp from '../svelte-grid/utils/helper'
|
||||
|
||||
function findGridItemById(
|
||||
root: GridItem[],
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { Size } from '@windmill-labs/svelte-grid'
|
||||
import type { IntRange } from '../../../../common'
|
||||
import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils'
|
||||
import { defaultAlignement } from '../componentsPanel/componentDefaultProps'
|
||||
@@ -36,6 +35,7 @@ import {
|
||||
AtSignIcon
|
||||
} from 'lucide-svelte'
|
||||
import type { BaseAppComponent } from '../../types'
|
||||
import type { Size } from '../../svelte-grid/types'
|
||||
|
||||
type BaseComponent<T extends string> = {
|
||||
type: T
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
<script lang="ts">
|
||||
import { getContainerHeight } from './utils/container'
|
||||
import { moveItemsAroundItem, moveItem, getItemById, specifyUndefinedColumns } from './utils/item'
|
||||
import { onMount, createEventDispatcher } from 'svelte'
|
||||
import { getColumn, throttle } from './utils/other'
|
||||
import MoveResize from './MoveResize.svelte'
|
||||
import type { FilledItem } from './types'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
type T = $$Generic
|
||||
|
||||
export let fillSpace = false
|
||||
export let items: FilledItem<T>[]
|
||||
export let rowHeight: number
|
||||
export let cols: [number, number][]
|
||||
export let gap = [10, 10]
|
||||
export let fastStart = false
|
||||
export let throttleUpdate = 100
|
||||
export let throttleResize = 100
|
||||
export let onTopId: string | undefined = undefined
|
||||
|
||||
export let scroller = undefined
|
||||
export let sensor = 20
|
||||
|
||||
export let parentWidth: number | undefined = undefined
|
||||
|
||||
let getComputedCols
|
||||
|
||||
let container
|
||||
|
||||
$: [gapX, gapY] = gap
|
||||
|
||||
let xPerPx = 0
|
||||
let yPerPx = rowHeight
|
||||
|
||||
let containerWidth
|
||||
|
||||
$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols)
|
||||
|
||||
const pointerup = (ev) => {
|
||||
dispatch('pointerup', {
|
||||
id: ev.detail.id,
|
||||
cols: getComputedCols
|
||||
})
|
||||
}
|
||||
|
||||
const onResize = throttle(() => {
|
||||
items = specifyUndefinedColumns(items, getComputedCols, cols)
|
||||
dispatch('resize', {
|
||||
cols: getComputedCols,
|
||||
xPerPx,
|
||||
yPerPx,
|
||||
width: containerWidth
|
||||
})
|
||||
}, throttleUpdate)
|
||||
|
||||
onMount(() => {
|
||||
const sizeObserver = new ResizeObserver((entries) => {
|
||||
requestAnimationFrame(() => {
|
||||
let width = entries[0].contentRect.width
|
||||
|
||||
if (width === containerWidth) return
|
||||
|
||||
getComputedCols = getColumn(parentWidth ?? width, cols)
|
||||
|
||||
xPerPx = width / getComputedCols
|
||||
|
||||
if (!containerWidth) {
|
||||
items = specifyUndefinedColumns(items, getComputedCols, cols)
|
||||
|
||||
dispatch('mount', {
|
||||
cols: getComputedCols,
|
||||
xPerPx,
|
||||
yPerPx // same as rowHeight
|
||||
})
|
||||
} else {
|
||||
onResize()
|
||||
}
|
||||
|
||||
containerWidth = width
|
||||
})
|
||||
})
|
||||
|
||||
sizeObserver.observe(container)
|
||||
|
||||
return () => sizeObserver.disconnect()
|
||||
})
|
||||
|
||||
const updateMatrix = ({ detail }) => {
|
||||
let activeItem = getItemById(detail.id, items)
|
||||
|
||||
if (activeItem) {
|
||||
activeItem = {
|
||||
...activeItem,
|
||||
[getComputedCols]: {
|
||||
...activeItem[getComputedCols],
|
||||
...detail.shadow
|
||||
}
|
||||
}
|
||||
|
||||
if (fillSpace) {
|
||||
items = moveItemsAroundItem(
|
||||
activeItem,
|
||||
items,
|
||||
getComputedCols,
|
||||
getItemById(detail.id, items)
|
||||
)
|
||||
} else {
|
||||
items = moveItem(activeItem, items, getComputedCols, getItemById(detail.id, items))
|
||||
}
|
||||
|
||||
if (detail.onUpdate) detail.onUpdate()
|
||||
|
||||
dispatch('change', {
|
||||
unsafeItem: activeItem,
|
||||
id: activeItem.id,
|
||||
cols: getComputedCols
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const throttleMatrix = throttle(updateMatrix, throttleResize)
|
||||
|
||||
const handleRepaint = ({ detail }) => {
|
||||
if (!detail.isPointerUp) {
|
||||
throttleMatrix({ detail })
|
||||
} else {
|
||||
updateMatrix({ detail })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
|
||||
{#if xPerPx || !fastStart}
|
||||
{#each items as item, i (item.id)}
|
||||
<MoveResize
|
||||
on:repaint={handleRepaint}
|
||||
on:pointerup={pointerup}
|
||||
onTop={item.id == onTopId}
|
||||
id={item.id}
|
||||
resizable={item[getComputedCols] && item[getComputedCols].resizable}
|
||||
draggable={item[getComputedCols] && item[getComputedCols].draggable}
|
||||
{xPerPx}
|
||||
{yPerPx}
|
||||
width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
|
||||
xPerPx -
|
||||
gapX * 2}
|
||||
height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
|
||||
top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
|
||||
left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
|
||||
item={item[getComputedCols]}
|
||||
min={item[getComputedCols] && item[getComputedCols].min}
|
||||
max={item[getComputedCols] && item[getComputedCols].max}
|
||||
cols={getComputedCols}
|
||||
{gapX}
|
||||
{gapY}
|
||||
{sensor}
|
||||
container={scroller}
|
||||
nativeContainer={container}
|
||||
let:resizePointerDown
|
||||
let:movePointerDown
|
||||
>
|
||||
{#if item[getComputedCols]}
|
||||
<slot
|
||||
{movePointerDown}
|
||||
{resizePointerDown}
|
||||
dataItem={item}
|
||||
item={item[getComputedCols]}
|
||||
index={i}
|
||||
/>
|
||||
{/if}
|
||||
</MoveResize>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.svlt-grid-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
Anything under this repo was initially forked from svelte-grid whose LICENSE is below
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Vahe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,404 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let sensor
|
||||
export let width
|
||||
export let height
|
||||
export let left
|
||||
export let top
|
||||
|
||||
export let resizable
|
||||
export let draggable
|
||||
|
||||
export let id
|
||||
export let container
|
||||
|
||||
export let xPerPx
|
||||
export let yPerPx
|
||||
|
||||
export let gapX
|
||||
export let gapY
|
||||
export let item
|
||||
|
||||
export let max
|
||||
export let min
|
||||
|
||||
export let cols
|
||||
|
||||
export let nativeContainer
|
||||
export let onTop
|
||||
|
||||
let shadowElement
|
||||
let shadow: { x: number; y: number; w: number; h: number } | undefined = undefined
|
||||
|
||||
let active = false
|
||||
|
||||
let initX, initY
|
||||
|
||||
let capturePos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
let cordDiff = { x: 0, y: 0 }
|
||||
|
||||
let newSize = { width, height }
|
||||
let trans = false
|
||||
|
||||
let anima
|
||||
|
||||
const inActivate = () => {
|
||||
if (shadowElement && shadow) {
|
||||
let subgrid = shadowElement.closest('.subgrid')
|
||||
let irect = shadowElement.getBoundingClientRect()
|
||||
let shadowBound
|
||||
|
||||
if (subgrid) {
|
||||
let subGridParent = subgrid.parentElement
|
||||
let subGridParentRect = subGridParent.getBoundingClientRect()
|
||||
let prect = subgrid.getBoundingClientRect()
|
||||
|
||||
const subGridOffset = {
|
||||
x: subGridParentRect.x - prect.x,
|
||||
y: subGridParentRect.y - prect.y
|
||||
}
|
||||
|
||||
shadowBound = {
|
||||
x: irect.x - prect.left - subGridOffset.x,
|
||||
y: irect.y - prect.top - subGridOffset.y
|
||||
}
|
||||
} else {
|
||||
shadowBound = irect
|
||||
}
|
||||
|
||||
const xdragBound = rect.left + cordDiff.x
|
||||
const ydragBound = rect.top + cordDiff.y
|
||||
|
||||
cordDiff.x = shadow.x * xPerPx + gapX - (shadowBound.x - xdragBound)
|
||||
cordDiff.y = shadow.y * yPerPx + gapY - (shadowBound.y - ydragBound)
|
||||
|
||||
active = false
|
||||
trans = true
|
||||
|
||||
clearTimeout(anima)
|
||||
|
||||
anima = setTimeout(() => {
|
||||
trans = false
|
||||
}, 100)
|
||||
|
||||
dispatch('pointerup', {
|
||||
id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let repaint = (cb: (() => void) | undefined, isPointerUp: boolean) => {
|
||||
dispatch('repaint', {
|
||||
id,
|
||||
shadow,
|
||||
isPointerUp,
|
||||
onUpdate: cb
|
||||
})
|
||||
}
|
||||
|
||||
// Autoscroll
|
||||
let _scrollTop = 0
|
||||
let containerFrame
|
||||
let rect
|
||||
let scrollElement
|
||||
|
||||
const getContainerFrame = (element) => {
|
||||
if (element === document.documentElement || !element) {
|
||||
const { height, top, right, bottom, left } = nativeContainer.getBoundingClientRect()
|
||||
|
||||
return {
|
||||
top: Math.max(0, top),
|
||||
bottom: Math.min(window.innerHeight, bottom)
|
||||
}
|
||||
}
|
||||
|
||||
return element.getBoundingClientRect()
|
||||
}
|
||||
|
||||
const getScroller = (element) => (!element ? document.documentElement : element)
|
||||
|
||||
function computeRect(target) {
|
||||
let gridItem = target.closest('.svlt-grid-item')
|
||||
let subgrid = gridItem.closest('.subgrid')
|
||||
|
||||
let irect = gridItem.getBoundingClientRect()
|
||||
if (subgrid) {
|
||||
let subGridParent = subgrid.parentElement
|
||||
let subGridParentRect = subGridParent.getBoundingClientRect()
|
||||
|
||||
let prect = subgrid.getBoundingClientRect()
|
||||
|
||||
const subGridOffset = {
|
||||
x: subGridParentRect.x - prect.x,
|
||||
y: subGridParentRect.y - prect.y
|
||||
}
|
||||
|
||||
rect = {
|
||||
top: irect.top - prect.top - subGridOffset.y,
|
||||
left: irect.left - prect.left - subGridOffset.x
|
||||
}
|
||||
} else {
|
||||
rect = irect
|
||||
}
|
||||
}
|
||||
|
||||
const pointerdown = ({ clientX, clientY, target }) => {
|
||||
initX = clientX
|
||||
initY = clientY
|
||||
|
||||
capturePos = { x: left, y: top }
|
||||
shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
|
||||
newSize = { width, height }
|
||||
|
||||
containerFrame = getContainerFrame(container)
|
||||
scrollElement = getScroller(container)
|
||||
|
||||
cordDiff = { x: 0, y: 0 }
|
||||
|
||||
computeRect(target)
|
||||
|
||||
active = true
|
||||
trans = false
|
||||
_scrollTop = scrollElement.scrollTop
|
||||
|
||||
window.addEventListener('pointermove', pointermove)
|
||||
window.addEventListener('pointerup', pointerup)
|
||||
}
|
||||
|
||||
let sign = { x: 0, y: 0 }
|
||||
let vel = { x: 0, y: 0 }
|
||||
let intervalId: NodeJS.Timer | undefined = undefined
|
||||
|
||||
const stopAutoscroll = () => {
|
||||
intervalId && clearInterval(intervalId)
|
||||
intervalId = undefined
|
||||
sign = { x: 0, y: 0 }
|
||||
vel = { x: 0, y: 0 }
|
||||
}
|
||||
|
||||
const update = () => {
|
||||
const _newScrollTop = scrollElement.scrollTop - _scrollTop
|
||||
|
||||
const boundX = capturePos.x + cordDiff.x
|
||||
const boundY = capturePos.y + (cordDiff.y + _newScrollTop)
|
||||
|
||||
let gridX = Math.round(boundX / xPerPx)
|
||||
let gridY = Math.round(boundY / yPerPx)
|
||||
|
||||
if (shadow) {
|
||||
shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0)
|
||||
shadow.y = Math.max(gridY, 0)
|
||||
|
||||
if (max.y) {
|
||||
shadow.y = Math.min(shadow.y, max.y)
|
||||
}
|
||||
}
|
||||
repaint(undefined, false)
|
||||
}
|
||||
|
||||
const pointermove = (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
event.stopImmediatePropagation()
|
||||
|
||||
const { clientX, clientY } = event
|
||||
cordDiff = { x: clientX - initX, y: clientY - initY }
|
||||
|
||||
const Y_SENSOR = sensor
|
||||
|
||||
let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR)
|
||||
let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR)
|
||||
|
||||
const topSensor = velocityTop > 0 && velocityBottom === 0
|
||||
const bottomSensor = velocityBottom > 0 && velocityTop === 0
|
||||
|
||||
sign.y = topSensor ? -1 : bottomSensor ? 1 : 0
|
||||
vel.y = sign.y === -1 ? velocityTop : velocityBottom
|
||||
|
||||
if (vel.y > 0) {
|
||||
if (!intervalId) {
|
||||
// Start scrolling
|
||||
// TODO Use requestAnimationFrame
|
||||
intervalId = setInterval(() => {
|
||||
scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y
|
||||
update()
|
||||
}, 10)
|
||||
}
|
||||
} else if (intervalId) {
|
||||
stopAutoscroll()
|
||||
} else {
|
||||
update()
|
||||
}
|
||||
}
|
||||
|
||||
const pointerup = (e) => {
|
||||
stopAutoscroll()
|
||||
|
||||
window.removeEventListener('pointerdown', pointerdown)
|
||||
window.removeEventListener('pointermove', pointermove)
|
||||
window.removeEventListener('pointerup', pointerup)
|
||||
repaint(inActivate, true)
|
||||
}
|
||||
|
||||
// Resize
|
||||
|
||||
let resizeInitPos = { x: 0, y: 0 }
|
||||
let initSize = { width: 0, height: 0 }
|
||||
|
||||
const resizePointerDown = (e) => {
|
||||
e.stopPropagation()
|
||||
const { pageX, pageY, target } = e
|
||||
|
||||
resizeInitPos = { x: pageX, y: pageY }
|
||||
initSize = { width, height }
|
||||
|
||||
cordDiff = { x: 0, y: 0 }
|
||||
|
||||
computeRect(target)
|
||||
|
||||
newSize = { width, height }
|
||||
|
||||
active = true
|
||||
trans = false
|
||||
shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
|
||||
|
||||
containerFrame = getContainerFrame(container)
|
||||
scrollElement = getScroller(container)
|
||||
|
||||
window.addEventListener('pointermove', resizePointerMove)
|
||||
window.addEventListener('pointerup', resizePointerUp)
|
||||
}
|
||||
|
||||
const resizePointerMove = ({ pageX, pageY }) => {
|
||||
if (shadow) {
|
||||
newSize.width = initSize.width + pageX - resizeInitPos.x
|
||||
newSize.height = initSize.height + pageY - resizeInitPos.y
|
||||
|
||||
// Get max col number
|
||||
let maxWidth = cols - shadow.x
|
||||
maxWidth = Math.min(max.w, maxWidth) || maxWidth
|
||||
|
||||
// Limit bound
|
||||
newSize.width = Math.max(
|
||||
Math.min(newSize.width, maxWidth * xPerPx - gapX * 2),
|
||||
min.w * xPerPx - gapX * 2
|
||||
)
|
||||
|
||||
newSize.height = Math.max(newSize.height, min.h * yPerPx - gapY * 2)
|
||||
|
||||
if (max.h) {
|
||||
newSize.height = Math.min(newSize.height, max.h * yPerPx - gapY * 2)
|
||||
}
|
||||
// Limit col & row
|
||||
shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx)
|
||||
shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx)
|
||||
|
||||
repaint(undefined, false)
|
||||
}
|
||||
}
|
||||
|
||||
const resizePointerUp = (e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
repaint(inActivate, true)
|
||||
|
||||
window.removeEventListener('pointermove', resizePointerMove)
|
||||
window.removeEventListener('pointerup', resizePointerUp)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
draggable={false}
|
||||
on:pointerdown={item && item.customDragger ? null : draggable && pointerdown}
|
||||
class="svlt-grid-item"
|
||||
class:svlt-grid-active={active || (trans && rect)}
|
||||
style="width: {active ? newSize.width : width}px; height:{active
|
||||
? newSize.height
|
||||
: height}px; {onTop ? 'z-index: 100;' : ''}
|
||||
{active
|
||||
? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
|
||||
: trans
|
||||
? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
|
||||
: `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "
|
||||
>
|
||||
<slot movePointerDown={pointerdown} {resizePointerDown} />
|
||||
{#if resizable && !item.customResizer}
|
||||
<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if (active || trans) && shadow}
|
||||
<div
|
||||
class="svlt-grid-shadow shadow-active"
|
||||
style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
|
||||
gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
|
||||
gapY}px); "
|
||||
bind:this={shadowElement}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.svlt-grid-item {
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
will-change: auto;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.svlt-grid-resizer {
|
||||
user-select: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: se-resize;
|
||||
}
|
||||
.svlt-grid-resizer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-right: 2px solid rgba(0, 0, 0, 0.4);
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.svlt-grid-active {
|
||||
z-index: 3;
|
||||
cursor: grabbing;
|
||||
position: fixed;
|
||||
opacity: 0.5;
|
||||
|
||||
/*No user*/
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-o-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.shadow-active {
|
||||
z-index: 2;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.svlt-grid-shadow {
|
||||
position: absolute;
|
||||
background: red;
|
||||
will-change: transform;
|
||||
background: pink;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
export interface Size {
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export interface Positon {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
interface ItemLayout extends Size, Positon {
|
||||
fixed?: boolean
|
||||
resizable?: boolean
|
||||
draggable?: boolean
|
||||
customDragger?: boolean
|
||||
customResizer?: boolean
|
||||
min?: Size
|
||||
max?: Size
|
||||
}
|
||||
|
||||
export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any, id: string }
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { getRowsCount } from "./other";
|
||||
|
||||
export function getContainerHeight(items, yPerPx, cols) {
|
||||
return getRowsCount(items, cols) * yPerPx;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { makeMatrixFromItems } from "./matrix";
|
||||
import { findFreeSpaceForItem, normalize, adjust } from "./item";
|
||||
import { getRowsCount } from "./other";
|
||||
|
||||
function makeItem(item) {
|
||||
const { min = { w: 1, h: 1 }, max } = item;
|
||||
return {
|
||||
fixed: false,
|
||||
resizable: !item.fixed,
|
||||
draggable: !item.fixed,
|
||||
customDragger: false,
|
||||
customResizer: false,
|
||||
min: {
|
||||
w: Math.max(1, min.w),
|
||||
h: Math.max(1, min.h),
|
||||
},
|
||||
max: { ...max },
|
||||
...item,
|
||||
};
|
||||
}
|
||||
|
||||
const gridHelp = {
|
||||
normalize(items, col) {
|
||||
return normalize(items, col);
|
||||
},
|
||||
|
||||
adjust(items, col) {
|
||||
return adjust(items, col);
|
||||
},
|
||||
|
||||
item(obj) {
|
||||
return makeItem(obj);
|
||||
},
|
||||
|
||||
findSpace(item, items, cols) {
|
||||
let matrix = makeMatrixFromItems(items, getRowsCount(items, cols), cols);
|
||||
|
||||
let position = findFreeSpaceForItem(matrix, item[cols]);
|
||||
return position;
|
||||
},
|
||||
};
|
||||
|
||||
export default gridHelp;
|
||||
@@ -0,0 +1,219 @@
|
||||
import type { FilledItem } from "../types";
|
||||
import { makeMatrix, makeMatrixFromItemsIgnore, findCloseBlocks, findItemsById, makeMatrixFromItems } from "./matrix";
|
||||
import { getRowsCount } from "./other";
|
||||
|
||||
export function getItemById(id, items) {
|
||||
return items.find((value) => value.id === id);
|
||||
}
|
||||
|
||||
export function findFreeSpaceForItem(matrix, item) {
|
||||
const cols = matrix[0].length;
|
||||
const w = Math.min(cols, item.w);
|
||||
let xNtime = cols - w;
|
||||
let getMatrixRows = matrix.length;
|
||||
|
||||
for (var i = 0; i < getMatrixRows; i++) {
|
||||
const row = matrix[i];
|
||||
for (var j = 0; j < xNtime + 1; j++) {
|
||||
const sliceA = row.slice(j, j + w);
|
||||
const empty = sliceA.every((val) => val === undefined);
|
||||
if (empty) {
|
||||
const isEmpty = matrix.slice(i, i + item.h).every((a) => a.slice(j, j + w).every((n) => n === undefined));
|
||||
|
||||
if (isEmpty) {
|
||||
return { y: i, x: j };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
y: getMatrixRows,
|
||||
x: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const getItem = (item, col) => {
|
||||
return { ...item[col], id: item.id };
|
||||
};
|
||||
|
||||
const updateItem = (elements, active, position, col) => {
|
||||
return elements.map((value) => {
|
||||
if (value.id === active.id) {
|
||||
return { ...value, [col]: { ...value[col], ...position } };
|
||||
}
|
||||
return value;
|
||||
});
|
||||
};
|
||||
|
||||
export function moveItemsAroundItem(active, items, cols, original) {
|
||||
// Get current item from the breakpoint
|
||||
const activeItem = getItem(active, cols);
|
||||
const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id);
|
||||
|
||||
const els = items.filter((value) => value.id !== activeItem.id);
|
||||
|
||||
// Update items
|
||||
let newItems = updateItem(items, active, activeItem, cols);
|
||||
|
||||
let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols);
|
||||
let tempItems = newItems;
|
||||
|
||||
// Exclude resolved elements ids in array
|
||||
let exclude: string[] = [];
|
||||
|
||||
els.forEach((item) => {
|
||||
// Find position for element
|
||||
let position = findFreeSpaceForItem(matrix, item[cols]);
|
||||
// Exclude item
|
||||
exclude.push(item.id);
|
||||
|
||||
tempItems = updateItem(tempItems, item, position, cols);
|
||||
|
||||
// Recreate ids of elements
|
||||
let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1);
|
||||
|
||||
// Update matrix for next iteration
|
||||
matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
|
||||
});
|
||||
|
||||
// Return result
|
||||
return tempItems;
|
||||
}
|
||||
|
||||
export function moveItem(active, items, cols, original) {
|
||||
// Get current item from the breakpoint
|
||||
const item = getItem(active, cols);
|
||||
|
||||
// Create matrix from the items expect the active
|
||||
let matrix = makeMatrixFromItemsIgnore(items, [item.id], getRowsCount(items, cols), cols);
|
||||
// Getting the ids of items under active Array<String>
|
||||
const closeBlocks = findCloseBlocks(matrix, item);
|
||||
// Getting the objects of items under active Array<Object>
|
||||
let closeObj = findItemsById(closeBlocks, items);
|
||||
// Getting whenever of these items is fixed
|
||||
const fixed = closeObj.find((value) => value[cols].fixed);
|
||||
|
||||
// If found fixed, reset the active to its original position
|
||||
if (fixed) return items;
|
||||
|
||||
// Update items
|
||||
items = updateItem(items, active, item, cols);
|
||||
|
||||
// Create matrix of items expect close elements
|
||||
matrix = makeMatrixFromItemsIgnore(items, closeBlocks, getRowsCount(items, cols), cols);
|
||||
|
||||
// Create temp vars
|
||||
let tempItems = items;
|
||||
let tempCloseBlocks = closeBlocks;
|
||||
|
||||
// Exclude resolved elements ids in array
|
||||
let exclude: string[] = [];
|
||||
|
||||
// Iterate over close elements under active item
|
||||
closeObj.forEach((item) => {
|
||||
// Find position for element
|
||||
let position = findFreeSpaceForItem(matrix, item[cols]);
|
||||
// Exclude item
|
||||
exclude.push(item.id);
|
||||
|
||||
// Assign the position to the element in the column
|
||||
tempItems = updateItem(tempItems, item, position, cols);
|
||||
|
||||
// Recreate ids of elements
|
||||
let getIgnoreItems = tempCloseBlocks.filter((value) => exclude.indexOf(value) === -1);
|
||||
|
||||
// Update matrix for next iteration
|
||||
matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
|
||||
});
|
||||
|
||||
// Return result
|
||||
return tempItems;
|
||||
}
|
||||
|
||||
// Helper function
|
||||
export function normalize(items, col) {
|
||||
let result = items.slice();
|
||||
|
||||
result.forEach((value) => {
|
||||
const getItem = value[col];
|
||||
if (!getItem.static) {
|
||||
result = moveItem(getItem, result, col, { ...getItem });
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// Helper function
|
||||
export function adjust<T>(items: FilledItem<T>[], col) {
|
||||
let matrix = makeMatrix(getRowsCount(items, col), col);
|
||||
|
||||
let res: FilledItem<T>[] = [];
|
||||
|
||||
items.forEach((item) => {
|
||||
let position = findFreeSpaceForItem(matrix, item[col]);
|
||||
|
||||
res.push({
|
||||
...item,
|
||||
[col]: {
|
||||
...item[col],
|
||||
...position,
|
||||
},
|
||||
});
|
||||
|
||||
matrix = makeMatrixFromItems(res, getRowsCount(res, col), col);
|
||||
});
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
export function getUndefinedItems(items, col, breakpoints) {
|
||||
return items
|
||||
.map((value) => {
|
||||
if (!value[col]) {
|
||||
return value.id;
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
export function getClosestColumn(items, item, col, breakpoints) {
|
||||
return breakpoints
|
||||
.map(([_, column]) => item[column] && column)
|
||||
.filter(Boolean)
|
||||
.reduce(function (acc, value) {
|
||||
const isLower = Math.abs(value - col) < Math.abs(acc - col);
|
||||
|
||||
return isLower ? value : acc;
|
||||
});
|
||||
}
|
||||
|
||||
export function specifyUndefinedColumns(items, col, breakpoints) {
|
||||
let matrix = makeMatrixFromItems(items, getRowsCount(items, col), col);
|
||||
|
||||
const getUndefinedElements = getUndefinedItems(items, col, breakpoints);
|
||||
|
||||
let newItems = [...items];
|
||||
|
||||
getUndefinedElements.forEach((elementId) => {
|
||||
const getElement = items.find((item) => item.id === elementId);
|
||||
|
||||
const closestColumn = getClosestColumn(items, getElement, col, breakpoints);
|
||||
|
||||
const position = findFreeSpaceForItem(matrix, getElement[closestColumn]);
|
||||
|
||||
const newItem = {
|
||||
...getElement,
|
||||
[col]: {
|
||||
...getElement[closestColumn],
|
||||
...position,
|
||||
},
|
||||
};
|
||||
|
||||
newItems = newItems.map((value) => (value.id === elementId ? newItem : value));
|
||||
|
||||
matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col);
|
||||
});
|
||||
return newItems;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { FilledItem } from "../types";
|
||||
|
||||
export const makeMatrix: (w: number, h: number) => any[][] = (rows, cols) => Array.from(Array(rows), () => new Array(cols)); // make 2d array
|
||||
|
||||
export function makeMatrixFromItems<T>(items: FilledItem<T>[], _row, _col): FilledItem<T>[][] {
|
||||
let matrix = makeMatrix(_row, _col);
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
const value = items[i][_col];
|
||||
if (value) {
|
||||
const { x, y, h } = value;
|
||||
const id = items[i].id;
|
||||
const w = Math.min(_col, value.w);
|
||||
|
||||
for (var j = y; j < y + h; j++) {
|
||||
const row = matrix[j];
|
||||
for (var k = x; k < x + w; k++) {
|
||||
row[k] = { ...value, id };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return matrix;
|
||||
}
|
||||
|
||||
export function findCloseBlocks<T>(matrix: FilledItem<T>[][], curObject) {
|
||||
const { h, x, y } = curObject;
|
||||
|
||||
const w = Math.min(matrix[0].length, curObject.w);
|
||||
const tempR = matrix.slice(y, y + h);
|
||||
|
||||
let result: string[] = [];
|
||||
for (var i = 0; i < tempR.length; i++) {
|
||||
let tempA = tempR[i].slice(x, x + w);
|
||||
result = [...result, ...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)];
|
||||
}
|
||||
|
||||
return [...new Set(result)];
|
||||
}
|
||||
|
||||
export function makeMatrixFromItemsIgnore(items, ignoreList, _row, _col) {
|
||||
let matrix = makeMatrix(_row, _col);
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
const value = items[i][_col];
|
||||
const id = items[i].id;
|
||||
const { x, y, h } = value;
|
||||
const w = Math.min(_col, value.w);
|
||||
|
||||
if (ignoreList.indexOf(id) === -1) {
|
||||
for (var j = y; j < y + h; j++) {
|
||||
const row = matrix[j];
|
||||
if (row) {
|
||||
for (var k = x; k < x + w; k++) {
|
||||
row[k] = { ...value, id };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return matrix;
|
||||
}
|
||||
|
||||
export function findItemsById<T>(closeBlocks: string[], items: FilledItem<T>[]) {
|
||||
return items.filter((value) => closeBlocks.indexOf(value.id) !== -1);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
export function throttle(func, timeFrame) {
|
||||
let lastTime = new Date().getTime();
|
||||
return function (...args) {
|
||||
let now = new Date().getTime();
|
||||
if (now - lastTime >= timeFrame) {
|
||||
func(...args);
|
||||
lastTime = now;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function getRowsCount(items, cols) {
|
||||
const getItemsMaxHeight = items.map((val) => {
|
||||
const item = val[cols];
|
||||
|
||||
return (item && item.y) + (item && item.h) || 0;
|
||||
});
|
||||
|
||||
return Math.max(...getItemsMaxHeight, 1);
|
||||
}
|
||||
|
||||
export const getColumn = (containerWidth, columns) => {
|
||||
const sortColumns = columns.slice().sort((a, b) => a[0] - b[0]);
|
||||
|
||||
const breakpoint = sortColumns.find((value) => {
|
||||
const [width] = value;
|
||||
return containerWidth <= width;
|
||||
});
|
||||
|
||||
if (breakpoint) {
|
||||
return breakpoint[1];
|
||||
} else {
|
||||
return sortColumns[sortColumns.length - 1][1];
|
||||
}
|
||||
};
|
||||
@@ -1,9 +1,8 @@
|
||||
import type { Schema } from '$lib/common'
|
||||
import type { Preview } from '$lib/gen'
|
||||
import type { History } from '$lib/history'
|
||||
import type { FilledItem } from '@windmill-labs/svelte-grid'
|
||||
|
||||
import type { Writable } from 'svelte/store'
|
||||
import type VariableEditor from '../VariableEditor.svelte'
|
||||
import type { AppComponent } from './editor/component/components'
|
||||
import type {
|
||||
AppInput,
|
||||
@@ -16,6 +15,7 @@ import type {
|
||||
UserAppInput
|
||||
} from './inputType'
|
||||
import type { World } from './rx'
|
||||
import type { FilledItem } from './svelte-grid/types'
|
||||
|
||||
export type HorizontalAlignment = 'left' | 'center' | 'right'
|
||||
export type VerticalAlignment = 'top' | 'center' | 'bottom'
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
d3 is responsible for zooming and panning.
|
||||
|
||||
The code works but is obviously in a bad state. However, at least it is modularized so it doesn't clutter graphview anymore.
|
||||
@@ -1,58 +0,0 @@
|
||||
import { writable, derived, get, readable } from 'svelte/store';
|
||||
|
||||
export function d3ZoomCreator(
|
||||
nodeSelected,
|
||||
movementStore,
|
||||
backgroundStore,
|
||||
canvasId,
|
||||
gridSize,
|
||||
dotSize,
|
||||
d3Scale,
|
||||
d3
|
||||
) {
|
||||
// TODO: Update d3Zoom type (refer to d3Zoom docs)
|
||||
let d3Zoom: any = d3
|
||||
.zoom()
|
||||
.filter(() => !get(nodeSelected))
|
||||
.scaleExtent([0.4, 2])
|
||||
.on('zoom', handleZoom);
|
||||
|
||||
return d3Zoom;
|
||||
|
||||
// function to handle zoom events - arguments: d3ZoomEvent
|
||||
function handleZoom(this: any, e: any): void {
|
||||
if (!get(movementStore)) return;
|
||||
|
||||
//add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
|
||||
d3Scale.set(e.transform.k);
|
||||
// should not run d3.select below if backgroundStore is false
|
||||
if (get(backgroundStore)) {
|
||||
d3.select(`#background-${canvasId}`)
|
||||
.attr('x', e.transform.x)
|
||||
.attr('y', e.transform.y)
|
||||
.attr('width', gridSize * e.transform.k)
|
||||
.attr('height', gridSize * e.transform.k)
|
||||
.selectAll('#dot')
|
||||
.attr('x', (gridSize * e.transform.k) / 2 - dotSize / 2)
|
||||
.attr('y', (gridSize * e.transform.k) / 2 - dotSize / 2)
|
||||
.attr('opacity', Math.min(e.transform.k, 1));
|
||||
}
|
||||
// transform 'g' SVG elements (edge, edge text, edge anchor)
|
||||
d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform);
|
||||
// transform div elements (nodes)
|
||||
let transform = d3.zoomTransform(this);
|
||||
// selects and transforms all node divs from class 'Node' and performs transformation
|
||||
d3.select(`.Node-${canvasId}`)
|
||||
.style(
|
||||
'transform',
|
||||
'translate(' +
|
||||
transform.x +
|
||||
'px,' +
|
||||
transform.y +
|
||||
'px) scale(' +
|
||||
transform.k +
|
||||
')'
|
||||
)
|
||||
.style('transform-origin', '0 0');
|
||||
}
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
# CHANGELOG
|
||||
|
||||
This article documents the changes from Svelvet5 to Svelvet6. It is for internal use.
|
||||
|
||||
## custom-nodes
|
||||
|
||||
https://www.svelvet.io/docs/custom-nodes/
|
||||
|
||||
Anchor points no longer display on nodes in isolation. This is because anchor points are no longer tied to the node object.
|
||||
|
||||
<img src="./images/custom-nodes-before.png" width="150" height="150">
|
||||
<img src="./images/custom-nodes-after.png" width="150" height="150">
|
||||
|
||||
## custom-edges
|
||||
|
||||
https://www.svelvet.io/docs/custom-edges/
|
||||
|
||||
Edges now use adaptive anchors by default. Previously, source/target anchors were placed on the top/bottom of the node by default. It looks nice in the specific causes when target nodes are located below source nodes, but in the general case there will be intersecting edges.
|
||||
|
||||
<img src="./images/custom-edges-before.png" width="150" height="150">
|
||||
<img src="./images/custom-edges-after.png" width="150" height="150">
|
||||
|
||||
## panning and zooming
|
||||
|
||||
https://www.svelvet.io/docs/pan-and-zoom/
|
||||
|
||||
Panning and zooming is functional. Removed option to stop panning, lock nodes due to store pollution. This is simple to add back if it is a community requested feature.
|
||||
|
||||
TODO: need to update this text in docs:
|
||||
|
||||
```
|
||||
play around with the flow diagram below! If you wish to stop panning, set the movement prop to false. If you wish to stop node dragging, pass in the locked prop.
|
||||
```
|
||||
|
||||
## usage with typescript
|
||||
|
||||
https://www.svelvet.io/docs/typescript/
|
||||
|
||||
Type names changed from Node, Edge ,to UserNodeType, UserEdgeType. The main reason for this is:
|
||||
|
||||
- The internal state of Svelvet is stored in objects Node, Edge which are different from the specifications passed in by users (hereafter referred to as UserNode, UserEdge). For example, UserNodes have "sourcePosition" and "targetPosition" parameters. However, the internal node project does not have "sourcePosition" and "targetPosition"; instead that functionality has been abstracted to a separate Anchor class. This promotes greater code modularity.
|
||||
|
||||
## CSS-Background
|
||||
|
||||
https://www.svelvet.io/docs/CSS-Background/
|
||||
|
||||
<img src="./images/css-background-before.png" width="150" height="150">
|
||||
<img src="./images/css-background-after.png" width="150" height="150">
|
||||
|
||||
No visual changes. Moved background color out of store in order to minimize store pollution. This means that background color will not be serialized using the import-export-store feature. We talk more about this later in import-export-store section.
|
||||
|
||||
## node-grouping
|
||||
|
||||
https://www.svelvet.io/docs/node-grouping/
|
||||
|
||||
No change in functionality.
|
||||
|
||||
## snap-to-grid
|
||||
|
||||
https://www.svelvet.io/docs/snap-to-grid/
|
||||
http://localhost:3000/compatability-8-snap-to-grid/
|
||||
|
||||
No change in functionality
|
||||
|
||||
## html-docs
|
||||
|
||||
https://www.svelvet.io/docs/snap-to-grid/
|
||||
http://localhost:3000/compatability-8-snap-to-grid/
|
||||
|
||||
<img src="./images/html-docs-before.png" width="150" height="150">
|
||||
<img src="./images/html-docs-after.png" width="150" height="150">
|
||||
|
||||
no change in functionality
|
||||
|
||||
## node-create
|
||||
|
||||
https://www.svelvet.io/docs/Interactive-Nodes/
|
||||
http://localhost:3000/compatibility-10-node-create/
|
||||
|
||||
<img src="./images/node-create-before.png" width="150" height="150">
|
||||
<img src="./images/node-create-after.png" width="150" height="150">
|
||||
|
||||
- Previously, the new node inherits from the old node. Now, the new node is created with default parameters. Note that we have functionality to edit nodes.
|
||||
- edge creation works the same as before (not shown)
|
||||
- there are now 4 potential anchor points, rather than one source / on target anchor point.
|
||||
|
||||
## custom-svelte-components
|
||||
|
||||
https://www.svelvet.io/docs/Custom-Svelte/
|
||||
http://localhost:3000/compatibility-11-custom-svelte-components/
|
||||
|
||||
<img src="./images/custom-svelte-components-before.png" width="150" height="150">
|
||||
<img src="./images/custom-svelte-components-after.png" width="150" height="150">
|
||||
|
||||
Same functionality as before. The reason why it looks different is because I created my own dummy Svelte component to test.
|
||||
|
||||
## Minimap
|
||||
|
||||
http://localhost:3000/compatibility-12-minimap/
|
||||
https://www.svelvet.io/docs/Minimap/
|
||||
|
||||
Same functionality as before. It looks like there is a big with HTML feature (unrelated to minimap)
|
||||
|
||||
<img src="./images/minimap-before.png" width="150" height="150">
|
||||
<img src="./images/minimap-after.png" width="150" height="150">
|
||||
|
||||
## Initial zoom and location
|
||||
|
||||
Same functionality as Svelvet5. It appears the center of the canvas is 0,0
|
||||
|
||||
## node classes
|
||||
|
||||
<img src="./images/node-classes-before.png" width="150" height="150">
|
||||
<img src="./images/node-classes-after.png" width="150" height="150">
|
||||
|
||||
You need to put !important in the CSS
|
||||
|
||||
## ImportDiagrams
|
||||
|
||||
https://www.svelvet.io/docs/importDiagrams/
|
||||
http://localhost:3000/featureImportExport/
|
||||
|
||||
Feature works as expected. Note that previous version of Svelvet did not serialize callbacks (there is no general way to do this since callbacks can involve closures). We do not do serialize callbacks in Svelvet6; this includes anchors which are reset to adaptive upon serialization.
|
||||
|
||||
As before, any canvas-wide parameters (such as nodeCreate, backgroundColor, etc.) will not be serialized.
|
||||
|
||||
This feature is fragile since there is no guarantee that it will work with new features involving nodes and edges. In order to future-proof this feature, it would be best to specify that import/export of diagrams only serializes certain parameters.
|
||||
|
||||
## Diagram Boundary
|
||||
|
||||
http://localhost:3000/compatibility-15-diagramBoundary/
|
||||
https://www.svelvet.io/docs/boundary/
|
||||
|
||||
Feature works as expected
|
||||
|
||||
## Iteractive Editable nodes
|
||||
|
||||
http://localhost:3000/compatibility-16-nodeEdit/
|
||||
https://www.svelvet.io/docs/editNodes/
|
||||
|
||||
Feature works as expected. NodeEdit is now active by default. This is to reduce store pollution. In addition, node edit chaning width/height of nodes has been removed because this functionality is duplicated by resizableNodes
|
||||
|
||||
## Deletable nodes
|
||||
|
||||
This feature has been removed to reduce feature bloat. Its functionality is duplicated by Interactive Editable nodes feature.
|
||||
@@ -1,44 +0,0 @@
|
||||
# Design Patterns
|
||||
|
||||
Svelvet was originally written as a monolith. This increased development speed but made the code fragile. Teams struggled to implement simple features such as deleting nodes and resizing nodes. One major goal of Svelvet6 was to re-design Svelvet with more robust design patterns. This document serves as an opinionated guide towards how Svelvet should be structured.
|
||||
|
||||
## Each Svelvet feature should have its own folder
|
||||
|
||||
Svelvet has a lot of features that interact with each other. In order to encourage modularity, each feature should be given its own folder. For example, code related to the "resizableNodes" feature can be found in the folder `$lib/resizableNodes`.
|
||||
|
||||
## Svelvet should follow an MVC Architecture
|
||||
|
||||
While Svelvet is a frontend libray, it has components that interact in a complex way. As such, code should adhere to an MVC architecture to increase modularity. One useful way to think about MVC is drawing an analogy to frontend/backend/database. The frontend is the "view" of MVC, the backend is the "controller" of MVC, and the database is the "model" of MVC. To that end, within each feature folder there should be four folders: models, views, controllers, types.
|
||||
|
||||
- models: holds code related to the internal state of Svelvet
|
||||
- controllers: holds code used to interact with the Svelvet models. Ideally, all interaction with Svelvet models/stores should take place through controllers.
|
||||
- views: holds code used to visualize the Svelvet state. Ideally, views should not modify models directly.
|
||||
- types: holds types/interfaces for Typescript. This is unrelated to MVC.
|
||||
|
||||
More comments: Explicitly labeling folders as model/view/controller increases verbosity and most projects do not do this. We feel that this increased verbosity is worth the tradeoff of reminding developers they should be following establshed design patterns when coding. If you are considering removing explicit model/view/controller folders, consider that Svelvet is an OSP where developers may have little to no prior coding experience; increased verbosity may be helpful in guiding developers towards established design principles.
|
||||
|
||||
## Svelvet's internal state should be an object-relational data structure
|
||||
|
||||
Too Long Didn't Read: The main takeaway can be summed up as: make the Svelvet store look more like PostgreSQL and less like mongoDB.
|
||||
|
||||
### A longer explanation
|
||||
|
||||
The store holds Svelvet's internal state. We urge future developers to structure the store as a relational object rather than an unstructured object. To give an analogy, if Svelvet was a full-stack app with a backend and database, you should use a postgreSQL instead of mongoDB to store the internal state of Svelvet because nodes/edges are inherently relational. We give an example of a bad design pattern and a good design pattern below.
|
||||
|
||||
Suppose you want to implement a "resizableNodes" feature, where users can resize nodes by dragging a node corner. One (bad) way to do this is by could do this by hacking in an extra div on the Node component representing a draggable control point, then hacking in a "resizeNode" method on the Node object so that when the control point is dragged the node is resized. While it may be easier to throw everything on an unstructured Node object, this is bad for modularity. As more and more features get added in, the Node object becomes bloated, difficult to read, and difficult to debug.
|
||||
|
||||
The better way to do this is to create a brand new resizableNodes model. This model should hold `nodeId` (a foreign key to a node object), `positionX` (its x-position), and `positionY` (its y-position). This model should also have a method `setPosition` that sets its x,y position, but also sets the width/height of the associated node defined by `nodeId`. Note the similarity of the process described above to adding extra data to a SQL database; a big advantage of SQL is that it is easy to add new relational data by creating a brand new table and linking with a foreign key.
|
||||
|
||||
By creating new objects/tables whenever adding new features, you make the code more readable, more modular, and more testable.
|
||||
|
||||
### Foreign keys
|
||||
|
||||
One question you may come up with when adding new tables is how to structure foreign keys. In our resizableNodes example, we placed a foreign key `nodeId` on our ResizableNode object/table. Alternatively, we could have placed a foreign key `ResizableNodeId` on our Node object/table. How do we choose between these two alternatives (or maybe we could even do two foreign keys)?
|
||||
|
||||
You can make the decision on foreign keys based on your component heirarchy. A Node can exist without functionality to resize itself, but a ResizableNode should not exist if its parent Node does not exist. Therefore, you should place a `nodeId` foreign key on ResizableNode.
|
||||
|
||||
This decision has the following advantages:
|
||||
|
||||
- Increased readability: When developers are reading the Node class definition, they are not overwhelmed by all the different Svelvet features. On the other hand, when developers are reading the ResizableNode class definition, they should realize that ResizableNodes are children of Nodes.
|
||||
- Increased modularity: You can remove a ResizableNode without disturbing core Node functionality.
|
||||
- Easy deletes: Previous teams struggled with implementing delete functionality. When you think about a SQL database, deleting rows is very simple. You simply delete the row, then specify cascade to delete other rows that reference the primary key of the row you deleted. Keeping a disciplined approach when structuring foreign keys makes the entity hierarchies clear, and makes operations such as delete easy to implement.
|
||||
@@ -1,5 +0,0 @@
|
||||
# Documentation
|
||||
|
||||
- Documentation should be written assuming the developer working on Svelvet has coding experience equivalent to six weeks of bootcamp.
|
||||
- If you write documents in tsDoc format, you can use TypeDoc to generate documentation automatically. For instructions on how to use TypeDoc, see Tutorials.md
|
||||
- Write READMEs for every feature so that future teams can understand how they work. Put your email down if you want to be a resource for future teams.
|
||||
@@ -1,34 +0,0 @@
|
||||
# README
|
||||
|
||||
This README provides suggestions to developers working on Svelvet.
|
||||
|
||||
## What is Svelvet?
|
||||
|
||||
Svelvet is a frontend library that allows users to programmatically create graph diagrams. Graphs are composed of nodes and edges; each edge connects two nodes. There are two main challenges when working with Svelvet: (1) nodes and edges interact in complex ways, making new features difficult to implement without interfering with old features, and (2) Svelvet has an active userbase, making breaking changes undesirable.
|
||||
|
||||
## Things to think about as a Svelvet developer
|
||||
|
||||
- Svelvet teams have 3.5 weeks to iterate on the project, less if you consider time spent on marketing/deployment. It is important for code to be readable, otherwise future teams will be unable to understand the codebase within a reasonable timeframe.
|
||||
- It is important to write documentation that is easy understand. Write comments/documentation assuming that developers have ~6 weeks of prior bootcamp experience.
|
||||
- Writing non-modular code with zero tests and zero documentation increases technical debt and puts future teams in a bad place. Accumulated technical debt can kill projects.
|
||||
- Svelvet has an active userbase. When possible, breaking changes should be avoided. However, if a breaking change must occur, it is better that it happen sooner rather than later.
|
||||
|
||||
## Suggestions
|
||||
|
||||
- Write modular code, separated by feature. For suggestions, see `./DESIGN_PATTERNS.md`
|
||||
|
||||
- Write tests. Svelvet components interact with each other in complex ways, making it difficult to predict whether changes will break Svelvet without tests.
|
||||
|
||||
- Writing tests and documentation is good for your resume. A long list of features by itself makes for poor resume; mentioning testing, documentation, and specific technologies used to implement specific features make for a stronger resume.
|
||||
|
||||
- Don't leave typescript warnings unaddressed. This makes it so much easier to debug.
|
||||
|
||||
## Where to start
|
||||
|
||||
Here is one way to start understanding the Svelvet codebase
|
||||
|
||||
(1) Read the Node class (`$lib/nodes/models/Node.ts`)
|
||||
(2) Create a new branch, delete all features except for nodes, containers, and store, then try to get Svelvet to running only rendering nodes to the screen. You can test Svelvet using routes such as `testingplayground` at `http://localhost:3000/testingplayground`.
|
||||
(3) Try to refactor Node.ts. You may notice that Node.ts has 16 fields, when really only six of them are important (id, canvasId, positionX, positionY, widthX, widthY). Create a new table `NodeAttributes` that links to Node via foreign key, move all attributes (bgColor, textColor, etc) to this new table and get Node rendering again.
|
||||
(4) After understanding how Node works, add back the "edges" folder. Try to get Svelvet working rendering only nodes and edges to the screen.
|
||||
(5) Node / Edge / Anchor form the core tables of Svelvet. All other feature build on top of these core tables.
|
||||
@@ -1,14 +0,0 @@
|
||||
## custom node functionality should be refactored into its own table.''
|
||||
|
||||
## tay10alan60@gmail.com - minimap, d3, node deletion, interactiveNodes
|
||||
|
||||
## dillan - customSvelete components, deletable nodes, node classes
|
||||
|
||||
## Minimap 75 boundless, 200 bounded
|
||||
|
||||
## New team:
|
||||
|
||||
- split up the website and the svelvet npm package
|
||||
- continue store refactoring
|
||||
- refactor store dispatch into flux architecture
|
||||
- testing - 1 full iteration
|
||||
@@ -1,25 +0,0 @@
|
||||
# Tutorials
|
||||
|
||||
This file contains instructions on how to do useful things such as generating developer documentation, publishing to npm, etc.
|
||||
|
||||
## TypeDoc
|
||||
|
||||
You may notice TSDoc comments throughout our code. These TSDoc comments can be converted into documentation using TypeDoc:
|
||||
|
||||
```
|
||||
npx typedoc --entryPointStrategy expand src/lib
|
||||
```
|
||||
|
||||
This command will create documentation in root folder `./docs`.
|
||||
|
||||
## Publishing to npm
|
||||
|
||||
- create an account on npm.js. You can skip this step if you already have an account
|
||||
- log in with `$ npm login`
|
||||
- Within the `src/lib` directory, type `npm version patch` to increment version number. Or if you want a new name, you can modify `src/lib/package.json` directly
|
||||
- In the base directory, type `npm run package`. This will use svelte-kit's package feature to create an npm package in `./package`.
|
||||
- Within the `./package` directory, type `npm publish` to publish to npm. Note that you cannot "overwrite" previous publishes, you must increment the version number
|
||||
|
||||
## Testing npm package
|
||||
|
||||
- install locally with `npm install svelvet-lime@latest -f`, where svelvet-lime is replaced with whatever you named your package. Note that if you have a previously installed version of svelvet, you must force a re-install otherwise you will be using an outdated npm package.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Vendored
-61
@@ -1,64 +1,3 @@
|
||||
import type { AppComponent } from '$lib/components/apps/types'
|
||||
|
||||
declare module 'simple-svelte-autocomplete'
|
||||
|
||||
declare module '@windmill-labs/svelte-grid' {
|
||||
import type { SvelteComponentTyped } from 'svelte'
|
||||
|
||||
export interface Size {
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export interface Positon {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
interface ItemLayout extends Size, Positon {
|
||||
fixed?: boolean
|
||||
resizable?: boolean
|
||||
draggable?: boolean
|
||||
customDragger?: boolean
|
||||
customResizer?: boolean
|
||||
min?: Size
|
||||
max?: Size
|
||||
}
|
||||
|
||||
export type Item<T> = T & { [width: number]: ItemLayout }
|
||||
export type FilledItem<T> = T & { [width: number]: Required<ItemLayout> }
|
||||
|
||||
export interface Props<T> {
|
||||
fillSpace?: boolean
|
||||
items: FilledItem<T>[]
|
||||
rowHeight: number
|
||||
cols: [number, number][]
|
||||
gap?: [number, number]
|
||||
fastStart?: boolean
|
||||
throttleUpdate?: number
|
||||
throttleResize?: number
|
||||
|
||||
scroller?: undefined
|
||||
sensor?: number
|
||||
}
|
||||
|
||||
export interface Slots<T> {
|
||||
default: { item: ItemLayout; dataItem: Item<T> & { data: AppComponent } }
|
||||
}
|
||||
|
||||
export default class Grid<T = {}> extends SvelteComponentTyped<Props<T>, {}, Slots<T>> { }
|
||||
}
|
||||
|
||||
declare module '@windmill-labs/svelte-grid/build/helper/index.mjs' {
|
||||
import { ItemLayout } from '@windmill-labs/svelte-grid'
|
||||
|
||||
const x: {
|
||||
normalize(items: any[], col: any): unknown[]
|
||||
adjust(items: any[], col: any): Item<unknown>[]
|
||||
findSpace(item: any, items: any, cols: any): unknown[]
|
||||
|
||||
item<T>(obj: ItemLayout): Required<ItemLayout>
|
||||
}
|
||||
|
||||
export default x
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user