Cleaning the codebase a tiny bit
This commit is contained in:
@ -27,14 +27,10 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/autocomplete": "^6.19.0",
|
"@codemirror/autocomplete": "^6.19.0",
|
||||||
"@codemirror/commands": "^6.9.0",
|
"@codemirror/commands": "^6.9.0",
|
||||||
"@codemirror/lang-css": "^6.3.1",
|
|
||||||
"@codemirror/lang-html": "^6.4.11",
|
|
||||||
"@codemirror/lang-javascript": "^6.2.4",
|
|
||||||
"@codemirror/language": "^6.11.3",
|
"@codemirror/language": "^6.11.3",
|
||||||
"@codemirror/lint": "^6.9.0",
|
"@codemirror/lint": "^6.9.0",
|
||||||
"@codemirror/search": "^6.5.11",
|
"@codemirror/search": "^6.5.11",
|
||||||
"@codemirror/state": "^6.5.2",
|
"@codemirror/state": "^6.5.2",
|
||||||
"@codemirror/theme-one-dark": "^6.1.3",
|
|
||||||
"@codemirror/view": "^6.38.6",
|
"@codemirror/view": "^6.38.6",
|
||||||
"@csound/browser": "7.0.0-beta11",
|
"@csound/browser": "7.0.0-beta11",
|
||||||
"@hlolli/codemirror-lang-csound": "1.0.0-alpha10",
|
"@hlolli/codemirror-lang-csound": "1.0.0-alpha10",
|
||||||
|
|||||||
88
pnpm-lock.yaml
generated
88
pnpm-lock.yaml
generated
@ -17,15 +17,6 @@ importers:
|
|||||||
'@codemirror/commands':
|
'@codemirror/commands':
|
||||||
specifier: ^6.9.0
|
specifier: ^6.9.0
|
||||||
version: 6.9.0
|
version: 6.9.0
|
||||||
'@codemirror/lang-css':
|
|
||||||
specifier: ^6.3.1
|
|
||||||
version: 6.3.1
|
|
||||||
'@codemirror/lang-html':
|
|
||||||
specifier: ^6.4.11
|
|
||||||
version: 6.4.11
|
|
||||||
'@codemirror/lang-javascript':
|
|
||||||
specifier: ^6.2.4
|
|
||||||
version: 6.2.4
|
|
||||||
'@codemirror/language':
|
'@codemirror/language':
|
||||||
specifier: ^6.11.3
|
specifier: ^6.11.3
|
||||||
version: 6.11.3
|
version: 6.11.3
|
||||||
@ -38,9 +29,6 @@ importers:
|
|||||||
'@codemirror/state':
|
'@codemirror/state':
|
||||||
specifier: ^6.5.2
|
specifier: ^6.5.2
|
||||||
version: 6.5.2
|
version: 6.5.2
|
||||||
'@codemirror/theme-one-dark':
|
|
||||||
specifier: ^6.1.3
|
|
||||||
version: 6.1.3
|
|
||||||
'@codemirror/view':
|
'@codemirror/view':
|
||||||
specifier: ^6.38.6
|
specifier: ^6.38.6
|
||||||
version: 6.38.6
|
version: 6.38.6
|
||||||
@ -106,15 +94,6 @@ packages:
|
|||||||
'@codemirror/commands@6.9.0':
|
'@codemirror/commands@6.9.0':
|
||||||
resolution: {integrity: sha512-454TVgjhO6cMufsyyGN70rGIfJxJEjcqjBG2x2Y03Y/+Fm99d3O/Kv1QDYWuG6hvxsgmjXmBuATikIIYvERX+w==}
|
resolution: {integrity: sha512-454TVgjhO6cMufsyyGN70rGIfJxJEjcqjBG2x2Y03Y/+Fm99d3O/Kv1QDYWuG6hvxsgmjXmBuATikIIYvERX+w==}
|
||||||
|
|
||||||
'@codemirror/lang-css@6.3.1':
|
|
||||||
resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
|
|
||||||
|
|
||||||
'@codemirror/lang-html@6.4.11':
|
|
||||||
resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
|
|
||||||
|
|
||||||
'@codemirror/lang-javascript@6.2.4':
|
|
||||||
resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
|
|
||||||
|
|
||||||
'@codemirror/language@6.11.3':
|
'@codemirror/language@6.11.3':
|
||||||
resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
|
resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
|
||||||
|
|
||||||
@ -131,9 +110,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==}
|
resolution: {integrity: sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==}
|
||||||
deprecated: As of 0.20.0, this package has been merged into @codemirror/state
|
deprecated: As of 0.20.0, this package has been merged into @codemirror/state
|
||||||
|
|
||||||
'@codemirror/theme-one-dark@6.1.3':
|
|
||||||
resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
|
|
||||||
|
|
||||||
'@codemirror/view@6.38.6':
|
'@codemirror/view@6.38.6':
|
||||||
resolution: {integrity: sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==}
|
resolution: {integrity: sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==}
|
||||||
|
|
||||||
@ -176,18 +152,9 @@ packages:
|
|||||||
'@lezer/common@1.2.3':
|
'@lezer/common@1.2.3':
|
||||||
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
|
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
|
||||||
|
|
||||||
'@lezer/css@1.3.0':
|
|
||||||
resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
|
|
||||||
|
|
||||||
'@lezer/highlight@1.2.1':
|
'@lezer/highlight@1.2.1':
|
||||||
resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
|
resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
|
||||||
|
|
||||||
'@lezer/html@1.3.12':
|
|
||||||
resolution: {integrity: sha512-RJ7eRWdaJe3bsiiLLHjCFT1JMk8m1YP9kaUbvu2rMLEoOnke9mcTVDyfOslsln0LtujdWespjJ39w6zo+RsQYw==}
|
|
||||||
|
|
||||||
'@lezer/javascript@1.5.4':
|
|
||||||
resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
|
|
||||||
|
|
||||||
'@lezer/lr@1.4.2':
|
'@lezer/lr@1.4.2':
|
||||||
resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
|
resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
|
||||||
|
|
||||||
@ -813,36 +780,6 @@ snapshots:
|
|||||||
'@codemirror/view': 6.38.6
|
'@codemirror/view': 6.38.6
|
||||||
'@lezer/common': 1.2.3
|
'@lezer/common': 1.2.3
|
||||||
|
|
||||||
'@codemirror/lang-css@6.3.1':
|
|
||||||
dependencies:
|
|
||||||
'@codemirror/autocomplete': 6.19.0
|
|
||||||
'@codemirror/language': 6.11.3
|
|
||||||
'@codemirror/state': 6.5.2
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/css': 1.3.0
|
|
||||||
|
|
||||||
'@codemirror/lang-html@6.4.11':
|
|
||||||
dependencies:
|
|
||||||
'@codemirror/autocomplete': 6.19.0
|
|
||||||
'@codemirror/lang-css': 6.3.1
|
|
||||||
'@codemirror/lang-javascript': 6.2.4
|
|
||||||
'@codemirror/language': 6.11.3
|
|
||||||
'@codemirror/state': 6.5.2
|
|
||||||
'@codemirror/view': 6.38.6
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/css': 1.3.0
|
|
||||||
'@lezer/html': 1.3.12
|
|
||||||
|
|
||||||
'@codemirror/lang-javascript@6.2.4':
|
|
||||||
dependencies:
|
|
||||||
'@codemirror/autocomplete': 6.19.0
|
|
||||||
'@codemirror/language': 6.11.3
|
|
||||||
'@codemirror/lint': 6.9.0
|
|
||||||
'@codemirror/state': 6.5.2
|
|
||||||
'@codemirror/view': 6.38.6
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/javascript': 1.5.4
|
|
||||||
|
|
||||||
'@codemirror/language@6.11.3':
|
'@codemirror/language@6.11.3':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@codemirror/state': 6.5.2
|
'@codemirror/state': 6.5.2
|
||||||
@ -870,13 +807,6 @@ snapshots:
|
|||||||
|
|
||||||
'@codemirror/text@0.19.6': {}
|
'@codemirror/text@0.19.6': {}
|
||||||
|
|
||||||
'@codemirror/theme-one-dark@6.1.3':
|
|
||||||
dependencies:
|
|
||||||
'@codemirror/language': 6.11.3
|
|
||||||
'@codemirror/state': 6.5.2
|
|
||||||
'@codemirror/view': 6.38.6
|
|
||||||
'@lezer/highlight': 1.2.1
|
|
||||||
|
|
||||||
'@codemirror/view@6.38.6':
|
'@codemirror/view@6.38.6':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@codemirror/state': 6.5.2
|
'@codemirror/state': 6.5.2
|
||||||
@ -944,28 +874,10 @@ snapshots:
|
|||||||
|
|
||||||
'@lezer/common@1.2.3': {}
|
'@lezer/common@1.2.3': {}
|
||||||
|
|
||||||
'@lezer/css@1.3.0':
|
|
||||||
dependencies:
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/highlight': 1.2.1
|
|
||||||
'@lezer/lr': 1.4.2
|
|
||||||
|
|
||||||
'@lezer/highlight@1.2.1':
|
'@lezer/highlight@1.2.1':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@lezer/common': 1.2.3
|
'@lezer/common': 1.2.3
|
||||||
|
|
||||||
'@lezer/html@1.3.12':
|
|
||||||
dependencies:
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/highlight': 1.2.1
|
|
||||||
'@lezer/lr': 1.4.2
|
|
||||||
|
|
||||||
'@lezer/javascript@1.5.4':
|
|
||||||
dependencies:
|
|
||||||
'@lezer/common': 1.2.3
|
|
||||||
'@lezer/highlight': 1.2.1
|
|
||||||
'@lezer/lr': 1.4.2
|
|
||||||
|
|
||||||
'@lezer/lr@1.4.2':
|
'@lezer/lr@1.4.2':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@lezer/common': 1.2.3
|
'@lezer/common': 1.2.3
|
||||||
|
|||||||
@ -1,45 +0,0 @@
|
|||||||
import * as fs from 'fs';
|
|
||||||
import { CsoundManualParser } from './parser';
|
|
||||||
|
|
||||||
const parser = new CsoundManualParser();
|
|
||||||
const content = fs.readFileSync('downloaded-opcodes/moogladder.md', 'utf-8');
|
|
||||||
|
|
||||||
console.log('=== Testing moogladder.md ===\n');
|
|
||||||
|
|
||||||
// Test extractSection
|
|
||||||
const syntaxSection = parser.extractSection(content, 'Syntax');
|
|
||||||
console.log('Syntax section length:', syntaxSection.length);
|
|
||||||
console.log('First 200 chars:', syntaxSection.substring(0, 200));
|
|
||||||
console.log('\n---\n');
|
|
||||||
|
|
||||||
// Look for ### Initialization
|
|
||||||
const initMatch = syntaxSection.match(/###\s+Initialization\s*\n([\s\S]*?)(?=\n###|\n##|$)/i);
|
|
||||||
console.log('Initialization match:', initMatch ? 'FOUND' : 'NOT FOUND');
|
|
||||||
if (initMatch) {
|
|
||||||
console.log('Init section content (first 300 chars):');
|
|
||||||
console.log(initMatch[1].substring(0, 300));
|
|
||||||
console.log('\n---\n');
|
|
||||||
|
|
||||||
// Test the parameter regex
|
|
||||||
const paramRegex = /_([a-zA-Z0-9_,\s/]+)_\s*[-–—]+\s*([^\n]+(?:\n(?!_)[^\n]+)*)/g;
|
|
||||||
const params = Array.from(initMatch[1].matchAll(paramRegex));
|
|
||||||
console.log(`Found ${params.length} parameters`);
|
|
||||||
params.forEach((p, i) => {
|
|
||||||
console.log(` Param ${i + 1}: name="${p[1]}", desc="${p[2].substring(0, 60)}..."`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Test extractParameters directly
|
|
||||||
const initParams = parser.extractParameters(content, 'Initialization');
|
|
||||||
const perfParams = parser.extractParameters(content, 'Performance');
|
|
||||||
|
|
||||||
console.log('\n=== extractParameters results ===');
|
|
||||||
console.log(`Initialization params: ${initParams.length}`);
|
|
||||||
initParams.forEach(p => {
|
|
||||||
console.log(` - ${p.name}: ${p.description.substring(0, 60)}...`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(`\nPerformance params: ${perfParams.length}`);
|
|
||||||
perfParams.forEach(p => {
|
|
||||||
console.log(` - ${p.name}: ${p.description.substring(0, 60)}...`);
|
|
||||||
});
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import * as fs from 'fs';
|
|
||||||
|
|
||||||
const content = fs.readFileSync('downloaded-opcodes/moogladder.md', 'utf-8');
|
|
||||||
|
|
||||||
console.log('Full content length:', content.length);
|
|
||||||
console.log('\n=== Testing extractSection regex ===\n');
|
|
||||||
|
|
||||||
const regex = /##\s+Syntax\s*\n([\s\S]*?)(?=\n##|$)/i;
|
|
||||||
const match = content.match(regex);
|
|
||||||
|
|
||||||
if (match) {
|
|
||||||
console.log('Match found!');
|
|
||||||
console.log('Captured content length:', match[1].length);
|
|
||||||
console.log('\nFull captured content:');
|
|
||||||
console.log('---START---');
|
|
||||||
console.log(match[1]);
|
|
||||||
console.log('---END---');
|
|
||||||
} else {
|
|
||||||
console.log('No match found');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also check what comes after
|
|
||||||
const syntaxIndex = content.indexOf('## Syntax');
|
|
||||||
const examplesIndex = content.indexOf('## Examples');
|
|
||||||
console.log('\n=== Indices ===');
|
|
||||||
console.log('## Syntax at:', syntaxIndex);
|
|
||||||
console.log('## Examples at:', examplesIndex);
|
|
||||||
console.log('Distance:', examplesIndex - syntaxIndex);
|
|
||||||
console.log('\nContent between (first 500 chars):');
|
|
||||||
console.log(content.substring(syntaxIndex, syntaxIndex + 500));
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import {
|
|
||||||
allCsoundReferences,
|
|
||||||
getCsoundReference,
|
|
||||||
getCsoundReferencesByCategory
|
|
||||||
} from '../../src/lib/csound-reference/csoundReference';
|
|
||||||
|
|
||||||
console.log('='.repeat(60));
|
|
||||||
console.log('Csound Reference Output Test');
|
|
||||||
console.log('='.repeat(60));
|
|
||||||
|
|
||||||
console.log(`\nTotal opcodes: ${allCsoundReferences.length}`);
|
|
||||||
|
|
||||||
console.log('\n--- Testing getCsoundReference() ---');
|
|
||||||
const oscil = getCsoundReference('oscil');
|
|
||||||
if (oscil) {
|
|
||||||
console.log(`\nFound oscil:`);
|
|
||||||
console.log(` Name: ${oscil.name}`);
|
|
||||||
console.log(` Category: ${oscil.category}`);
|
|
||||||
console.log(` Description: ${oscil.description.substring(0, 80)}...`);
|
|
||||||
console.log(` Syntax: ${oscil.syntax?.substring(0, 80)}...`);
|
|
||||||
console.log(` Rates: ${oscil.rates?.join(', ')}`);
|
|
||||||
console.log(` Parameters: ${oscil.parameters?.length || 0}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const moogladder = getCsoundReference('moogladder');
|
|
||||||
if (moogladder) {
|
|
||||||
console.log(`\nFound moogladder:`);
|
|
||||||
console.log(` Name: ${moogladder.name}`);
|
|
||||||
console.log(` Category: ${moogladder.category}`);
|
|
||||||
console.log(` Description: ${moogladder.description}`);
|
|
||||||
console.log(` Syntax: ${moogladder.syntax?.substring(0, 100)}...`);
|
|
||||||
console.log(` Rates: ${moogladder.rates?.join(', ')}`);
|
|
||||||
console.log(` Parameters: ${moogladder.parameters?.length || 0}`);
|
|
||||||
if (moogladder.parameters) {
|
|
||||||
console.log(` Parameters detail:`);
|
|
||||||
moogladder.parameters.forEach(p => {
|
|
||||||
console.log(` - ${p.name} (${p.type}): ${p.description.substring(0, 60)}...`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('\n--- Testing getCsoundReferencesByCategory() ---');
|
|
||||||
const oscillators = getCsoundReferencesByCategory('Signal Generators:Basic Oscillators');
|
|
||||||
console.log(`\nBasic Oscillators (${oscillators.length} opcodes):`);
|
|
||||||
oscillators.slice(0, 5).forEach(op => {
|
|
||||||
console.log(` - ${op.name}: ${op.description.substring(0, 60)}...`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('\n--- Sample categories ---');
|
|
||||||
const categories = new Set(allCsoundReferences.map(ref => ref.category));
|
|
||||||
const categoryArray = Array.from(categories).sort();
|
|
||||||
console.log(`\nTotal categories: ${categories.size}`);
|
|
||||||
console.log('First 10 categories:');
|
|
||||||
categoryArray.slice(0, 10).forEach(cat => {
|
|
||||||
const count = allCsoundReferences.filter(r => r.category === cat).length;
|
|
||||||
console.log(` - ${cat} (${count} opcodes)`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('\n--- Checking for opcodes with parameters ---');
|
|
||||||
const opcodesWithParams = allCsoundReferences.filter(ref => ref.parameters && ref.parameters.length > 0);
|
|
||||||
console.log(`\nOpcodes with parameters: ${opcodesWithParams.length} out of ${allCsoundReferences.length}`);
|
|
||||||
if (opcodesWithParams.length > 0) {
|
|
||||||
console.log('\nFirst 5 opcodes with parameters:');
|
|
||||||
opcodesWithParams.slice(0, 5).forEach(op => {
|
|
||||||
console.log(` - ${op.name}: ${op.parameters?.length} parameters`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('\n' + '='.repeat(60));
|
|
||||||
console.log('Test Complete!');
|
|
||||||
console.log('='.repeat(60));
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title?: string;
|
|
||||||
visible?: boolean;
|
|
||||||
x?: number;
|
|
||||||
y?: number;
|
|
||||||
width?: number;
|
|
||||||
height?: number;
|
|
||||||
onClose?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
title = 'Popup',
|
|
||||||
visible = $bindable(false),
|
|
||||||
x = 100,
|
|
||||||
y = 100,
|
|
||||||
width = 400,
|
|
||||||
height = 300,
|
|
||||||
onClose
|
|
||||||
}: Props = $props();
|
|
||||||
|
|
||||||
let isDragging = $state(false);
|
|
||||||
let dragStartX = $state(0);
|
|
||||||
let dragStartY = $state(0);
|
|
||||||
let popupX = $state(x);
|
|
||||||
let popupY = $state(y);
|
|
||||||
|
|
||||||
function handleMouseDown(e: MouseEvent) {
|
|
||||||
if ((e.target as HTMLElement).classList.contains('popup-header')) {
|
|
||||||
isDragging = true;
|
|
||||||
dragStartX = e.clientX - popupX;
|
|
||||||
dragStartY = e.clientY - popupY;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseMove(e: MouseEvent) {
|
|
||||||
if (isDragging) {
|
|
||||||
popupX = e.clientX - dragStartX;
|
|
||||||
popupY = e.clientY - dragStartY;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseUp() {
|
|
||||||
isDragging = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
visible = false;
|
|
||||||
if (onClose) {
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
document.addEventListener('mousemove', handleMouseMove);
|
|
||||||
document.addEventListener('mouseup', handleMouseUp);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousemove', handleMouseMove);
|
|
||||||
document.removeEventListener('mouseup', handleMouseUp);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<div
|
|
||||||
class="popup"
|
|
||||||
style="left: {popupX}px; top: {popupY}px; width: {width}px; height: {height}px;"
|
|
||||||
>
|
|
||||||
<div class="popup-header" onmousedown={handleMouseDown}>
|
|
||||||
<span class="popup-title">{title}</span>
|
|
||||||
<button class="close-button" onclick={handleClose}>×</button>
|
|
||||||
</div>
|
|
||||||
<div class="popup-content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.popup {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9999;
|
|
||||||
background-color: var(--bg-color);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: var(--space-md) var(--space-lg);
|
|
||||||
background-color: var(--surface-color);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
cursor: move;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-title {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: var(--font-base);
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: color var(--transition-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button:hover {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
padding: var(--space-lg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user