feat(svelte): cleanup styling, use css variables

2023-06-06 19:44:39 +02:00
parent 32ddd6fac9
commit 98d9d3e51a
20 changed files with 190 additions and 101 deletions
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
@@ -130,8 +130,8 @@ function MiniMap({

  const onSvgClick = onClick
    ? (event: MouseEvent) => {
-        const rfCoord = minimapInstance.current?.pointer(event);
-        onClick(event, { x: rfCoord?.[0] ?? 0, y: rfCoord?.[1] ?? 0 });
+        const [x, y] = minimapInstance.current?.pointer(event) || [0, 0];
+        onClick(event, { x, y });
      }
    : undefined;

--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -5,7 +5,7 @@
  type $$Props = BaseEdgeProps;

  export let id: $$Props['id'] = undefined;
-  export let path: $$Props['path'] = '';
+  export let path: $$Props['path'];
  export let label: $$Props['label'] = undefined;
  export let labelX: $$Props['labelX'] = undefined;
  export let labelY: $$Props['labelY'] = undefined;
@@ -19,19 +19,19 @@
 <path
  d={path}
  {id}
-  fill="none"
  class="svelte-flow__edge-path"
  marker-start={markerStart}
  marker-end={markerEnd}
+  fill="none"
  {style}
 />

 {#if interactionWidth}
  <path
    d={path}
-    fill="none"
    stroke-opacity={0}
    stroke-width={interactionWidth}
+    fill="none"
    class="svelte-flow__edge-interaction"
  />
 {/if}
@@ -40,7 +40,7 @@
  <EdgeLabelRenderer>
    <div
      class="svelte-flow__edge-label"
-      style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+      style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
      style={labelStyle}
    >
      {label}
@@ -53,4 +53,24 @@
    position: absolute;
    background: white;
  }
+
+  .svelte-flow__edge-path {
+    stroke: var(--edge-color);
+    stroke-width: 1;
+  }
+
+  :global(.selected) .svelte-flow__edge-path {
+    stroke: var(--edge-color-selected);
+  }
+
+  :global(.animated) .svelte-flow__edge-path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  @keyframes dashdraw {
+    from {
+      stroke-dashoffset: 10;
+    }
+  }
 </style>
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -32,7 +32,7 @@

  .svelte-flow__edge-path,
  .svelte-flow__connection-path {
-    stroke: #b1b1b7;
+    stroke: var(--connection-line-color);
    stroke-width: 1;
    fill: none;
  }
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -81,25 +81,4 @@
    pointer-events: visibleStroke;
    cursor: pointer;
  }
-
-  .svelte-flow__edge :global(.svelte-flow__edge-path) {
-    stroke: #ccc;
-    stroke-width: 1;
-    fill: none;
-  }
-
-  .selected :global(.svelte-flow__edge-path) {
-    stroke: #555;
-  }
-
-  .animated :global(.svelte-flow__edge-path) {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
 </style>
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -79,7 +79,7 @@
  data-handleid={handleId}
  data-nodeid={nodeId}
  data-handlepos={position}
-  data-id={`${nodeId}-${id}-${type}`}
+  data-id="{nodeId}-{id}-{type}"
  class={cc([
    'svelte-flow__handle',
    `svelte-flow__handle-${position}`,
@@ -108,8 +108,8 @@
    min-height: 5px;
    width: 6px;
    height: 6px;
-    background: #1a192b;
-    border: 1px solid white;
+    background: var(--handle-background-color);
+    border: 1px solid var(--handle-border-color);
    border-radius: 100%;
  }

--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -15,7 +15,7 @@
 {#if selectedNodes && $selectionRectMode === 'nodes'}
  <div
    class="selection-wrapper nopan"
-    style={`width: ${rect.width}px; height: ${rect.height}px; transform: translate(${rect.x}px, ${rect.y}px)`}
+    style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
    use:drag={{ disabled: false, store }}
  />
  <Selection
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -91,7 +91,7 @@
  class:draggable
  class:connectable
  class:parent={isParent}
-  style:transform={`translate(${positionOrigin?.x ?? 0}px, ${positionOrigin?.y ?? 0}px)`}
+  style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
  {style}
  on:click={onSelectNodeHandler}
  on:mouseenter={() => dispatchEvent('node:mouseenter')}
@@ -116,12 +116,12 @@
 <style>
  .svelte-flow__node {
    border-radius: 3px;
-    color: #222;
+    color: var(--node-color);
    text-align: center;
    border-width: 1px;
    border-style: solid;
-    border-color: #1a192b;
-    background-color: white;
+    border-color: var(--node-border-color);
+    background-color: var(--node-background-color);
    position: absolute;
    pointer-events: none;
    user-select: none;
@@ -134,7 +134,7 @@

  .selected {
    outline: none;
-    box-shadow: 0 0 0 0.5px #1a192b;
+    box-shadow: 0 0 0 0.5px var(--node-shadow-color-selected);
  }

  .dragging {
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/packages/svelte/src/lib/components/Selection/Selection.svelte
@@ -9,7 +9,7 @@
 {#if isVisible}
  <div
    class="svelte-flow__selection"
-    style={`width: ${width}px; height: ${height}px; transform: translate(${x}px, ${y}px)`}
+    style="width: {width}px; height: {height}px; transform: translate({x}px, {y}px)"
  />
 {/if}

--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -167,6 +167,8 @@
    overflow: hidden;
    position: relative;
    z-index: 0;
+
+    background-color: var(--background-color);
  }

  .svelte-flow :global(.svelte-flow__node-default),
@@ -182,4 +184,33 @@
    pointer-events: none;
    user-select: none;
  }
+
+  :root {
+    --background-color: #fff;
+    --background-pattern-color: #eee;
+
+    --minimap-background-color: #fff;
+    --minimap-mask-color: rgb(240, 240, 240, 0.6);
+    --minimap-mask-stroke-color: none;
+    --minimap-mask-stroke-width: 1;
+
+    --controls-button-background-color: #fefefe;
+    --controls-button-background-color-hover: #f4f4f4;
+    --controls-button-color: inherit;
+    --controls-button-color-hover: inherit;
+    --controls-button-border-color: #eee;
+
+    --edge-color: #cfcfcf;
+    --edge-color-selected: #555;
+
+    --node-color: inherit;
+    --node-border-color: #1a192b;
+    --node-background-color: #fff;
+    --node-shadow-color-selected: #1a192b;
+
+    --handle-background-color: #1a192b;
+    --handle-border-color: #fff;
+
+    --connection-line-color: #b1b1b7;
+  }
 </style>
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -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>
--- a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
@@ -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>
--- a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
@@ -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>
--- a/packages/svelte/src/lib/plugins/Background/types.ts
+++ b/packages/svelte/src/lib/plugins/Background/types.ts
@@ -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;
 };
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -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) {
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -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>
--- a/packages/svelte/src/lib/plugins/Controls/types.ts
+++ b/packages/svelte/src/lib/plugins/Controls/types.ts
@@ -5,4 +5,8 @@ export type ControlsProps = {
  showZoom?: boolean;
  showFitView?: boolean;
  showInteractive?: boolean;
+  buttonBgColor?: string;
+  buttonBgColorHover?: string;
+  buttonColor?: string;
+  buttonColorHover?: string;
 };
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -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>
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -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}
--- a/packages/svelte/src/lib/plugins/Minimap/types.ts
+++ b/packages/svelte/src/lib/plugins/Minimap/types.ts
@@ -16,7 +16,6 @@ export type MiniMapProps = {
  maskStrokeWidth?: number;
  position?: PanelPosition;
  class?: string;
-  style?: string;
  ariaLabel?: string | null;
  width?: number;
  height?: number;
--- a/packages/svelte/src/routes/overview/+page.svelte
+++ b/packages/svelte/src/routes/overview/+page.svelte
@@ -90,7 +90,8 @@
      id: '2-4',
      type: 'custom',
      source: '2',
-      target: '4'
+      target: '4',
+      animated: true
    }
  ]);

@@ -151,4 +152,15 @@
    background: #ff5050;
    color: white;
  }
+
+  :root {
+    --background-color: #ffffdd;
+    --background-pattern-color: #5050ff;
+
+    --minimap-background-color: #f5f6f7;
+    --minimap-mask-color: rgb(255, 255, 240, 0.6);
+
+    --controls-button-background-color: #ddd;
+    --controls-button-background-color-hover: #ccc;
+  }
 </style>