mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
Add ESLint, pre-commit hook & format all files (#319)
* Add ESLint config * Add ESLint packages * Add prettier config * Fix ESLint package version * Format all files * Format static assets * Format project root config * Add pre-commit code formatting Formats .css & .js files automatically. If any .ts or .mts files are staged, the entire project is type-checked. Packages: - lint-staged - husky - prettier
This commit is contained in:
filtered
@@ -4,34 +4,35 @@ import type { LGraphNode } from "../LGraphNode"
|
||||
/**
|
||||
* Finds the nodes that are farthest in all four directions, representing the boundary of the nodes.
|
||||
* @param nodes The nodes to check the edges of
|
||||
* @returns An object listing the furthest node (edge) in all four directions. `null` if no nodes were supplied or the first node was falsy.
|
||||
* @returns An object listing the furthest node (edge) in all four directions.
|
||||
* `null` if no nodes were supplied or the first node was falsy.
|
||||
*/
|
||||
export function getBoundaryNodes(nodes: LGraphNode[]): IBoundaryNodes | null {
|
||||
const valid = nodes?.find(x => x)
|
||||
if (!valid) return null
|
||||
const valid = nodes?.find(x => x)
|
||||
if (!valid) return null
|
||||
|
||||
let top = valid
|
||||
let right = valid
|
||||
let bottom = valid
|
||||
let left = valid
|
||||
let top = valid
|
||||
let right = valid
|
||||
let bottom = valid
|
||||
let left = valid
|
||||
|
||||
for (const node of nodes) {
|
||||
if (!node) continue
|
||||
const [x, y] = node.pos
|
||||
const [width, height] = node.size
|
||||
for (const node of nodes) {
|
||||
if (!node) continue
|
||||
const [x, y] = node.pos
|
||||
const [width, height] = node.size
|
||||
|
||||
if (y < top.pos[1]) top = node
|
||||
if (x + width > right.pos[0] + right.size[0]) right = node
|
||||
if (y + height > bottom.pos[1] + bottom.size[1]) bottom = node
|
||||
if (x < left.pos[0]) left = node
|
||||
}
|
||||
if (y < top.pos[1]) top = node
|
||||
if (x + width > right.pos[0] + right.size[0]) right = node
|
||||
if (y + height > bottom.pos[1] + bottom.size[1]) bottom = node
|
||||
if (x < left.pos[0]) left = node
|
||||
}
|
||||
|
||||
return {
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
left
|
||||
}
|
||||
return {
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
left,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -40,30 +41,30 @@ export function getBoundaryNodes(nodes: LGraphNode[]): IBoundaryNodes | null {
|
||||
* @param horizontal If true, distributes along the horizontal plane. Otherwise, the vertical plane.
|
||||
*/
|
||||
export function distributeNodes(nodes: LGraphNode[], horizontal?: boolean): void {
|
||||
const nodeCount = nodes?.length
|
||||
if (!(nodeCount > 1)) return
|
||||
const nodeCount = nodes?.length
|
||||
if (!(nodeCount > 1)) return
|
||||
|
||||
const index = horizontal ? 0 : 1
|
||||
const index = horizontal ? 0 : 1
|
||||
|
||||
let total = 0
|
||||
let highest = -Infinity
|
||||
let total = 0
|
||||
let highest = -Infinity
|
||||
|
||||
for (const node of nodes) {
|
||||
total += node.size[index]
|
||||
for (const node of nodes) {
|
||||
total += node.size[index]
|
||||
|
||||
const high = node.pos[index] + node.size[index]
|
||||
if (high > highest) highest = high
|
||||
}
|
||||
const sorted = [...nodes].sort((a, b) => a.pos[index] - b.pos[index])
|
||||
const lowest = sorted[0].pos[index]
|
||||
const high = node.pos[index] + node.size[index]
|
||||
if (high > highest) highest = high
|
||||
}
|
||||
const sorted = [...nodes].sort((a, b) => a.pos[index] - b.pos[index])
|
||||
const lowest = sorted[0].pos[index]
|
||||
|
||||
const gap = ((highest - lowest) - total) / (nodeCount - 1)
|
||||
let startAt = lowest
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
const node = sorted[i]
|
||||
node.pos[index] = startAt + (gap * i)
|
||||
startAt += node.size[index]
|
||||
}
|
||||
const gap = (highest - lowest - total) / (nodeCount - 1)
|
||||
let startAt = lowest
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
const node = sorted[i]
|
||||
node.pos[index] = startAt + gap * i
|
||||
startAt += node.size[index]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -72,34 +73,33 @@ export function distributeNodes(nodes: LGraphNode[], horizontal?: boolean): void
|
||||
* @param direction The edge to align nodes on
|
||||
* @param align_to The node to align all other nodes to. If undefined, the farthest node will be used.
|
||||
*/
|
||||
export function alignNodes(nodes: LGraphNode[], direction: Direction, align_to?: LGraphNode): void {
|
||||
if (!nodes) return
|
||||
export function alignNodes(
|
||||
nodes: LGraphNode[],
|
||||
direction: Direction,
|
||||
align_to?: LGraphNode,
|
||||
): void {
|
||||
if (!nodes) return
|
||||
|
||||
const boundary = align_to === undefined
|
||||
? getBoundaryNodes(nodes)
|
||||
: {
|
||||
top: align_to,
|
||||
right: align_to,
|
||||
bottom: align_to,
|
||||
left: align_to
|
||||
}
|
||||
const boundary = align_to === undefined
|
||||
? getBoundaryNodes(nodes)
|
||||
: { top: align_to, right: align_to, bottom: align_to, left: align_to }
|
||||
|
||||
if (boundary === null) return
|
||||
if (boundary === null) return
|
||||
|
||||
for (const node of nodes) {
|
||||
switch (direction) {
|
||||
case "right":
|
||||
node.pos[0] = boundary.right.pos[0] + boundary.right.size[0] - node.size[0]
|
||||
break
|
||||
case "left":
|
||||
node.pos[0] = boundary.left.pos[0]
|
||||
break
|
||||
case "top":
|
||||
node.pos[1] = boundary.top.pos[1]
|
||||
break
|
||||
case "bottom":
|
||||
node.pos[1] = boundary.bottom.pos[1] + boundary.bottom.size[1] - node.size[1]
|
||||
break
|
||||
}
|
||||
for (const node of nodes) {
|
||||
switch (direction) {
|
||||
case "right":
|
||||
node.pos[0] = boundary.right.pos[0] + boundary.right.size[0] - node.size[0]
|
||||
break
|
||||
case "left":
|
||||
node.pos[0] = boundary.left.pos[0]
|
||||
break
|
||||
case "top":
|
||||
node.pos[1] = boundary.top.pos[1]
|
||||
break
|
||||
case "bottom":
|
||||
node.pos[1] = boundary.bottom.pos[1] + boundary.bottom.size[1] - node.size[1]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,21 +3,21 @@ import { LGraphNode } from "@/LGraphNode"
|
||||
|
||||
/**
|
||||
* Creates a flat set of all positionable items by recursively iterating through all child items.
|
||||
*
|
||||
*
|
||||
* Does not include or recurse into pinned items.
|
||||
* @param items The original set of items to iterate through
|
||||
* @returns All unpinned items in the original set, and recursively, their children
|
||||
*/
|
||||
export function getAllNestedItems(items: ReadonlySet<Positionable>): Set<Positionable> {
|
||||
const allItems = new Set<Positionable>()
|
||||
items?.forEach(x => addRecursively(x, allItems))
|
||||
return allItems
|
||||
const allItems = new Set<Positionable>()
|
||||
items?.forEach(x => addRecursively(x, allItems))
|
||||
return allItems
|
||||
|
||||
function addRecursively(item: Positionable, flatSet: Set<Positionable>): void {
|
||||
if (flatSet.has(item) || item.pinned) return
|
||||
flatSet.add(item)
|
||||
item.children?.forEach(x => addRecursively(x, flatSet))
|
||||
}
|
||||
function addRecursively(item: Positionable, flatSet: Set<Positionable>): void {
|
||||
if (flatSet.has(item) || item.pinned) return
|
||||
flatSet.add(item)
|
||||
item.children?.forEach(x => addRecursively(x, flatSet))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -26,7 +26,7 @@ export function getAllNestedItems(items: ReadonlySet<Positionable>): Set<Positio
|
||||
* @returns The first node found in {@link items}, otherwise `undefined`
|
||||
*/
|
||||
export function findFirstNode(items: Iterable<Positionable>): LGraphNode | undefined {
|
||||
for (const item of items) {
|
||||
if (item instanceof LGraphNode) return item
|
||||
}
|
||||
for (const item of items) {
|
||||
if (item instanceof LGraphNode) return item
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user