import { NoteColorVariant } from '@activepieces/shared';
import { ApLoopReturnLineCanvasEdge as ApLoopReturnCanvasEdge } from '../edges/loop-return-edge';
import { ApLoopStartLineCanvasEdge as ApLoopStartCanvasEdge } from '../edges/loop-start-edge';
import { ApRouterEndCanvasEdge } from '../edges/router-end-edge';
import { ApRouterStartCanvasEdge } from '../edges/router-start-edge';
import { ApStraightLineCanvasEdge } from '../edges/straight-line-edge';
import { ApBigAddButtonCanvasNode } from '../nodes/big-add-button-node';
import ApGraphEndWidgetNode from '../nodes/flow-end-widget-node';
import ApLoopReturnCanvasNode from '../nodes/loop-return-node';
import { ApNoteCanvasNode } from '../nodes/note-node';
import { ApStepCanvasNode } from '../nodes/step-node';
import { ApEdgeType, ApNodeType } from './types';
const ARC_LENGTH = 15;
const ARC_LEFT = `a${ARC_LENGTH},${ARC_LENGTH} 0 0,0 -${ARC_LENGTH},${ARC_LENGTH}`;
const ARC_RIGHT = `a${ARC_LENGTH},${ARC_LENGTH} 0 0,1 ${ARC_LENGTH},${ARC_LENGTH}`;
const ARC_LEFT_DOWN = `a${ARC_LENGTH},${ARC_LENGTH} 0 0,1 -${ARC_LENGTH},${ARC_LENGTH}`;
const ARC_RIGHT_DOWN = `a${ARC_LENGTH},${ARC_LENGTH} 0 0,0 ${ARC_LENGTH},${ARC_LENGTH}`;
const ARC_RIGHT_UP = `a${ARC_LENGTH},${ARC_LENGTH} 0 0,1 -${ARC_LENGTH},-${ARC_LENGTH}`;
const ARC_LEFT_UP = `a-${ARC_LENGTH},-${ARC_LENGTH} 0 0,0 ${ARC_LENGTH},-${ARC_LENGTH}`;
const ARROW_DOWN = 'm6 -6 l-6 6 m-6 -6 l6 6';
const VERTICAL_SPACE_BETWEEN_STEP_AND_LINE = 7;
const VERTICAL_SPACE_BETWEEN_STEPS = 60;
const VERTICAL_OFFSET_BETWEEN_LOOP_AND_CHILD =
VERTICAL_SPACE_BETWEEN_STEPS * 1.5 + 2 * ARC_LENGTH;
const LABEL_HEIGHT = 30;
const LABEL_VERTICAL_PADDING = 12;
const STEP_DRAG_OVERLAY_WIDTH = 75;
const STEP_DRAG_OVERLAY_HEIGHT = 75;
const NOTE_CREATION_OVERLAY_WIDTH = 150;
const NOTE_CREATION_OVERLAY_HEIGHT = 150;
const VERTICAL_OFFSET_BETWEEN_ROUTER_AND_CHILD =
VERTICAL_OFFSET_BETWEEN_LOOP_AND_CHILD + LABEL_HEIGHT;
const LINE_WIDTH = 1.5;
const DRAGGED_STEP_TAG = 'dragged-step';
const DRAGGED_NOTE_TAG = 'dragged-note';
const HORIZONTAL_SPACE_BETWEEN_NODES = 80;
const AP_NODE_SIZE: Record<
Exclude<ApNodeType, ApNodeType.GRAPH_START_WIDGET | ApNodeType.NOTE>,
{ height: number; width: number }
> = {
[ApNodeType.BIG_ADD_BUTTON]: {
height: 50,
width: 50,
},
[ApNodeType.ADD_BUTTON]: {
height: 20,
width: 20,
},
[ApNodeType.STEP]: {
height: 60,
width: 232,
},
[ApNodeType.LOOP_RETURN_NODE]: {
height: 60,
width: 232,
},
[ApNodeType.GRAPH_END_WIDGET]: {
height: 0,
width: 0,
},
};
const doesNodeAffectBoundingBoxWidth: (
type: ApNodeType,
) => type is
| ApNodeType.BIG_ADD_BUTTON
| ApNodeType.STEP
| ApNodeType.LOOP_RETURN_NODE = (type) =>
type === ApNodeType.BIG_ADD_BUTTON ||
type === ApNodeType.STEP ||
type === ApNodeType.LOOP_RETURN_NODE;
export const flowCanvasConsts = {
ARC_LENGTH,
ARC_LEFT,
ARC_RIGHT,
ARC_LEFT_DOWN,
ARC_RIGHT_DOWN,
VERTICAL_OFFSET_BETWEEN_LOOP_AND_CHILD,
AP_NODE_SIZE,
VERTICAL_SPACE_BETWEEN_STEP_AND_LINE,
ARROW_DOWN,
VERTICAL_SPACE_BETWEEN_STEPS,
ARC_RIGHT_UP,
LINE_WIDTH,
LABEL_HEIGHT,
ARC_LEFT_UP,
VERTICAL_OFFSET_BETWEEN_ROUTER_AND_CHILD,
doesNodeAffectBoundingBox: doesNodeAffectBoundingBoxWidth,
edgeTypes: {
[ApEdgeType.STRAIGHT_LINE]: ApStraightLineCanvasEdge,
[ApEdgeType.LOOP_START_EDGE]: ApLoopStartCanvasEdge,
[ApEdgeType.LOOP_RETURN_EDGE]: ApLoopReturnCanvasEdge,
[ApEdgeType.ROUTER_START_EDGE]: ApRouterStartCanvasEdge,
[ApEdgeType.ROUTER_END_EDGE]: ApRouterEndCanvasEdge,
},
nodeTypes: {
[ApNodeType.STEP]: ApStepCanvasNode,
[ApNodeType.LOOP_RETURN_NODE]: ApLoopReturnCanvasNode,
[ApNodeType.BIG_ADD_BUTTON]: ApBigAddButtonCanvasNode,
[ApNodeType.GRAPH_END_WIDGET]: ApGraphEndWidgetNode,
[ApNodeType.NOTE]: ApNoteCanvasNode,
},
DRAGGED_STEP_TAG,
DRAGGED_NOTE_TAG,
HORIZONTAL_SPACE_BETWEEN_NODES,
HANDLE_STYLING: { opacity: 0, cursor: 'default' },
LABEL_VERTICAL_PADDING,
STEP_DRAG_OVERLAY_WIDTH,
STEP_DRAG_OVERLAY_HEIGHT,
NOTE_CREATION_OVERLAY_WIDTH,
NOTE_CREATION_OVERLAY_HEIGHT,
STEP_CONTEXT_MENU_ATTRIBUTE: 'step-context-menu',
SELECTION_RECT_CHEVRON_ATTRIBUTE: 'selection-rect-chevron',
BUILDER_NAVIGATION_SIDEBAR_ID: 'builder-navigation-sidebar',
NODE_SELECTION_RECT_CLASS_NAME: 'react-flow__nodesselection-rect',
SIDEBAR_ANIMATION_DURATION: 200,
DEFAULT_NOTE_CONTENT: '<br>',
DEFAULT_NOTE_COLOR: NoteColorVariant.BLUE,
BUILDER_HEADER_HEIGHT: 60,
};
