alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theming): split up styles

Browse Source
This commit is contained in:
moklick
2021-01-20 14:01:22 +01:00
parent 646c3491ed
commit 27a98d6a8f
18 changed files with 774 additions and 935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/icons/fitview.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 124.2c0-6.9 5.2-12.2 12.2-12.2H176V64h-66.8C75.7 64 48 90.7 48 124.2V192h48v-67.8zM403.6 64H336v48h67.2c6.9 0 12.8 5.2 12.8 12.2V192h48v-67.8c0-33.5-27-60.2-60.4-60.2zM416 386.8c0 6.9-5.2 12.2-12.2 12.2H336v49h67.8c33.5 0 60.2-27.7 60.2-61.2V320h-48v66.8zM108.2 399c-6.9 0-12.2-5.2-12.2-12.2V320H48v66.8c0 33.5 27.7 61.2 61.2 61.2H176v-49h-67.8z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
<path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 429 B

After

Width:  |  Height:  |  Size: 463 B

4
assets/icons/lock.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M376 186h-20v-40c0-55-45-100-100-100S156 91 156 146v40h-20c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40V226c0-22.002-17.998-40-40-40zM256 368c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40zm62.002-182H193.998v-40c0-34.004 28.003-62.002 62.002-62.002 34.004 0 62.002 27.998 62.002 62.002v40z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 437 B

After

Width:  |  Height:  |  Size: 530 B

4
assets/icons/minus.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 235h320v42H96z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
<path d="M0 0h32v4.2H0z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 B

After

Width:  |  Height:  |  Size: 96 B

4
assets/icons/plus.svg
View File

@@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 277.333H277.333V416h-42.666V277.333H96v-42.666h138.667V96h42.666v138.667H416v42.666z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 169 B

After

Width:  |  Height:  |  Size: 152 B

4
assets/icons/unlock.svg
View File

@@ -1 +1,3 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m376 187h-20v-40c0-55-45-100-100-100-54.002 23.996-17.999 27.998 4 31.998s58.002 33.998 58.002 68.002h-.002v40h-182c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40v-200c0-22.002-17.998-40-40-40zm-120 182c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 472 B

1311
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -10,7 +10,7 @@
"url": "https://github.com/wbkd/react-flow.git"
},
"scripts": {
"build": "rollup -c --environment NODE_ENV:production && move-file dist/nocss/style.css dist/style.css",
"build": "rollup -c --environment NODE_ENV:production && postcss src/*.css --dir dist",
"start": "rollup -w -c",
"start:examples": "rollup -c rollup.examples.js -w",
"build:examples": "rollup -c rollup.examples.js --environment NODE_ENV:production",
@@ -58,8 +58,8 @@
"cypress": "^6.3.0",
"dagre": "^0.8.5",
"localforage": "^1.9.0",
"move-file-cli": "^2.0.0",
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
"postcss-nested": "^5.0.3",
"prettier": "2.2.1",
"prop-types": "^15.7.2",

9
rollup.config.js
View File

@@ -1,4 +1,3 @@
import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
@@ -13,7 +12,7 @@ import pkg from './package.json';
const isProd = process.env.NODE_ENV === 'production';
const processEnv = isProd ? 'production' : 'development';
const baseConfig = ({ mainFile = pkg.main, moduleFile = pkg.module, extractCss = false } = {}) => ({
const baseConfig = ({ mainFile = pkg.main, moduleFile = pkg.module, injectCSS = true } = {}) => ({
input: 'src/index.ts',
external: ['react', 'react-dom', /@babel\/runtime/],
onwarn(warning, rollupWarn) {
@@ -44,8 +43,8 @@ const baseConfig = ({ mainFile = pkg.main, moduleFile = pkg.module, extractCss =
}),
bundleSize(),
postcss({
minimize: !extractCss,
extract: extractCss,
minimize: isProd,
inject: injectCSS,
}),
babel({
exclude: 'node_modules/**',
@@ -68,7 +67,7 @@ export default isProd
baseConfig({
mainFile: 'dist/nocss/ReactFlow-nocss.js',
moduleFile: 'dist/nocss/ReactFlow-nocss.esm.js',
extractCss: path.resolve('dist/nocss/style.css'),
injectCSS: false,
}),
]
: baseConfig();

25
src/additional-components/Background/index.tsx
View File

@@ -5,8 +5,6 @@ import { useStoreState } from '../../store/hooks';
import { BackgroundVariant } from '../../types';
import { createGridLinesPath, createGridDotsPath } from './utils';
import './style.css';
export interface BackgroundProps extends HTMLAttributes<SVGElement> {
variant?: BackgroundVariant;
gap?: number;
@@ -34,26 +32,25 @@ const Background = ({
const xOffset = x % scaledGap;
const yOffset = y % scaledGap;
const isLines = variant === BackgroundVariant.Lines;
const bgColor = color ? color : defaultColors[variant];
const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
const isLines = variant === BackgroundVariant.Lines;
const bgColor = color ? color : defaultColors[variant];
const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
return (
<svg
className={bgClasses}
style={{
...style,
width: "100%",
height: "100%"
...style,
width: '100%',
height: '100%',
}}
>
<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
{path}
</pattern>
<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
{path}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
</svg>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
</svg>
);
};

7
src/additional-components/Background/style.css
View File

@@ -1,7 +0,0 @@
.react-flow__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

1
src/additional-components/Controls/index.tsx
View File

@@ -9,7 +9,6 @@ import FitviewIcon from '../../../assets/icons/fitview.svg';
import LockIcon from '../../../assets/icons/lock.svg';
import UnlockIcon from '../../../assets/icons/unlock.svg';
import './style.css';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
export interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {

29
src/additional-components/Controls/style.css
View File

@@ -1,29 +0,0 @@
.react-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
left: 10px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
&-button {
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;
svg {
width: 100%;
}
&:hover {
background: #f4f4f4;
}
}
}

2
src/additional-components/MiniMap/index.tsx
View File

@@ -6,8 +6,6 @@ import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
import { Node, Rect } from '../../types';
import MiniMapNode from './MiniMapNode';
import './style.css';
type StringFunc = (node: Node) => string;
export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {

7
src/additional-components/MiniMap/style.css
View File

@@ -1,7 +0,0 @@
.react-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;
right: 10px;
background-color: #fff;
}

2
src/additional-components/index.ts
View File

@@ -1,5 +1,5 @@
// These components are not used by React Flow directly
// but the user can add them as a child of a React Flow component
// but the user can add them as children of a React Flow component
export { default as MiniMap } from './MiniMap';
export { default as Controls } from './Controls';

1
src/container/ReactFlow/index.tsx
View File

@@ -33,6 +33,7 @@ import {
} from '../../types';
import '../../style.css';
import '../../theme-default.css';
const defaultNodeTypes = {
input: InputNode,

134
src/style.css
View File

@@ -31,8 +31,6 @@
position: absolute;
top: 0;
left: 0;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__edges {
@@ -49,23 +47,6 @@
&.inactive {
pointer-events: none;
}
&.selected {
.react-flow__edge-path {
stroke: #555;
}
}
&.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
&.updating {
.react-flow__edge-path {
stroke: #777;
}
}
}
@keyframes dashdraw {
@@ -76,20 +57,13 @@
.react-flow__edge-path {
fill: none;
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__edge-text {
font-size: 10px;
pointer-events: none;
user-select: none;
}
.react-flow__edge-textbg {
fill: white;
}
.react-flow__connection {
pointer-events: none;
@@ -101,8 +75,6 @@
.react-flow__connection-path {
fill: none;
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__nodes {
@@ -119,70 +91,6 @@
user-select: none;
pointer-events: all;
transform-origin: 0 0;
cursor: grab;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
}
.react-flow__node-default.selectable,
.react-flow__node-input.selectable,
.react-flow__node-output.selectable {
&:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
}
.react-flow__node-input {
background: #fff;
border-color: #0041d0;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #0041d0;
}
.react-flow__handle {
background: #0041d0;
}
}
.react-flow__node-default {
background: #fff;
border-color: #1a192b;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #1a192b;
}
.react-flow__handle {
background: #1a192b;
}
}
.react-flow__node-output {
background: #fff;
border-color: #ff0072;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #ff0072;
}
.react-flow__handle {
background: #ff0072;
}
}
.react-flow__nodesselection {
@@ -197,25 +105,16 @@
&-rect {
position: absolute;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
pointer-events: all;
cursor: grab;
}
}
.react-flow__handle {
position: absolute;
width: 6px;
height: 6px;
background: #555;
border: 1px solid white;
pointer-events: none;
border-radius: 100%;
&.connectable {
pointer-events: all;
cursor: crosshair;
}
}
@@ -247,3 +146,36 @@
.react-flow__edgeupdater {
cursor: move;
}
/* additional components */
.react-flow__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.react-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
left: 10px;
&-button {
width: 24px;
height: 24px;
svg {
width: 100%;
}
}
}
.react-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;
right: 10px;
}

157
src/theme-default.css Normal file
View File

@@ -0,0 +1,157 @@
.react-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__edge {
&.selected {
.react-flow__edge-path {
stroke: #555;
}
}
&.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
&.updating {
.react-flow__edge-path {
stroke: #777;
}
}
}
.react-flow__edge-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__edge-text {
font-size: 10px;
}
.react-flow__edge-textbg {
fill: white;
}
.react-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.react-flow__node {
cursor: grab;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
}
.react-flow__node-default.selectable,
.react-flow__node-input.selectable,
.react-flow__node-output.selectable {
&:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
}
.react-flow__node-input {
background: #fff;
border-color: #0041d0;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #0041d0;
}
.react-flow__handle {
background: #0041d0;
}
}
.react-flow__node-default {
background: #fff;
border-color: #1a192b;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #1a192b;
}
.react-flow__handle {
background: #1a192b;
}
}
.react-flow__node-output {
background: #fff;
border-color: #ff0072;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #ff0072;
}
.react-flow__handle {
background: #ff0072;
}
}
.react-flow__nodesselection-rect {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__handle {
position: absolute;
width: 6px;
height: 6px;
background: #555;
border: 1px solid white;
border-radius: 100%;
&.connectable {
cursor: crosshair;
}
}
.react-flow__minimap {
background-color: #fff;
}
.react-flow__controls {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
&-button {
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;
svg {
max-width: 12px;
max-height: 12px;
}
&:hover {
background: #f4f4f4;
}
}
}