Skip to content

Commit 620ba56

Browse files
manuel3108manuel3108
committed
add initial toolbar draft
1 parent 9d2f755 commit 620ba56

File tree

7 files changed

+157
-17
lines changed

7 files changed

+157
-17
lines changed

‎packages/svelte/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@
146146
},
147147
"devDependencies": {
148148
"@jridgewell/trace-mapping": "^0.3.25",
149+
"@neodrag/svelte": "^2.3.2",
149150
"@playwright/test": "^1.46.1",
150151
"@rollup/plugin-commonjs": "^28.0.1",
151152
"@rollup/plugin-node-resolve": "^15.3.0",
@@ -164,9 +165,9 @@
164165
"dependencies": {
165166
"@ampproject/remapping": "^2.3.0",
166167
"@jridgewell/sourcemap-codec": "^1.5.0",
168+
"@sveltejs/acorn-typescript": "^1.0.5",
167169
"@types/estree": "^1.0.5",
168170
"acorn": "^8.12.1",
169-
"@sveltejs/acorn-typescript": "^1.0.5",
170171
"aria-query": "^5.3.1",
171172
"axobject-query": "^4.1.0",
172173
"clsx": "^2.1.1",

‎packages/svelte/src/toolbar/Icon.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!-- Grabbed from https://github.com/sveltejs/branding/blob/master/svelte-logo.svg -->
2+
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"
3+
><title>svelte-logo</title><path
4+
d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
5+
style="fill:#ff3e00"
6+
/><path
7+
d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
8+
style="fill:#fff"
9+
/></svg
10+
>

‎packages/svelte/src/toolbar/ToolBar.svelte

Lines changed: 97 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,100 @@
11
<script>
2-
let props = $props();
2+
import { draggable } from '@neodrag/svelte';
3+
import Icon from './Icon.svelte';
4+
import { configure, getConfig } from 'svelte/toolbar';
5+
6+
let open = $state(true); // todo change this to false
7+
8+
configure({
9+
tools: [
10+
{ name: 'state' },
11+
{
12+
name: 'inspector',
13+
activate: () => {
14+
console.log('inspector activated');
15+
}
16+
},
17+
{ name: 'a11y' },
18+
{ name: 'config' }
19+
]
20+
});
21+
22+
let config = getConfig();
23+
/** @type {string[]} */
24+
let active_tool_names = $state([]);
25+
26+
/**
27+
* @param {import('./public').Tool} tool
28+
*/
29+
function toggle_tool(tool) {
30+
const active = active_tool_names.includes(tool.name);
31+
if (!active) {
32+
active_tool_names.push(tool.name);
33+
tool.activate();
34+
} else {
35+
active_tool_names.splice(active_tool_names.indexOf(tool.name), 1);
36+
tool.deactivate();
37+
}
38+
39+
console.log(active_tool_names);
40+
}
341
</script>
442

5-
<h1>toolbar</h1>
6-
<pre>
7-
{JSON.stringify(props, null, 2)}
8-
</pre>
43+
<div class="toolbar" use:draggable={{ bounds: document.body }}>
44+
{#if open}
45+
<ul class="tools">
46+
{#each config.tools as tool}
47+
<li class:active={active_tool_names.includes(tool.name)}>
48+
<button onclick={() => toggle_tool(tool)}>{tool.name}</button>
49+
</li>
50+
{/each}
51+
</ul>
52+
{/if}
53+
<button type="button" class="toolbar-selector" onclick={() => (open = !open)}>
54+
<Icon />
55+
</button>
56+
</div>
57+
58+
<style>
59+
.toolbar-selector {
60+
cursor: pointer;
61+
}
62+
63+
.toolbar-selector :global(svg) {
64+
width: 50px;
65+
height: 50px;
66+
}
67+
68+
.tools {
69+
background-color: #666; /* TODO: consider dark / light mode */
70+
list-style: none;
71+
margin: 0;
72+
padding: 0;
73+
display: flex;
74+
align-items: center;
75+
}
76+
77+
.tools li {
78+
display: inline-block;
79+
background-color: #444;
80+
border: #111 1px solid;
81+
border-radius: 50%;
82+
margin: 0 10px;
83+
padding: 10px;
84+
height: 30px;
85+
}
86+
87+
.tools li.active {
88+
border-color: #ff3e00;
89+
}
90+
91+
.toolbar {
92+
display: inline-flex;
93+
color: white;
94+
position: static;
95+
}
96+
97+
.toolbar > * {
98+
/* display: inline-block; */
99+
}
100+
</style>

‎packages/svelte/src/toolbar/configure.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ const config = {
1212
export function configure(options) {
1313
for (const [key, value] of Object.entries(options)) {
1414
if (key === 'tools') {
15-
continue
15+
continue;
1616
} else {
1717
// @ts-expect-error index access
1818
config[key] = value;
1919
}
2020
}
21-
if(options.tools) {
21+
if (options.tools) {
2222
for (let tool of options.tools) {
2323
/** @type {import('./public.d.ts').Tool} */
2424
const resolved_tool = typeof tool === 'function' ? tool() : tool;
@@ -37,7 +37,7 @@ export function configure(options) {
3737

3838
/**
3939
*
40-
* @return {import('./public.d.ts').Config}
40+
* @return {import('./public.d.ts').ResolvedConfig}
4141
*/
4242
export function getConfig() {
4343
// TODO clone to avoid direct manipulation

‎packages/svelte/src/toolbar/public.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ export * from './index.js';
33
export interface Tool {
44
name: string;
55
icon: string; // url or svg
6-
activate:()=>void;
7-
deactivate:()=>void;
6+
activate: () => void;
7+
deactivate: () => void;
88
keyCombo?: string;
99
disabled?: boolean;
1010
}
11-
type ToolFn = ()=>Tool
11+
type ToolFn = () => Tool;
1212

1313
export interface Config {
1414
position?: 'top' | 'bottom';
1515
tools?: (Tool | ToolFn)[];
1616
}
1717

1818
export interface ResolvedConfig extends Config {
19-
tools: Tool[]
19+
tools: Tool[];
2020
}

‎packages/svelte/types/index.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2552,12 +2552,12 @@ declare module 'svelte/toolbar' {
25522552
export interface Tool {
25532553
name: string;
25542554
icon: string; // url or svg
2555-
activate:()=>void;
2556-
deactivate:()=>void;
2555+
activate: () => void;
2556+
deactivate: () => void;
25572557
keyCombo?: string;
25582558
disabled?: boolean;
25592559
}
2560-
type ToolFn = ()=>Tool
2560+
type ToolFn = () => Tool;
25612561

25622562
export interface Config {
25632563
position?: 'top' | 'bottom';
@@ -2569,7 +2569,7 @@ declare module 'svelte/toolbar' {
25692569
}
25702570
export function configure(options: Partial<Config>): void;
25712571

2572-
export function getConfig(): Config;
2572+
export function getConfig(): ResolvedConfig;
25732573
export function mountUI(): void;
25742574

25752575
export {};

‎pnpm-lock.yaml

Lines changed: 37 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)