From bd922889b4346844d77a64bf3e9e7922e895e90c Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Thu, 24 Aug 2023 14:02:57 +0200 Subject: [PATCH] feat(styles): one stylesheet source for react and svelte (#3350) * feat(styles): create stylesheets for react and svelte based on one source * refactor(styling): cleanup * refactor(postcss): share a config * refactor(postcss): replace env hack with env file --- .../src/examples/CustomNode/index.tsx | 3 +- package.json | 6 - packages/react/package.json | 10 +- .../Background/Background.tsx | 37 +- .../Background/Patterns.tsx | 27 +- .../additional-components/Background/types.ts | 4 +- .../src/container/NodeRenderer/index.tsx | 2 +- packages/react/src/container/Pane/index.tsx | 2 +- .../react/src/container/ZoomPane/index.tsx | 2 +- packages/react/src/styles/base.css | 29 +- packages/react/src/styles/init.css | 238 ----- packages/react/src/styles/node-resizer.css | 105 --- packages/react/src/styles/style.css | 112 +-- .../react/src/styles/{index.ts => utils.ts} | 0 packages/svelte/package.json | 13 +- .../components/Attribution/Attribution.svelte | 14 - .../lib/components/BaseEdge/BaseEdge.svelte | 27 - .../ConnectionLine/ConnectionLine.svelte | 24 - .../components/EdgeWrapper/EdgeWrapper.svelte | 7 - .../src/lib/components/Handle/Handle.svelte | 44 +- .../components/NodeWrapper/NodeWrapper.svelte | 33 +- .../lib/components/Selection/Selection.svelte | 8 - .../EdgeRenderer/EdgeRenderer.svelte | 2 - .../NodeRenderer/NodeRenderer.svelte | 5 +- .../svelte/src/lib/container/Pane/Pane.svelte | 10 - .../src/lib/container/Panel/Panel.svelte | 29 - .../container/SvelteFlow/SvelteFlow.svelte | 28 - .../lib/container/Viewport/Viewport.svelte | 3 - .../lib/plugins/Background/Background.svelte | 9 +- .../lib/plugins/Background/DotPattern.svelte | 21 +- .../lib/plugins/Background/LinePattern.svelte | 18 +- .../src/lib/plugins/Background/types.ts | 1 + .../lib/plugins/Controls/ControlButton.svelte | 56 -- .../svelte/src/routes/overview/+page.svelte | 6 +- .../Custom.svelte => CustomEdge.svelte} | 2 +- .../src/routes/overview/CustomEdge/index.ts | 1 - .../Custom.svelte => CustomNode.svelte} | 2 +- .../src/routes/overview/CustomNode/index.ts | 1 - packages/svelte/src/styles/base.css | 3 + packages/svelte/src/styles/style.css | 3 + packages/svelte/vite.config.ts | 5 +- packages/system/src/styles/base.css | 33 + packages/system/src/styles/init.css | 298 +++++++ packages/system/src/styles/node-resizer.css | 105 +++ packages/system/src/styles/style.css | 138 +++ pnpm-lock.yaml | 829 +++++++++++++++--- tooling/postcss-config/postcss.config.js | 29 +- 47 files changed, 1422 insertions(+), 962 deletions(-) delete mode 100644 packages/react/src/styles/init.css delete mode 100644 packages/react/src/styles/node-resizer.css rename packages/react/src/styles/{index.ts => utils.ts} (100%) rename packages/svelte/src/routes/overview/{CustomEdge/Custom.svelte => CustomEdge.svelte} (97%) delete mode 100644 packages/svelte/src/routes/overview/CustomEdge/index.ts rename packages/svelte/src/routes/overview/{CustomNode/Custom.svelte => CustomNode.svelte} (89%) delete mode 100644 packages/svelte/src/routes/overview/CustomNode/index.ts create mode 100644 packages/svelte/src/styles/base.css create mode 100644 packages/svelte/src/styles/style.css create mode 100644 packages/system/src/styles/base.css create mode 100644 packages/system/src/styles/init.css create mode 100644 packages/system/src/styles/node-resizer.css create mode 100644 packages/system/src/styles/style.css diff --git a/examples/vite-app/src/examples/CustomNode/index.tsx b/examples/vite-app/src/examples/CustomNode/index.tsx index 72c58126..9c62f46a 100644 --- a/examples/vite-app/src/examples/CustomNode/index.tsx +++ b/examples/vite-app/src/examples/CustomNode/index.tsx @@ -11,6 +11,7 @@ import { Connection, useNodesState, useEdgesState, + Background, } from '@xyflow/react'; import ColorSelectorNode from './ColorSelectorNode'; @@ -133,7 +134,6 @@ const CustomNodeFlow = () => { onNodeClick={onNodeClick} onConnect={onConnect} onNodeDragStop={onNodeDragStop} - style={{ background: bgColor }} onInit={onInit} nodeTypes={nodeTypes} connectionLineStyle={connectionLineStyle} @@ -158,6 +158,7 @@ const CustomNodeFlow = () => { }} /> + ); }; diff --git a/package.json b/package.json index be5c86ad..e9583c5d 100644 --- a/package.json +++ b/package.json @@ -22,17 +22,11 @@ "@changesets/cli": "^2.25.0", "@typescript-eslint/eslint-plugin": "latest", "@typescript-eslint/parser": "latest", - "autoprefixer": "^10.4.8", "concurrently": "^7.6.0", "eslint": "^8.22.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "latest", - "postcss": "^8.4.21", - "postcss-cli": "^10.1.0", - "postcss-combine-duplicated-selectors": "^10.0.3", - "postcss-import": "^15.1.0", - "postcss-nested": "^6.0.0", "prettier": "^2.7.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/react/package.json b/packages/react/package.json index dae94edf..1c3194d5 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -42,7 +42,7 @@ "scripts": { "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch", "build": "rollup --config node:@xyflow/rollup-config --environment NODE_ENV:production && npm run css", - "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/postcss.config.js --dir dist", + "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/ --dir dist ", "css-watch": "pnpm css --watch", "lint": "eslint --ext .js,.jsx,.ts,.tsx src", "typecheck": "tsc --noEmit" @@ -70,6 +70,14 @@ "@xyflow/eslint-config": "workspace:*", "@xyflow/rollup-config": "workspace:*", "@xyflow/tsconfig": "workspace:*", + "autoprefixer": "^10.4.15", + "cssnano": "^6.0.1", + "postcss": "^8.4.21", + "postcss-cli": "^10.1.0", + "postcss-combine-duplicated-selectors": "^10.0.3", + "postcss-import": "^15.1.0", + "postcss-nested": "^6.0.0", + "postcss-rename": "^0.6.1", "react": "^18.2.0", "typescript": "5.1.3" }, diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx index 31a280d0..73664f9f 100644 --- a/packages/react/src/additional-components/Background/Background.tsx +++ b/packages/react/src/additional-components/Background/Background.tsx @@ -1,4 +1,4 @@ -import { memo, useRef } from 'react'; +import { CSSProperties, memo, useRef } from 'react'; import cc from 'classcat'; import { shallow } from 'zustand/shallow'; @@ -6,12 +6,7 @@ import { useStore } from '../../hooks/useStore'; import { type ReactFlowState } from '../../types'; import { BackgroundProps, BackgroundVariant } from './types'; import { DotPattern, LinePattern } from './Patterns'; - -const defaultColor = { - [BackgroundVariant.Dots]: '#91919a', - [BackgroundVariant.Lines]: '#eee', - [BackgroundVariant.Cross]: '#e2e2e2', -}; +import { containerStyle } from '../../styles/utils'; const defaultSize = { [BackgroundVariant.Dots]: 1, @@ -31,12 +26,13 @@ function Background({ lineWidth = 1, offset = 2, color, + bgColor, style, className, + patternClassName, }: BackgroundProps) { const ref = useRef(null); const { transform, patternId } = useStore(selector, shallow); - const patternColor = color || defaultColor[variant]; const patternSize = size || defaultSize[variant]; const isDots = variant === BackgroundVariant.Dots; const isCross = variant === BackgroundVariant.Cross; @@ -53,14 +49,14 @@ function Background({ return ( @@ -74,9 +70,14 @@ function Background({ patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`} > {isDots ? ( - + ) : ( - + )} diff --git a/packages/react/src/additional-components/Background/Patterns.tsx b/packages/react/src/additional-components/Background/Patterns.tsx index 8e6007b9..1fc71ae5 100644 --- a/packages/react/src/additional-components/Background/Patterns.tsx +++ b/packages/react/src/additional-components/Background/Patterns.tsx @@ -1,30 +1,31 @@ +import cc from 'classcat'; + +import { BackgroundVariant } from './types'; + type LinePatternProps = { dimensions: [number, number]; + variant: BackgroundVariant; lineWidth?: number; - color: string; + className?: string; }; -export function LinePattern({ - color, - dimensions, - lineWidth, -}: LinePatternProps) { +export function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps) { return ( ); } type DotPatternProps = { radius: number; - color: string; + className?: string; }; -export function DotPattern({ color, radius }: DotPatternProps) { - return ; +export function DotPattern({ radius, className }: DotPatternProps) { + return ( + + ); } diff --git a/packages/react/src/additional-components/Background/types.ts b/packages/react/src/additional-components/Background/types.ts index f4cae1b5..5d21b23f 100644 --- a/packages/react/src/additional-components/Background/types.ts +++ b/packages/react/src/additional-components/Background/types.ts @@ -7,9 +7,11 @@ export enum BackgroundVariant { } export type BackgroundProps = { - id?: string + id?: string; color?: string; + bgColor?: string; className?: string; + patternClassName?: string; gap?: number | [number, number]; size?: number; offset?: number; diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx index f09f6563..34fb4c55 100644 --- a/packages/react/src/container/NodeRenderer/index.tsx +++ b/packages/react/src/container/NodeRenderer/index.tsx @@ -4,7 +4,7 @@ import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWit import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; -import { containerStyle } from '../../styles'; +import { containerStyle } from '../../styles/utils'; import { GraphViewProps } from '../GraphView'; import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types'; diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index 84e38b55..d5d951ca 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -8,7 +8,7 @@ import cc from 'classcat'; import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system'; import UserSelection from '../../components/UserSelection'; -import { containerStyle } from '../../styles'; +import { containerStyle } from '../../styles/utils'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges, getConnectedEdges } from '../../utils'; import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types'; diff --git a/packages/react/src/container/ZoomPane/index.tsx b/packages/react/src/container/ZoomPane/index.tsx index f04ed0f4..e24056cf 100644 --- a/packages/react/src/container/ZoomPane/index.tsx +++ b/packages/react/src/container/ZoomPane/index.tsx @@ -6,7 +6,7 @@ import { XYPanZoom, PanOnScrollMode, type Transform, type PanZoomInstance } from import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { containerStyle } from '../../styles'; +import { containerStyle } from '../../styles/utils'; import type { FlowRendererProps } from '../FlowRenderer'; import type { ReactFlowState } from '../../types'; diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css index 129006b3..d6be5b10 100644 --- a/packages/react/src/styles/base.css +++ b/packages/react/src/styles/base.css @@ -1,28 +1,3 @@ /* this will be exported as base.css and can be used for a basic styling */ -@import './init.css'; - -.react-flow__handle { - background-color: #333; -} - -.react-flow__node-default, -.react-flow__node-input, -.react-flow__node-output, -.react-flow__node-group { - border-width: 1px; - border-style: solid; - border-color: #bbb; - - &.selected, - &:focus, - &:focus-visible { - outline: none; - border: 1px solid #555; - } -} - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(150, 150, 180, 0.1); - border: 1px dotted rgba(155, 155, 155, 0.8); -} +@import '../../../system/src/styles/init.css'; +@import '../../../system/src/styles/base.css'; diff --git a/packages/react/src/styles/init.css b/packages/react/src/styles/init.css deleted file mode 100644 index 6b4f5b87..00000000 --- a/packages/react/src/styles/init.css +++ /dev/null @@ -1,238 +0,0 @@ -/* these are the necessary styles for React Flow, they get used by base.css and style.css */ -.react-flow__container { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.react-flow__pane { - z-index: 1; - cursor: grab; - - &.selection { - cursor: pointer; - } - - &.dragging { - cursor: grabbing; - } -} - -.react-flow__viewport { - transform-origin: 0 0; - z-index: 2; - pointer-events: none; -} - -.react-flow__renderer { - z-index: 4; -} - -.react-flow__selection { - z-index: 6; -} - -.react-flow__nodesselection-rect:focus, -.react-flow__nodesselection-rect:focus-visible { - outline: none; -} - -.react-flow .react-flow__edges { - pointer-events: none; - overflow: visible; -} - -.react-flow__edge-path, -.react-flow__connection-path { - stroke: #b1b1b7; - stroke-width: 1; - fill: none; -} - -.react-flow__edge { - pointer-events: visibleStroke; - cursor: pointer; - - &.animated path { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; - } - - &.animated path.react-flow__edge-interaction { - stroke-dasharray: none; - animation: none; - } - - &.inactive { - pointer-events: none; - } - - &.selected, - &:focus, - &:focus-visible { - outline: none; - } - - &.selected .react-flow__edge-path, - &:focus .react-flow__edge-path, - &:focus-visible .react-flow__edge-path { - stroke: #555; - } - - &-textwrapper { - pointer-events: all; - } - - &-textbg { - fill: white; - } - - .react-flow__edge-text { - pointer-events: none; - user-select: none; - } -} - -.react-flow__connection { - pointer-events: none; - - .animated { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; - } -} - -.react-flow__connectionline { - z-index: 1001; -} - -.react-flow__nodes { - pointer-events: none; - transform-origin: 0 0; -} - -.react-flow__node { - position: absolute; - user-select: none; - pointer-events: all; - transform-origin: 0 0; - box-sizing: border-box; - cursor: grab; - - &.dragging { - cursor: grabbing; - } -} - -.react-flow__nodesselection { - z-index: 3; - transform-origin: left top; - pointer-events: none; - - &-rect { - position: absolute; - pointer-events: all; - cursor: grab; - } -} - -.react-flow__handle { - position: absolute; - pointer-events: none; - min-width: 5px; - min-height: 5px; - - &.connectionindicator { - pointer-events: all; - cursor: crosshair; - } - - &-bottom { - top: auto; - left: 50%; - bottom: -4px; - transform: translate(-50%, 0); - } - - &-top { - left: 50%; - top: -4px; - transform: translate(-50%, 0); - } - - &-left { - top: 50%; - left: -4px; - transform: translate(0, -50%); - } - - &-right { - right: -4px; - top: 50%; - transform: translate(0, -50%); - } -} - -.react-flow__edgeupdater { - cursor: move; - pointer-events: all; -} - -.react-flow__panel { - position: absolute; - z-index: 5; - margin: 15px; - - &.top { - top: 0; - } - - &.bottom { - bottom: 0; - } - - &.left { - left: 0; - } - - &.right { - right: 0; - } - - &.center { - left: 50%; - transform: translateX(-50%); - } -} - -.react-flow__attribution { - font-size: 10px; - background: rgba(255, 255, 255, 0.5); - padding: 2px 3px; - margin: 0; - - a { - text-decoration: none; - color: #999; - } -} - -@keyframes dashdraw { - from { - stroke-dashoffset: 10; - } -} - -.react-flow__edgelabel-renderer { - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - user-select: none; -} - -.react-flow__minimap { - background-color: #fff; -} diff --git a/packages/react/src/styles/node-resizer.css b/packages/react/src/styles/node-resizer.css deleted file mode 100644 index f0113a53..00000000 --- a/packages/react/src/styles/node-resizer.css +++ /dev/null @@ -1,105 +0,0 @@ -.react-flow__resize-control { - position: absolute; -} - -.react-flow__resize-control.left, -.react-flow__resize-control.right { - cursor: ew-resize; -} - -.react-flow__resize-control.top, -.react-flow__resize-control.bottom { - cursor: ns-resize; -} - -.react-flow__resize-control.top.left, -.react-flow__resize-control.bottom.right { - cursor: nwse-resize; -} - -.react-flow__resize-control.bottom.left, -.react-flow__resize-control.top.right { - cursor: nesw-resize; -} - -/* handle styles */ -.react-flow__resize-control.handle { - width: 4px; - height: 4px; - border: 1px solid #fff; - border-radius: 1px; - background-color: #3367d9; - transform: translate(-50%, -50%); -} - -.react-flow__resize-control.handle.left { - left: 0; - top: 50%; -} -.react-flow__resize-control.handle.right { - left: 100%; - top: 50%; -} -.react-flow__resize-control.handle.top { - left: 50%; - top: 0; -} -.react-flow__resize-control.handle.bottom { - left: 50%; - top: 100%; -} -.react-flow__resize-control.handle.top.left { - left: 0; -} -.react-flow__resize-control.handle.bottom.left { - left: 0; -} -.react-flow__resize-control.handle.top.right { - left: 100%; -} -.react-flow__resize-control.handle.bottom.right { - left: 100%; -} - -/* line styles */ -.react-flow__resize-control.line { - border-color: #3367d9; - border-width: 0; - border-style: solid; -} - -.react-flow__resize-control.line.left, -.react-flow__resize-control.line.right { - width: 1px; - transform: translate(-50%, 0); - top: 0; - height: 100%; -} - -.react-flow__resize-control.line.left { - left: 0; - border-left-width: 1px; -} - -.react-flow__resize-control.line.right { - left: 100%; - border-right-width: 1px; -} - -.react-flow__resize-control.line.top, -.react-flow__resize-control.line.bottom { - height: 1px; - transform: translate(0, -50%); - left: 0; - width: 100%; -} - -.react-flow__resize-control.line.top { - top: 0; - border-top-width: 1px; -} - -.react-flow__resize-control.line.bottom { - border-bottom-width: 1px; - top: 100%; -} diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css index 4ac170c4..406af4e9 100644 --- a/packages/react/src/styles/style.css +++ b/packages/react/src/styles/style.css @@ -1,110 +1,4 @@ /* this gets exported as style.css and can be used for the default theming */ -@import './init.css'; -@import './node-resizer.css'; - -.react-flow__edge { - &.updating { - .react-flow__edge-path { - stroke: #777; - } - } - - &-text { - font-size: 10px; - } -} - -.react-flow__node.selectable { - &:focus, - &:focus-visible { - outline: none; - } -} - -.react-flow__node-default, -.react-flow__node-input, -.react-flow__node-output, -.react-flow__node-group { - padding: 10px; - border-radius: 3px; - width: 150px; - font-size: 12px; - color: #222; - text-align: center; - border-width: 1px; - border-style: solid; - border-color: #1a192b; - background-color: white; - - &.selectable { - &:hover { - box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); - } - - &.selected, - &:focus, - &:focus-visible { - box-shadow: 0 0 0 0.5px #1a192b; - } - } -} - -.react-flow__node-group { - background-color: rgba(240, 240, 240, 0.25); -} - -.react-flow__nodesselection-rect, -.react-flow__selection { - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); - - &:focus, - &:focus-visible { - outline: none; - } -} - -.react-flow__handle { - width: 6px; - height: 6px; - background: #1a192b; - border: 1px solid white; - border-radius: 100%; -} - -.react-flow__controls { - box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); - - &-button { - border: none; - background: #fefefe; - border-bottom: 1px solid #eee; - box-sizing: content-box; - display: flex; - justify-content: center; - align-items: center; - width: 16px; - height: 16px; - cursor: pointer; - user-select: none; - padding: 5px; - - &:hover { - background: #f4f4f4; - } - - svg { - width: 100%; - max-width: 12px; - max-height: 12px; - } - - &:disabled { - pointer-events: none; - - svg { - fill-opacity: 0.4; - } - } - } -} +@import '../../../system/src/styles/init.css'; +@import '../../../system/src/styles/style.css'; +@import '../../../system/src/styles/node-resizer.css'; diff --git a/packages/react/src/styles/index.ts b/packages/react/src/styles/utils.ts similarity index 100% rename from packages/react/src/styles/index.ts rename to packages/react/src/styles/utils.ts diff --git a/packages/svelte/package.json b/packages/svelte/package.json index fdfcaeb6..c8fc6a5e 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -12,10 +12,12 @@ "xyflow" ], "scripts": { - "dev": "vite dev", + "dev": "concurrently \"vite dev\" pnpm:css-watch", "build": "svelte-kit sync && svelte-package -o dist", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config --dir dist", + "css-watch": "pnpm css --watch", "lint": "prettier --plugin-search-dir . --check . && eslint .", "format": "prettier --plugin-search-dir . --write .", "typecheck": "pnpm check" @@ -43,9 +45,18 @@ "@sveltejs/package": "^2.2.1", "@typescript-eslint/eslint-plugin": "^5.60.0", "@typescript-eslint/parser": "^5.60.0", + "autoprefixer": "^10.4.15", + "cssnano": "^6.0.1", + "dotenv": "^16.3.1", "eslint": "^8.43.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-svelte": "^2.31.1", + "postcss": "^8.4.21", + "postcss-cli": "^10.1.0", + "postcss-combine-duplicated-selectors": "^10.0.3", + "postcss-import": "^15.1.0", + "postcss-nested": "^6.0.0", + "postcss-rename": "^0.6.1", "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", "svelte": "^4.2.0", diff --git a/packages/svelte/src/lib/components/Attribution/Attribution.svelte b/packages/svelte/src/lib/components/Attribution/Attribution.svelte index 03132723..0e7d78f8 100644 --- a/packages/svelte/src/lib/components/Attribution/Attribution.svelte +++ b/packages/svelte/src/lib/components/Attribution/Attribution.svelte @@ -24,17 +24,3 @@ {/if} - - diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte index 7390c17c..5676d135 100644 --- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte +++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte @@ -47,30 +47,3 @@ {/if} - - diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte index 748fe27d..f2abe041 100644 --- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte +++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte @@ -13,27 +13,3 @@ {/if} - - diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index b271bbf8..cc9f4eb0 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -89,10 +89,3 @@ markerEnd={markerEndUrl} /> - - diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index f8cf43d3..84e50bce 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -93,6 +93,7 @@ class:connectablestart={isConnectableStart} class:connectableend={isConnectableEnd} class:connectable={isConnectable} + class:connectionindicator={isConnectable} on:mousedown={onPointerDown} on:touchstart={onPointerDown} {style} @@ -101,46 +102,3 @@ > - - diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 54913971..75025c30 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -75,6 +75,8 @@ dispatchEvent('nodeclick'); } + + // @todo: add selectable state @@ -95,6 +97,7 @@ class:selected class:draggable class:connectable + class:selectable class:parent={isParent} style:z-index={zIndex} style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)" @@ -123,33 +126,3 @@ on:connectend /> - - diff --git a/packages/svelte/src/lib/components/Selection/Selection.svelte b/packages/svelte/src/lib/components/Selection/Selection.svelte index 24755b3a..552c05ae 100644 --- a/packages/svelte/src/lib/components/Selection/Selection.svelte +++ b/packages/svelte/src/lib/components/Selection/Selection.svelte @@ -18,13 +18,5 @@ position: absolute; top: 0; left: 0; - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); - z-index: 6; - } - - .svelte-flow__selection:focus, - .svelte-flow__selection:focus-visible { - outline: none; } diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 9563cf53..0658f47a 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -30,7 +30,5 @@ position: absolute; top: 0; left: 0; - pointer-events: none; - overflow: visible; } diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 154e5578..3d212dba 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -79,7 +79,8 @@ .svelte-flow__nodes { width: 100%; height: 100%; - pointer-events: none; - transform-origin: 0 0; + position: absolute; + left: 0; + top: 0; } diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index dc9772e7..d98fb106 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -203,20 +203,10 @@ diff --git a/packages/svelte/src/lib/container/Panel/Panel.svelte b/packages/svelte/src/lib/container/Panel/Panel.svelte index 86b8aa35..e1629ccc 100644 --- a/packages/svelte/src/lib/container/Panel/Panel.svelte +++ b/packages/svelte/src/lib/container/Panel/Panel.svelte @@ -16,32 +16,3 @@
- - diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 1c475331..bb359302 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -175,25 +175,10 @@ background-color: var(--background-color, var(--background-color-default)); } - .svelte-flow :global(.svelte-flow__node-default), - .svelte-flow :global(.svelte-flow__node-input), - .svelte-flow :global(.svelte-flow__node-output) { - padding: 10px; - } - - .svelte-flow__edgelabel-renderer { - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - user-select: none; - } - :root { --background-color-default: #fff; --background-pattern-color-default: #ddd; - --minimap-background-color-default: #fff; --minimap-mask-color-default: rgb(240, 240, 240, 0.6); --minimap-mask-stroke-color-default: none; --minimap-mask-stroke-width-default: 1; @@ -203,18 +188,5 @@ --controls-button-color-default: inherit; --controls-button-color-hover-default: inherit; --controls-button-border-color-default: #eee; - - --edge-color-default: #cfcfcf; - --edge-color-selected-default: #555; - - --node-color-default: inherit; - --node-border-color-default: #1a192b; - --node-background-color-default: #fff; - --node-shadow-color-selected-default: #1a192b; - - --handle-background-color-default: #1a192b; - --handle-border-color-default: #fff; - - --connection-line-color-default: #b1b1b7; } diff --git a/packages/svelte/src/lib/container/Viewport/Viewport.svelte b/packages/svelte/src/lib/container/Viewport/Viewport.svelte index 11b864e6..2d331ba1 100644 --- a/packages/svelte/src/lib/container/Viewport/Viewport.svelte +++ b/packages/svelte/src/lib/container/Viewport/Viewport.svelte @@ -16,10 +16,7 @@ width: 100%; height: 100%; position: absolute; - transform-origin: 0 0; top: 0; left: 0; - z-index: 2; - pointer-events: none; } diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte index c5bfec39..033cdb9f 100644 --- a/packages/svelte/src/lib/plugins/Background/Background.svelte +++ b/packages/svelte/src/lib/plugins/Background/Background.svelte @@ -22,6 +22,7 @@ export let lineWidth: $$Props['lineWidth'] = 1; export let bgColor: $$Props['bgColor'] = undefined; export let patternColor: $$Props['patternColor'] = undefined; + export let patternClassName: $$Props['patternClassName'] = undefined; let className: $$Props['class'] = ''; export { className as class }; @@ -44,6 +45,7 @@ class={cc(['svelte-flow__background', className])} data-testid="svelte-flow__background" style:--background-color-props={bgColor} + style:--pattern-color-props={patternColor} > {#if isDots} - + {:else} - + {/if} @@ -70,8 +72,5 @@ height: 100%; top: 0; left: 0; - pointer-events: none; - z-index: -1; - background-color: var(--background-color-props, 'transparent'); } diff --git a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte index 474e555c..1951a3d2 100644 --- a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte +++ b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte @@ -1,15 +1,14 @@ - - - + diff --git a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte index 16d72071..6ef75599 100644 --- a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte +++ b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte @@ -1,20 +1,16 @@ - - diff --git a/packages/svelte/src/lib/plugins/Background/types.ts b/packages/svelte/src/lib/plugins/Background/types.ts index 6f44057d..d0935b4c 100644 --- a/packages/svelte/src/lib/plugins/Background/types.ts +++ b/packages/svelte/src/lib/plugins/Background/types.ts @@ -7,6 +7,7 @@ export enum BackgroundVariant { export type BackgroundProps = { bgColor?: string; patternColor?: string; + patternClassName?: string; class?: string; gap?: number | [number, number]; size?: number; diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte index 0fd3dc09..bd73ee30 100644 --- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte +++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte @@ -24,59 +24,3 @@ > - - diff --git a/packages/svelte/src/routes/overview/+page.svelte b/packages/svelte/src/routes/overview/+page.svelte index 9285f50f..d8ac5982 100644 --- a/packages/svelte/src/routes/overview/+page.svelte +++ b/packages/svelte/src/routes/overview/+page.svelte @@ -12,8 +12,10 @@ type EdgeTypes } from '../../lib/index'; - import { CustomNode } from './CustomNode'; - import { CustomEdge } from './CustomEdge'; + import CustomNode from './CustomNode.svelte'; + import CustomEdge from './CustomEdge.svelte'; + + import '../../styles/style.css'; const nodeTypes: NodeTypes = { custom: CustomNode diff --git a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte b/packages/svelte/src/routes/overview/CustomEdge.svelte similarity index 97% rename from packages/svelte/src/routes/overview/CustomEdge/Custom.svelte rename to packages/svelte/src/routes/overview/CustomEdge.svelte index b858b453..692961d6 100644 --- a/packages/svelte/src/routes/overview/CustomEdge/Custom.svelte +++ b/packages/svelte/src/routes/overview/CustomEdge.svelte @@ -5,7 +5,7 @@ useSvelteFlow, type EdgeProps, getBezierPath - } from '../../../lib/index'; + } from '../../lib/index'; type $$Props = EdgeProps; diff --git a/packages/svelte/src/routes/overview/CustomEdge/index.ts b/packages/svelte/src/routes/overview/CustomEdge/index.ts deleted file mode 100644 index 6e7bab0a..00000000 --- a/packages/svelte/src/routes/overview/CustomEdge/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CustomEdge } from './Custom.svelte'; diff --git a/packages/svelte/src/routes/overview/CustomNode/Custom.svelte b/packages/svelte/src/routes/overview/CustomNode.svelte similarity index 89% rename from packages/svelte/src/routes/overview/CustomNode/Custom.svelte rename to packages/svelte/src/routes/overview/CustomNode.svelte index e636cdfe..91115e5c 100644 --- a/packages/svelte/src/routes/overview/CustomNode/Custom.svelte +++ b/packages/svelte/src/routes/overview/CustomNode.svelte @@ -1,5 +1,5 @@