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

feat(svelte): cleanup styling, use css variables

Browse Source
This commit is contained in:
moklick
2023-06-06 19:44:39 +02:00
parent 32ddd6fac9
commit 98d9d3e51a
20 changed files with 190 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/plugins/Background/Background.svelte
+4 -10
View File
@@ -1,10 +1,4 @@
<script labg="ts" context="module">
const defaultColor = {
[BackgroundVariant.Dots]: '#91919a',
[BackgroundVariant.Lines]: '#eee',
[BackgroundVariant.Cross]: '#e2e2e2'
};
const defaultSize = {
[BackgroundVariant.Dots]: 1,
[BackgroundVariant.Lines]: 1,
@@ -26,13 +20,12 @@
export let gap: $$Props['gap'] = 20;
export let size: $$Props['size'] = 1;
export let lineWidth: $$Props['lineWidth'] = 1;
export let color: $$Props['color'] = '#ccc';
export let style: $$Props['style'] = '';
export let bgColor: $$Props['bgColor'] = undefined;
export let patternColor: $$Props['patternColor'] = undefined;
let className: $$Props['class'] = '';
export { className as class };
const { transform, flowId } = useStore();
const patternColor = color || defaultColor[variant!];
const patternSize = size || defaultSize[variant!];
const isDots = variant === BackgroundVariant.Dots;
const isCross = variant === BackgroundVariant.Cross;
@@ -49,8 +42,8 @@
<svg
class={cc(['svelte-flow__background', className])}
{style}
data-testid="svelte-flow__background"
style:--background-color-props={bgColor}
>
<pattern
id={patternId}
@@ -79,5 +72,6 @@
left: 0;
pointer-events: none;
z-index: -1;
background-color: var(--background-color-props, 'transparent');
}
</style>
packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+8 -2
View File
@@ -1,6 +1,12 @@
<script lang="ts">
export let radius = 5;
export let color = '#000';
export let color: string | undefined = undefined;
</script>
<circle cx={radius} cy={radius} r={radius} fill={color} />
<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
<style>
circle {
fill: var(--pattern-color-props, var(--background-pattern-color));
}
</style>
packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+8 -2
View File
@@ -1,11 +1,17 @@
<script lang="ts">
export let lineWidth = 1;
export let color = '#777';
export let color: string | undefined = undefined;
export let dimensions: [number, number];
</script>
<path
stroke={color}
stroke-width={lineWidth}
d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
style:--pattern-color-props={color}
/>
<style>
path {
stroke: var(--pattern-color-props, var(--background-pattern-color));
}
</style>
packages/svelte/src/lib/plugins/Background/types.ts
+2 -2
View File
@@ -5,11 +5,11 @@ export enum BackgroundVariant {
}
export type BackgroundProps = {
color?: string;
bgColor?: string;
patternColor?: string;
class?: string;
gap?: number | [number, number];
size?: number;
lineWidth?: number;
variant?: BackgroundVariant;
style?: string;
};
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+22 -3
View File
@@ -2,6 +2,11 @@
import cc from 'classcat';
let className: string;
let bgColor: string | undefined = undefined;
let bgColorHover: string | undefined = undefined;
let color: string | undefined = undefined;
let colorHover: string | undefined = undefined;
let borderColor: string | undefined = undefined;
export { className as class };
</script>
@@ -10,6 +15,11 @@
type="button"
on:click
class={cc(['svelte-flow__controls-button', className])}
style:--controls-button-background-color-props={bgColor}
style:--controls-button-background-color-hover-props={bgColorHover}
style:--controls-button-color-props={color}
style:--controls-button-color-hover-props={colorHover}
style:--controls-button-border-color-props={borderColor}
{...$$restProps}
>
<slot class="button-svg" />
@@ -18,8 +28,13 @@
<style>
.svelte-flow__controls-button {
border: none;
background: #fefefe;
border-bottom: 1px solid #eee;
background: var(
--controls-button-background-color-props,
var(--controls-button-background-color)
);
border-bottom: 1px solid
var(--controls-button-border-color-props, var(--controls-button-border-color));
color: var(--controls-button-color-props, var(--controls-button-color));
box-sizing: content-box;
display: flex;
justify-content: center;
@@ -32,7 +47,11 @@
}
.svelte-flow__controls-button:hover {
background: #f4f4f4;
background: var(
--controls-button-background-color-hover-props,
var(--controls-button-background-color-hover)
);
color: var(--controls-button-color-hover-props, var(--controls-button-hover-color));
}
.svelte-flow__controls-button :global(svg) {
packages/svelte/src/lib/plugins/Controls/Controls.svelte
+23 -9
View File
@@ -16,6 +16,11 @@
export let showZoom: $$Props['showZoom'] = true;
export let showFitView: $$Props['showFitView'] = true;
export let showInteractive: $$Props['showInteractive'] = true;
export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
export let buttonColor: $$Props['buttonColor'] = undefined;
export let buttonColorHover: $$Props['buttonColorHover'] = undefined;
export let buttonBorderColor: $$Props['buttonColorHover'] = undefined;
const {
zoomIn,
@@ -29,6 +34,14 @@
elementsSelectable
} = useStore();
const buttonProps = {
bgColor: buttonBgColor,
bgColorHover: buttonBgColorHover,
color: buttonColor,
colorHover: buttonColorHover,
borderColor: buttonBorderColor
};
$: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
$: minZoomReached = $transform[2] <= $minZoom;
$: maxZoomReached = $transform[2] >= $maxZoom;
@@ -62,40 +75,41 @@
title="zoom in"
aria-label="zoom in"
disabled={maxZoomReached}
{...buttonProps}
>
<PlusIcon />
</ControlButton>
<svelte:component
this={ControlButton}
<ControlButton
on:click={onZoomOutHandler}
class="svelte-flow__controls-zoomout"
title="zoom out"
aria-label="zoom out"
disabled={minZoomReached}
{...buttonProps}
>
<MinusIcon />
</svelte:component>
</ControlButton>
{/if}
{#if showFitView}
<svelte:component
this={ControlButton}
<ControlButton
class="svelte-flow__controls-fitview"
on:click={onFitViewHandler}
title="fit view"
aria-label="fit view"
{...buttonProps}
>
<FitViewIcon />
</svelte:component>
</ControlButton>
{/if}
{#if showInteractive}
<svelte:component
this={ControlButton}
<ControlButton
class="svelte-flow__controls-interactive"
on:click={onToggleInteractivity}
title="toggle interactivity"
aria-label="toggle interactivity"
{...buttonProps}
>
{#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
</svelte:component>
</ControlButton>
{/if}
</Panel>
packages/svelte/src/lib/plugins/Controls/types.ts
+4
View File
@@ -5,4 +5,8 @@ export type ControlsProps = {
showZoom?: boolean;
showFitView?: boolean;
showInteractive?: boolean;
buttonBgColor?: string;
buttonBgColorHover?: string;
buttonColor?: string;
buttonColorHover?: string;
};
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+37 -28
View File
@@ -17,24 +17,23 @@
type $$Props = MiniMapProps;
let position: $$Props['position'] = 'bottom-right';
let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
let style: $$Props['style'] = '';
let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
let nodeClassName: $$Props['nodeClassName'] = '';
let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
let bgColor: $$Props['bgColor'] = '#fff';
let maskColor: $$Props['maskColor'] = 'rgb(240, 240, 240, 0.6)';
let maskStrokeColor: $$Props['maskStrokeColor'] = 'none';
let maskStrokeWidth: $$Props['maskStrokeWidth'] = 1;
let width: $$Props['width'] = undefined;
let height: $$Props['height'] = undefined;
let pannable: $$Props['pannable'] = true;
let zoomable: $$Props['zoomable'] = true;
let inversePan: $$Props['inversePan'] = undefined;
let zoomStep: $$Props['zoomStep'] = undefined;
export let position: $$Props['position'] = 'bottom-right';
export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
export let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
export let nodeClassName: $$Props['nodeClassName'] = '';
export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
export let bgColor: $$Props['bgColor'] = undefined;
export let maskColor: $$Props['maskColor'] = undefined;
export let maskStrokeColor: $$Props['maskStrokeColor'] = undefined;
export let maskStrokeWidth: $$Props['maskStrokeWidth'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let pannable: $$Props['pannable'] = true;
export let zoomable: $$Props['zoomable'] = true;
export let inversePan: $$Props['inversePan'] = undefined;
export let zoomStep: $$Props['zoomStep'] = undefined;
let className: $$Props['class'] = '';
export { className as class };
@@ -84,16 +83,19 @@
<Panel
{position}
class={cc(['svelte-flow__minimap', className])}
style={`background-color: ${bgColor}; ${style}`}
data-testid="svelte-flow__minimap"
>
{#if $panZoom}
<svg
width={elementWidth}
height={elementHeight}
viewBox={`${x} ${y} ${viewboxWidth} ${viewboxHeight}`}
viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
role="img"
aria-labelledby={labelledBy}
style:--minimap-background-color-props={bgColor}
style:--minimap-mask-color-props={maskColor}
style:--minimap-mask-stroke-color-props={maskStrokeColor}
style:--minimap-mask-stroke-width-props={maskStrokeWidth}
use:interactive={{
panZoom: $panZoom,
transform,
@@ -123,22 +125,29 @@
strokeWidth={nodeStrokeWidth}
{shapeRendering}
class={nodeClassNameFunc(node)}
style={{}}
/>
{/if}
{/each}
<path
class="svelte-flow__minimap-mask"
d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${
viewboxHeight + offset * 2
}h${-viewboxWidth - offset * 2}z
M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
fill={maskColor}
d="M{x - offset},{y - offset}h{viewboxWidth + offset * 2}v{viewboxHeight +
offset * 2}h{-viewboxWidth - offset * 2}z
M{viewBB.x},{viewBB.y}h{viewBB.width}v{viewBB.height}h{-viewBB.width}z"
fill-rule="evenodd"
stroke={maskStrokeColor}
stroke-width={maskStrokeWidth}
pointer-events="none"
/>
</svg>
{/if}
</Panel>
<style>
svg {
background-color: var(--minimap-background-color-props, var(--minimap-background-color));
}
.svelte-flow__minimap-mask {
fill: var(--minimap-mask-color-props, var(--minimap-mask-color));
stroke: var(--minimap-mask-stroke-color-props, var(--minimap-mask-stroke-color));
stroke-width: var(--minimap-mask-stroke-width-props, var(--minimap-mask-stroke-width));
}
</style>
packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+1 -5
View File
@@ -10,12 +10,8 @@
export let shapeRendering: string;
export let strokeColor: string;
export let strokeWidth: number = 2;
export let style: Record<string, string>;
let className: string = '';
export { className as class };
const { background, backgroundColor } = style || {};
const fill = (color || background || backgroundColor) as string;
</script>
<rect
@@ -26,7 +22,7 @@
ry={borderRadius}
{width}
{height}
{fill}
fill={color}
stroke={strokeColor}
stroke-width={strokeWidth}
shape-rendering={shapeRendering}
packages/svelte/src/lib/plugins/Minimap/types.ts
-1
View File
@@ -16,7 +16,6 @@ export type MiniMapProps = {
maskStrokeWidth?: number;
position?: PanelPosition;
class?: string;
style?: string;
ariaLabel?: string | null;
width?: number;
height?: number;