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

Merge pull request #3404 from wbkd/svelte-flow-fix-pattern-class

Browse Source 
fix(svelte) Renamed className to class where possible
This commit is contained in:
Moritz Klack
2023-09-18 18:22:05 +02:00
committed by GitHub
parent 00ee83f960 286753349e
commit e00f08acf9
6 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/actions/drag/index.ts
+2 -2
View File
@@ -6,7 +6,7 @@ import type { SvelteFlowStore } from '$lib/store/types';
type UseDragParams = { type UseDragParams = {
store: SvelteFlowStore; store: SvelteFlowStore;
disabled?: boolean; disabled?: boolean;
noDragClassName?: string; noDragClass?: string;
handleSelector?: string; handleSelector?: string;
nodeId?: string; nodeId?: string;
isSelectable?: boolean; isSelectable?: boolean;
@@ -47,7 +47,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
dragInstance.update({ dragInstance.update({
domNode, domNode,
noDragClassName: params.noDragClassName, noDragClassName: params.noDragClass,
handleSelector: params.handleSelector, handleSelector: params.handleSelector,
nodeId: params.nodeId, nodeId: params.nodeId,
isSelectable: params.isSelectable isSelectable: params.isSelectable
packages/svelte/src/lib/actions/zoom/index.ts
+2
View File
@@ -30,6 +30,8 @@ type ZoomParams = {
panOnScrollMode: PanOnScrollMode; panOnScrollMode: PanOnScrollMode;
zoomActivationKeyPressed: boolean; zoomActivationKeyPressed: boolean;
preventScrolling: boolean; preventScrolling: boolean;
// last two instances of 'classname' being used
// changing it to class would require object restructuring for use with panZoomInstance.update
noPanClassName: string; noPanClassName: string;
noWheelClassName: string; noWheelClassName: string;
userSelectionActive: boolean; userSelectionActive: boolean;
packages/svelte/src/lib/plugins/Background/Background.svelte
+3 -3
View File
@@ -22,7 +22,7 @@
export let lineWidth: $$Props['lineWidth'] = 1; export let lineWidth: $$Props['lineWidth'] = 1;
export let bgColor: $$Props['bgColor'] = undefined; export let bgColor: $$Props['bgColor'] = undefined;
export let patternColor: $$Props['patternColor'] = undefined; export let patternColor: $$Props['patternColor'] = undefined;
export let patternClassName: $$Props['patternClassName'] = undefined; export let patternClass: $$Props['patternClass'] = undefined;
let className: $$Props['class'] = ''; let className: $$Props['class'] = '';
export { className as class }; export { className as class };
@@ -57,9 +57,9 @@
patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`} patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
> >
{#if isDots} {#if isDots}
<DotPattern radius={scaledSize / 2} class={patternClassName} /> <DotPattern radius={scaledSize / 2} class={patternClass} />
{:else} {:else}
<LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} /> <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClass} />
{/if} {/if}
</pattern> </pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} /> <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
packages/svelte/src/lib/plugins/Background/types.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export enum BackgroundVariant {
export type BackgroundProps = { export type BackgroundProps = {
bgColor?: string; bgColor?: string;
patternColor?: string; patternColor?: string;
patternClassName?: string; patternClass?: string;
class?: string; class?: string;
gap?: number | [number, number]; gap?: number | [number, number];
size?: number; size?: number;
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+3 -3
View File
@@ -21,7 +21,7 @@
export let ariaLabel: $$Props['ariaLabel'] = 'Mini map'; export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent'; export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
export let nodeColor: $$Props['nodeColor'] = '#e2e2e2'; export let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
export let nodeClassName: $$Props['nodeClassName'] = ''; export let nodeClass: $$Props['nodeClass'] = '';
export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5; export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2; export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
export let bgColor: $$Props['bgColor'] = undefined; export let bgColor: $$Props['bgColor'] = undefined;
@@ -53,7 +53,7 @@
const nodeColorFunc = getAttrFunction(nodeColor); const nodeColorFunc = getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
const nodeClassNameFunc = getAttrFunction(nodeClassName); const nodeClassFunc = getAttrFunction(nodeClass);
const shapeRendering = const shapeRendering =
typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'; typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
const labelledBy = `svelte-flow__minimap-desc-${$flowId}`; const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
@@ -126,7 +126,7 @@
strokeColor={nodeStrokeColorFunc(node)} strokeColor={nodeStrokeColorFunc(node)}
strokeWidth={nodeStrokeWidth} strokeWidth={nodeStrokeWidth}
{shapeRendering} {shapeRendering}
class={nodeClassNameFunc(node)} class={nodeClassFunc(node)}
/> />
{/if} {/if}
{/each} {/each}
packages/svelte/src/lib/plugins/Minimap/types.ts
+1 -1
View File
@@ -8,7 +8,7 @@ export type MiniMapProps = {
bgColor?: string; bgColor?: string;
nodeColor?: string | GetMiniMapNodeAttribute; nodeColor?: string | GetMiniMapNodeAttribute;
nodeStrokeColor?: string | GetMiniMapNodeAttribute; nodeStrokeColor?: string | GetMiniMapNodeAttribute;
nodeClassName?: string | GetMiniMapNodeAttribute; nodeClass?: string | GetMiniMapNodeAttribute;
nodeBorderRadius?: number; nodeBorderRadius?: number;
nodeStrokeWidth?: number; nodeStrokeWidth?: number;
maskColor?: string; maskColor?: string;