diff --git a/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx b/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx deleted file mode 100644 index 40bc10bde6..0000000000 --- a/app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { cn } from '@/lib/utils' -import { CoordinateTransformer } from '@/app/w/lib/coordinates' -import { useState, useCallback, useEffect } from 'react' - -interface ConnectionPointProps { - position: 'top' | 'bottom' -} - -interface ConnectionLine { - start: { x: number; y: number } - end: { x: number; y: number } -} - -export function ConnectionPoint({ position }: ConnectionPointProps) { - const [isDrawing, setIsDrawing] = useState(false) - const [line, setLine] = useState(null) - - const handleMouseDown = useCallback((e: React.MouseEvent) => { - e.stopPropagation() - - const canvasElement = e.currentTarget.closest( - '[style*="transform"]' - ) as HTMLElement - if (!canvasElement) return - - // Get raw client coordinates - const startPoint = { - x: e.clientX, - y: e.clientY, - } - - // Use the same conversion pattern as drag and drop - const canvasPoint = CoordinateTransformer.viewportToCanvas( - CoordinateTransformer.clientToViewport(startPoint), - canvasElement - ) - - setIsDrawing(true) - setLine({ - start: canvasPoint, - end: canvasPoint, - }) - }, []) - - const handleMouseMove = useCallback( - (e: MouseEvent) => { - if (!isDrawing || !line) return - - const canvasElement = document.querySelector( - '[style*="transform"]' - ) as HTMLElement - if (!canvasElement) return - - // Convert current mouse position to canvas coordinates - const currentPoint = CoordinateTransformer.viewportToCanvas( - CoordinateTransformer.clientToViewport({ - x: e.clientX, - y: e.clientY, - }), - canvasElement - ) - - setLine((prev) => - prev - ? { - ...prev, - end: currentPoint, - } - : null - ) - }, - [isDrawing, line] - ) - - const handleMouseUp = useCallback(() => { - setIsDrawing(false) - setLine(null) - }, []) - - // Add and remove global mouse event listeners - useEffect(() => { - if (isDrawing) { - document.addEventListener('mousemove', handleMouseMove) - document.addEventListener('mouseup', handleMouseUp) - return () => { - document.removeEventListener('mousemove', handleMouseMove) - document.removeEventListener('mouseup', handleMouseUp) - } - } - }, [isDrawing, handleMouseMove, handleMouseUp]) - - return ( - <> -
- {line && ( - - - - )} - - ) -} diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/code.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/code.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/code.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/code.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/dropdown.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/dropdown.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/dropdown.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/dropdown.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/long-input.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/long-input.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/long-input.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/long-input.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/short-input.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/short-input.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/slider-input.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/slider-input.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/slider-input.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/slider-input.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/components/table.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/table.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/components/table.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/components/table.tsx diff --git a/app/w/components/blocks/components/workflow-block/components/sub-block/sub-block.tsx b/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx similarity index 100% rename from app/w/components/blocks/components/workflow-block/components/sub-block/sub-block.tsx rename to app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx diff --git a/app/w/components/blocks/components/workflow-block/workflow-block.tsx b/app/w/components/blocks/components/workflow-block/workflow-block.tsx index 57d730cb90..a7648a4777 100644 --- a/app/w/components/blocks/components/workflow-block/workflow-block.tsx +++ b/app/w/components/blocks/components/workflow-block/workflow-block.tsx @@ -1,7 +1,6 @@ import { Card } from '@/components/ui/card' import { BlockConfig, SubBlockConfig } from '../../types/block' -import { SubBlock } from './components/sub-block/sub-block' -import { ConnectionPoint } from './components/connection/connection-point' +import { SubBlock } from './sub-block/sub-block' import { Handle, Position } from 'reactflow' interface WorkflowBlockProps { diff --git a/app/w/lib/coordinates.ts b/app/w/lib/coordinates.ts deleted file mode 100644 index bdac09db8e..0000000000 --- a/app/w/lib/coordinates.ts +++ /dev/null @@ -1,108 +0,0 @@ -/** - * Represents a point in 2D space - */ -interface Point { - x: number - y: number -} - -/** - * Represents the current transform state of the canvas - */ -interface CanvasTransform { - scale: number - translateX: number - translateY: number -} - -/** - * Utility class for handling coordinate transformations in the workflow - */ -export class CoordinateTransformer { - private static readonly SIDEBAR_WIDTH = 344 - private static readonly HEADER_HEIGHT = 56 - - /** - * Gets the current transform state from a canvas element - */ - static getCanvasTransform(element: HTMLElement): CanvasTransform { - const matrix = new DOMMatrix(window.getComputedStyle(element).transform) - return { - scale: matrix.a, - translateX: matrix.e, - translateY: matrix.f, - } - } - - /** - * Converts viewport coordinates to canvas coordinates - */ - static viewportToCanvas(point: Point, canvasElement: HTMLElement): Point { - const matrix = new DOMMatrix(window.getComputedStyle(canvasElement).transform) - const domPoint = new DOMPoint(point.x, point.y) - const transformed = domPoint.matrixTransform(matrix.inverse()) - - return { - x: transformed.x, - y: transformed.y, - } - } - - /** - * Converts canvas coordinates to viewport coordinates - */ - static canvasToViewport(point: Point, canvasElement: HTMLElement): Point { - const matrix = new DOMMatrix(window.getComputedStyle(canvasElement).transform) - const domPoint = new DOMPoint(point.x, point.y) - const transformed = domPoint.matrixTransform(matrix) - - return { - x: transformed.x, - y: transformed.y, - } - } - - /** - * Converts client coordinates to viewport coordinates by removing sidebar and header offsets - */ - static clientToViewport(point: Point): Point { - return { - x: point.x - this.SIDEBAR_WIDTH, - y: point.y - this.HEADER_HEIGHT, - } - } - - /** - * Gets the viewport dimensions - */ - static getViewportDimensions(): { width: number; height: number } { - return { - width: window.innerWidth - this.SIDEBAR_WIDTH, - height: window.innerHeight - this.HEADER_HEIGHT, - } - } - - /** - * Gets the relative position of an element within the canvas - */ - static getElementCanvasPosition(element: HTMLElement, canvasElement: HTMLElement): Point { - const rect = element.getBoundingClientRect() - const point = { - x: rect.left, - y: rect.top, - } - - return this.viewportToCanvas(this.clientToViewport(point), canvasElement) - } - - /** - * Calculates the distance between two points accounting for canvas transform - */ - static getTransformedDistance(point1: Point, point2: Point, canvasElement: HTMLElement): Point { - const transform = this.getCanvasTransform(canvasElement) - return { - x: (point2.x - point1.x) / transform.scale, - y: (point2.y - point1.y) / transform.scale, - } - } -} \ No newline at end of file