Skip to content

Clipping #774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
techniq merged 15 commits into from
Jan 27, 2026
Merged

Clipping #774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b4132b5
fix for empty layers toggle showing small circle
cycle4passion Jan 11, 2026
56945c5
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 11, 2026
3aaa686
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 14, 2026
07b33de
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 16, 2026
26c0b12
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 19, 2026
e5b8d25
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 19, 2026
617112a
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 21, 2026
20f4b33
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 24, 2026
60ca72b
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
077da76
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
3268020
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
b1057d2
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 26, 2026
20e5cf5
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 26, 2026
14e2d39
use clip over overflow-hidden
cycle4passion Jan 26, 2026
de1f32e
refine
techniq Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/content/components/GeoTile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ related: []

## Usage

:example{ name="basic" showCode }
:example{ name="basic" }
103 changes: 51 additions & 52 deletions docs/src/examples/components/Dagre/basic.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,61 +32,60 @@
<ShowControls bind:show={showSettings} label="Show Settings" />

<div class="flex gap-2 pt-6">
<div class="flex-1 p-4 border rounded-sm overflow-hidden">
<Chart
transform={{
mode: 'canvas',
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
height={500}
>
<TransformContextControls />
<Chart
transform={{
mode: 'canvas',
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
clip
height={500}
>
<TransformContextControls />

<Layer>
<Dagre data={data as any} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings.curve}
markerEnd={settings.arrow}
/>
{/each}
</g>
<Layer>
<Dagre data={data as any} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings.curve}
markerEnd={settings.arrow}
/>
{/each}
</g>

<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class="fill-surface-200 stroke-2 stroke-primary/50"
rx={10}
/>
<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class="fill-surface-200 stroke-2 stroke-primary/50"
rx={10}
/>

<Text
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class={cls('text-xs pointer-events-none')}
/>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>
</div>
<Text
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class={cls('text-xs pointer-events-none')}
/>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>

{#if showSettings}
<div transition:slide={{ axis: 'x' }}>
Expand Down
103 changes: 51 additions & 52 deletions docs/src/examples/components/Dagre/playground.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,61 +33,60 @@
<DagrePlaygroundControls bind:selectedGraphValue bind:showSettings />

<div class="flex gap-2">
<div class="flex-1 p-4 border rounded-sm overflow-hidden">
<Chart
transform={{
mode: 'canvas',
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
height={700}
>
<TransformContextControls />
<Chart
transform={{
mode: 'canvas',
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
clip
height={700}
>
<TransformContextControls />

<Layer>
<Dagre {data} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings.curve}
markerEnd={settings.arrow}
/>
{/each}
</g>
<Layer>
<Dagre {data} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings.curve}
markerEnd={settings.arrow}
/>
{/each}
</g>

<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class="fill-surface-200 stroke-2 stroke-primary/50"
rx={10}
/>
<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class="fill-surface-200 stroke-2 stroke-primary/50"
rx={10}
/>

<Text
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class={cls('text-xs pointer-events-none')}
/>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>
</div>
<Text
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class={cls('text-xs pointer-events-none')}
/>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>

{#if showSettings}
<div transition:slide={{ axis: 'x' }}>
Expand Down
127 changes: 63 additions & 64 deletions docs/src/examples/components/Dagre/software-user-flow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,77 +32,76 @@
<ShowControls bind:show={showSettings} label="Show Settings" />

<div class="flex gap-2 pt-6">
<div class="flex-1 p-4 border rounded-sm overflow-hidden">
<Chart
transform={{
mode: 'canvas',
initialScale: 0.75,
initialTranslate: { x: 0, y: -110 },
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
height={700}
>
<TransformContextControls />
<Chart
transform={{
mode: 'canvas',
initialScale: 0.75,
initialTranslate: { x: 0, y: -110 },
initialScrollMode: 'scale',
motion: { type: 'tween', duration: 800, easing: cubicOut }
}}
clip
height={700}
>
<TransformContextControls />

<Layer>
<Dagre data={data as any} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings?.curve}
markerEnd={settings.arrow}
<Layer>
<Dagre data={data as any} edges={(d) => d.links} {...settings}>
{#snippet children({ nodes, edges })}
<g class="edges">
{#each edges as edge, i (edge.v + '-' + edge.w)}
<Spline
data={edge.points}
x="x"
y="y"
class="stroke-surface-content opacity-30"
motion="tween"
curve={settings?.curve}
markerEnd={settings.arrow}
/>

<Text
value={edge.label}
x={edge.x}
y={edge.y}
textAnchor="middle"
verticalAnchor="middle"
class="stroke-2 stroke-surface-100"
motion="tween"
/>
{/each}
</g>

<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class={cls(
'fill-surface-200 stroke-2 stroke-primary/50',
node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
)}
rx={10}
/>

<Text
value={edge.label}
x={edge.x}
y={edge.y}
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class="stroke-2 stroke-surface-100"
motion="tween"
class={cls('text-xs pointer-events-none')}
/>
{/each}
</g>

<g class="nodes">
{#each nodes as node (node.label)}
<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
<Rect
width={node.width}
height={node.height}
class={cls(
'fill-surface-200 stroke-2 stroke-primary/50',
node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
)}
rx={10}
/>

<Text
value={node.label}
x={node.width / 2}
y={node.height / 2}
dy={-2}
textAnchor="middle"
verticalAnchor="middle"
class={cls('text-xs pointer-events-none')}
/>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>
</div>
</Group>
{/each}
</g>
{/snippet}
</Dagre>
</Layer>
</Chart>

{#if showSettings}
<div transition:slide={{ axis: 'x' }}>
Expand Down
Loading
Loading