From 1385e9d434af2c77caa84dee098d122b62c59b04 Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 12 Jun 2025 16:18:36 +0800 Subject: [PATCH 01/31] chore: add package `@sciux/math` --- packages/layout copy/README.md | 3 +++ packages/layout copy/package.json | 37 +++++++++++++++++++++++++++++ packages/layout copy/src/index.ts | 0 packages/layout copy/tsup.config.ts | 10 ++++++++ pnpm-lock.yaml | 12 ++++++++++ 5 files changed, 62 insertions(+) create mode 100644 packages/layout copy/README.md create mode 100644 packages/layout copy/package.json create mode 100644 packages/layout copy/src/index.ts create mode 100644 packages/layout copy/tsup.config.ts diff --git a/packages/layout copy/README.md b/packages/layout copy/README.md new file mode 100644 index 0000000..a2027e7 --- /dev/null +++ b/packages/layout copy/README.md @@ -0,0 +1,3 @@ +# `@sciux/layout` + +Layout components for SciuxKit diff --git a/packages/layout copy/package.json b/packages/layout copy/package.json new file mode 100644 index 0000000..c926201 --- /dev/null +++ b/packages/layout copy/package.json @@ -0,0 +1,37 @@ +{ + "name": "@sciux/math", + "type": "module", + "version": "0.0.5", + "description": "Layout components for SciuxKit", + "author": "BijonAI ", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/sciux-kit/lib.git" + }, + "bugs": "https://github.com/sciux-kit/lib/issues", + "keywords": [], + "exports": { + ".": { + "types": "./src/index.ts", + "import": "./dist/index.js" + } + }, + "main": "./dist/index.mjs", + "module": "./dist/index.mjs", + "types": "./dist/index.d.mts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsup", + "dev": "tsup --watch", + "prepublishOnly": "nr build", + "start": "tsx src/index.ts" + }, + "dependencies": { + "@vue/reactivity": "^3.5.14", + "arktype": "^2.1.20", + "sciux-laplace": "catalog:" + } +} diff --git a/packages/layout copy/src/index.ts b/packages/layout copy/src/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/layout copy/tsup.config.ts b/packages/layout copy/tsup.config.ts new file mode 100644 index 0000000..f37ebb2 --- /dev/null +++ b/packages/layout copy/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'tsup' + +export default defineConfig({ + entry: ['./src/index.ts'], + outDir: './dist', + format: 'esm', + dts: true, + sourcemap: true, + clean: true, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cadd205..5892395 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -189,6 +189,18 @@ importers: specifier: 'catalog:' version: 0.0.1-alpha.12 + packages/layout copy: + dependencies: + '@vue/reactivity': + specifier: ^3.5.14 + version: 3.5.14 + arktype: + specifier: ^2.1.20 + version: 2.1.20 + sciux-laplace: + specifier: 'catalog:' + version: 0.0.1-alpha.12 + packages/model: dependencies: '@vue/reactivity': From c27bac9f07070808f73e18cd47cc216f9673d714 Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 12 Jun 2025 16:23:02 +0800 Subject: [PATCH 02/31] chore: change package path name --- packages/layout copy/README.md | 3 --- packages/math/README.md | 3 +++ packages/{layout copy => math}/package.json | 0 packages/{layout copy => math}/src/index.ts | 0 packages/{layout copy => math}/tsup.config.ts | 0 5 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 packages/layout copy/README.md create mode 100644 packages/math/README.md rename packages/{layout copy => math}/package.json (100%) rename packages/{layout copy => math}/src/index.ts (100%) rename packages/{layout copy => math}/tsup.config.ts (100%) diff --git a/packages/layout copy/README.md b/packages/layout copy/README.md deleted file mode 100644 index a2027e7..0000000 --- a/packages/layout copy/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# `@sciux/layout` - -Layout components for SciuxKit diff --git a/packages/math/README.md b/packages/math/README.md new file mode 100644 index 0000000..92552c5 --- /dev/null +++ b/packages/math/README.md @@ -0,0 +1,3 @@ +# `@sciux/math` + +Mathematics components for SciuxKit diff --git a/packages/layout copy/package.json b/packages/math/package.json similarity index 100% rename from packages/layout copy/package.json rename to packages/math/package.json diff --git a/packages/layout copy/src/index.ts b/packages/math/src/index.ts similarity index 100% rename from packages/layout copy/src/index.ts rename to packages/math/src/index.ts diff --git a/packages/layout copy/tsup.config.ts b/packages/math/tsup.config.ts similarity index 100% rename from packages/layout copy/tsup.config.ts rename to packages/math/tsup.config.ts From 15c793d5a5ac1fc9e9cb903a57bf855022d52691 Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 12 Jun 2025 21:23:33 +0800 Subject: [PATCH 03/31] ci: add tsconfig for each package --- packages/layout/tsconfig.json | 3 ++ packages/math/src/angle/index.ts | 67 ++++++++++++++++++++++++++++++++ packages/math/src/index.ts | 2 + packages/math/src/shared.ts | 3 ++ packages/math/tsconfig.json | 3 ++ packages/model/tsconfig.json | 3 ++ packages/sciux/src/index.ts | 4 +- packages/sciux/tsconfig.json | 3 ++ packages/widget/src/canvas.ts | 14 +++++-- packages/widget/tsconfig.json | 3 ++ test/src/examples.ts | 11 ++---- test/src/math/angle.sciux | 5 +++ 12 files changed, 110 insertions(+), 11 deletions(-) create mode 100644 packages/layout/tsconfig.json create mode 100644 packages/math/src/angle/index.ts create mode 100644 packages/math/src/shared.ts create mode 100644 packages/math/tsconfig.json create mode 100644 packages/model/tsconfig.json create mode 100644 packages/sciux/tsconfig.json create mode 100644 packages/widget/tsconfig.json create mode 100644 test/src/math/angle.sciux diff --git a/packages/layout/tsconfig.json b/packages/layout/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/packages/layout/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts new file mode 100644 index 0000000..299a9e1 --- /dev/null +++ b/packages/math/src/angle/index.ts @@ -0,0 +1,67 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { LineType } from '../shared' + +const T = type({ + x: 'number', + y: 'number', + from: 'number', + to: 'number', + startSide: 'number', + endSide: 'number', + startSideType: LineType, + endSideType: LineType, + startSideValue: type.string.optional(), + endSideValue: type.string.optional(), +}) + +export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { + return { + name: 'angle', + attrs: T, + defaults: { + startSide: 10, + endSide: 10, + startSideType: 'solid', + endSideType: 'solid', + }, + setup(_children) { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${attrs.x}, ${attrs.y})`) + const resolve = (value: number, length: number): { x1: number, y1: number, x2: number, y2: number } => { + const radian = value * Math.PI / 180 + return { + x1: 0, + y1: 0, + x2: length * Math.cos(radian), + y2: length * Math.sin(radian), + } + } + const resolveDasharray = (type: typeof LineType.infer): string => type === 'dashed' ? '10 5' : type === 'dotted' ? '2 2' : '0' + const startSide = resolve(attrs.from.value, attrs.startSide.value) + const endSide = resolve(attrs.to.value, attrs.endSide.value) + const startSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line') + startSideLine.setAttribute('x1', startSide.x1.toString()) + startSideLine.setAttribute('y1', startSide.y1.toString()) + startSideLine.setAttribute('x2', startSide.x2.toString()) + startSideLine.setAttribute('y2', startSide.y2.toString()) + startSideLine.setAttribute('stroke', 'black') + startSideLine.setAttribute('stroke-width', '1') + startSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.startSideType.value)) + container.append(startSideLine) + const endSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line') + endSideLine.setAttribute('x1', endSide.x1.toString()) + endSideLine.setAttribute('y1', endSide.y1.toString()) + endSideLine.setAttribute('x2', endSide.x2.toString()) + endSideLine.setAttribute('y2', endSide.y2.toString()) + endSideLine.setAttribute('stroke', 'black') + endSideLine.setAttribute('stroke-width', '1') + endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value)) + return container + }, + provides: { + x: attrs.x, + y: attrs.y, + }, + } +}) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index e69de29..83bf482 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -0,0 +1,2 @@ +export * from './angle' +export * from './shared' diff --git a/packages/math/src/shared.ts b/packages/math/src/shared.ts new file mode 100644 index 0000000..dc3863c --- /dev/null +++ b/packages/math/src/shared.ts @@ -0,0 +1,3 @@ +import { type } from 'arktype' + +export const LineType = type(`'solid' | 'dashed' | 'dotted'`) diff --git a/packages/math/tsconfig.json b/packages/math/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/packages/math/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/packages/model/tsconfig.json b/packages/model/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/packages/model/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts index d646137..bbf1d67 100644 --- a/packages/sciux/src/index.ts +++ b/packages/sciux/src/index.ts @@ -1,6 +1,7 @@ import type { RegisterContext } from './types' import { animations, components, flows, textModes } from 'sciux-laplace' import layout from './layout' +import math from './math' import model from './model' import widget from './widget' @@ -10,7 +11,7 @@ const defaultContext: RegisterContext = { animations, textModes, } -const registers = [widget, model, layout] +const registers = [widget, model, layout, math] export default function (context: RegisterContext = defaultContext): void { for (const register of registers) { @@ -19,6 +20,7 @@ export default function (context: RegisterContext = defaultContext): void { } export * from './layout' +export * from './math' export * from './model' export * from './widget' export * from 'sciux-laplace' diff --git a/packages/sciux/tsconfig.json b/packages/sciux/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/packages/sciux/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/packages/widget/src/canvas.ts b/packages/widget/src/canvas.ts index f8cacb4..d09739a 100644 --- a/packages/widget/src/canvas.ts +++ b/packages/widget/src/canvas.ts @@ -4,7 +4,8 @@ import { defineComponent } from 'sciux-laplace' const CanvasType = type({ width: 'number', height: 'number', - origin: 'number[]', + origin: type('number[]'), + division: type('number | number[]'), }) export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => { @@ -13,12 +14,19 @@ export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => { attrs: CanvasType, defaults: { origin: [0, 0], + division: 1, }, setup(children) { + const division = Array.isArray(attrs.division.value) ? attrs.division.value : [attrs.division.value, attrs.division.value] const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') - svg.setAttribute('viewBox', `0 0 ${attrs.width.value} ${attrs.height.value}`) + svg.setAttribute('viewBox', `0 0 ${attrs.width.value * division[0]} ${attrs.height.value * division[1]}`) svg.setAttribute('width', '100%') - svg.style.aspectRatio = (attrs.width.value / attrs.height.value).toString() + svg.setAttribute('height', '100%') + const caculateRatio = (width: number, height: number): number => + (width < height ? width / height : height / width) * 100 + if (attrs.width.value > attrs.height.value) + svg.setAttribute('height', `${caculateRatio(attrs.width.value, attrs.height.value)}%`) + else svg.setAttribute('width', `${caculateRatio(attrs.width.value, attrs.height.value)}%`) const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') root.setAttribute('transform', `translate(${attrs.origin.value.join(',')})`) root.append(...children()) diff --git a/packages/widget/tsconfig.json b/packages/widget/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/packages/widget/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/test/src/examples.ts b/test/src/examples.ts index 5c79350..17a9be0 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,12 +1,9 @@ import test from './example.sciux?raw' +import angle from './math/angle.sciux?raw' export default { - layout: { - columns: { - basic: {}, - }, - rows: test, - flexbox: {}, - table: {}, + test, + '@sciux/math': { + angle, }, } diff --git a/test/src/math/angle.sciux b/test/src/math/angle.sciux new file mode 100644 index 0000000..1855eb6 --- /dev/null +++ b/test/src/math/angle.sciux @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 284afcc7acf3022aaf3bf73f07520e899ed0748d Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 13 Jun 2025 22:32:59 +0800 Subject: [PATCH 04/31] feat: ``, and it's dependent components --- package.json | 2 +- packages/math/src/angle/arc.ts | 32 ++++++++++++++++++ packages/math/src/angle/bouding.ts | 37 +++++++++++++++++++++ packages/math/src/angle/index.ts | 15 +++++++-- packages/math/src/utils/arc-path.ts | 50 +++++++++++++++++++++++++++++ packages/math/src/utils/line.ts | 3 ++ packages/sciux/src/math.ts | 4 ++- test/src/math/angle.sciux | 5 ++- 8 files changed, 142 insertions(+), 6 deletions(-) create mode 100644 packages/math/src/angle/arc.ts create mode 100644 packages/math/src/angle/bouding.ts create mode 100644 packages/math/src/utils/arc-path.ts create mode 100644 packages/math/src/utils/line.ts diff --git a/package.json b/package.json index 5448061..478e2fe 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "packageManager": "pnpm@10.4.0", "scripts": { "build": "nr -r build", - "dev": "nr -r dev", + "dev": "nr --parallel dev", "lint": "eslint --cache .", "prepublishOnly": "nr build", "docs": "pnpm -C docs run docs:dev", diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts new file mode 100644 index 0000000..689fe14 --- /dev/null +++ b/packages/math/src/angle/arc.ts @@ -0,0 +1,32 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { LineType } from '../shared' +import { describeArc } from '../utils/arc-path' +import { resolveDasharray } from '../utils/line' + +const T = type({ + type: LineType, + value: type.string.optional(), +}) + +export const arc = defineComponent<'arc', typeof T.infer, { + x: number + y: number + from: number + to: number + startSide: number + endSide: number +}>((attrs, context) => { + return { + name: 'arc', + attrs: T, + setup() { + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to)) + path.setAttribute('stroke', 'black') + path.setAttribute('fill', 'none') + path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + return path + }, + } +}) diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts new file mode 100644 index 0000000..ef1a590 --- /dev/null +++ b/packages/math/src/angle/bouding.ts @@ -0,0 +1,37 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { LineType } from '../shared' +import { describeArc } from '../utils/arc-path' +import { resolveDasharray } from '../utils/line' + +const T = type({ + type: LineType, + value: type.string.optional(), +}) + +export const bounding = defineComponent<'bounding', typeof T.infer, { + x: number + y: number + from: number + to: number + startSide?: number + endSide: number +}>((attrs, context) => { + return { + name: 'bounding', + attrs: T, + defaults: { + type: 'solid', + }, + setup() { + const pathString = describeArc([context.x, context.y], context.startSide ?? context.endSide, context.from, context.to) + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('d', pathString) + path.setAttribute('stroke-width', '1') + path.setAttribute('stroke', 'black') + path.setAttribute('fill', 'none') + path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + return path + }, + } +}) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index 299a9e1..d6dbcfd 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -1,6 +1,7 @@ import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' +import { resolveDasharray } from '../utils/line' const T = type({ x: 'number', @@ -25,9 +26,9 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { startSideType: 'solid', endSideType: 'solid', }, - setup(_children) { + setup(children) { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') - container.setAttribute('transform', `translate(${attrs.x}, ${attrs.y})`) + container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const resolve = (value: number, length: number): { x1: number, y1: number, x2: number, y2: number } => { const radian = value * Math.PI / 180 return { @@ -37,7 +38,6 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { y2: length * Math.sin(radian), } } - const resolveDasharray = (type: typeof LineType.infer): string => type === 'dashed' ? '10 5' : type === 'dotted' ? '2 2' : '0' const startSide = resolve(attrs.from.value, attrs.startSide.value) const endSide = resolve(attrs.to.value, attrs.endSide.value) const startSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line') @@ -57,11 +57,20 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { endSideLine.setAttribute('stroke', 'black') endSideLine.setAttribute('stroke-width', '1') endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value)) + container.append(endSideLine) + container.append(...children()) return container }, provides: { x: attrs.x, y: attrs.y, + from: attrs.from, + to: attrs.to, + startSide: attrs.startSide, + endSide: attrs.endSide, }, } }) + +export * from './arc' +export * from './bouding' diff --git a/packages/math/src/utils/arc-path.ts b/packages/math/src/utils/arc-path.ts new file mode 100644 index 0000000..4f75ffd --- /dev/null +++ b/packages/math/src/utils/arc-path.ts @@ -0,0 +1,50 @@ +export function polarToCartesian( + center: [number, number], + radius: number, + angleInDegrees: number, +): [number, number] { + const angleInRadians = (angleInDegrees * Math.PI) / 180 + return [ + center[0] + radius * Math.cos(angleInRadians), + center[1] + radius * Math.sin(angleInRadians), + ] +} + +export function describeArc( + center: [number, number], + radius: number, + startAngle: number, + endAngle: number, +): string { + if (Math.abs(startAngle - endAngle) % 360 <= 1e-6) { + return [ + 'M', + ...center, + 'm', + -radius, + 0, + 'a', + radius, + radius, + 0, + 1, + 0, + radius * 2, + 0, + 'a', + radius, + radius, + 0, + 1, + 0, + -radius * 2, + 0, + ].join(' ') + } + const start = polarToCartesian(center, radius, endAngle) + const end = polarToCartesian(center, radius, startAngle) + const largeArcFlag = Number(endAngle - startAngle > 180) + return ['M', ...start, 'A', radius, radius, 0, largeArcFlag, 0, ...end].join( + ' ', + ) +} diff --git a/packages/math/src/utils/line.ts b/packages/math/src/utils/line.ts new file mode 100644 index 0000000..9b4f460 --- /dev/null +++ b/packages/math/src/utils/line.ts @@ -0,0 +1,3 @@ +import type { LineType } from '../shared' + +export const resolveDasharray = (type: typeof LineType.infer): string => type === 'dashed' ? '10 5' : type === 'dotted' ? '2 2' : '0' diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 8d72ce6..373885d 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,8 +1,10 @@ import type { RegisterContext } from './types' -import { angle } from '@sciux/math' +import { angle, arc, bounding } from '@sciux/math' export default function ({ components }: RegisterContext): void { components.set('angle', angle) + components.set('bounding', bounding) + components.set('arc', arc) } export * from '@sciux/math' diff --git a/test/src/math/angle.sciux b/test/src/math/angle.sciux index 1855eb6..32cd505 100644 --- a/test/src/math/angle.sciux +++ b/test/src/math/angle.sciux @@ -1,5 +1,8 @@ - + + + + \ No newline at end of file From b0653c1c1be34742533731f4da2661bde449a229 Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 14 Jun 2025 22:25:33 +0800 Subject: [PATCH 05/31] feat: tex, data-point, tex-on-angle-mark --- packages/math/package.json | 1 + packages/math/src/angle/arc.ts | 20 +- packages/math/src/angle/bouding.ts | 18 +- packages/math/src/angle/index.ts | 1 + packages/math/src/angle/points.ts | 51 +++++ packages/math/src/shared.ts | 4 + packages/math/src/utils/tex.ts | 10 + packages/sciux/src/math.ts | 5 +- packages/sciux/src/widget.ts | 5 +- packages/widget/package.json | 1 + packages/widget/src/code.ts | 1 + packages/widget/src/index.ts | 1 + packages/widget/src/tex.ts | 35 ++++ pnpm-lock.yaml | 242 +++++++++-------------- test/src/examples.ts | 4 +- test/src/{ => template}/math/angle.sciux | 2 +- test/src/template/widget.sciux | 39 ++++ test/tsconfig.json | 3 + 18 files changed, 283 insertions(+), 160 deletions(-) create mode 100644 packages/math/src/angle/points.ts create mode 100644 packages/math/src/utils/tex.ts create mode 100644 packages/widget/src/tex.ts rename test/src/{ => template}/math/angle.sciux (83%) create mode 100644 test/src/template/widget.sciux diff --git a/packages/math/package.json b/packages/math/package.json index c926201..efcec99 100644 --- a/packages/math/package.json +++ b/packages/math/package.json @@ -30,6 +30,7 @@ "start": "tsx src/index.ts" }, "dependencies": { + "@sciux/widget": "workspace:^", "@vue/reactivity": "^3.5.14", "arktype": "^2.1.20", "sciux-laplace": "catalog:" diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 689fe14..8d83000 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -3,10 +3,11 @@ import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { describeArc } from '../utils/arc-path' import { resolveDasharray } from '../utils/line' +import { generateTexNode } from '../utils/tex' const T = type({ type: LineType, - value: type.string.optional(), + value: type.string, }) export const arc = defineComponent<'arc', typeof T.infer, { @@ -20,13 +21,28 @@ export const arc = defineComponent<'arc', typeof T.infer, { return { name: 'arc', attrs: T, + defaults: { + value: '', + }, setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to)) path.setAttribute('stroke', 'black') path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) - return path + const texElement = generateTexNode(attrs.value?.value) + const length = (context.startSide ?? context.endSide) / 3 + const angle = context.from + (context.to - context.from) / 2 + const position = [ + length * Math.cos(angle * Math.PI / 180), + length * Math.sin(angle * Math.PI / 180), + ] + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`) + texContainer.append(texElement) + container.append(path, texContainer) + return container }, } }) diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts index ef1a590..c8b6e55 100644 --- a/packages/math/src/angle/bouding.ts +++ b/packages/math/src/angle/bouding.ts @@ -3,10 +3,11 @@ import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { describeArc } from '../utils/arc-path' import { resolveDasharray } from '../utils/line' +import { generateTexNode } from '../utils/tex' const T = type({ type: LineType, - value: type.string.optional(), + value: type.string, }) export const bounding = defineComponent<'bounding', typeof T.infer, { @@ -22,8 +23,10 @@ export const bounding = defineComponent<'bounding', typeof T.infer, { attrs: T, defaults: { type: 'solid', + value: '', }, setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const pathString = describeArc([context.x, context.y], context.startSide ?? context.endSide, context.from, context.to) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', pathString) @@ -31,7 +34,18 @@ export const bounding = defineComponent<'bounding', typeof T.infer, { path.setAttribute('stroke', 'black') path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) - return path + const texElement = generateTexNode(attrs.value?.value) + const length = context.startSide ?? context.endSide + const angle = context.from + (context.to - context.from) / 2 + const position = [ + length * Math.cos(angle * Math.PI / 180), + length * Math.sin(angle * Math.PI / 180), + ] + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`) + texContainer.append(texElement) + container.append(path, texContainer) + return container }, } }) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index d6dbcfd..7fa2dfd 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -74,3 +74,4 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { export * from './arc' export * from './bouding' +export * from './points' diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts new file mode 100644 index 0000000..f824cd1 --- /dev/null +++ b/packages/math/src/angle/points.ts @@ -0,0 +1,51 @@ +import { defineComponent } from 'sciux-laplace' +import { InfoPointType } from '../shared' + +export const startPoint = defineComponent<'start-point', typeof InfoPointType.infer, { + x: number + y: number + startSide: number + from: number +}>((attrs, context) => { + return { + name: 'start-point', + attrs: InfoPointType, + provides: { + [attrs.as.value]: [ + context.startSide * Math.cos(context.from * Math.PI / 180), + context.startSide * Math.sin(context.from * Math.PI / 180), + ], + }, + } +}) + +export const endPoint = defineComponent<'end-point', typeof InfoPointType.infer, { + x: number + y: number + endSide: number + to: number +}>((attrs, context) => { + return { + name: 'end-point', + attrs: InfoPointType, + provides: { + [attrs.as.value]: [ + context.endSide * Math.cos(context.to * Math.PI / 180), + context.endSide * Math.sin(context.to * Math.PI / 180), + ], + }, + } +}) + +export const origin = defineComponent<'origin', typeof InfoPointType.infer, { + x: number + y: number +}>((attrs, context) => { + return { + name: 'origin', + attrs: InfoPointType, + provides: { + [attrs.as.value]: [context.x, context.y], + }, + } +}) diff --git a/packages/math/src/shared.ts b/packages/math/src/shared.ts index dc3863c..226e276 100644 --- a/packages/math/src/shared.ts +++ b/packages/math/src/shared.ts @@ -1,3 +1,7 @@ import { type } from 'arktype' export const LineType = type(`'solid' | 'dashed' | 'dotted'`) +export const InfoPointType = type({ + as: type.string, + value: type.string, +}) diff --git a/packages/math/src/utils/tex.ts b/packages/math/src/utils/tex.ts new file mode 100644 index 0000000..8cb2340 --- /dev/null +++ b/packages/math/src/utils/tex.ts @@ -0,0 +1,10 @@ +import type { ComponentSetup } from 'sciux-laplace' +import { tex } from '@sciux/widget' +import { ref } from 'sciux-laplace' + +export function generateTexNode(value: string): Node { + const texElement = (tex({ size: ref('10px') }, { underCanvas: true }).setup as ComponentSetup)( + () => [document.createTextNode(value)], + ) + return texElement +} diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 373885d..c164b33 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,10 +1,13 @@ import type { RegisterContext } from './types' -import { angle, arc, bounding } from '@sciux/math' +import { angle, arc, bounding, endPoint, origin, startPoint } from '@sciux/math' export default function ({ components }: RegisterContext): void { components.set('angle', angle) components.set('bounding', bounding) components.set('arc', arc) + components.set('end-point', endPoint) + components.set('origin', origin) + components.set('start-point', startPoint) } export * from '@sciux/math' diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts index e5e6d32..3c56e14 100644 --- a/packages/sciux/src/widget.ts +++ b/packages/sciux/src/widget.ts @@ -1,5 +1,5 @@ import type { RegisterContext } from './types' -import { canvas, code, link, table } from '@sciux/widget' +import { canvas, code, link, table, tex } from '@sciux/widget' import { TextMode } from 'sciux-laplace' export default function ({ components, textModes }: RegisterContext): void { @@ -7,8 +7,9 @@ export default function ({ components, textModes }: RegisterContext): void { components.set('canvas', canvas) components.set('link', link) components.set('code', code) - + components.set('tex', tex) textModes.set('code', TextMode.RCDATA) + textModes.set('tex', TextMode.RCDATA) } export * from '@sciux/widget' diff --git a/packages/widget/package.json b/packages/widget/package.json index 2d08343..a95e986 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -33,6 +33,7 @@ "@sciux/layout": "workspace:^", "@vue/reactivity": "^3.5.14", "arktype": "^2.1.20", + "katex": "^0.16.22", "sciux-laplace": "catalog:", "shiki": "^3.4.2" } diff --git a/packages/widget/src/code.ts b/packages/widget/src/code.ts index 185e2ef..b4d256a 100644 --- a/packages/widget/src/code.ts +++ b/packages/widget/src/code.ts @@ -20,6 +20,7 @@ export default defineComponent<'code', typeof T.infer>((attrs) => { const container = document.createElement('div') container.style.width = '100%' container.style.height = '100%' + container.style.display = 'flex' const kids = children() // Filter out text nodes const content = kids[0].textContent ?? '' diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index 866e649..7911984 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -2,3 +2,4 @@ export { default as canvas } from './canvas' export { default as code } from './code' export { default as link } from './link' export { default as table } from './table' +export { default as tex } from './tex' diff --git a/packages/widget/src/tex.ts b/packages/widget/src/tex.ts new file mode 100644 index 0000000..03f279a --- /dev/null +++ b/packages/widget/src/tex.ts @@ -0,0 +1,35 @@ +import { type } from 'arktype' +import { renderToString } from 'katex' +import { defineComponent } from 'sciux-laplace' + +const T = type({ + size: type.string, +}) + +export default defineComponent<'tex', typeof T.infer, { + underCanvas: boolean +}>((_attrs, context) => { + return { + name: 'tex', + attrs: T, + setup(children) { + const content = children()[0].textContent ?? '' + const html = renderToString(content, { + throwOnError: false, + displayMode: false, + output: 'mathml', + }) + let container: HTMLDivElement | SVGForeignObjectElement + if (context.underCanvas) { + container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject') + container.setAttribute('width', '100%') + container.setAttribute('height', '100%') + } + else { + container = document.createElement('div') + } + container.innerHTML = html + return container + }, + } +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4502ee7..a40551a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,7 +59,7 @@ catalogs: version: 4.19.2 typescript: specifier: ^5.7.3 - version: 5.7.3 + version: 5.8.3 unbuild: specifier: ^3.3.1 version: 3.3.1 @@ -71,7 +71,7 @@ catalogs: version: 28.1.0 vite: specifier: ^6.1.0 - version: 6.1.0 + version: 6.3.5 vite-tsconfig-paths: specifier: ^5.1.4 version: 5.1.4 @@ -94,7 +94,7 @@ importers: devDependencies: '@antfu/eslint-config': specifier: 'catalog:' - version: 4.2.1(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0)) + version: 4.2.1(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0)) '@antfu/ni': specifier: 'catalog:' version: 23.3.1 @@ -121,19 +121,19 @@ importers: version: 2.11.1 tsup: specifier: ^8.5.0 - version: 8.5.0(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.8.0) + version: 8.5.0(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.2)(typescript@5.8.3)(yaml@2.8.0) tsx: specifier: 'catalog:' version: 4.19.2 typescript: specifier: 'catalog:' - version: 5.7.3 + version: 5.8.3 unbuild: specifier: 'catalog:' - version: 3.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) + version: 3.3.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)) vite: specifier: 'catalog:' - version: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0) + version: 6.3.5(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0) vitest: specifier: 'catalog:' version: 3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0) @@ -189,14 +189,23 @@ importers: specifier: 'catalog:' version: 0.0.1-alpha.12 -<<<<<<< HEAD packages/layout copy: -======= -<<<<<<< Updated upstream -======= + dependencies: + '@vue/reactivity': + specifier: ^3.5.14 + version: 3.5.14 + arktype: + specifier: ^2.1.20 + version: 2.1.20 + sciux-laplace: + specifier: 'catalog:' + version: 0.0.1-alpha.12 + packages/math: ->>>>>>> main dependencies: + '@sciux/widget': + specifier: workspace:^ + version: link:../widget '@vue/reactivity': specifier: ^3.5.14 version: 3.5.14 @@ -207,10 +216,6 @@ importers: specifier: 'catalog:' version: 0.0.1-alpha.12 -<<<<<<< HEAD -======= ->>>>>>> Stashed changes ->>>>>>> main packages/model: dependencies: '@vue/reactivity': @@ -252,6 +257,9 @@ importers: arktype: specifier: ^2.1.20 version: 2.1.20 + katex: + specifier: ^0.16.22 + version: 0.16.22 sciux-laplace: specifier: 'catalog:' version: 0.0.1-alpha.12 @@ -421,9 +429,6 @@ packages: resolution: {integrity: sha512-C90iyzm/jLV7Lomv2UzwWUzRv9WZr1oRsFRKsX5HjQL4EXrbi9H/RtBkjCP+NF+ABZXUKpAa4F1dkoTaea4zHg==} hasBin: true - '@antfu/utils@8.1.0': - resolution: {integrity: sha512-XPR7Jfwp0FFl/dFYPX8ZjpmU4/1mIXTjnZ1ba48BLMyKOV62/tiRjdsFcPs2hsYcSud4tzk7w3a3LjX8Fu3huA==} - '@antfu/utils@8.1.1': resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==} @@ -2067,6 +2072,10 @@ packages: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} + commander@8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + comment-parser@1.4.1: resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==} engines: {node: '>= 12.0.0'} @@ -2836,6 +2845,10 @@ packages: jsonc-parser@3.3.1: resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==} + katex@0.16.22: + resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==} + hasBin: true + keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} @@ -4013,11 +4026,6 @@ packages: resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==} engines: {node: '>=8'} - typescript@5.7.3: - resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==} - engines: {node: '>=14.17'} - hasBin: true - typescript@5.8.3: resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==} engines: {node: '>=14.17'} @@ -4130,46 +4138,6 @@ packages: vite: optional: true - vite@6.1.0: - resolution: {integrity: sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==} - engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 - jiti: '>=1.21.0' - less: '*' - lightningcss: ^1.21.0 - sass: '*' - sass-embedded: '*' - stylus: '*' - sugarss: '*' - terser: ^5.16.0 - tsx: ^4.8.1 - yaml: ^2.4.2 - peerDependenciesMeta: - '@types/node': - optional: true - jiti: - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - sass-embedded: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - tsx: - optional: true - yaml: - optional: true - vite@6.3.5: resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -4466,16 +4434,16 @@ snapshots: '@jridgewell/gen-mapping': 0.3.8 '@jridgewell/trace-mapping': 0.3.25 - '@antfu/eslint-config@4.2.1(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0))': + '@antfu/eslint-config@4.2.1(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0))': dependencies: '@antfu/install-pkg': 1.1.0 '@clack/prompts': 0.10.1 '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.20.1(jiti@2.4.2)) '@eslint/markdown': 6.4.0 - '@stylistic/eslint-plugin': 4.4.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) - '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) - '@typescript-eslint/parser': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) - '@vitest/eslint-plugin': 1.2.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0)) + '@stylistic/eslint-plugin': 4.4.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) + '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) + '@typescript-eslint/parser': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) + '@vitest/eslint-plugin': 1.2.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0)) ansis: 3.17.0 eslint: 9.20.1(jiti@2.4.2) eslint-config-flat-gitignore: 2.1.0(eslint@9.20.1(jiti@2.4.2)) @@ -4483,16 +4451,16 @@ snapshots: eslint-merge-processors: 2.0.0(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-antfu: 3.1.1(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-command: 3.2.1(eslint@9.20.1(jiti@2.4.2)) - eslint-plugin-import-x: 4.13.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + eslint-plugin-import-x: 4.13.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint-plugin-jsdoc: 50.6.17(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-jsonc: 2.20.1(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-n: 17.18.0(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-no-only-tests: 3.3.0 - eslint-plugin-perfectionist: 4.13.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + eslint-plugin-perfectionist: 4.13.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint-plugin-regexp: 2.7.0(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-toml: 0.12.0(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-unicorn: 56.0.1(eslint@9.20.1(jiti@2.4.2)) - eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2)) + eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-vue: 9.33.0(eslint@9.20.1(jiti@2.4.2)) eslint-plugin-yml: 1.18.0(eslint@9.20.1(jiti@2.4.2)) eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2)) @@ -4523,8 +4491,6 @@ snapshots: '@antfu/ni@23.3.1': {} - '@antfu/utils@8.1.0': {} - '@antfu/utils@8.1.1': {} '@antfu/utils@9.0.0': {} @@ -5032,7 +4998,7 @@ snapshots: '@iconify/utils@2.3.0': dependencies: '@antfu/install-pkg': 1.0.0 - '@antfu/utils': 8.1.0 + '@antfu/utils': 8.1.1 '@iconify/types': 2.0.0 debug: 4.4.1 globals: 15.15.0 @@ -5330,9 +5296,9 @@ snapshots: '@shikijs/vscode-textmate@10.0.2': {} - '@stylistic/eslint-plugin@4.4.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': + '@stylistic/eslint-plugin@4.4.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)': dependencies: - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint: 9.20.1(jiti@2.4.2) eslint-visitor-keys: 4.2.0 espree: 10.3.0 @@ -5392,32 +5358,32 @@ snapshots: '@types/web-bluetooth@0.0.21': {} - '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': + '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)': dependencies: '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/parser': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) '@typescript-eslint/scope-manager': 8.32.1 - '@typescript-eslint/type-utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/type-utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) '@typescript-eslint/visitor-keys': 8.32.1 eslint: 9.20.1(jiti@2.4.2) graphemer: 1.4.0 ignore: 7.0.4 natural-compare: 1.4.0 - ts-api-utils: 2.1.0(typescript@5.7.3) - typescript: 5.7.3 + ts-api-utils: 2.1.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': + '@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)': dependencies: '@typescript-eslint/scope-manager': 8.32.1 '@typescript-eslint/types': 8.32.1 - '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.7.3) + '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3) '@typescript-eslint/visitor-keys': 8.32.1 debug: 4.4.1 eslint: 9.20.1(jiti@2.4.2) - typescript: 5.7.3 + typescript: 5.8.3 transitivePeerDependencies: - supports-color @@ -5426,20 +5392,20 @@ snapshots: '@typescript-eslint/types': 8.32.1 '@typescript-eslint/visitor-keys': 8.32.1 - '@typescript-eslint/type-utils@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': + '@typescript-eslint/type-utils@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)': dependencies: - '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.7.3) - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) debug: 4.4.1 eslint: 9.20.1(jiti@2.4.2) - ts-api-utils: 2.1.0(typescript@5.7.3) - typescript: 5.7.3 + ts-api-utils: 2.1.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color '@typescript-eslint/types@8.32.1': {} - '@typescript-eslint/typescript-estree@8.32.1(typescript@5.7.3)': + '@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)': dependencies: '@typescript-eslint/types': 8.32.1 '@typescript-eslint/visitor-keys': 8.32.1 @@ -5448,19 +5414,19 @@ snapshots: is-glob: 4.0.3 minimatch: 9.0.5 semver: 7.7.2 - ts-api-utils: 2.1.0(typescript@5.7.3) - typescript: 5.7.3 + ts-api-utils: 2.1.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': + '@typescript-eslint/utils@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)': dependencies: '@eslint-community/eslint-utils': 4.7.0(eslint@9.20.1(jiti@2.4.2)) '@typescript-eslint/scope-manager': 8.32.1 '@typescript-eslint/types': 8.32.1 - '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.7.3) + '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3) eslint: 9.20.1(jiti@2.4.2) - typescript: 5.7.3 + typescript: 5.8.3 transitivePeerDependencies: - supports-color @@ -5678,12 +5644,12 @@ snapshots: vite: 6.3.5(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0) vue: 3.5.13(typescript@5.8.3) - '@vitest/eslint-plugin@1.2.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0))': + '@vitest/eslint-plugin@1.2.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3)(vitest@3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0))': dependencies: - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint: 9.20.1(jiti@2.4.2) optionalDependencies: - typescript: 5.7.3 + typescript: 5.8.3 vitest: 3.0.5(@types/debug@4.1.12)(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0) transitivePeerDependencies: - supports-color @@ -5837,13 +5803,6 @@ snapshots: '@vue/shared': 3.5.13 csstype: 3.1.3 - '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.7.3))': - dependencies: - '@vue/compiler-ssr': 3.5.13 - '@vue/shared': 3.5.13 - vue: 3.5.13(typescript@5.7.3) - optional: true - '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.3))': dependencies: '@vue/compiler-ssr': 3.5.13 @@ -6146,6 +6105,8 @@ snapshots: commander@7.2.0: {} + commander@8.3.0: {} + comment-parser@1.4.1: {} commondir@1.0.1: {} @@ -6489,9 +6450,9 @@ snapshots: eslint: 9.20.1(jiti@2.4.2) eslint-compat-utils: 0.5.1(eslint@9.20.1(jiti@2.4.2)) - eslint-plugin-import-x@4.13.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3): + eslint-plugin-import-x@4.13.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3): dependencies: - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) comment-parser: 1.4.1 debug: 4.4.1 eslint: 9.20.1(jiti@2.4.2) @@ -6551,10 +6512,10 @@ snapshots: eslint-plugin-no-only-tests@3.3.0: {} - eslint-plugin-perfectionist@4.13.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3): + eslint-plugin-perfectionist@4.13.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3): dependencies: '@typescript-eslint/types': 8.32.1 - '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/utils': 8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint: 9.20.1(jiti@2.4.2) natural-orderby: 5.0.0 transitivePeerDependencies: @@ -6602,11 +6563,11 @@ snapshots: semver: 7.7.2 strip-indent: 3.0.0 - eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2)): + eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2)): dependencies: eslint: 9.20.1(jiti@2.4.2) optionalDependencies: - '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3) + '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.8.3) eslint-plugin-vue@9.33.0(eslint@9.20.1(jiti@2.4.2)): dependencies: @@ -7028,6 +6989,10 @@ snapshots: jsonc-parser@3.3.1: {} + katex@0.16.22: + dependencies: + commander: 8.3.0 + keyv@4.5.4: dependencies: json-buffer: 3.0.1 @@ -7500,7 +7465,7 @@ snapshots: mkdirp@1.0.4: {} - mkdist@2.3.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)): + mkdist@2.3.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)): dependencies: autoprefixer: 10.4.21(postcss@8.5.3) citty: 0.1.6 @@ -7516,8 +7481,8 @@ snapshots: semver: 7.7.2 tinyglobby: 0.2.13 optionalDependencies: - typescript: 5.7.3 - vue: 3.5.13(typescript@5.7.3) + typescript: 5.8.3 + vue: 3.5.13(typescript@5.8.3) mlly@1.7.4: dependencies: @@ -8002,11 +7967,11 @@ snapshots: rfdc@1.4.1: {} - rollup-plugin-dts@6.2.1(rollup@4.41.1)(typescript@5.7.3): + rollup-plugin-dts@6.2.1(rollup@4.41.1)(typescript@5.8.3): dependencies: magic-string: 0.30.17 rollup: 4.41.1 - typescript: 5.7.3 + typescript: 5.8.3 optionalDependencies: '@babel/code-frame': 7.27.1 @@ -8303,9 +8268,9 @@ snapshots: trim-lines@3.0.1: {} - ts-api-utils@2.1.0(typescript@5.7.3): + ts-api-utils@2.1.0(typescript@5.8.3): dependencies: - typescript: 5.7.3 + typescript: 5.8.3 ts-interface-checker@0.1.13: {} @@ -8315,7 +8280,7 @@ snapshots: tslib@2.8.1: {} - tsup@8.5.0(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.8.0): + tsup@8.5.0(jiti@2.4.2)(postcss@8.5.3)(tsx@4.19.2)(typescript@5.8.3)(yaml@2.8.0): dependencies: bundle-require: 5.1.0(esbuild@0.25.4) cac: 6.7.14 @@ -8336,7 +8301,7 @@ snapshots: tree-kill: 1.2.2 optionalDependencies: postcss: 8.5.3 - typescript: 5.7.3 + typescript: 5.8.3 transitivePeerDependencies: - jiti - supports-color @@ -8389,13 +8354,11 @@ snapshots: type-fest@0.8.1: {} - typescript@5.7.3: {} - typescript@5.8.3: {} ufo@1.6.1: {} - unbuild@3.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)): + unbuild@3.3.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)): dependencies: '@rollup/plugin-alias': 5.1.1(rollup@4.41.1) '@rollup/plugin-commonjs': 28.0.3(rollup@4.41.1) @@ -8410,18 +8373,18 @@ snapshots: hookable: 5.5.3 jiti: 2.4.2 magic-string: 0.30.17 - mkdist: 2.3.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) + mkdist: 2.3.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)) mlly: 1.7.4 pathe: 2.0.3 pkg-types: 1.3.1 pretty-bytes: 6.1.1 rollup: 4.41.1 - rollup-plugin-dts: 6.2.1(rollup@4.41.1)(typescript@5.7.3) + rollup-plugin-dts: 6.2.1(rollup@4.41.1)(typescript@5.8.3) scule: 1.3.0 tinyglobby: 0.2.13 untyped: 1.5.2 optionalDependencies: - typescript: 5.7.3 + typescript: 5.8.3 transitivePeerDependencies: - sass - supports-color @@ -8607,18 +8570,6 @@ snapshots: - supports-color - typescript - vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0): - dependencies: - esbuild: 0.24.2 - postcss: 8.5.3 - rollup: 4.41.1 - optionalDependencies: - '@types/node': 22.13.4 - fsevents: 2.3.3 - jiti: 2.4.2 - tsx: 4.19.2 - yaml: 2.8.0 - vite@6.3.5(@types/node@22.13.4)(jiti@2.4.2)(tsx@4.19.2)(yaml@2.8.0): dependencies: esbuild: 0.25.4 @@ -8754,17 +8705,6 @@ snapshots: dependencies: vue: 3.5.13(typescript@5.8.3) - vue@3.5.13(typescript@5.7.3): - dependencies: - '@vue/compiler-dom': 3.5.13 - '@vue/compiler-sfc': 3.5.13 - '@vue/runtime-dom': 3.5.13 - '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.7.3)) - '@vue/shared': 3.5.13 - optionalDependencies: - typescript: 5.7.3 - optional: true - vue@3.5.13(typescript@5.8.3): dependencies: '@vue/compiler-dom': 3.5.13 diff --git a/test/src/examples.ts b/test/src/examples.ts index 17a9be0..e433b22 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,8 +1,10 @@ import test from './example.sciux?raw' -import angle from './math/angle.sciux?raw' +import angle from './template/math/angle.sciux?raw' +import widget from './template/widget.sciux?raw' export default { test, + widget, '@sciux/math': { angle, }, diff --git a/test/src/math/angle.sciux b/test/src/template/math/angle.sciux similarity index 83% rename from test/src/math/angle.sciux rename to test/src/template/math/angle.sciux index 32cd505..d179249 100644 --- a/test/src/math/angle.sciux +++ b/test/src/template/math/angle.sciux @@ -1,7 +1,7 @@ - + diff --git a/test/src/template/widget.sciux b/test/src/template/widget.sciux new file mode 100644 index 0000000..8f7d842 --- /dev/null +++ b/test/src/template/widget.sciux @@ -0,0 +1,39 @@ + + This is a triangle, it's three sides are following the Pythagorean theorem. + c = \pm\sqrt{a^2 + b^2} + Let's see the graph + + + + Use Python to calculate it: + + def pythagorean(a, b): + return (a**2 + b**2)**0.5 + + + + Use JavaScript to calculate it: + + function pythagorean(a, b) { + return Math.sqrt(a**2 + b**2) + } + + + + + + a Value + b Value + Result + 3 + 4 + 5 + 5 + 12 + 13 + 8 + 15 + 17 +
+ + diff --git a/test/tsconfig.json b/test/tsconfig.json index e678aec..428a346 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -8,6 +8,9 @@ /* Bundler mode */ "moduleResolution": "bundler", + "paths": { + "#/*": ["./src/template/*"] + }, "allowImportingTsExtensions": true, /* Linting */ From 935c1768ddd4eb04324bffa6d1281c2ec3f72e03 Mon Sep 17 00:00:00 2001 From: Acbox Date: Sun, 15 Jun 2025 00:43:48 +0800 Subject: [PATCH 06/31] feat: line --- packages/math/src/index.ts | 1 + packages/math/src/line/index.ts | 40 ++++++++++++++++++++++++++++++ packages/sciux/src/math.ts | 3 ++- test/src/template/math/angle.sciux | 8 +++--- 4 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 packages/math/src/line/index.ts diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 83bf482..596e458 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -1,2 +1,3 @@ export * from './angle' +export * from './line' export * from './shared' diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts new file mode 100644 index 0000000..b7fcf44 --- /dev/null +++ b/packages/math/src/line/index.ts @@ -0,0 +1,40 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { LineType } from '../shared' +import { resolveDasharray } from '../utils/line' +import { generateTexNode } from '../utils/tex' + +const T = type({ + from: [type.number, type.number], + to: [type.number, type.number], + value: type.string, + type: LineType, +}) + +export const line = defineComponent<'line', typeof T.infer>((attrs) => { + return { + name: 'line', + defaults: { + type: 'solid', + value: '', + }, + attrs: T, + setup(_children) { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`) + path.setAttribute('stroke', 'black') + path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + const texElement = generateTexNode(attrs.value?.value) + const texPosition = [ + attrs.from.value[0] + (attrs.to.value[0] - attrs.from.value[0]) / 2, + attrs.from.value[1] + (attrs.to.value[1] - attrs.from.value[1]) / 2, + ] + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.setAttribute('transform', `translate(${texPosition[0]}, ${texPosition[1]})`) + texContainer.append(texElement) + container.append(path, texContainer) + return container + }, + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index c164b33..9911f23 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,5 +1,5 @@ import type { RegisterContext } from './types' -import { angle, arc, bounding, endPoint, origin, startPoint } from '@sciux/math' +import { angle, arc, bounding, endPoint, line, origin, startPoint } from '@sciux/math' export default function ({ components }: RegisterContext): void { components.set('angle', angle) @@ -8,6 +8,7 @@ export default function ({ components }: RegisterContext): void { components.set('end-point', endPoint) components.set('origin', origin) components.set('start-point', startPoint) + components.set('line', line) } export * from '@sciux/math' diff --git a/test/src/template/math/angle.sciux b/test/src/template/math/angle.sciux index d179249..d410495 100644 --- a/test/src/template/math/angle.sciux +++ b/test/src/template/math/angle.sciux @@ -1,8 +1,10 @@ - + + + - - \ No newline at end of file + + \ No newline at end of file From bff91a3e3ce638b91787d5efdec42970f1e5cd6f Mon Sep 17 00:00:00 2001 From: Acbox Date: Tue, 17 Jun 2025 12:24:54 +0800 Subject: [PATCH 07/31] feat: line and it's dependent comps --- packages/math/src/angle/index.ts | 14 ++++++--- packages/math/src/angle/points.ts | 10 +++---- packages/math/src/line/index.ts | 11 +++++++ packages/math/src/line/points.ts | 47 ++++++++++++++++++++++++++++++ packages/sciux/src/index.ts | 4 +-- packages/sciux/src/layout.ts | 15 +++++----- packages/sciux/src/math.ts | 15 ++++------ packages/sciux/src/model.ts | 10 +++---- packages/sciux/src/types.ts | 5 ++-- packages/sciux/src/widget.ts | 17 ++++++----- pnpm-lock.yaml | 22 +++++++------- pnpm-workspace.yaml | 2 +- test/src/template/math/angle.sciux | 22 +++++++------- 13 files changed, 128 insertions(+), 66 deletions(-) create mode 100644 packages/math/src/line/points.ts diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index 7fa2dfd..cf0b86c 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -2,6 +2,9 @@ import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { resolveDasharray } from '../utils/line' +import { arc } from './arc' +import { bounding } from './bouding' +import { angleEndPoint, angleStartPoint, origin } from './points' const T = type({ x: 'number', @@ -17,6 +20,12 @@ const T = type({ }) export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { + const space = new Map() + space.set('arc', arc) + space.set('bounding', bounding) + space.set('start-point', angleStartPoint) + space.set('end-point', angleEndPoint) + space.set('origin', origin) return { name: 'angle', attrs: T, @@ -69,9 +78,6 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { startSide: attrs.startSide, endSide: attrs.endSide, }, + space, } }) - -export * from './arc' -export * from './bouding' -export * from './points' diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index f824cd1..2063fea 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -1,7 +1,7 @@ import { defineComponent } from 'sciux-laplace' import { InfoPointType } from '../shared' -export const startPoint = defineComponent<'start-point', typeof InfoPointType.infer, { +export const angleStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, { x: number y: number startSide: number @@ -10,7 +10,7 @@ export const startPoint = defineComponent<'start-point', typeof InfoPointType.in return { name: 'start-point', attrs: InfoPointType, - provides: { + globals: { [attrs.as.value]: [ context.startSide * Math.cos(context.from * Math.PI / 180), context.startSide * Math.sin(context.from * Math.PI / 180), @@ -19,7 +19,7 @@ export const startPoint = defineComponent<'start-point', typeof InfoPointType.in } }) -export const endPoint = defineComponent<'end-point', typeof InfoPointType.infer, { +export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.infer, { x: number y: number endSide: number @@ -28,7 +28,7 @@ export const endPoint = defineComponent<'end-point', typeof InfoPointType.infer, return { name: 'end-point', attrs: InfoPointType, - provides: { + globals: { [attrs.as.value]: [ context.endSide * Math.cos(context.to * Math.PI / 180), context.endSide * Math.sin(context.to * Math.PI / 180), @@ -44,7 +44,7 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, { return { name: 'origin', attrs: InfoPointType, - provides: { + globals: { [attrs.as.value]: [context.x, context.y], }, } diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index b7fcf44..e190e4a 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -3,6 +3,7 @@ import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { resolveDasharray } from '../utils/line' import { generateTexNode } from '../utils/tex' +import { lineEndPoint, lineStartPoint } from './points' const T = type({ from: [type.number, type.number], @@ -12,12 +13,19 @@ const T = type({ }) export const line = defineComponent<'line', typeof T.infer>((attrs) => { + const space = new Map() + space.set('start-point', lineStartPoint) + space.set('end-point', lineEndPoint) return { name: 'line', defaults: { type: 'solid', value: '', }, + provides: { + from: attrs.from.value, + to: attrs.to.value, + }, attrs: T, setup(_children) { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') @@ -36,5 +44,8 @@ export const line = defineComponent<'line', typeof T.infer>((attrs) => { container.append(path, texContainer) return container }, + space, } }) + +export * from './points' diff --git a/packages/math/src/line/points.ts b/packages/math/src/line/points.ts new file mode 100644 index 0000000..e98f6dd --- /dev/null +++ b/packages/math/src/line/points.ts @@ -0,0 +1,47 @@ +import { defineComponent } from 'sciux-laplace' +import { InfoPointType } from '../shared' +import { generateTexNode } from '../utils/tex' + +export const lineStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, { + from: [number, number] +}>((attrs, context) => { + return { + name: 'start-point', + attrs: InfoPointType, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const texElement = generateTexNode(attrs.value?.value) + container.setAttribute('transform', `translate(${context.from[0]}, ${context.from[1]})`) + container.append(texElement) + return container + }, + globals: { + [attrs.as.value]: context.from, + }, + } +}) + +export const lineEndPoint = defineComponent<'end-point', typeof InfoPointType.infer, { + to: [number, number] +}>((attrs, context) => { + return { + name: 'end-point', + attrs: InfoPointType, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const texElement = generateTexNode(attrs.value?.value) + container.setAttribute('transform', `translate(${context.to[0]}, ${context.to[1]})`) + container.append(texElement) + return container + }, + globals: { + [attrs.as.value]: context.to, + }, + } +}) diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts index bbf1d67..cc66e5e 100644 --- a/packages/sciux/src/index.ts +++ b/packages/sciux/src/index.ts @@ -1,12 +1,12 @@ import type { RegisterContext } from './types' -import { animations, components, flows, textModes } from 'sciux-laplace' +import { animations, flows, root, textModes } from 'sciux-laplace' import layout from './layout' import math from './math' import model from './model' import widget from './widget' const defaultContext: RegisterContext = { - components, + root, flows, animations, textModes, diff --git a/packages/sciux/src/layout.ts b/packages/sciux/src/layout.ts index ac31b72..415ab8c 100644 --- a/packages/sciux/src/layout.ts +++ b/packages/sciux/src/layout.ts @@ -1,14 +1,13 @@ -import type { Component } from 'sciux-laplace' import type { RegisterContext } from './types' import { align, block, columns, flexbox, grid, rows } from '@sciux/layout' -export default function ({ components }: RegisterContext): void { - components.set('block', block) - components.set('flexbox', flexbox as Component) - components.set('rows', rows as Component) - components.set('columns', columns as Component) - components.set('grid', grid) - components.set('align', align) +export default function ({ root }: RegisterContext): void { + root.set('align', align) + root.set('block', block) + root.set('flexbox', flexbox) + root.set('rows', rows) + root.set('columns', columns) + root.set('grid', grid) } export * from '@sciux/layout' diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 9911f23..c9352fb 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,14 +1,9 @@ -import type { RegisterContext } from './types' -import { angle, arc, bounding, endPoint, line, origin, startPoint } from '@sciux/math' +import { angle, line } from '@sciux/math' +import { canvasSpace } from './widget' -export default function ({ components }: RegisterContext): void { - components.set('angle', angle) - components.set('bounding', bounding) - components.set('arc', arc) - components.set('end-point', endPoint) - components.set('origin', origin) - components.set('start-point', startPoint) - components.set('line', line) +export default function (): void { + canvasSpace.set('angle', angle) + canvasSpace.set('line', line) } export * from '@sciux/math' diff --git a/packages/sciux/src/model.ts b/packages/sciux/src/model.ts index 633ec9d..bbec962 100644 --- a/packages/sciux/src/model.ts +++ b/packages/sciux/src/model.ts @@ -1,11 +1,11 @@ import type { RegisterContext } from './types' import { button, checkbox, input, slider } from '@sciux/model' -export default function ({ components }: RegisterContext): void { - components.set('button', button) - components.set('input', input) - components.set('slider', slider) - components.set('checkbox', checkbox) +export default function ({ root }: RegisterContext): void { + root.set('button', button) + root.set('input', input) + root.set('slider', slider) + root.set('checkbox', checkbox) } export * from '@sciux/model' diff --git a/packages/sciux/src/types.ts b/packages/sciux/src/types.ts index dfe2ccd..4ec4b80 100644 --- a/packages/sciux/src/types.ts +++ b/packages/sciux/src/types.ts @@ -1,11 +1,10 @@ -import type { animations, components, flows, textModes } from 'sciux-laplace' +import type { animations, ComponentSpace, flows, textModes } from 'sciux-laplace' -export type Components = typeof components export type Flows = typeof flows export type Animations = typeof animations export type TextModes = typeof textModes export interface RegisterContext { - components: Components + root: ComponentSpace flows: Flows animations: Animations textModes: TextModes diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts index 3c56e14..ee36f20 100644 --- a/packages/sciux/src/widget.ts +++ b/packages/sciux/src/widget.ts @@ -1,13 +1,16 @@ +import type { ComponentSpace } from 'sciux-laplace' import type { RegisterContext } from './types' import { canvas, code, link, table, tex } from '@sciux/widget' -import { TextMode } from 'sciux-laplace' +import { TextMode, withSpace } from 'sciux-laplace' -export default function ({ components, textModes }: RegisterContext): void { - components.set('table', table) - components.set('canvas', canvas) - components.set('link', link) - components.set('code', code) - components.set('tex', tex) +export const canvasSpace: ComponentSpace = new Map() + +export default function ({ root, textModes }: RegisterContext): void { + root.set('table', table) + root.set('canvas', withSpace(canvas, canvasSpace)) + root.set('link', link) + root.set('code', code) + root.set('tex', tex) textModes.set('code', TextMode.RCDATA) textModes.set('tex', TextMode.RCDATA) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 961d8b6..9ba5377 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-alpha.13 - version: 0.0.1-alpha.13 + specifier: v0.0.1-beta.6 + version: 0.0.1-beta.6 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -187,7 +187,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 packages/math: dependencies: @@ -202,7 +202,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 packages/model: dependencies: @@ -214,7 +214,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 packages/sciux: dependencies: @@ -232,7 +232,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 packages/widget: dependencies: @@ -250,7 +250,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-alpha.13 + version: 0.0.1-beta.6 devDependencies: typescript: specifier: ~5.8.3 @@ -3687,8 +3687,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-alpha.13: - resolution: {integrity: sha512-gFQi+uJ90H+hEZqDsJrGO61iUsY+xHNmlGchd9wyy5LOmVnF05nY+6zNmDDEWd7xHp5Mix7IPNVLlNuuBpgEmQ==} + sciux-laplace@0.0.1-beta.6: + resolution: {integrity: sha512-kHTTtQoF3BB+NAwI6ZV6c+LZRWwwpNsFj/jrau97+aJSClKifauzubWzU5p4ofszaKUc18GtUdJo9PhjtkzlDw==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -7993,7 +7993,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-alpha.13: + sciux-laplace@0.0.1-beta.6: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index f724f30..1ce840f 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.1 + sciux-laplace: v0.0.1-beta.6 diff --git a/test/src/template/math/angle.sciux b/test/src/template/math/angle.sciux index d410495..aba33ff 100644 --- a/test/src/template/math/angle.sciux +++ b/test/src/template/math/angle.sciux @@ -1,10 +1,12 @@ - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file From ddf3f2452a6a33666b231612e606194d15d97cf9 Mon Sep 17 00:00:00 2001 From: Acbox Date: Tue, 17 Jun 2025 13:08:17 +0800 Subject: [PATCH 08/31] feat: figure --- packages/math/src/figure/index.ts | 45 +++++++++++++++++++++++++++++ packages/math/src/figure/points.ts | 27 +++++++++++++++++ packages/math/src/index.ts | 1 + packages/sciux/src/math.ts | 3 +- test/src/examples.ts | 2 ++ test/src/template/math/figure.sciux | 9 ++++++ 6 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 packages/math/src/figure/index.ts create mode 100644 packages/math/src/figure/points.ts create mode 100644 test/src/template/math/figure.sciux diff --git a/packages/math/src/figure/index.ts b/packages/math/src/figure/index.ts new file mode 100644 index 0000000..fa31fb0 --- /dev/null +++ b/packages/math/src/figure/index.ts @@ -0,0 +1,45 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { points } from './points' + +const T = type({ + x: type.number, + y: type.number, + path: type.string.optional(), +}) + +export const figure = defineComponent<'figure', typeof T.infer>((attrs) => { + const path: [string, number, number?][] = [] + const space = new Map() + Object.entries(points).forEach(([name, component]) => { + space.set(name, component) + }) + return { + name: 'figure', + attrs: T, + defaults: { + x: 0, + y: 0, + }, + setup(children) { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path') + children() + if (attrs.path?.value) { + pathElement.setAttribute('d', attrs.path.value) + } + else { + pathElement.setAttribute('d', path.map(([name, x, y]) => `${name}${x} ${y}`).join(' ')) + } + pathElement.setAttribute('stroke', 'black') + pathElement.setAttribute('fill', 'none') + container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) + container.append(pathElement) + return container + }, + provides: { + path, + }, + space, + } +}) diff --git a/packages/math/src/figure/points.ts b/packages/math/src/figure/points.ts new file mode 100644 index 0000000..09d2aa9 --- /dev/null +++ b/packages/math/src/figure/points.ts @@ -0,0 +1,27 @@ +import type { Component } from 'sciux-laplace' +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' + +export const ControlPointType = type(`'m' | 'l' | 'h' | 'v' | 'c' | 'z' | 's' | 'q' | 't' | 'a'`) +const T = type({ + x: type.number.optional(), + y: type.number.optional(), +}) + +export function generateControlPoint(name: typeof ControlPointType.infer): Component | null { + if (ControlPointType(name) instanceof type.errors) { + return null + } + return defineComponent((attrs, context) => { + context.path.push([name, attrs.x?.value ?? attrs.y?.value ?? 0, attrs.y?.value]) + return { + name, + attrs: T, + } + }) +} + +const pointSet = ['m', 'l', 'h', 'v', 'c', 'z', 's', 'q', 't', 'a'] +export const points = Object.fromEntries(pointSet.map(name => [name, generateControlPoint(name as typeof ControlPointType.infer)])) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 596e458..0703762 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -1,3 +1,4 @@ export * from './angle' +export * from './figure' export * from './line' export * from './shared' diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index c9352fb..8f94e33 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,9 +1,10 @@ -import { angle, line } from '@sciux/math' +import { angle, figure, line } from '@sciux/math' import { canvasSpace } from './widget' export default function (): void { canvasSpace.set('angle', angle) canvasSpace.set('line', line) + canvasSpace.set('figure', figure) } export * from '@sciux/math' diff --git a/test/src/examples.ts b/test/src/examples.ts index e433b22..4aefa65 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,5 +1,6 @@ import test from './example.sciux?raw' import angle from './template/math/angle.sciux?raw' +import figure from './template/math/figure.sciux?raw' import widget from './template/widget.sciux?raw' export default { @@ -7,5 +8,6 @@ export default { widget, '@sciux/math': { angle, + figure, }, } diff --git a/test/src/template/math/figure.sciux b/test/src/template/math/figure.sciux new file mode 100644 index 0000000..5b4c942 --- /dev/null +++ b/test/src/template/math/figure.sciux @@ -0,0 +1,9 @@ + +
+ + + + + +
+ \ No newline at end of file From abc5900f30da18d6e8497abc302363578d10ab88 Mon Sep 17 00:00:00 2001 From: Acbox Date: Tue, 17 Jun 2025 14:50:41 +0800 Subject: [PATCH 09/31] feat: circle --- packages/math/src/circle/index.ts | 44 ++++++++++++++++++++++++ packages/math/src/circle/points.ts | 53 +++++++++++++++++++++++++++++ packages/math/src/index.ts | 1 + packages/sciux/src/math.ts | 3 +- test/src/examples.ts | 2 ++ test/src/template/math/circle.sciux | 3 ++ 6 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 packages/math/src/circle/index.ts create mode 100644 packages/math/src/circle/points.ts create mode 100644 test/src/template/math/circle.sciux diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts new file mode 100644 index 0000000..ecb4654 --- /dev/null +++ b/packages/math/src/circle/index.ts @@ -0,0 +1,44 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { LineType } from '../shared' +import { describeArc } from '../utils/arc-path' +import { resolveDasharray } from '../utils/line' +import { edgePoint } from './points' + +const T = type({ + x: type.number, + y: type.number, + radius: type.number, + from: type.number, + to: type.number, + type: LineType, +}) + +export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { + const space = new Map() + space.set('edge-point', edgePoint) + space.set('origin', origin) + return { + name: 'circle', + attrs: T, + defaults: { + from: 0, + to: 360, + type: 'solid', + x: 0, + y: 0, + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('d', describeArc([attrs.x.value, attrs.y.value], attrs.radius.value, attrs.from.value, attrs.to.value)) + path.setAttribute('stroke', 'black') + path.setAttribute('fill', 'none') + path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + container.append(path) + return container + }, + space, + } +}) diff --git a/packages/math/src/circle/points.ts b/packages/math/src/circle/points.ts new file mode 100644 index 0000000..a41cf19 --- /dev/null +++ b/packages/math/src/circle/points.ts @@ -0,0 +1,53 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' + +const EdgePointType = type({ + value: type.number, + as: type.string, +}) + +export const edgePoint = defineComponent< + 'edge-points', + typeof EdgePointType.infer, + { + x: number + y: number + radius: number + } +>((attrs, context) => { + const { x, y, radius } = context + const { value, as } = attrs + const point = [ + x + radius * Math.cos(value.value), + y + radius * Math.sin(value.value), + ] + return { + name: 'edge-points', + attrs: EdgePointType, + globals: { + [as.value]: point, + }, + } +}) + +const OriginType = type({ + as: type.string, +}) + +export const origin = defineComponent< + 'origin', + typeof OriginType.infer, + { + x: number + y: number + } +>((attrs, context) => { + const { as } = attrs + return { + name: 'origin', + attrs: OriginType, + globals: { + [as.value]: [context.x, context.y], + }, + } +}) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 0703762..6399d9b 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -1,4 +1,5 @@ export * from './angle' +export * from './circle' export * from './figure' export * from './line' export * from './shared' diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 8f94e33..266f593 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,10 +1,11 @@ -import { angle, figure, line } from '@sciux/math' +import { angle, circle, figure, line } from '@sciux/math' import { canvasSpace } from './widget' export default function (): void { canvasSpace.set('angle', angle) canvasSpace.set('line', line) canvasSpace.set('figure', figure) + canvasSpace.set('circle', circle) } export * from '@sciux/math' diff --git a/test/src/examples.ts b/test/src/examples.ts index 4aefa65..316d0d1 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,5 +1,6 @@ import test from './example.sciux?raw' import angle from './template/math/angle.sciux?raw' +import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' import widget from './template/widget.sciux?raw' @@ -9,5 +10,6 @@ export default { '@sciux/math': { angle, figure, + circle, }, } diff --git a/test/src/template/math/circle.sciux b/test/src/template/math/circle.sciux new file mode 100644 index 0000000..9deaf33 --- /dev/null +++ b/test/src/template/math/circle.sciux @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 6ad88ab3bf46aaf9dac0b27ea6c968f10830c3ff Mon Sep 17 00:00:00 2001 From: Acbox Date: Wed, 18 Jun 2025 23:56:56 +0800 Subject: [PATCH 10/31] feat(math): add color pallete support for math comps --- packages/math/package.json | 1 + packages/math/src/angle/arc.ts | 3 +- packages/math/src/angle/bouding.ts | 3 +- packages/math/src/angle/index.ts | 5 +- packages/math/src/circle/index.ts | 3 +- packages/math/src/figure/index.ts | 3 +- packages/math/src/line/index.ts | 3 +- packages/sciux/package.json | 2 + packages/theme-default/styles/vars.css | 12 ++--- packages/utils-theme/src/theme.ts | 5 +- packages/widget/src/tex.ts | 8 ++- pnpm-lock.yaml | 74 ++++++++++++++++---------- test/index.html | 7 +-- test/package.json | 2 +- test/src/main.ts | 3 +- 15 files changed, 84 insertions(+), 50 deletions(-) diff --git a/packages/math/package.json b/packages/math/package.json index efcec99..f4787d9 100644 --- a/packages/math/package.json +++ b/packages/math/package.json @@ -30,6 +30,7 @@ "start": "tsx src/index.ts" }, "dependencies": { + "@sciux/utils-theme": "workspace:^", "@sciux/widget": "workspace:^", "@vue/reactivity": "^3.5.14", "arktype": "^2.1.20", diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 8d83000..6538330 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' @@ -28,7 +29,7 @@ export const arc = defineComponent<'arc', typeof T.infer, { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to)) - path.setAttribute('stroke', 'black') + path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) const texElement = generateTexNode(attrs.value?.value) diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts index c8b6e55..026f1cd 100644 --- a/packages/math/src/angle/bouding.ts +++ b/packages/math/src/angle/bouding.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' @@ -31,7 +32,7 @@ export const bounding = defineComponent<'bounding', typeof T.infer, { const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', pathString) path.setAttribute('stroke-width', '1') - path.setAttribute('stroke', 'black') + path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) const texElement = generateTexNode(attrs.value?.value) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index cf0b86c..ec1a7df 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' @@ -54,7 +55,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { startSideLine.setAttribute('y1', startSide.y1.toString()) startSideLine.setAttribute('x2', startSide.x2.toString()) startSideLine.setAttribute('y2', startSide.y2.toString()) - startSideLine.setAttribute('stroke', 'black') + startSideLine.setAttribute('stroke', theme.pallete('primary')) startSideLine.setAttribute('stroke-width', '1') startSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.startSideType.value)) container.append(startSideLine) @@ -63,7 +64,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { endSideLine.setAttribute('y1', endSide.y1.toString()) endSideLine.setAttribute('x2', endSide.x2.toString()) endSideLine.setAttribute('y2', endSide.y2.toString()) - endSideLine.setAttribute('stroke', 'black') + endSideLine.setAttribute('stroke', theme.pallete('primary')) endSideLine.setAttribute('stroke-width', '1') endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value)) container.append(endSideLine) diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts index ecb4654..90bb515 100644 --- a/packages/math/src/circle/index.ts +++ b/packages/math/src/circle/index.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' @@ -33,7 +34,7 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', describeArc([attrs.x.value, attrs.y.value], attrs.radius.value, attrs.from.value, attrs.to.value)) - path.setAttribute('stroke', 'black') + path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) container.append(path) diff --git a/packages/math/src/figure/index.ts b/packages/math/src/figure/index.ts index fa31fb0..0794b86 100644 --- a/packages/math/src/figure/index.ts +++ b/packages/math/src/figure/index.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { points } from './points' @@ -31,7 +32,7 @@ export const figure = defineComponent<'figure', typeof T.infer>((attrs) => { else { pathElement.setAttribute('d', path.map(([name, x, y]) => `${name}${x} ${y}`).join(' ')) } - pathElement.setAttribute('stroke', 'black') + pathElement.setAttribute('stroke', theme.pallete('primary')) pathElement.setAttribute('fill', 'none') container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) container.append(pathElement) diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index e190e4a..51733de 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent } from 'sciux-laplace' import { LineType } from '../shared' @@ -31,7 +32,7 @@ export const line = defineComponent<'line', typeof T.infer>((attrs) => { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`) - path.setAttribute('stroke', 'black') + path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) const texElement = generateTexNode(attrs.value?.value) const texPosition = [ diff --git a/packages/sciux/package.json b/packages/sciux/package.json index 51e1092..ec4fe9f 100644 --- a/packages/sciux/package.json +++ b/packages/sciux/package.json @@ -31,7 +31,9 @@ }, "dependencies": { "@sciux/layout": "workspace:*", + "@sciux/math": "workspace:*", "@sciux/model": "workspace:*", + "@sciux/utils-theme": "workspace:*", "@sciux/widget": "workspace:*", "sciux-laplace": "catalog:" } diff --git a/packages/theme-default/styles/vars.css b/packages/theme-default/styles/vars.css index d28640e..0aef616 100644 --- a/packages/theme-default/styles/vars.css +++ b/packages/theme-default/styles/vars.css @@ -8,12 +8,12 @@ :root { --sci-primary: #FFFFFF; --sci-note: #C7EDCC; - --sci-warning: #F59E0B; - --sci-accent: #FFFF00; - --sci-alert: #EF4444; - --sci-info: #3B82F6; - --sci-success: #10B981; - --sci-creative: #F472B6; + --sci-warning: #F7B051; + --sci-accent: #F5F779; + --sci-alert: #F76E67; + --sci-info: #4DDEF6; + --sci-success: #66ECDD; + --sci-creative: #CCB8E4; } /* Transparent Marker Colors */ diff --git a/packages/utils-theme/src/theme.ts b/packages/utils-theme/src/theme.ts index 0b0359f..18bb25c 100644 --- a/packages/utils-theme/src/theme.ts +++ b/packages/utils-theme/src/theme.ts @@ -1,6 +1,7 @@ export function isCSSVariableExist(variableName: string): boolean { - const rootStyles = document.documentElement.style - return rootStyles.getPropertyValue(variableName).trim() !== '' + const style = window.getComputedStyle(document.documentElement) + const value = style.getPropertyValue(variableName).trim() + return value !== '' } export function size(name: string | number): string { diff --git a/packages/widget/src/tex.ts b/packages/widget/src/tex.ts index 03f279a..93afdd4 100644 --- a/packages/widget/src/tex.ts +++ b/packages/widget/src/tex.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { renderToString } from 'katex' import { defineComponent } from 'sciux-laplace' @@ -24,11 +25,16 @@ export default defineComponent<'tex', typeof T.infer, { container = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject') container.setAttribute('width', '100%') container.setAttribute('height', '100%') + const subContainer = document.createElement('div') + subContainer.style.color = theme.pallete('note') + subContainer.innerHTML = html + container.append(subContainer) } else { container = document.createElement('div') + container.style.color = theme.pallete('primary') + container.innerHTML = html } - container.innerHTML = html return container }, } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e96f50..bf4b78b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,6 +194,9 @@ importers: packages/math: dependencies: + '@sciux/utils-theme': + specifier: workspace:^ + version: link:../utils-theme '@sciux/widget': specifier: workspace:^ version: link:../widget @@ -224,9 +227,15 @@ importers: '@sciux/layout': specifier: workspace:* version: link:../layout + '@sciux/math': + specifier: workspace:* + version: link:../math '@sciux/model': specifier: workspace:* version: link:../model + '@sciux/utils-theme': + specifier: workspace:* + version: link:../utils-theme '@sciux/widget': specifier: workspace:* version: link:../widget @@ -255,6 +264,42 @@ importers: specifier: ^3.4.2 version: 3.4.2 + packages/utils-theme: + dependencies: + '@vue/reactivity': + specifier: ^3.5.14 + version: 3.5.14 + arktype: + specifier: ^2.1.20 + version: 2.1.20 + sciux-laplace: + specifier: 'catalog:' + version: 0.0.1-beta.6 + + packages/widget: + dependencies: + '@sciux/layout': + specifier: workspace:^ + version: link:../layout + '@sciux/utils-theme': + specifier: workspace:^ + version: link:../utils-theme + '@vue/reactivity': + specifier: ^3.5.14 + version: 3.5.14 + arktype: + specifier: ^2.1.20 + version: 2.1.20 + katex: + specifier: ^0.16.22 + version: 0.16.22 + sciux-laplace: + specifier: 'catalog:' + version: 0.0.1-beta.6 + shiki: + specifier: ^3.4.2 + version: 3.4.2 + test: dependencies: '@sciux/layout': @@ -277,11 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' -<<<<<<< HEAD version: 0.0.1-beta.6 -======= - version: 0.0.1-beta.1 ->>>>>>> main devDependencies: typescript: specifier: ~5.8.3 @@ -3679,12 +3720,6 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} -<<<<<<< HEAD -======= - sciux-laplace@0.0.1-beta.1: - resolution: {integrity: sha512-6+JtNbEnKen1GjsS8IWnvD0WOuhMAg+vqBZUqiJGqkLJ2DgNat/pct/nzAwrzN+5AEUY2fL8M4MjVF8onYGVEA==} - ->>>>>>> main sciux-laplace@0.0.1-beta.6: resolution: {integrity: sha512-kHTTtQoF3BB+NAwI6ZV6c+LZRWwwpNsFj/jrau97+aJSClKifauzubWzU5p4ofszaKUc18GtUdJo9PhjtkzlDw==} @@ -4978,11 +5013,7 @@ snapshots: '@iconify/utils@2.3.0': dependencies: -<<<<<<< HEAD - '@antfu/install-pkg': 1.0.0 -======= '@antfu/install-pkg': 1.1.0 ->>>>>>> main '@antfu/utils': 8.1.1 '@iconify/types': 2.0.0 debug: 4.4.1 @@ -7977,21 +8008,6 @@ snapshots: dependencies: queue-microtask: 1.2.3 -<<<<<<< HEAD -======= - sciux-laplace@0.0.1-beta.1: - dependencies: - '@vue/reactivity': 3.5.14 - '@vue/shared': 3.5.14 - '@xmldom/xmldom': 0.9.8 - arktype: 2.1.20 - clsx: 2.1.1 - css-what: 6.1.0 - morphdom: 2.7.5 - parse-entities: 4.0.2 - xpath: 0.0.34 - ->>>>>>> main sciux-laplace@0.0.1-beta.6: dependencies: '@vue/reactivity': 3.5.14 diff --git a/test/index.html b/test/index.html index 2f3d692..f528c79 100644 --- a/test/index.html +++ b/test/index.html @@ -6,12 +6,13 @@ Vite + TS - +
- -
+ +
+ diff --git a/test/package.json b/test/package.json index 1ba3395..f28f424 100644 --- a/test/package.json +++ b/test/package.json @@ -3,7 +3,7 @@ "type": "module", "private": true, "scripts": { - "dev": "vite", + "test:dev": "vite", "preview": "vite preview" }, "dependencies": { diff --git a/test/src/main.ts b/test/src/main.ts index edb881c..8c8ffe3 100644 --- a/test/src/main.ts +++ b/test/src/main.ts @@ -1,6 +1,6 @@ import init, { render } from 'sciux' import examples from './examples' -import '@sciux/theme-default/styles/vars.css' +import '@sciux/theme-default/styles/main.css' const urlName = window.location.hash.slice(1) const app = document.getElementById('app')! @@ -48,6 +48,7 @@ function createItem(name: string, level: number, handler: () => void): any { function createRenderer(source: string) { return () => { app.innerHTML = '' + app.style.backgroundColor = 'var(--sci-background)' render(source, app) } } From 8b04be75f2674294466a595ea28e1e7ba1c08a3b Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 19 Jun 2025 15:16:21 +0800 Subject: [PATCH 11/31] feat: `` & `` & `` --- eslint.config.js | 6 ++ packages/math/src/axis/index.ts | 77 ++++++++++++++++++++++++++ packages/math/src/function/index.ts | 49 ++++++++++++++++ packages/math/src/function/point-on.ts | 19 +++++++ packages/math/src/index.ts | 3 + packages/math/src/plane/index.ts | 58 +++++++++++++++++++ packages/sciux/src/math.ts | 6 +- packages/utils-theme/src/theme.ts | 5 ++ pnpm-lock.yaml | 26 ++++----- pnpm-workspace.yaml | 2 +- test/src/examples.ts | 2 + test/src/template/math/angle.sciux | 3 +- test/src/template/math/plane.sciux | 5 ++ 13 files changed, 245 insertions(+), 16 deletions(-) create mode 100644 packages/math/src/axis/index.ts create mode 100644 packages/math/src/function/index.ts create mode 100644 packages/math/src/function/point-on.ts create mode 100644 packages/math/src/plane/index.ts create mode 100644 test/src/template/math/plane.sciux diff --git a/eslint.config.js b/eslint.config.js index 3f91a86..dd83a4b 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -5,4 +5,10 @@ export default antfu( { type: 'lib', }, + { + rules: { + 'unused-imports/no-unused-vars': 'warn', + + }, + }, ) diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts new file mode 100644 index 0000000..8aa01d9 --- /dev/null +++ b/packages/math/src/axis/index.ts @@ -0,0 +1,77 @@ +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' + +const T = type({ + x: type.number, + y: type.number, + division: type.number, + range: type('number[]'), + label: type.unknown, + direction: type.enumerated('top', 'bottom', 'left', 'right'), +}) +interface withLabelT { + label: (count: number) => string +} + +export const axis = defineComponent<'axis', typeof T.infer & withLabelT>((attrs) => { + return { + name: 'axis', + provides: { + division: attrs.division, + }, + defaults: { + division: 20, + label: (count: number) => count.toString(), + direction: 'right', + }, + setup(children) { + const resolve = (value: string): 1 | -1 => ['left', 'top'].includes(value) ? -1 : 1 + const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') + root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) + const axes = document.createElementNS('http://www.w3.org/2000/svg', 'g') + // axis line + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolve(attrs.direction.value)).toString()) + line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolve(attrs.direction.value)).toString()) + axes.append(line) + // axis arrow + const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon') + arrow.setAttribute('points', '0,0 -7,5 10,0 -7,-5 0,0') + arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolve(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'}) + rotate(${attrs.direction.value === 'left' ? '180' : attrs.direction.value === 'top' ? '270' : attrs.direction.value === 'bottom' ? '90' : '0'})`) + axes.append(arrow) + // axis ticks + const ticks = document.createElementNS('http://www.w3.org/2000/svg', 'g') + for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { + const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line') + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y1' : 'x1', '-2') + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y2' : 'x2', '2') + ticks.append(tick) + } + axes.append(ticks) + // axis labels + const labels = document.createElementNS('http://www.w3.org/2000/svg', 'g') + labels.setAttribute('stroke', 'none') + labels.setAttribute('text-anchor', 'middle') + labels.setAttribute('font-size', '12px') + labels.style.fontFamily = theme.font('math') + for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { + const label = document.createElementNS('http://www.w3.org/2000/svg', 'text') + label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x' : 'y', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) + label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y' : 'x', '16') + label.textContent = attrs.label.value(i) + labels.append(label) + } + axes.append(labels) + + axes.setAttribute('fill', theme.pallete('primary')) + axes.setAttribute('stroke', theme.pallete('primary')) + root.append(axes, ...children()) + + return root + }, + } +}) diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts new file mode 100644 index 0000000..cda8061 --- /dev/null +++ b/packages/math/src/function/index.ts @@ -0,0 +1,49 @@ +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { pointOn } from './point-on' + +const T = type({ + domain: type('number[]'), + division: type.number, + expr: type.unknown, +}) +interface withExprT { + expr: (x: number) => number +} + +export function describeImage(expr: (x: number) => number, domain: number[], division: number): string { + const points = [] + for (let x = domain[0]; x <= domain[1]; x += 1 / division) { + points.push([x * division, expr(x) * division]) + } + return `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}` +} + +export const func = defineComponent<'function', withExprT & typeof T.infer, { + division?: number +}>((attrs, context) => { + const space = new Map() + space.set('point-on', pointOn) + return { + name: 'function', + // attrs: T, + defaults: { + division: 1, + }, + provides: { + expr: attrs.expr, + }, + setup: (children) => { + const { domain, division, expr } = attrs + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('stroke', theme.pallete('info')) + path.setAttribute('fill', 'none') + path.setAttribute('d', describeImage(expr.value, domain.value, context.division ?? division.value)) + container.append(path, ...children()) + return container + }, + space, + } +}) diff --git a/packages/math/src/function/point-on.ts b/packages/math/src/function/point-on.ts new file mode 100644 index 0000000..c0448d7 --- /dev/null +++ b/packages/math/src/function/point-on.ts @@ -0,0 +1,19 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' + +const T = type({ + x: type.number, + as: type.string, +}) + +export const pointOn = defineComponent<'point-on', typeof T.infer, { + expr: (x: number) => number +}>((attrs, context) => { + return { + name: 'point-on', + attrs: T, + globals: { + [attrs.as.value]: context.expr(attrs.x.value), + }, + } + }) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 6399d9b..f9ae6ec 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -1,5 +1,8 @@ export * from './angle' +export * from './axis' export * from './circle' export * from './figure' +export * from './function' export * from './line' +export * from './plane' export * from './shared' diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts new file mode 100644 index 0000000..8af42e4 --- /dev/null +++ b/packages/math/src/plane/index.ts @@ -0,0 +1,58 @@ +import { type } from 'arktype' +import { defineComponent, ref } from 'sciux-laplace' +import { axis } from '../axis' + +const T = type({ + x: type.number, + y: type.number, + division: type.number, + domain: type('number[]'), + range: type('number[]'), + xLabel: type.unknown, + yLabel: type.unknown, +}) +interface withLabelT { + xLabel: (count: number) => string + yLabel: (count: number) => string +} + +export const plane = defineComponent<'plane', typeof T.infer & withLabelT>((attrs) => { + return { + name: 'plane', + provides: { + division: attrs.division, + }, + defaults: { + division: 20, + xLabel: (count: number) => count.toString(), + yLabel: (count: number) => count.toString(), + }, + setup(children) { + const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') + root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) + // x-axis + const xAxis = axis({ + x: attrs.x, + y: attrs.y, + division: attrs.division, + range: attrs.domain, + label: attrs.xLabel, + direction: ref('right'), + }, {}) + root.append( xAxis.setup?.(() => [])) + // y-axis + const yAxis = axis({ + x: attrs.x, + y: attrs.y, + division: attrs.division, + range: attrs.range, + label: attrs.yLabel, + direction: ref('top'), + }, {}) + root.append( yAxis.setup?.(() => [])) + root.append(...children()) + + return root + }, + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 266f593..bdb9b54 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,4 +1,5 @@ -import { angle, circle, figure, line } from '@sciux/math' +import { angle, axis, circle, figure, func, line, plane } from '@sciux/math' +import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' export default function (): void { @@ -6,6 +7,9 @@ export default function (): void { canvasSpace.set('line', line) canvasSpace.set('figure', figure) canvasSpace.set('circle', circle) + canvasSpace.set('function', func) + canvasSpace.set('axis', axis) + canvasSpace.set('plane', withSpace(plane, canvasSpace)) } export * from '@sciux/math' diff --git a/packages/utils-theme/src/theme.ts b/packages/utils-theme/src/theme.ts index 18bb25c..3acff69 100644 --- a/packages/utils-theme/src/theme.ts +++ b/packages/utils-theme/src/theme.ts @@ -23,3 +23,8 @@ export function dasharray(name: string): string { const variable = `--sci-dasharray-${name}` return isCSSVariableExist(variable) ? `var(${variable})` : name } + +export function font(name: string): string { + const variable = `--sci-font-${name}` + return isCSSVariableExist(variable) ? `var(${variable})` : name +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf4b78b..3c80b5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.6 - version: 0.0.1-beta.6 + specifier: v0.0.1-beta.7 + version: 0.0.1-beta.7 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -190,7 +190,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 packages/math: dependencies: @@ -208,7 +208,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 packages/model: dependencies: @@ -220,7 +220,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 packages/sciux: dependencies: @@ -241,7 +241,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 packages/theme-default: dependencies: @@ -259,7 +259,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 packages/widget: dependencies: @@ -295,7 +295,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -322,7 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.6 + version: 0.0.1-beta.7 devDependencies: typescript: specifier: ~5.8.3 @@ -3720,8 +3720,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-beta.6: - resolution: {integrity: sha512-kHTTtQoF3BB+NAwI6ZV6c+LZRWwwpNsFj/jrau97+aJSClKifauzubWzU5p4ofszaKUc18GtUdJo9PhjtkzlDw==} + sciux-laplace@0.0.1-beta.7: + resolution: {integrity: sha512-R88dSwAZ4FbW3cuWJazONw51ssBO87jeK/jvF3ImdW4NWfbrIP4SHJ3kq3/MZMOHMHCHMQhcVZVOLqtPPmFO5A==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8008,7 +8008,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-beta.6: + sciux-laplace@0.0.1-beta.7: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 1ce840f..fa41db2 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.6 + sciux-laplace: v0.0.1-beta.7 diff --git a/test/src/examples.ts b/test/src/examples.ts index 316d0d1..f8f2871 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -2,6 +2,7 @@ import test from './example.sciux?raw' import angle from './template/math/angle.sciux?raw' import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' +import plane from './template/math/plane.sciux?raw' import widget from './template/widget.sciux?raw' export default { @@ -11,5 +12,6 @@ export default { angle, figure, circle, + plane, }, } diff --git a/test/src/template/math/angle.sciux b/test/src/template/math/angle.sciux index aba33ff..1fdf026 100644 --- a/test/src/template/math/angle.sciux +++ b/test/src/template/math/angle.sciux @@ -1,4 +1,4 @@ - + @@ -9,4 +9,5 @@ + \ No newline at end of file diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux new file mode 100644 index 0000000..5ace5ff --- /dev/null +++ b/test/src/template/math/plane.sciux @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From ecc704927a4790bf2ec16d0a29cf79625ffc548d Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 21 Jun 2025 01:44:56 +0800 Subject: [PATCH 12/31] feat: plane grid --- packages/math/src/axis/index.ts | 18 ++++++----- packages/math/src/plane/index.ts | 52 +++++++++++++++++++++++++++--- test/src/template/math/plane.sciux | 2 +- 3 files changed, 59 insertions(+), 13 deletions(-) diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts index 8aa01d9..66bbbee 100644 --- a/packages/math/src/axis/index.ts +++ b/packages/math/src/axis/index.ts @@ -14,6 +14,8 @@ interface withLabelT { label: (count: number) => string } +export const resolveDirection = (value: string): 1 | -1 => ['left', 'top'].includes(value) ? -1 : 1 + export const axis = defineComponent<'axis', typeof T.infer & withLabelT>((attrs) => { return { name: 'axis', @@ -26,27 +28,26 @@ export const axis = defineComponent<'axis', typeof T.infer & withLabelT>((attrs) direction: 'right', }, setup(children) { - const resolve = (value: string): 1 | -1 => ['left', 'top'].includes(value) ? -1 : 1 const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const axes = document.createElementNS('http://www.w3.org/2000/svg', 'g') // axis line const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') - line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolve(attrs.direction.value)).toString()) - line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolve(attrs.direction.value)).toString()) + line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) + line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) axes.append(line) // axis arrow const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon') arrow.setAttribute('points', '0,0 -7,5 10,0 -7,-5 0,0') - arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolve(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'}) + arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'}) rotate(${attrs.direction.value === 'left' ? '180' : attrs.direction.value === 'top' ? '270' : attrs.direction.value === 'bottom' ? '90' : '0'})`) axes.append(arrow) // axis ticks const ticks = document.createElementNS('http://www.w3.org/2000/svg', 'g') for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line') - tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) - tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) + tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y1' : 'x1', '-2') tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y2' : 'x2', '2') ticks.append(tick) @@ -56,11 +57,12 @@ export const axis = defineComponent<'axis', typeof T.infer & withLabelT>((attrs) const labels = document.createElementNS('http://www.w3.org/2000/svg', 'g') labels.setAttribute('stroke', 'none') labels.setAttribute('text-anchor', 'middle') - labels.setAttribute('font-size', '12px') + labels.setAttribute('dominant-baseline', 'middle') + labels.setAttribute('font-size', theme.size('3xs')) labels.style.fontFamily = theme.font('math') for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { const label = document.createElementNS('http://www.w3.org/2000/svg', 'text') - label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x' : 'y', (i * attrs.division.value * resolve(attrs.direction.value)).toString()) + label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x' : 'y', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) label.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'y' : 'x', '16') label.textContent = attrs.label.value(i) labels.append(label) diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts index 8af42e4..6cd8fa2 100644 --- a/packages/math/src/plane/index.ts +++ b/packages/math/src/plane/index.ts @@ -1,3 +1,4 @@ +import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineComponent, ref } from 'sciux-laplace' import { axis } from '../axis' @@ -10,6 +11,8 @@ const T = type({ range: type('number[]'), xLabel: type.unknown, yLabel: type.unknown, + xDirection: type.enumerated('left', 'right'), + yDirection: type.enumerated('top', 'bottom'), }) interface withLabelT { xLabel: (count: number) => string @@ -26,6 +29,8 @@ export const plane = defineComponent<'plane', typeof T.infer & withLabelT>((attr division: 20, xLabel: (count: number) => count.toString(), yLabel: (count: number) => count.toString(), + xDirection: 'right', + yDirection: 'top', }, setup(children) { const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') @@ -36,8 +41,8 @@ export const plane = defineComponent<'plane', typeof T.infer & withLabelT>((attr y: attrs.y, division: attrs.division, range: attrs.domain, - label: attrs.xLabel, - direction: ref('right'), + label: ref((count: number) => count === 0 ? '' : attrs.xLabel.value(count)), + direction: attrs.xDirection, }, {}) root.append( xAxis.setup?.(() => [])) // y-axis @@ -46,9 +51,48 @@ export const plane = defineComponent<'plane', typeof T.infer & withLabelT>((attr y: attrs.y, division: attrs.division, range: attrs.range, - label: attrs.yLabel, - direction: ref('top'), + label: ref((count: number) => count === 0 ? '' : attrs.yLabel.value(count)), + direction: attrs.yDirection, }, {}) + const originLabel = attrs.xLabel ? attrs.xLabel.value(0) : attrs.yLabel ? attrs.yLabel.value(0) : '' + const origin = document.createElementNS('http://www.w3.org/2000/svg', 'text') + origin.setAttribute('x', (attrs.x.value + 10).toString()) + origin.setAttribute('y', (attrs.y.value + 10).toString()) + origin.style.fill = theme.pallete('primary') + origin.style.fontFamily = theme.font('math') + origin.style.fontSize = theme.size('3xs') + origin.style.textAnchor = 'middle' + origin.style.dominantBaseline = 'middle' + origin.textContent = originLabel + + // Grid + const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g') + grid.setAttribute('stroke', theme.pallete('primary')) + grid.setAttribute('stroke-width', '0.5') + grid.setAttribute('fill', 'none') + for (let i = attrs.domain.value[0]; i < attrs.domain.value[1]; i += 1) { + if (i === attrs.domain.value[0]) + continue + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.setAttribute('x1', (i * attrs.division.value).toString()) + line.setAttribute('y1', (attrs.range.value[0] * attrs.division.value).toString()) + line.setAttribute('x2', (i * attrs.division.value).toString()) + line.setAttribute('y2', (attrs.range.value[1] * attrs.division.value).toString()) + grid.append(line) + } + for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { + if (i === attrs.range.value[0]) + continue + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.setAttribute('x1', (attrs.domain.value[0] * attrs.division.value).toString()) + line.setAttribute('y1', (i * attrs.division.value).toString()) + line.setAttribute('x2', (attrs.domain.value[1] * attrs.division.value).toString()) + line.setAttribute('y2', (i * attrs.division.value).toString()) + grid.append(line) + } + + // Root + root.append(origin, grid) root.append( yAxis.setup?.(() => [])) root.append(...children()) diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux index 5ace5ff..3bd6ee8 100644 --- a/test/src/template/math/plane.sciux +++ b/test/src/template/math/plane.sciux @@ -1,5 +1,5 @@ - + \ No newline at end of file From 90d99e3b752b0a46e21eec705b19e11a54e081d6 Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 21 Jun 2025 20:35:24 +0800 Subject: [PATCH 13/31] feat: function-creation animation --- packages/math/src/function/index.ts | 37 +++++++++++++++++++++++++---- packages/sciux/src/index.ts | 1 + packages/sciux/src/math.ts | 9 +++++-- pnpm-lock.yaml | 26 ++++++++++---------- test/src/template/math/plane.sciux | 3 ++- 5 files changed, 55 insertions(+), 21 deletions(-) diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts index cda8061..e64984c 100644 --- a/packages/math/src/function/index.ts +++ b/packages/math/src/function/index.ts @@ -1,6 +1,6 @@ import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { pointOn } from './point-on' const T = type({ @@ -12,12 +12,22 @@ interface withExprT { expr: (x: number) => number } -export function describeImage(expr: (x: number) => number, domain: number[], division: number): string { +export function describeImage(expr: (x: number) => number, domain: number[], division: number): { points: number[][], length: number } { + let length = 0 const points = [] + let latestX = domain[0] + let latestY = expr(latestX) for (let x = domain[0]; x <= domain[1]; x += 1 / division) { - points.push([x * division, expr(x) * division]) + const point = [x * division, expr(x) * division] + length += Math.sqrt((point[0] - latestX) ** 2 + (point[1] - latestY) ** 2) + latestX = point[0] + latestY = point[1] + points.push(point) + } + return { + points, + length, } - return `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}` } export const func = defineComponent<'function', withExprT & typeof T.infer, { @@ -40,10 +50,27 @@ export const func = defineComponent<'function', withExprT & typeof T.infer, { const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('stroke', theme.pallete('info')) path.setAttribute('fill', 'none') - path.setAttribute('d', describeImage(expr.value, domain.value, context.division ?? division.value)) + path.id = 'function-path' + const { points } = describeImage(expr.value, domain.value, context.division ?? division.value) + path.setAttribute('d', `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}`) + // console.log(describeImage(expr.value, domain.value, context.division ?? division.value)) container.append(path, ...children()) return container }, space, } }) + +export const funcCreation = defineAnimation<[], withExprT & typeof T.infer>((node: SVGGElement, _, { attrs }) => { + const { length } = describeImage(attrs.expr.value, attrs.domain.value, 25) + return { + validator: name => name === 'function', + setup(progress) { + if (progress >= 1) { + return true + } + node.style.strokeDasharray = `${length * progress},${length * (1 - progress)}` + return false + }, + } +}) diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts index cc66e5e..c6e098f 100644 --- a/packages/sciux/src/index.ts +++ b/packages/sciux/src/index.ts @@ -12,6 +12,7 @@ const defaultContext: RegisterContext = { textModes, } const registers = [widget, model, layout, math] +animations.set('creation', []) export default function (context: RegisterContext = defaultContext): void { for (const register of registers) { diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index bdb9b54..a88d496 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,8 +1,10 @@ -import { angle, axis, circle, figure, func, line, plane } from '@sciux/math' +import type { Animation } from 'sciux-laplace' +import type { RegisterContext } from './types' +import { angle, axis, circle, figure, func, funcCreation, line, plane } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' -export default function (): void { +export default function ({ animations }: RegisterContext): void { canvasSpace.set('angle', angle) canvasSpace.set('line', line) canvasSpace.set('figure', figure) @@ -10,6 +12,9 @@ export default function (): void { canvasSpace.set('function', func) canvasSpace.set('axis', axis) canvasSpace.set('plane', withSpace(plane, canvasSpace)) + + const creation = []> animations.get('creation') + creation.push(funcCreation) } export * from '@sciux/math' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c80b5a..82dd2cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.7 - version: 0.0.1-beta.7 + specifier: v0.0.1-beta.8 + version: 0.0.1-beta.8 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -190,7 +190,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 packages/math: dependencies: @@ -208,7 +208,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 packages/model: dependencies: @@ -220,7 +220,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 packages/sciux: dependencies: @@ -241,7 +241,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 packages/theme-default: dependencies: @@ -259,7 +259,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 packages/widget: dependencies: @@ -295,7 +295,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -322,7 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.7 + version: 0.0.1-beta.8 devDependencies: typescript: specifier: ~5.8.3 @@ -3720,8 +3720,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-beta.7: - resolution: {integrity: sha512-R88dSwAZ4FbW3cuWJazONw51ssBO87jeK/jvF3ImdW4NWfbrIP4SHJ3kq3/MZMOHMHCHMQhcVZVOLqtPPmFO5A==} + sciux-laplace@0.0.1-beta.8: + resolution: {integrity: sha512-XnHrnvCK9Z+aNj+BN70JQEQ3anr2c34uPLlWXu+psVr6LKuq34eg7mF1TrA5Nh9aXO5vGeDYF/2vGxm045jXTg==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8008,7 +8008,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-beta.7: + sciux-laplace@0.0.1-beta.8: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux index 3bd6ee8..b3fe0d3 100644 --- a/test/src/template/math/plane.sciux +++ b/test/src/template/math/plane.sciux @@ -1,5 +1,6 @@ + - + \ No newline at end of file From 8d41070d18779bd58c5499bc7e8a4514a686fb36 Mon Sep 17 00:00:00 2001 From: Acbox Date: Tue, 24 Jun 2025 23:27:07 +0800 Subject: [PATCH 14/31] ci: update dependencies --- packages/math/src/line/index.ts | 2 +- packages/sciux/src/index.ts | 11 +++++++++++ pnpm-lock.yaml | 26 +++++++++++++------------- pnpm-workspace.yaml | 2 +- test/src/main.ts | 4 ++-- test/src/template/math/plane.sciux | 5 ++--- 6 files changed, 30 insertions(+), 20 deletions(-) diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index 51733de..2c44fae 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -13,7 +13,7 @@ const T = type({ type: LineType, }) -export const line = defineComponent<'line', typeof T.infer>((attrs) => { +export const line = defineComponent<'line', typeof T.infer>((attrs, context) => { const space = new Map() space.set('start-point', lineStartPoint) space.set('end-point', lineEndPoint) diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts index c6e098f..12dfad7 100644 --- a/packages/sciux/src/index.ts +++ b/packages/sciux/src/index.ts @@ -1,4 +1,5 @@ import type { RegisterContext } from './types' +import { theme } from '@sciux/utils-theme' import { animations, flows, root, textModes } from 'sciux-laplace' import layout from './layout' import math from './math' @@ -20,8 +21,18 @@ export default function (context: RegisterContext = defaultContext): void { } } +export function applyTheme(selector: string): void { + const containers = Array.from(document.querySelectorAll(selector)) + for (const container of containers) { + container.style.backgroundColor = theme.pallete('background') + container.style.color = theme.pallete('primary') + container.style.fontFamily = theme.font('primary') + } +} + export * from './layout' export * from './math' export * from './model' export * from './widget' +export * from '@sciux/utils-theme' export * from 'sciux-laplace' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82dd2cd..426a694 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.8 - version: 0.0.1-beta.8 + specifier: v0.0.1-beta.9 + version: 0.0.1-beta.9 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -190,7 +190,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 packages/math: dependencies: @@ -208,7 +208,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 packages/model: dependencies: @@ -220,7 +220,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 packages/sciux: dependencies: @@ -241,7 +241,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 packages/theme-default: dependencies: @@ -259,7 +259,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 packages/widget: dependencies: @@ -295,7 +295,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -322,7 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.8 + version: 0.0.1-beta.9 devDependencies: typescript: specifier: ~5.8.3 @@ -3720,8 +3720,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-beta.8: - resolution: {integrity: sha512-XnHrnvCK9Z+aNj+BN70JQEQ3anr2c34uPLlWXu+psVr6LKuq34eg7mF1TrA5Nh9aXO5vGeDYF/2vGxm045jXTg==} + sciux-laplace@0.0.1-beta.9: + resolution: {integrity: sha512-itkeOJGueIwvEnKb4N83VTGVxjezy8Np6NPt7eKTdA4DSJIhwxY7O1fh8c0NBTge8ixbq2Ogibzz4muAih0UcA==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8008,7 +8008,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-beta.8: + sciux-laplace@0.0.1-beta.9: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 96c8963..2312f7f 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.8 + sciux-laplace: v0.0.1-beta.9 diff --git a/test/src/main.ts b/test/src/main.ts index 8c8ffe3..3b82230 100644 --- a/test/src/main.ts +++ b/test/src/main.ts @@ -1,4 +1,4 @@ -import init, { render } from 'sciux' +import init, { applyTheme, render } from 'sciux' import examples from './examples' import '@sciux/theme-default/styles/main.css' @@ -48,7 +48,7 @@ function createItem(name: string, level: number, handler: () => void): any { function createRenderer(source: string) { return () => { app.innerHTML = '' - app.style.backgroundColor = 'var(--sci-background)' + applyTheme('#app') render(source, app) } } diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux index b3fe0d3..c7f9143 100644 --- a/test/src/template/math/plane.sciux +++ b/test/src/template/math/plane.sciux @@ -1,6 +1,5 @@ - - + - + \ No newline at end of file From 297db1505629660bb2b355900a4118f8aabb2128 Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 27 Jun 2025 12:33:20 +0800 Subject: [PATCH 15/31] ci: update denpendencies --- pnpm-lock.yaml | 26 +++++++++++++------------- pnpm-workspace.yaml | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 426a694..509552f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.9 - version: 0.0.1-beta.9 + specifier: v0.0.1-beta.10 + version: 0.0.1-beta.10 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -190,7 +190,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 packages/math: dependencies: @@ -208,7 +208,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 packages/model: dependencies: @@ -220,7 +220,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 packages/sciux: dependencies: @@ -241,7 +241,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 packages/theme-default: dependencies: @@ -259,7 +259,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 packages/widget: dependencies: @@ -295,7 +295,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -322,7 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.9 + version: 0.0.1-beta.10 devDependencies: typescript: specifier: ~5.8.3 @@ -3720,8 +3720,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-beta.9: - resolution: {integrity: sha512-itkeOJGueIwvEnKb4N83VTGVxjezy8Np6NPt7eKTdA4DSJIhwxY7O1fh8c0NBTge8ixbq2Ogibzz4muAih0UcA==} + sciux-laplace@0.0.1-beta.10: + resolution: {integrity: sha512-TdQfndfOPhLuHmye+btBYTURqxa8UJNT6BBLjAOvP7ieEyyJ/Moq4J8fHZnt8nYeFCmZGNE2gc0EHw8oUjOwKA==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8008,7 +8008,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-beta.9: + sciux-laplace@0.0.1-beta.10: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 2312f7f..1632f05 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.9 + sciux-laplace: v0.0.1-beta.10 From 1d6da0899acc5fa4bc38a80c18b93fbad6a526d7 Mon Sep 17 00:00:00 2001 From: Acbox Date: Wed, 2 Jul 2025 13:29:19 +0800 Subject: [PATCH 16/31] feat: parametric --- packages/math/src/index.ts | 1 + packages/math/src/parametric/index.ts | 85 +++++++++++++++++++++++++ packages/sciux/src/math.ts | 6 +- test/src/examples.ts | 2 + test/src/main.ts | 3 +- test/src/template/math/parametric.sciux | 5 ++ test/src/template/math/plane.sciux | 2 +- 7 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 packages/math/src/parametric/index.ts create mode 100644 test/src/template/math/parametric.sciux diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index f9ae6ec..76c039c 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -4,5 +4,6 @@ export * from './circle' export * from './figure' export * from './function' export * from './line' +export * from './parametric' export * from './plane' export * from './shared' diff --git a/packages/math/src/parametric/index.ts b/packages/math/src/parametric/index.ts new file mode 100644 index 0000000..e0372b0 --- /dev/null +++ b/packages/math/src/parametric/index.ts @@ -0,0 +1,85 @@ +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineAnimation, defineComponent } from 'sciux-laplace' + +const T = type({ + domain: type('number[]'), + range: type('number[]'), + division: type.number, + expr: type.unknown, +}) + +function describeImage( + expr: (t: number) => [number, number], + domain: number[], + range: number[], + division: number, +): { points: number[][], length: number } { + const [tMin, tMax] = domain + const step = (tMax - tMin) / division + + const points: number[][] = [] + let length = 0 + let lastPoint: number[] | null = null + + for (let i = 0; i <= division; i += 1 / division) { + const t = tMin + i * step + const [x, y] = expr(t) + const scaledPoint = [x * division, y * division] + + if (lastPoint !== null) { + const dx = scaledPoint[0] - lastPoint[0] + const dy = scaledPoint[1] - lastPoint[1] + length += Math.sqrt(dx * dx + dy * dy) + } + + points.push(scaledPoint) + lastPoint = scaledPoint + } + + return { + points, + length, + } +} + +export const parametric = defineComponent<'parametric', typeof T.infer, { + division: number +}>((attrs, context) => { + return { + name: 'parametric', + attrs: T, + defaults: { + division: 25, + domain: [-5, 5], + range: [-5, 5], + }, + setup(children) { + const { domain, range, expr, division } = attrs + const { points } = describeImage(expr.value as (t: number) => [number, number], domain.value, range.value, context.division ?? division.value) + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.setAttribute('stroke', theme.pallete('primary')) + path.setAttribute('fill', 'none') + path.setAttribute('stroke-width', '2') + path.id = 'parametric-path' + path.setAttribute('d', `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}`) + container.append(path, ...children()) + return container + }, + } +}) + +export const parametricCreation = defineAnimation<[], typeof T.infer>((node, _, { attrs }) => { + const { length } = describeImage(attrs.expr.value as (t: number) => [number, number], attrs.domain.value, attrs.range.value, 25) + return { + validator: name => name === 'parametric', + setup(progress) { + if (progress >= 1) { + return true + } + ; (node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}` + return false + }, + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 8366ced..be3858b 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, axis, circle, figure, func, funcCreation, line, plane } from '@sciux/math' +import { angle, axis, circle, figure, func, funcCreation, line, parametric, parametricCreation, plane } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -12,9 +12,9 @@ export default function ({ animations }: RegisterContext): void { canvasSpace.set('function', func) canvasSpace.set('axis', axis) canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) - + canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(funcCreation) + creation.push(funcCreation, parametricCreation) } export * from '@sciux/math' diff --git a/test/src/examples.ts b/test/src/examples.ts index f42d076..c73a350 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -2,6 +2,7 @@ import test from './example.sciux?raw' import angle from './template/math/angle.sciux?raw' import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' +import parametric from './template/math/parametric.sciux?raw' import plane from './template/math/plane.sciux?raw' import model from './template/model.sciux?raw' import widget from './template/widget.sciux?raw' @@ -15,5 +16,6 @@ export default { figure, circle, plane, + parametric, }, } diff --git a/test/src/main.ts b/test/src/main.ts index 3b82230..6181a16 100644 --- a/test/src/main.ts +++ b/test/src/main.ts @@ -1,4 +1,4 @@ -import init, { applyTheme, render } from 'sciux' +import init, { animationManager, applyTheme, render } from 'sciux' import examples from './examples' import '@sciux/theme-default/styles/main.css' @@ -50,6 +50,7 @@ function createRenderer(source: string) { app.innerHTML = '' applyTheme('#app') render(source, app) + animationManager.init() } } diff --git a/test/src/template/math/parametric.sciux b/test/src/template/math/parametric.sciux new file mode 100644 index 0000000..4b5ccc8 --- /dev/null +++ b/test/src/template/math/parametric.sciux @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux index c7f9143..febb21a 100644 --- a/test/src/template/math/plane.sciux +++ b/test/src/template/math/plane.sciux @@ -1,5 +1,5 @@ - + \ No newline at end of file From 57714f635b34bdd11e37a095b53f934c7a00d888 Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 4 Jul 2025 11:09:04 +0800 Subject: [PATCH 17/31] feat: creation animatiom of line & angle & arc --- packages/math/src/angle/arc.ts | 25 +++++++++++++-- packages/math/src/angle/index.ts | 44 +++++++++++++++++++++++++- packages/math/src/angle/points.ts | 8 ++--- packages/math/src/line/index.ts | 20 +++++++++++- packages/sciux/src/math.ts | 4 +-- packages/sciux/src/widget.ts | 3 +- packages/theme-default/styles/vars.css | 3 ++ packages/widget/src/tex.ts | 3 +- test/src/examples.ts | 4 +++ test/src/template/instance/ins01.sciux | 25 +++++++++++++++ 10 files changed, 127 insertions(+), 12 deletions(-) create mode 100644 test/src/template/instance/ins01.sciux diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 6538330..6af0faa 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -1,6 +1,6 @@ import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { describeArc } from '../utils/arc-path' import { resolveDasharray } from '../utils/line' @@ -24,11 +24,13 @@ export const arc = defineComponent<'arc', typeof T.infer, { attrs: T, defaults: { value: '', + type: 'solid', }, setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') - path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to)) + path.id = 'angle-arc' + path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.to)) path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) @@ -47,3 +49,22 @@ export const arc = defineComponent<'arc', typeof T.infer, { }, } }) + +export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context }: { + context: { + from: number + to: number + startSide: number + endSide: number + } +}) => { + const path = node.querySelector('#angle-arc') as SVGPathElement + return { + validator: name => name === 'arc', + setup(progress) { + if (progress > 1) + return true + path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.from - (context.from - context.to) * progress)) + }, + } +}) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index ec1a7df..5b1252d 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -1,8 +1,9 @@ import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { resolveDasharray } from '../utils/line' +import { generateTexNode } from '../utils/tex' import { arc } from './arc' import { bounding } from './bouding' import { angleEndPoint, angleStartPoint, origin } from './points' @@ -51,6 +52,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { const startSide = resolve(attrs.from.value, attrs.startSide.value) const endSide = resolve(attrs.to.value, attrs.endSide.value) const startSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line') + startSideLine.id = 'angle-start-side' startSideLine.setAttribute('x1', startSide.x1.toString()) startSideLine.setAttribute('y1', startSide.y1.toString()) startSideLine.setAttribute('x2', startSide.x2.toString()) @@ -60,6 +62,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { startSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.startSideType.value)) container.append(startSideLine) const endSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line') + endSideLine.id = 'angle-end-side' endSideLine.setAttribute('x1', endSide.x1.toString()) endSideLine.setAttribute('y1', endSide.y1.toString()) endSideLine.setAttribute('x2', endSide.x2.toString()) @@ -67,6 +70,25 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { endSideLine.setAttribute('stroke', theme.pallete('primary')) endSideLine.setAttribute('stroke-width', '1') endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value)) + + const startSideTexPosition = [ + startSide.x1 + (startSide.x2 - startSide.x1) / 2, + startSide.y1 + (startSide.y2 - startSide.y1) / 2, + ] + const startSideTex = document.createElementNS('http://www.w3.org/2000/svg', 'g') + startSideTex.setAttribute('transform', `translate(${startSideTexPosition[0]}, ${startSideTexPosition[1]})`) + startSideTex.append(generateTexNode(attrs.startSideValue?.value ?? '')) + container.append(startSideTex) + + const endSideTexPosition = [ + endSide.x1 + (endSide.x2 - endSide.x1) / 2, + endSide.y1 + (endSide.y2 - endSide.y1) / 2, + ] + const endSideTex = document.createElementNS('http://www.w3.org/2000/svg', 'g') + endSideTex.setAttribute('transform', `translate(${endSideTexPosition[0]}, ${endSideTexPosition[1]})`) + endSideTex.append(generateTexNode(attrs.endSideValue?.value ?? '')) + container.append(endSideTex) + container.append(endSideLine) container.append(...children()) return container @@ -82,3 +104,23 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { space, } }) + +export const angleCreation = defineAnimation((node: HTMLElement) => { + const startSide = node.querySelector('#angle-start-side') + const endSide = node.querySelector('#angle-end-side') + const start = [Number(startSide?.getAttribute('x2')), Number(startSide?.getAttribute('y2'))] + const end = [Number(endSide?.getAttribute('x2')), Number(endSide?.getAttribute('y2'))] + return { + validator: name => name === 'angle', + setup(progress) { + if (progress > 1) + return true + startSide?.setAttribute('x2', (start[0] * progress).toString()) + startSide?.setAttribute('y2', (start[1] * progress).toString()) + endSide?.setAttribute('x2', (end[0] * progress).toString()) + endSide?.setAttribute('y2', (end[1] * progress).toString()) + }, + } +}) + +export { angleArcCreation } from './arc' diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index 2063fea..6f57e29 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -12,8 +12,8 @@ export const angleStartPoint = defineComponent<'start-point', typeof InfoPointTy attrs: InfoPointType, globals: { [attrs.as.value]: [ - context.startSide * Math.cos(context.from * Math.PI / 180), - context.startSide * Math.sin(context.from * Math.PI / 180), + context.startSide * Math.cos(context.from * Math.PI / 180) + context.x, + context.startSide * Math.sin(context.from * Math.PI / 180) + context.y, ], }, } @@ -30,8 +30,8 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i attrs: InfoPointType, globals: { [attrs.as.value]: [ - context.endSide * Math.cos(context.to * Math.PI / 180), - context.endSide * Math.sin(context.to * Math.PI / 180), + context.endSide * Math.cos(context.to * Math.PI / 180) + context.x, + context.endSide * Math.sin(context.to * Math.PI / 180) + context.y, ], }, } diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index 2c44fae..c8b2f6e 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -1,6 +1,7 @@ +import type { ToRefs } from 'sciux-laplace' import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { resolveDasharray } from '../utils/line' import { generateTexNode } from '../utils/tex' @@ -32,6 +33,7 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) => const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`) + path.id = 'line-path' path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) const texElement = generateTexNode(attrs.value?.value) @@ -49,4 +51,20 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) => } }) +export const lineCreation = defineAnimation((node: HTMLElement, _, { attrs }: { attrs: ToRefs }) => { + const line = node.querySelector('#line-path') as SVGPathElement + if (!line) + return + const from = attrs.from.value + const to = attrs.to.value + return { + validator: name => name === 'line', + setup(progress) { + if (progress > 1) + return true + line.setAttribute('d', `M ${from[0]} ${from[1]} L ${(from[0] + (to[0] - from[0]) * progress)} ${(from[1] + (to[1] - from[1]) * progress)}`) + }, + } +}) + export * from './points' diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index be3858b..0bce442 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, axis, circle, figure, func, funcCreation, line, parametric, parametricCreation, plane } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, circle, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -14,7 +14,7 @@ export default function ({ animations }: RegisterContext): void { canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(funcCreation, parametricCreation) + creation.push(angleCreation, angleArcCreation, lineCreation, funcCreation, parametricCreation) } export * from '@sciux/math' diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts index ee36f20..58a1160 100644 --- a/packages/sciux/src/widget.ts +++ b/packages/sciux/src/widget.ts @@ -1,9 +1,10 @@ import type { ComponentSpace } from 'sciux-laplace' import type { RegisterContext } from './types' import { canvas, code, link, table, tex } from '@sciux/widget' -import { TextMode, withSpace } from 'sciux-laplace' +import { root, TextMode, withSpace } from 'sciux-laplace' export const canvasSpace: ComponentSpace = new Map() +canvasSpace.set('let', root.get('let')!) export default function ({ root, textModes }: RegisterContext): void { root.set('table', table) diff --git a/packages/theme-default/styles/vars.css b/packages/theme-default/styles/vars.css index 0aef616..b93bfd2 100644 --- a/packages/theme-default/styles/vars.css +++ b/packages/theme-default/styles/vars.css @@ -29,6 +29,9 @@ /* Size Table */ :root { --sci-size-primary: 16px; + --sci-size-6xs: 6px; + --sci-size-5xs: 8px; + --sci-size-4xs: 10px; --sci-size-3xs: 12px; --sci-size-2xs: 14px; --sci-size-xs: 16px; diff --git a/packages/widget/src/tex.ts b/packages/widget/src/tex.ts index 93afdd4..fa231da 100644 --- a/packages/widget/src/tex.ts +++ b/packages/widget/src/tex.ts @@ -26,7 +26,8 @@ export default defineComponent<'tex', typeof T.infer, { container.setAttribute('width', '100%') container.setAttribute('height', '100%') const subContainer = document.createElement('div') - subContainer.style.color = theme.pallete('note') + subContainer.style.color = theme.pallete('primary') + subContainer.style.fontSize = theme.size('5xs') subContainer.innerHTML = html container.append(subContainer) } diff --git a/test/src/examples.ts b/test/src/examples.ts index c73a350..709a67d 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,4 +1,5 @@ import test from './example.sciux?raw' +import ins01 from './template/instance/ins01.sciux?raw' import angle from './template/math/angle.sciux?raw' import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' @@ -18,4 +19,7 @@ export default { plane, parametric, }, + 'INSTANCE': { + ins01, + }, } diff --git a/test/src/template/instance/ins01.sciux b/test/src/template/instance/ins01.sciux new file mode 100644 index 0000000..3f5933f --- /dev/null +++ b/test/src/template/instance/ins01.sciux @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 8864ee1da8c6fa9977a35d9b583f2999baaf21a3 Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 4 Jul 2025 12:44:31 +0800 Subject: [PATCH 18/31] feat: circle animation --- packages/math/src/circle/index.ts | 18 ++++++++++++++++-- packages/math/src/index.ts | 2 ++ packages/math/src/tools.ts | 8 ++++++++ packages/sciux/src/index.ts | 6 +++++- packages/sciux/src/math.ts | 7 ++++--- packages/sciux/src/types.ts | 3 ++- test/src/template/instance/ins01.sciux | 1 + 7 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 packages/math/src/tools.ts diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts index 90bb515..6f8ea94 100644 --- a/packages/math/src/circle/index.ts +++ b/packages/math/src/circle/index.ts @@ -1,6 +1,7 @@ +import type { ToRefs } from 'sciux-laplace' import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { describeArc } from '../utils/arc-path' import { resolveDasharray } from '../utils/line' @@ -33,7 +34,8 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') - path.setAttribute('d', describeArc([attrs.x.value, attrs.y.value], attrs.radius.value, attrs.from.value, attrs.to.value)) + path.id = 'circle-path' + path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.to.value)) path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) @@ -43,3 +45,15 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { space, } }) + +export const circleCreation = defineAnimation((node: HTMLElement, _, { attrs }: { attrs: ToRefs }) => { + const path = node.querySelector('#circle-path') as SVGPathElement + return { + validator: name => name === 'circle', + setup(progress) { + if (progress > 1) + return true + path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.from.value + (attrs.to.value - attrs.from.value) * progress)) + }, + } +}) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 76c039c..b920adf 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -7,3 +7,5 @@ export * from './line' export * from './parametric' export * from './plane' export * from './shared' + +export * as tools from './tools' diff --git a/packages/math/src/tools.ts b/packages/math/src/tools.ts new file mode 100644 index 0000000..4a0d240 --- /dev/null +++ b/packages/math/src/tools.ts @@ -0,0 +1,8 @@ +export type Position = [number, number] + +export function middle(from: Position, to: Position): Position { + return [ + from[0] + (to[0] - from[0]) / 2, + from[1] + (to[1] - from[1]) / 2, + ] +} diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts index 12dfad7..0371b75 100644 --- a/packages/sciux/src/index.ts +++ b/packages/sciux/src/index.ts @@ -1,16 +1,19 @@ +import type { Context } from 'sciux-laplace' import type { RegisterContext } from './types' import { theme } from '@sciux/utils-theme' -import { animations, flows, root, textModes } from 'sciux-laplace' +import { addActiveContext, animations, flows, reactive, root, textModes } from 'sciux-laplace' import layout from './layout' import math from './math' import model from './model' import widget from './widget' +const context: Context = reactive({}) const defaultContext: RegisterContext = { root, flows, animations, textModes, + context, } const registers = [widget, model, layout, math] animations.set('creation', []) @@ -19,6 +22,7 @@ export default function (context: RegisterContext = defaultContext): void { for (const register of registers) { register(context) } + addActiveContext(context.context) } export function applyTheme(selector: string): void { diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 0bce442..2cbe4db 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,10 +1,10 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, angleArcCreation, angleCreation, axis, circle, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, tools } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' -export default function ({ animations }: RegisterContext): void { +export default function ({ animations, context }: RegisterContext): void { canvasSpace.set('angle', angle) canvasSpace.set('line', line) canvasSpace.set('figure', figure) @@ -14,7 +14,8 @@ export default function ({ animations }: RegisterContext): void { canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(angleCreation, angleArcCreation, lineCreation, funcCreation, parametricCreation) + creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation) + Object.assign(context, tools) } export * from '@sciux/math' diff --git a/packages/sciux/src/types.ts b/packages/sciux/src/types.ts index 4ec4b80..c88e981 100644 --- a/packages/sciux/src/types.ts +++ b/packages/sciux/src/types.ts @@ -1,4 +1,4 @@ -import type { animations, ComponentSpace, flows, textModes } from 'sciux-laplace' +import type { animations, ComponentSpace, Context, flows, textModes } from 'sciux-laplace' export type Flows = typeof flows export type Animations = typeof animations @@ -8,4 +8,5 @@ export interface RegisterContext { flows: Flows animations: Animations textModes: TextModes + context: Context } diff --git a/test/src/template/instance/ins01.sciux b/test/src/template/instance/ins01.sciux index 3f5933f..d607f10 100644 --- a/test/src/template/instance/ins01.sciux +++ b/test/src/template/instance/ins01.sciux @@ -11,6 +11,7 @@ + From e4a17f32c8dcb8b3dd26ef4f29d85a096c93143d Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 4 Jul 2025 14:58:09 +0800 Subject: [PATCH 19/31] feat: point mark of angle --- packages/math/src/angle/points.ts | 48 +++++++++++++++++---- test/src/template/instance/ins01.sciux | 59 +++++++++++++++++++------- 2 files changed, 84 insertions(+), 23 deletions(-) diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index 6f57e29..b8911d1 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -1,5 +1,6 @@ import { defineComponent } from 'sciux-laplace' import { InfoPointType } from '../shared' +import { generateTexNode } from '../utils/tex' export const angleStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, { x: number @@ -7,14 +8,25 @@ export const angleStartPoint = defineComponent<'start-point', typeof InfoPointTy startSide: number from: number }>((attrs, context) => { + const position = [ + context.startSide * Math.cos(context.from * Math.PI / 180) + context.x, + context.startSide * Math.sin(context.from * Math.PI / 180) + context.y, + ] return { name: 'start-point', attrs: InfoPointType, globals: { - [attrs.as.value]: [ - context.startSide * Math.cos(context.from * Math.PI / 180) + context.x, - context.startSide * Math.sin(context.from * Math.PI / 180) + context.y, - ], + [attrs.as.value]: position, + }, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${position[0] - context.x}, ${position[1] - context.y})`) + const texElement = generateTexNode(attrs.value.value) + container.append(texElement) + return container }, } }) @@ -25,14 +37,25 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i endSide: number to: number }>((attrs, context) => { + const position = [ + context.endSide * Math.cos(context.to * Math.PI / 180) + context.x, + context.endSide * Math.sin(context.to * Math.PI / 180) + context.y, + ] return { name: 'end-point', attrs: InfoPointType, globals: { - [attrs.as.value]: [ - context.endSide * Math.cos(context.to * Math.PI / 180) + context.x, - context.endSide * Math.sin(context.to * Math.PI / 180) + context.y, - ], + [attrs.as.value]: position, + }, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${position[0] - context.x}, ${position[1] - context.y})`) + const texElement = generateTexNode(attrs.value.value) + container.append(texElement) + return container }, } }) @@ -47,5 +70,14 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, { globals: { [attrs.as.value]: [context.x, context.y], }, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const texElement = generateTexNode(attrs.value.value) + container.append(texElement) + return container + }, } }) diff --git a/test/src/template/instance/ins01.sciux b/test/src/template/instance/ins01.sciux index d607f10..19216e9 100644 --- a/test/src/template/instance/ins01.sciux +++ b/test/src/template/instance/ins01.sciux @@ -3,24 +3,53 @@ - - - - - + + + + + - + - - - + + + - - - - - - + + 1. Find the length of line AB + + + AB = OA^2 + OB^2 - 2 \cdot OA \cdot OB \cdot \cos \angle AOB + + + = 2 \cdot d^2 - 2 \cdot d^2 \cdot \cos 30^\circ + + + = 2 \cdot d^2 \cdot (1 - \cos 30^\circ) + + + = 2 \cdot d^2 \cdot \left(1 - \frac{\sqrt{3}}{2}\right) + + + = 2 \cdot d^2 \cdot \left(\frac{2 - \sqrt{3}}{2}\right) + + + = 2 \cdot d^2 \cdot \left(\frac{2 - \sqrt{3}}{2}\right) + + + = d^2 \cdot (2 - \sqrt{3}) + + + = 30^2 \cdot (2 - \sqrt{3}) + + + = 900 \cdot (2 - \sqrt{3}) + + + = 1800 - 900 \cdot \sqrt{3} + + + \ No newline at end of file From 04263422ee5f912183477fb1721d638d12104902 Mon Sep 17 00:00:00 2001 From: confuseder Date: Fri, 4 Jul 2025 15:35:26 +0800 Subject: [PATCH 20/31] fix: angle src radius calculate --- packages/math/src/angle/arc.ts | 13 ++++++---- packages/math/src/angle/index.ts | 11 ++++++--- packages/math/src/circle/index.ts | 9 ++++--- packages/math/src/line/index.ts | 10 +++++--- test/src/examples.ts | 2 ++ test/src/template/instance/ins02.sciux | 34 ++++++++++++++++++++++++++ 6 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 test/src/template/instance/ins02.sciux diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 6af0faa..087536f 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -30,12 +30,12 @@ export const arc = defineComponent<'arc', typeof T.infer, { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.id = 'angle-arc' - path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.to)) + path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.to)) path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) const texElement = generateTexNode(attrs.value?.value) - const length = (context.startSide ?? context.endSide) / 3 + const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3 const angle = context.from + (context.to - context.from) / 2 const position = [ length * Math.cos(angle * Math.PI / 180), @@ -50,7 +50,7 @@ export const arc = defineComponent<'arc', typeof T.infer, { } }) -export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context }: { +export const angleArcCreation = defineAnimation((node: Node, _, { context }: { context: { from: number to: number @@ -58,13 +58,16 @@ export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context endSide: number } }) => { - const path = node.querySelector('#angle-arc') as SVGPathElement + const el = node as HTMLElement + const path = el.querySelector('#angle-arc') as SVGPathElement return { validator: name => name === 'arc', setup(progress) { - if (progress > 1) + if (progress > 1) { return true + } path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.from - (context.from - context.to) * progress)) + return false }, } }) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index 5b1252d..ecdf65a 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -105,20 +105,23 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { } }) -export const angleCreation = defineAnimation((node: HTMLElement) => { - const startSide = node.querySelector('#angle-start-side') - const endSide = node.querySelector('#angle-end-side') +export const angleCreation = defineAnimation((node: Node) => { + const el = node as HTMLElement + const startSide = el.querySelector('#angle-start-side') + const endSide = el.querySelector('#angle-end-side') const start = [Number(startSide?.getAttribute('x2')), Number(startSide?.getAttribute('y2'))] const end = [Number(endSide?.getAttribute('x2')), Number(endSide?.getAttribute('y2'))] return { validator: name => name === 'angle', setup(progress) { - if (progress > 1) + if (progress > 1) { return true + } startSide?.setAttribute('x2', (start[0] * progress).toString()) startSide?.setAttribute('y2', (start[1] * progress).toString()) endSide?.setAttribute('x2', (end[0] * progress).toString()) endSide?.setAttribute('y2', (end[1] * progress).toString()) + return false }, } }) diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts index 6f8ea94..62112f5 100644 --- a/packages/math/src/circle/index.ts +++ b/packages/math/src/circle/index.ts @@ -46,14 +46,17 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { } }) -export const circleCreation = defineAnimation((node: HTMLElement, _, { attrs }: { attrs: ToRefs }) => { - const path = node.querySelector('#circle-path') as SVGPathElement +export const circleCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs }) => { + const el = node as HTMLElement + const path = el.querySelector('#circle-path') as SVGPathElement return { validator: name => name === 'circle', setup(progress) { - if (progress > 1) + if (progress > 1) { return true + } path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.from.value + (attrs.to.value - attrs.from.value) * progress)) + return false }, } }) diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index c8b2f6e..0c9ac01 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -51,18 +51,20 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) => } }) -export const lineCreation = defineAnimation((node: HTMLElement, _, { attrs }: { attrs: ToRefs }) => { - const line = node.querySelector('#line-path') as SVGPathElement - if (!line) - return +export const lineCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs }) => { + const el = node as HTMLElement + const line = el.querySelector('#line-path') as SVGPathElement const from = attrs.from.value const to = attrs.to.value return { validator: name => name === 'line', setup(progress) { + if (!line) + return true if (progress > 1) return true line.setAttribute('d', `M ${from[0]} ${from[1]} L ${(from[0] + (to[0] - from[0]) * progress)} ${(from[1] + (to[1] - from[1]) * progress)}`) + return false }, } }) diff --git a/test/src/examples.ts b/test/src/examples.ts index 709a67d..e9df595 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -1,5 +1,6 @@ import test from './example.sciux?raw' import ins01 from './template/instance/ins01.sciux?raw' +import ins02 from './template/instance/ins02.sciux?raw' import angle from './template/math/angle.sciux?raw' import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' @@ -21,5 +22,6 @@ export default { }, 'INSTANCE': { ins01, + ins02, }, } diff --git a/test/src/template/instance/ins02.sciux b/test/src/template/instance/ins02.sciux new file mode 100644 index 0000000..7972b37 --- /dev/null +++ b/test/src/template/instance/ins02.sciux @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From e73e4df062177535b15f404b3a6a3c8513fa7e0c Mon Sep 17 00:00:00 2001 From: confuseder Date: Fri, 4 Jul 2025 16:01:57 +0800 Subject: [PATCH 21/31] feat: Use right angle markers when the angle is right angle --- packages/math/src/angle/arc.ts | 85 +++++++++++++++++++++++++++------- 1 file changed, 67 insertions(+), 18 deletions(-) diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 087536f..eb17428 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -28,24 +28,73 @@ export const arc = defineComponent<'arc', typeof T.infer, { }, setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') - const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') - path.id = 'angle-arc' - path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.to)) - path.setAttribute('stroke', theme.pallete('primary')) - path.setAttribute('fill', 'none') - path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) - const texElement = generateTexNode(attrs.value?.value) - const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3 - const angle = context.from + (context.to - context.from) / 2 - const position = [ - length * Math.cos(angle * Math.PI / 180), - length * Math.sin(angle * Math.PI / 180), - ] - const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') - texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`) - texContainer.append(texElement) - container.append(path, texContainer) - return container + const angleValue = Math.abs((context.to - context.from + 360) % 360) + const isRightAngle = Math.abs(angleValue - 90) < 1e-2 + if (isRightAngle) { + const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3 + const radFrom = context.from * Math.PI / 180 + const radTo = context.to * Math.PI / 180 + const p1 = [length * Math.cos(radFrom), length * Math.sin(radFrom)] + const p2 = [length * Math.cos(radTo), length * Math.sin(radTo)] + const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line1.setAttribute('x1', '0') + line1.setAttribute('y1', '0') + line1.setAttribute('x2', p1[0].toString()) + line1.setAttribute('y2', p1[1].toString()) + line1.setAttribute('stroke', theme.pallete('primary')) + line1.setAttribute('stroke-width', '1') + line1.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line2.setAttribute('x1', '0') + line2.setAttribute('y1', '0') + line2.setAttribute('x2', p2[0].toString()) + line2.setAttribute('y2', p2[1].toString()) + line2.setAttribute('stroke', theme.pallete('primary')) + line2.setAttribute('stroke-width', '1') + line2.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + const l1 = [length * 0.6 * Math.cos(radFrom), length * 0.6 * Math.sin(radFrom)] + const l2 = [length * 0.6 * Math.cos(radTo), length * 0.6 * Math.sin(radTo)] + const l3 = [l1[0] + (l2[0]), l1[1] + (l2[1])] + const lPath = document.createElementNS('http://www.w3.org/2000/svg', 'path') + lPath.setAttribute('d', `M ${l1[0]} ${l1[1]} L ${l3[0]} ${l3[1]} L ${l2[0]} ${l2[1]}`) + lPath.setAttribute('stroke', theme.pallete('primary')) + lPath.setAttribute('fill', 'none') + lPath.setAttribute('stroke-width', '1') + lPath.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + const texElement = generateTexNode(attrs.value?.value) + const labelPos = [ + (l1[0] + l2[0] + l3[0]) / 3, + (l1[1] + l2[1] + l3[1]) / 3, + ] + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.setAttribute('transform', `translate(${labelPos[0]}, ${labelPos[1]})`) + texContainer.append(texElement) + container.append(line1) + container.append(line2) + container.append(lPath) + container.append(texContainer) + return container + } + else { + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') + path.id = 'angle-arc' + path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.to)) + path.setAttribute('stroke', theme.pallete('primary')) + path.setAttribute('fill', 'none') + path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value)) + const texElement = generateTexNode(attrs.value?.value) + const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3 + const angle = context.from + (context.to - context.from) / 2 + const position = [ + length * Math.cos(angle * Math.PI / 180), + length * Math.sin(angle * Math.PI / 180), + ] + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`) + texContainer.append(texElement) + container.append(path, texContainer) + return container + } }, } }) From c1edeb3b692a8303ee05456574b72c6bead30836 Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 4 Jul 2025 21:49:12 +0800 Subject: [PATCH 22/31] ci: update dependencies --- packages/math/src/angle/arc.ts | 20 ++++++++++---------- packages/math/src/angle/index.ts | 26 +++++++++++++------------- packages/math/src/circle/index.ts | 18 +++++++++--------- packages/math/src/function/index.ts | 19 ++++++++++--------- packages/math/src/line/index.ts | 20 ++++++++++---------- packages/math/src/parametric/index.ts | 19 ++++++++++--------- pnpm-lock.yaml | 26 +++++++++++++------------- pnpm-workspace.yaml | 2 +- 8 files changed, 76 insertions(+), 74 deletions(-) diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index eb17428..4be4070 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -28,6 +28,7 @@ export const arc = defineComponent<'arc', typeof T.infer, { }, setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-angle-arc' const angleValue = Math.abs((context.to - context.from + 360) % 360) const isRightAngle = Math.abs(angleValue - 90) < 1e-2 if (isRightAngle) { @@ -99,7 +100,7 @@ export const arc = defineComponent<'arc', typeof T.infer, { } }) -export const angleArcCreation = defineAnimation((node: Node, _, { context }: { +export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context }: { context: { from: number to: number @@ -107,16 +108,15 @@ export const angleArcCreation = defineAnimation((node: Node, _, { context }: { endSide: number } }) => { + if (node.id !== 'canvas-angle-arc') + return const el = node as HTMLElement const path = el.querySelector('#angle-arc') as SVGPathElement - return { - validator: name => name === 'arc', - setup(progress) { - if (progress > 1) { - return true - } - path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.from - (context.from - context.to) * progress)) - return false - }, + return (progress) => { + if (progress > 1) { + return true + } + path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.from - (context.from - context.to) * progress)) + return false } }) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index ecdf65a..e0a007e 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -39,6 +39,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { }, setup(children) { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-angle' container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const resolve = (value: number, length: number): { x1: number, y1: number, x2: number, y2: number } => { const radian = value * Math.PI / 180 @@ -105,24 +106,23 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { } }) -export const angleCreation = defineAnimation((node: Node) => { +export const angleCreation = defineAnimation((node: HTMLElement) => { + if (node.id !== 'canvas-angle') + return const el = node as HTMLElement const startSide = el.querySelector('#angle-start-side') const endSide = el.querySelector('#angle-end-side') const start = [Number(startSide?.getAttribute('x2')), Number(startSide?.getAttribute('y2'))] const end = [Number(endSide?.getAttribute('x2')), Number(endSide?.getAttribute('y2'))] - return { - validator: name => name === 'angle', - setup(progress) { - if (progress > 1) { - return true - } - startSide?.setAttribute('x2', (start[0] * progress).toString()) - startSide?.setAttribute('y2', (start[1] * progress).toString()) - endSide?.setAttribute('x2', (end[0] * progress).toString()) - endSide?.setAttribute('y2', (end[1] * progress).toString()) - return false - }, + return (progress) => { + if (progress > 1) { + return true + } + startSide?.setAttribute('x2', (start[0] * progress).toString()) + startSide?.setAttribute('y2', (start[1] * progress).toString()) + endSide?.setAttribute('x2', (end[0] * progress).toString()) + endSide?.setAttribute('y2', (end[1] * progress).toString()) + return false } }) diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts index 62112f5..4111dd5 100644 --- a/packages/math/src/circle/index.ts +++ b/packages/math/src/circle/index.ts @@ -35,6 +35,7 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.id = 'circle-path' + container.id = 'canvas-circle' path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.to.value)) path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') @@ -48,15 +49,14 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => { export const circleCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs }) => { const el = node as HTMLElement + if (el.id !== 'canvas-circle') + return const path = el.querySelector('#circle-path') as SVGPathElement - return { - validator: name => name === 'circle', - setup(progress) { - if (progress > 1) { - return true - } - path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.from.value + (attrs.to.value - attrs.from.value) * progress)) - return false - }, + return (progress) => { + if (progress > 1) { + return true + } + path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.from.value + (attrs.to.value - attrs.from.value) * progress)) + return false } }) diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts index 961e161..572f30c 100644 --- a/packages/math/src/function/index.ts +++ b/packages/math/src/function/index.ts @@ -47,6 +47,7 @@ export const func = defineComponent<'function', typeof T.infer, { setup: (children) => { const { domain, division, expr } = attrs const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-function' const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('stroke', theme.pallete('info')) path.setAttribute('fill', 'none') @@ -62,15 +63,15 @@ export const func = defineComponent<'function', typeof T.infer, { }) export const funcCreation = defineAnimation<[], typeof T.infer>((node, _, { attrs }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-function') + return const { length } = describeImage(attrs.expr.value as (x: number) => number, attrs.domain.value, 25) - return { - validator: name => name === 'function', - setup(progress) { - if (progress >= 1) { - return true - } - ;(node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}` - return false - }, + return (progress) => { + if (progress >= 1) { + return true + } + ; (node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}` + return false } }) diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts index 0c9ac01..5f0fad7 100644 --- a/packages/math/src/line/index.ts +++ b/packages/math/src/line/index.ts @@ -31,6 +31,7 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) => attrs: T, setup(_children) { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-line' const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`) path.id = 'line-path' @@ -53,19 +54,18 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) => export const lineCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs }) => { const el = node as HTMLElement + if (el.id !== 'canvas-line') + return const line = el.querySelector('#line-path') as SVGPathElement const from = attrs.from.value const to = attrs.to.value - return { - validator: name => name === 'line', - setup(progress) { - if (!line) - return true - if (progress > 1) - return true - line.setAttribute('d', `M ${from[0]} ${from[1]} L ${(from[0] + (to[0] - from[0]) * progress)} ${(from[1] + (to[1] - from[1]) * progress)}`) - return false - }, + return (progress) => { + if (!line) + return true + if (progress > 1) + return true + line.setAttribute('d', `M ${from[0]} ${from[1]} L ${(from[0] + (to[0] - from[0]) * progress)} ${(from[1] + (to[1] - from[1]) * progress)}`) + return false } }) diff --git a/packages/math/src/parametric/index.ts b/packages/math/src/parametric/index.ts index e0372b0..8c94943 100644 --- a/packages/math/src/parametric/index.ts +++ b/packages/math/src/parametric/index.ts @@ -58,6 +58,7 @@ export const parametric = defineComponent<'parametric', typeof T.infer, { const { domain, range, expr, division } = attrs const { points } = describeImage(expr.value as (t: number) => [number, number], domain.value, range.value, context.division ?? division.value) const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-parametric' const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('stroke', theme.pallete('primary')) path.setAttribute('fill', 'none') @@ -71,15 +72,15 @@ export const parametric = defineComponent<'parametric', typeof T.infer, { }) export const parametricCreation = defineAnimation<[], typeof T.infer>((node, _, { attrs }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-parametric') + return const { length } = describeImage(attrs.expr.value as (t: number) => [number, number], attrs.domain.value, attrs.range.value, 25) - return { - validator: name => name === 'parametric', - setup(progress) { - if (progress >= 1) { - return true - } - ; (node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}` - return false - }, + return (progress) => { + if (progress >= 1) { + return true + } + ; (node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}` + return false } }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2b73ca4..95aca91 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.11 - version: 0.0.1-beta.11 + specifier: v0.0.1-beta.12 + version: 0.0.1-beta.12 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -190,7 +190,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 packages/math: dependencies: @@ -208,7 +208,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 packages/model: dependencies: @@ -220,7 +220,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 packages/sciux: dependencies: @@ -241,7 +241,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 packages/theme-default: dependencies: @@ -259,7 +259,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -274,7 +274,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 packages/widget: dependencies: @@ -295,7 +295,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -322,7 +322,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.11 + version: 0.0.1-beta.12 devDependencies: typescript: specifier: ~5.8.3 @@ -3720,8 +3720,8 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - sciux-laplace@0.0.1-beta.11: - resolution: {integrity: sha512-fuMtWj/V2HxC2aC0ehVlE9h821JNJmby/yqiHTHrPwFBfQij37rUI1yiFvsnA6phiQASZopQHBIFoh+JoB/LQw==} + sciux-laplace@0.0.1-beta.12: + resolution: {integrity: sha512-mMj6cINCotgTS/IPwitfh6RRA3fujk+n0rDRIpag4FAGcYel8eFNhIYuCGn6QfBtQgVtmpCcXS+d7ec23rnvog==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8008,7 +8008,7 @@ snapshots: dependencies: queue-microtask: 1.2.3 - sciux-laplace@0.0.1-beta.11: + sciux-laplace@0.0.1-beta.12: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d02d3de..2a67f94 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.11 + sciux-laplace: v0.0.1-beta.12 From 3e4c0d081ca8229580d6f75f770246adc8317227 Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 5 Jul 2025 12:35:24 +0800 Subject: [PATCH 23/31] feat: creation animation of axis, plane --- packages/math/src/angle/arc.ts | 8 +-- packages/math/src/angle/bouding.ts | 23 +++++++- packages/math/src/angle/index.ts | 6 +-- packages/math/src/axis/index.ts | 40 ++++++++++++-- packages/math/src/function/index.ts | 1 + packages/math/src/function/point-on.ts | 6 ++- packages/math/src/parametric/index.ts | 4 ++ packages/math/src/parametric/point-on.ts | 32 +++++++++++ packages/math/src/plane/index.ts | 68 +++++++++++++++++++++--- packages/sciux/src/math.ts | 4 +- test/src/examples.ts | 2 + test/src/template/math/axis.sciux | 3 ++ test/src/template/math/parametric.sciux | 2 +- test/src/template/math/plane.sciux | 2 +- 14 files changed, 178 insertions(+), 23 deletions(-) create mode 100644 packages/math/src/parametric/point-on.ts create mode 100644 test/src/template/math/axis.sciux diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts index 4be4070..a8a0b68 100644 --- a/packages/math/src/angle/arc.ts +++ b/packages/math/src/angle/arc.ts @@ -100,7 +100,7 @@ export const arc = defineComponent<'arc', typeof T.infer, { } }) -export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context }: { +export const angleArcCreation = defineAnimation((node: Node, _, { context }: { context: { from: number to: number @@ -108,15 +108,15 @@ export const angleArcCreation = defineAnimation((node: HTMLElement, _, { context endSide: number } }) => { - if (node.id !== 'canvas-angle-arc') - return const el = node as HTMLElement + if (el.id !== 'canvas-angle-arc') + return const path = el.querySelector('#angle-arc') as SVGPathElement return (progress) => { if (progress > 1) { return true } - path.setAttribute('d', describeArc([0, 0], (context.startSide ?? context.endSide) / 3, context.from, context.from - (context.from - context.to) * progress)) + path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.from - (context.from - context.to) * progress)) return false } }) diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts index 026f1cd..fde84f8 100644 --- a/packages/math/src/angle/bouding.ts +++ b/packages/math/src/angle/bouding.ts @@ -1,6 +1,6 @@ import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' import { LineType } from '../shared' import { describeArc } from '../utils/arc-path' import { resolveDasharray } from '../utils/line' @@ -28,6 +28,7 @@ export const bounding = defineComponent<'bounding', typeof T.infer, { }, setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-bounding' const pathString = describeArc([context.x, context.y], context.startSide ?? context.endSide, context.from, context.to) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', pathString) @@ -50,3 +51,23 @@ export const bounding = defineComponent<'bounding', typeof T.infer, { }, } }) + +export const boundingCreation = defineAnimation((node: Node, _, { context }: { context: { + x: number + y: number + from: number + to: number + startSide?: number + endSide: number +} }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-bounding') + return + const path = el.querySelector('#canvas-bounding-path') as SVGPathElement + return (progress) => { + if (progress > 1) + return true + path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0), context.from, context.from - (context.from - context.to) * progress)) + return false + } +}) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index e0a007e..c7e2065 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -106,10 +106,10 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { } }) -export const angleCreation = defineAnimation((node: HTMLElement) => { - if (node.id !== 'canvas-angle') - return +export const angleCreation = defineAnimation((node: Node) => { const el = node as HTMLElement + if (el.id !== 'canvas-angle') + return const startSide = el.querySelector('#angle-start-side') const endSide = el.querySelector('#angle-end-side') const start = [Number(startSide?.getAttribute('x2')), Number(startSide?.getAttribute('y2'))] diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts index 1b9395f..fc26c8d 100644 --- a/packages/math/src/axis/index.ts +++ b/packages/math/src/axis/index.ts @@ -1,6 +1,7 @@ +import type { ToRefs } from 'sciux-laplace' import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent } from 'sciux-laplace' +import { defineAnimation, defineComponent } from 'sciux-laplace' const T = type({ x: type.number, @@ -23,27 +24,33 @@ export const axis = defineComponent<'axis', typeof T.infer>((attrs) => { division: attrs.division, }, defaults: { - division: 20, + // division: 20, label: (count: number) => count.toString(), direction: 'right', }, setup(children) { const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') + root.id = 'canvas-axis' root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) const axes = document.createElementNS('http://www.w3.org/2000/svg', 'g') // axis line const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.id = 'canvas-axis-line' line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) axes.append(line) // axis arrow const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon') - arrow.setAttribute('points', '0,0 -7,5 10,0 -7,-5 0,0') + arrow.id = 'canvas-axis-arrow' + arrow.setAttribute('points', '-7,5 10,0 -7,-5 0,0') arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'}) rotate(${attrs.direction.value === 'left' ? '180' : attrs.direction.value === 'top' ? '270' : attrs.direction.value === 'bottom' ? '90' : '0'})`) + arrow.setAttribute('stroke', theme.pallete('primary')) + arrow.setAttribute('fill', theme.pallete('primary')) axes.append(arrow) // axis ticks const ticks = document.createElementNS('http://www.w3.org/2000/svg', 'g') + ticks.id = 'canvas-axis-ticks' for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line') tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString()) @@ -77,3 +84,30 @@ export const axis = defineComponent<'axis', typeof T.infer>((attrs) => { }, } }) + +export const axisCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs, context: { division: number } }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-axis') + return + const line = el.querySelector('#canvas-axis-line') as SVGLineElement + const arrow = el.querySelector('#canvas-axis-arrow') as SVGPolygonElement + const ticks = el.querySelector('#canvas-axis-ticks') as SVGGElement + const length = (attrs.range.value[1] - attrs.range.value[0]) * (context.division ?? attrs.division.value) + const height = 4 + const arrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17)) + arrow.setAttribute('fill-opacity', '0') + + return (progress) => { + if (progress > 1) + return true + line.setAttribute('stroke-dasharray', `${length * progress},${length * (1 - progress)}`) + ticks.setAttribute('stroke-dasharray', `${height * progress},${height * (1 - progress)}`) + if (progress < 0.5) { + arrow.setAttribute('stroke-dasharray', `${arrowRound * (progress * 2)},${arrowRound * (1 - progress * 2)}`) + } + else { + arrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`) + } + return false + } +}) diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts index 572f30c..7894da4 100644 --- a/packages/math/src/function/index.ts +++ b/packages/math/src/function/index.ts @@ -43,6 +43,7 @@ export const func = defineComponent<'function', typeof T.infer, { }, provides: { expr: attrs.expr, + division: context.division ?? attrs.division, }, setup: (children) => { const { domain, division, expr } = attrs diff --git a/packages/math/src/function/point-on.ts b/packages/math/src/function/point-on.ts index c0448d7..85c06bf 100644 --- a/packages/math/src/function/point-on.ts +++ b/packages/math/src/function/point-on.ts @@ -8,12 +8,16 @@ const T = type({ export const pointOn = defineComponent<'point-on', typeof T.infer, { expr: (x: number) => number + division?: number }>((attrs, context) => { return { name: 'point-on', attrs: T, globals: { - [attrs.as.value]: context.expr(attrs.x.value), + [attrs.as.value]: [ + attrs.x.value * (context.division ?? 1), + context.expr(attrs.x.value) * (context.division ?? 1), + ], }, } }) diff --git a/packages/math/src/parametric/index.ts b/packages/math/src/parametric/index.ts index 8c94943..7b6692e 100644 --- a/packages/math/src/parametric/index.ts +++ b/packages/math/src/parametric/index.ts @@ -68,6 +68,10 @@ export const parametric = defineComponent<'parametric', typeof T.infer, { container.append(path, ...children()) return container }, + provides: { + expr: attrs.expr, + division: context.division ?? attrs.division, + }, } }) diff --git a/packages/math/src/parametric/point-on.ts b/packages/math/src/parametric/point-on.ts new file mode 100644 index 0000000..b3c55ca --- /dev/null +++ b/packages/math/src/parametric/point-on.ts @@ -0,0 +1,32 @@ +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { generateTexNode } from '../utils/tex' + +const T = type({ + x: type.number, + y: type.number, + as: type.string, + asMax: type.string, + asMin: type.string, + value: type.string, +}) + +export const pointOn = defineComponent<'point-on', typeof T.infer, { + expr: (t: number) => [number, number] +}>((attrs, context) => { + const positions: [number, number][] = [] + if (attrs.x && attrs.y) { + console.warn(': x and y cannot be used together') + } + return { + name: 'point-on', + attrs: T, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) + const texElement = generateTexNode(attrs.value.value) + container.append(texElement) + return container + }, + } + }) diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts index cfcd258..222484a 100644 --- a/packages/math/src/plane/index.ts +++ b/packages/math/src/plane/index.ts @@ -1,6 +1,7 @@ +import type { ToRefs } from 'sciux-laplace' import { theme } from '@sciux/utils-theme' import { type } from 'arktype' -import { defineComponent, ref } from 'sciux-laplace' +import { defineAnimation, defineComponent, ref } from 'sciux-laplace' import { axis } from '../axis' const T = type({ @@ -23,10 +24,10 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { return { name: 'plane', provides: { - division: attrs.division, + division: attrs.division.value, }, defaults: { - division: 20, + // division: 20, xLabel: (count: number) => count.toString(), yLabel: (count: number) => count.toString(), xDirection: 'right', @@ -34,6 +35,7 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { }, setup(children) { const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') + root.id = 'canvas-plane' root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`) // x-axis const xAxis = axis({ @@ -44,7 +46,9 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { label: ref((count: number) => count === 0 ? '' : (attrs.xLabel.value as (count: number) => string)(count)), direction: attrs.xDirection, }, {}) - root.append( xAxis.setup?.(() => [])) + const xAxisNode = xAxis.setup?.(() => []) + xAxisNode.id = 'canvas-plane-x-axis' + root.append(xAxisNode) // y-axis const yAxis = axis({ x: attrs.x, @@ -67,9 +71,15 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { // Grid const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g') + grid.id = 'canvas-plane-grid' grid.setAttribute('stroke', theme.pallete('primary')) grid.setAttribute('stroke-width', '0.5') grid.setAttribute('fill', 'none') + + const xGrid = document.createElementNS('http://www.w3.org/2000/svg', 'g') + xGrid.id = 'canvas-plane-x-grid' + const yGrid = document.createElementNS('http://www.w3.org/2000/svg', 'g') + yGrid.id = 'canvas-plane-y-grid' for (let i = attrs.domain.value[0]; i < attrs.domain.value[1]; i += 1) { if (i === attrs.domain.value[0]) continue @@ -78,7 +88,7 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { line.setAttribute('y1', (attrs.range.value[0] * attrs.division.value).toString()) line.setAttribute('x2', (i * attrs.division.value).toString()) line.setAttribute('y2', (attrs.range.value[1] * attrs.division.value).toString()) - grid.append(line) + xGrid.append(line) } for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) { if (i === attrs.range.value[0]) @@ -88,15 +98,59 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { line.setAttribute('y1', (i * attrs.division.value).toString()) line.setAttribute('x2', (attrs.domain.value[1] * attrs.division.value).toString()) line.setAttribute('y2', (i * attrs.division.value).toString()) - grid.append(line) + yGrid.append(line) } + grid.append(xGrid, yGrid) // Root root.append(origin, grid) - root.append( yAxis.setup?.(() => [])) + const yAxisNode = yAxis.setup?.(() => []) + yAxisNode.id = 'canvas-plane-y-axis' + root.append(yAxisNode) root.append(...children()) return root }, } }) + +export const planeCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs, context: { division: number } }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-plane') + return + const xAxis = el.querySelector('#canvas-plane-x-axis') as SVGGElement + const yAxis = el.querySelector('#canvas-plane-y-axis') as SVGGElement + const xAxisLine = xAxis.querySelector('#canvas-axis-line') as SVGLineElement + const yAxisLine = yAxis.querySelector('#canvas-axis-line') as SVGLineElement + const xAxisArrow = xAxis.querySelector('#canvas-axis-arrow') as SVGPolygonElement + const yAxisArrow = yAxis.querySelector('#canvas-axis-arrow') as SVGPolygonElement + xAxisArrow.setAttribute('fill-opacity', '0') + yAxisArrow.setAttribute('fill-opacity', '0') + const xAxisTicks = xAxis.querySelector('#canvas-axis-ticks') as SVGGElement + const yAxisTicks = yAxis.querySelector('#canvas-axis-ticks') as SVGGElement + const xGrid = el.querySelector('#canvas-plane-x-grid') as SVGGElement + const yGrid = el.querySelector('#canvas-plane-y-grid') as SVGGElement + const xAxisLength = (attrs.domain.value[1] - attrs.domain.value[0]) * (context.division ?? attrs.division.value) + const yAxisLength = (attrs.range.value[1] - attrs.range.value[0]) * (context.division ?? attrs.division.value) + const axisArrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17)) + + return (progress) => { + if (progress > 1) + return true + xAxisLine.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`) + yAxisLine.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`) + if (progress < 0.5) { + xAxisArrow.setAttribute('stroke-dasharray', `${axisArrowRound * progress * 2},${axisArrowRound * (1 - progress * 2)}`) + yAxisArrow.setAttribute('stroke-dasharray', `${axisArrowRound * progress * 2},${axisArrowRound * (1 - progress * 2)}`) + } + else { + xAxisArrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`) + yAxisArrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`) + } + xAxisTicks.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`) + yAxisTicks.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`) + xGrid.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`) + yGrid.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`) + return false + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 2cbe4db..cea83b2 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, angleArcCreation, angleCreation, axis, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, tools } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, tools } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -14,7 +14,7 @@ export default function ({ animations, context }: RegisterContext): void { canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation) + creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation) Object.assign(context, tools) } diff --git a/test/src/examples.ts b/test/src/examples.ts index e9df595..0b704b0 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -2,6 +2,7 @@ import test from './example.sciux?raw' import ins01 from './template/instance/ins01.sciux?raw' import ins02 from './template/instance/ins02.sciux?raw' import angle from './template/math/angle.sciux?raw' +import axis from './template/math/axis.sciux?raw' import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' import parametric from './template/math/parametric.sciux?raw' @@ -19,6 +20,7 @@ export default { circle, plane, parametric, + axis, }, 'INSTANCE': { ins01, diff --git a/test/src/template/math/axis.sciux b/test/src/template/math/axis.sciux new file mode 100644 index 0000000..fa18e7f --- /dev/null +++ b/test/src/template/math/axis.sciux @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/src/template/math/parametric.sciux b/test/src/template/math/parametric.sciux index 4b5ccc8..746729d 100644 --- a/test/src/template/math/parametric.sciux +++ b/test/src/template/math/parametric.sciux @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux index febb21a..2f9d8c9 100644 --- a/test/src/template/math/plane.sciux +++ b/test/src/template/math/plane.sciux @@ -1,5 +1,5 @@ - + \ No newline at end of file From 9e52dc4e7c9f0391a5b6163fb41827fdc8b9a66e Mon Sep 17 00:00:00 2001 From: confuseder Date: Sat, 5 Jul 2025 14:35:38 +0800 Subject: [PATCH 24/31] feat: add component `` --- package.json | 3 + packages/sciux/src/widget.ts | 3 +- packages/widget/src/index.ts | 1 + packages/widget/src/mermaid.ts | 36 ++ pnpm-lock.yaml | 852 ++++++++++++++++++++++++++++++++ test/src/examples.ts | 2 + test/src/template/mermaid.sciux | 225 +++++++++ 7 files changed, 1121 insertions(+), 1 deletion(-) create mode 100644 packages/widget/src/mermaid.ts create mode 100644 test/src/template/mermaid.sciux diff --git a/package.json b/package.json index 5782595..a436456 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "prepare": "simple-git-hooks", "preview": "pnpm vite ./test" }, + "dependencies": { + "mermaid": "^11.8.0" + }, "devDependencies": { "@antfu/eslint-config": "catalog:", "@antfu/ni": "catalog:", diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts index 58a1160..f81aebc 100644 --- a/packages/sciux/src/widget.ts +++ b/packages/sciux/src/widget.ts @@ -1,6 +1,6 @@ import type { ComponentSpace } from 'sciux-laplace' import type { RegisterContext } from './types' -import { canvas, code, link, table, tex } from '@sciux/widget' +import { canvas, code, link, mermaid, table, tex } from '@sciux/widget' import { root, TextMode, withSpace } from 'sciux-laplace' export const canvasSpace: ComponentSpace = new Map() @@ -12,6 +12,7 @@ export default function ({ root, textModes }: RegisterContext): void { root.set('link', link) root.set('code', code) root.set('tex', tex) + root.set('mermaid', mermaid) textModes.set('code', TextMode.RCDATA) textModes.set('tex', TextMode.RCDATA) } diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index 7911984..2392748 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -1,5 +1,6 @@ export { default as canvas } from './canvas' export { default as code } from './code' export { default as link } from './link' +export { default as mermaid } from './mermaid' export { default as table } from './table' export { default as tex } from './tex' diff --git a/packages/widget/src/mermaid.ts b/packages/widget/src/mermaid.ts new file mode 100644 index 0000000..c989615 --- /dev/null +++ b/packages/widget/src/mermaid.ts @@ -0,0 +1,36 @@ +import { type } from 'arktype' +import mermaid from 'mermaid' +import { defineComponent } from 'sciux-laplace' + +const T = type({ + theme: '\'default\' | \'base\' | \'dark\' | \'forest\' | \'neutral\' | \'null\'', +}) + +export default defineComponent<'mermaid', typeof T.infer>((attrs) => { + return { + name: 'mermaid', + attrs: T, + defaults: { + theme: 'dark', + }, + setup(children) { + const kids = children() + const content = kids[0].textContent ?? '' + + const container = document.createElement('div') + const id = `mermaid-svg-${Math.random().toString(36).slice(2)}` + + mermaid.initialize({ + theme: attrs.theme.value, + }) + + mermaid.render(id, content).then((result) => { + container.innerHTML = result.svg + }).catch((e) => { + container.innerHTML = `
Mermaid render failed\n${e}
` + }) + + return container + }, + } +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 95aca91..2c8df32 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -91,6 +91,10 @@ catalogs: importers: .: + dependencies: + mermaid: + specifier: ^11.8.0 + version: 11.8.0 devDependencies: '@antfu/eslint-config': specifier: 'catalog:' @@ -541,6 +545,24 @@ packages: resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==} engines: {node: '>=6.9.0'} + '@braintree/sanitize-url@7.1.1': + resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==} + + '@chevrotain/cst-dts-gen@11.0.3': + resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==} + + '@chevrotain/gast@11.0.3': + resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==} + + '@chevrotain/regexp-to-ast@11.0.3': + resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==} + + '@chevrotain/types@11.0.3': + resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==} + + '@chevrotain/utils@11.0.3': + resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==} + '@clack/core@0.4.2': resolution: {integrity: sha512-NYQfcEy8MWIxrT5Fj8nIVchfRFA26yYKJcvBS7WlUIlw2OmQOY9DhGGXMovyI5J5PpxrCPGkgUi207EBrjpBvg==} @@ -1157,6 +1179,9 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@mermaid-js/parser@0.6.0': + resolution: {integrity: sha512-7DNESgpyZ5WG1SIkrYafVBhWmImtmQuoxOO1lawI3gQYWxBX3v1FW3IyuuRfKJAO06XrZR71W0Kif5VEGGd4VA==} + '@napi-rs/wasm-runtime@0.2.10': resolution: {integrity: sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ==} @@ -1424,12 +1449,108 @@ packages: '@tybys/wasm-util@0.9.0': resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==} + '@types/d3-array@3.2.1': + resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==} + + '@types/d3-axis@3.0.6': + resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==} + + '@types/d3-brush@3.0.6': + resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==} + + '@types/d3-chord@3.0.6': + resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==} + + '@types/d3-color@3.1.3': + resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==} + + '@types/d3-contour@3.0.6': + resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==} + + '@types/d3-delaunay@6.0.4': + resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==} + + '@types/d3-dispatch@3.0.6': + resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==} + + '@types/d3-drag@3.0.7': + resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==} + + '@types/d3-dsv@3.0.7': + resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==} + + '@types/d3-ease@3.0.2': + resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==} + + '@types/d3-fetch@3.0.7': + resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==} + + '@types/d3-force@3.0.10': + resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==} + + '@types/d3-format@3.0.4': + resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==} + + '@types/d3-geo@3.1.0': + resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==} + + '@types/d3-hierarchy@3.1.7': + resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==} + + '@types/d3-interpolate@3.0.4': + resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==} + + '@types/d3-path@3.1.1': + resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==} + + '@types/d3-polygon@3.0.2': + resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==} + + '@types/d3-quadtree@3.0.6': + resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==} + + '@types/d3-random@3.0.3': + resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==} + + '@types/d3-scale-chromatic@3.1.0': + resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==} + + '@types/d3-scale@4.0.9': + resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==} + + '@types/d3-selection@3.0.11': + resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==} + + '@types/d3-shape@3.1.7': + resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==} + + '@types/d3-time-format@4.0.3': + resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==} + + '@types/d3-time@3.0.4': + resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==} + + '@types/d3-timer@3.0.2': + resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==} + + '@types/d3-transition@3.0.9': + resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==} + + '@types/d3-zoom@3.0.8': + resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==} + + '@types/d3@7.4.3': + resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==} + '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} '@types/estree@1.0.7': resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==} + '@types/geojson@7946.0.16': + resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} + '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} @@ -1460,6 +1581,9 @@ packages: '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -2032,6 +2156,14 @@ packages: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} + chevrotain-allstar@0.3.1: + resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==} + peerDependencies: + chevrotain: ^11.0.0 + + chevrotain@11.0.3: + resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==} + chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -2133,6 +2265,12 @@ packages: core-js-compat@3.42.0: resolution: {integrity: sha512-bQasjMfyDGyaeWKBIu33lHh9qlSR0MFE/Nmc6nMjf/iU9b3rSMdAYz1Baxrv4lPdGUsTqZudHA4jIGSJy0SWZQ==} + cose-base@1.0.3: + resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==} + + cose-base@2.2.0: + resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} + cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -2192,6 +2330,165 @@ packages: csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + cytoscape-cose-bilkent@4.1.0: + resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape-fcose@2.2.0: + resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape@3.32.0: + resolution: {integrity: sha512-5JHBC9n75kz5851jeklCPmZWcg3hUe6sjqJvyk3+hVqFaKcHwHgxsjeN1yLmggoUc6STbtm9/NQyabQehfjvWQ==} + engines: {node: '>=0.10'} + + d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + + d3-array@3.2.4: + resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==} + engines: {node: '>=12'} + + d3-axis@3.0.0: + resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==} + engines: {node: '>=12'} + + d3-brush@3.0.0: + resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==} + engines: {node: '>=12'} + + d3-chord@3.0.1: + resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==} + engines: {node: '>=12'} + + d3-color@3.1.0: + resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==} + engines: {node: '>=12'} + + d3-contour@4.0.2: + resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==} + engines: {node: '>=12'} + + d3-delaunay@6.0.4: + resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} + engines: {node: '>=12'} + + d3-dispatch@3.0.1: + resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==} + engines: {node: '>=12'} + + d3-drag@3.0.0: + resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==} + engines: {node: '>=12'} + + d3-dsv@3.0.1: + resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==} + engines: {node: '>=12'} + hasBin: true + + d3-ease@3.0.1: + resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} + engines: {node: '>=12'} + + d3-fetch@3.0.1: + resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==} + engines: {node: '>=12'} + + d3-force@3.0.0: + resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==} + engines: {node: '>=12'} + + d3-format@3.1.0: + resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==} + engines: {node: '>=12'} + + d3-geo@3.1.1: + resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==} + engines: {node: '>=12'} + + d3-hierarchy@3.1.2: + resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==} + engines: {node: '>=12'} + + d3-interpolate@3.0.1: + resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==} + engines: {node: '>=12'} + + d3-path@1.0.9: + resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} + + d3-path@3.1.0: + resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==} + engines: {node: '>=12'} + + d3-polygon@3.0.1: + resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==} + engines: {node: '>=12'} + + d3-quadtree@3.0.1: + resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==} + engines: {node: '>=12'} + + d3-random@3.0.1: + resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==} + engines: {node: '>=12'} + + d3-sankey@0.12.3: + resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} + + d3-scale-chromatic@3.1.0: + resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==} + engines: {node: '>=12'} + + d3-scale@4.0.2: + resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==} + engines: {node: '>=12'} + + d3-selection@3.0.0: + resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==} + engines: {node: '>=12'} + + d3-shape@1.3.7: + resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} + + d3-shape@3.2.0: + resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==} + engines: {node: '>=12'} + + d3-time-format@4.1.0: + resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==} + engines: {node: '>=12'} + + d3-time@3.1.0: + resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==} + engines: {node: '>=12'} + + d3-timer@3.0.1: + resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} + engines: {node: '>=12'} + + d3-transition@3.0.1: + resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==} + engines: {node: '>=12'} + peerDependencies: + d3-selection: 2 - 3 + + d3-zoom@3.0.0: + resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==} + engines: {node: '>=12'} + + d3@7.9.0: + resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==} + engines: {node: '>=12'} + + dagre-d3-es@7.0.11: + resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==} + + dayjs@1.11.13: + resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==} + de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -2229,6 +2526,9 @@ packages: defu@6.1.4: resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + delaunator@5.0.1: + resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} + dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} @@ -2249,6 +2549,9 @@ packages: resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} engines: {node: '>= 4'} + dompurify@3.2.6: + resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==} + domutils@3.2.2: resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} @@ -2691,6 +2994,9 @@ packages: resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} engines: {node: '>=10'} + hachure-fill@0.5.2: + resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + has-flag@4.0.0: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} @@ -2722,6 +3028,10 @@ packages: resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} engines: {node: '>=16.17.0'} + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + ignore@5.3.2: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} @@ -2742,6 +3052,13 @@ packages: resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} engines: {node: '>=8'} + internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + + internmap@2.0.3: + resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} + engines: {node: '>=12'} + is-alphabetical@2.0.1: resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} @@ -2876,6 +3193,9 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + khroma@2.1.0: + resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==} + kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} engines: {node: '>=6'} @@ -2886,6 +3206,16 @@ packages: kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + langium@3.3.1: + resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==} + engines: {node: '>=16.0.0'} + + layout-base@1.0.2: + resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} + + layout-base@2.0.1: + resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==} + levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} @@ -2922,6 +3252,9 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + lodash-es@4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + lodash.memoize@4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} @@ -2962,6 +3295,11 @@ packages: markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + marked@15.0.12: + resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==} + engines: {node: '>= 18'} + hasBin: true + mdast-util-find-and-replace@3.0.2: resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} @@ -3017,6 +3355,9 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} + mermaid@11.8.0: + resolution: {integrity: sha512-uAZUwnBiqREZcUrFw3G5iQ5Pj3hTYUP95EZc3ec/nGBzHddJZydzYGE09tGZDBS1VoSoDn0symZ85FmypSTo5g==} + micromark-core-commonmark@2.0.3: resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} @@ -3328,6 +3669,9 @@ packages: path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + path-data-parser@0.1.0: + resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==} + path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -3401,6 +3745,12 @@ packages: engines: {node: '>=18.12'} hasBin: true + points-on-curve@0.2.0: + resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} + + points-on-path@0.2.1: + resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} + postcss-calc@10.1.1: resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==} engines: {node: ^18.12 || ^20.9 || >=22.0} @@ -3705,6 +4055,9 @@ packages: rfdc@1.4.1: resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==} + robust-predicates@3.0.2: + resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} + rollup-plugin-dts@6.2.1: resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==} engines: {node: '>=16'} @@ -3717,9 +4070,18 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + roughjs@4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} + run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + rw@1.3.3: + resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} + + safer-buffer@2.1.2: + resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + sciux-laplace@0.0.1-beta.12: resolution: {integrity: sha512-mMj6cINCotgTS/IPwitfh6RRA3fujk+n0rDRIpag4FAGcYel8eFNhIYuCGn6QfBtQgVtmpCcXS+d7ec23rnvog==} @@ -3873,6 +4235,9 @@ packages: peerDependencies: postcss: ^8.4.32 + stylis@4.3.6: + resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==} + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -3970,6 +4335,10 @@ packages: peerDependencies: typescript: '>=4.8.4' + ts-dedent@2.2.0: + resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} + engines: {node: '>=6.10'} + ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} @@ -4137,6 +4506,10 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + uuid@11.1.0: + resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==} + hasBin: true + validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} @@ -4242,6 +4615,26 @@ packages: jsdom: optional: true + vscode-jsonrpc@8.2.0: + resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==} + engines: {node: '>=14.0.0'} + + vscode-languageserver-protocol@3.17.5: + resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==} + + vscode-languageserver-textdocument@1.0.12: + resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==} + + vscode-languageserver-types@3.17.5: + resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==} + + vscode-languageserver@9.0.1: + resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==} + hasBin: true + + vscode-uri@3.0.8: + resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + vue-eslint-parser@9.4.3: resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==} engines: {node: ^14.17.0 || >=16.0.0} @@ -4617,6 +5010,25 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 + '@braintree/sanitize-url@7.1.1': {} + + '@chevrotain/cst-dts-gen@11.0.3': + dependencies: + '@chevrotain/gast': 11.0.3 + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/gast@11.0.3': + dependencies: + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/regexp-to-ast@11.0.3': {} + + '@chevrotain/types@11.0.3': {} + + '@chevrotain/utils@11.0.3': {} + '@clack/core@0.4.2': dependencies: picocolors: 1.1.1 @@ -5050,6 +5462,10 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 + '@mermaid-js/parser@0.6.0': + dependencies: + langium: 3.3.1 + '@napi-rs/wasm-runtime@0.2.10': dependencies: '@emnapi/core': 1.4.3 @@ -5343,12 +5759,131 @@ snapshots: tslib: 2.8.1 optional: true + '@types/d3-array@3.2.1': {} + + '@types/d3-axis@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-brush@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-chord@3.0.6': {} + + '@types/d3-color@3.1.3': {} + + '@types/d3-contour@3.0.6': + dependencies: + '@types/d3-array': 3.2.1 + '@types/geojson': 7946.0.16 + + '@types/d3-delaunay@6.0.4': {} + + '@types/d3-dispatch@3.0.6': {} + + '@types/d3-drag@3.0.7': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-dsv@3.0.7': {} + + '@types/d3-ease@3.0.2': {} + + '@types/d3-fetch@3.0.7': + dependencies: + '@types/d3-dsv': 3.0.7 + + '@types/d3-force@3.0.10': {} + + '@types/d3-format@3.0.4': {} + + '@types/d3-geo@3.1.0': + dependencies: + '@types/geojson': 7946.0.16 + + '@types/d3-hierarchy@3.1.7': {} + + '@types/d3-interpolate@3.0.4': + dependencies: + '@types/d3-color': 3.1.3 + + '@types/d3-path@3.1.1': {} + + '@types/d3-polygon@3.0.2': {} + + '@types/d3-quadtree@3.0.6': {} + + '@types/d3-random@3.0.3': {} + + '@types/d3-scale-chromatic@3.1.0': {} + + '@types/d3-scale@4.0.9': + dependencies: + '@types/d3-time': 3.0.4 + + '@types/d3-selection@3.0.11': {} + + '@types/d3-shape@3.1.7': + dependencies: + '@types/d3-path': 3.1.1 + + '@types/d3-time-format@4.0.3': {} + + '@types/d3-time@3.0.4': {} + + '@types/d3-timer@3.0.2': {} + + '@types/d3-transition@3.0.9': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-zoom@3.0.8': + dependencies: + '@types/d3-interpolate': 3.0.4 + '@types/d3-selection': 3.0.11 + + '@types/d3@7.4.3': + dependencies: + '@types/d3-array': 3.2.1 + '@types/d3-axis': 3.0.6 + '@types/d3-brush': 3.0.6 + '@types/d3-chord': 3.0.6 + '@types/d3-color': 3.1.3 + '@types/d3-contour': 3.0.6 + '@types/d3-delaunay': 6.0.4 + '@types/d3-dispatch': 3.0.6 + '@types/d3-drag': 3.0.7 + '@types/d3-dsv': 3.0.7 + '@types/d3-ease': 3.0.2 + '@types/d3-fetch': 3.0.7 + '@types/d3-force': 3.0.10 + '@types/d3-format': 3.0.4 + '@types/d3-geo': 3.1.0 + '@types/d3-hierarchy': 3.1.7 + '@types/d3-interpolate': 3.0.4 + '@types/d3-path': 3.1.1 + '@types/d3-polygon': 3.0.2 + '@types/d3-quadtree': 3.0.6 + '@types/d3-random': 3.0.3 + '@types/d3-scale': 4.0.9 + '@types/d3-scale-chromatic': 3.1.0 + '@types/d3-selection': 3.0.11 + '@types/d3-shape': 3.1.7 + '@types/d3-time': 3.0.4 + '@types/d3-time-format': 4.0.3 + '@types/d3-timer': 3.0.2 + '@types/d3-transition': 3.0.9 + '@types/d3-zoom': 3.0.8 + '@types/debug@4.1.12': dependencies: '@types/ms': 2.1.0 '@types/estree@1.0.7': {} + '@types/geojson@7946.0.16': {} + '@types/hast@3.0.4': dependencies: '@types/unist': 3.0.3 @@ -5378,6 +5913,9 @@ snapshots: '@types/resolve@1.20.2': {} + '@types/trusted-types@2.0.7': + optional: true + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -6051,6 +6589,20 @@ snapshots: check-error@2.1.1: {} + chevrotain-allstar@0.3.1(chevrotain@11.0.3): + dependencies: + chevrotain: 11.0.3 + lodash-es: 4.17.21 + + chevrotain@11.0.3: + dependencies: + '@chevrotain/cst-dts-gen': 11.0.3 + '@chevrotain/gast': 11.0.3 + '@chevrotain/regexp-to-ast': 11.0.3 + '@chevrotain/types': 11.0.3 + '@chevrotain/utils': 11.0.3 + lodash-es: 4.17.21 + chokidar@3.6.0: dependencies: anymatch: 3.1.3 @@ -6138,6 +6690,14 @@ snapshots: dependencies: browserslist: 4.24.5 + cose-base@1.0.3: + dependencies: + layout-base: 1.0.2 + + cose-base@2.2.0: + dependencies: + layout-base: 2.0.1 + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -6225,6 +6785,192 @@ snapshots: csstype@3.1.3: {} + cytoscape-cose-bilkent@4.1.0(cytoscape@3.32.0): + dependencies: + cose-base: 1.0.3 + cytoscape: 3.32.0 + + cytoscape-fcose@2.2.0(cytoscape@3.32.0): + dependencies: + cose-base: 2.2.0 + cytoscape: 3.32.0 + + cytoscape@3.32.0: {} + + d3-array@2.12.1: + dependencies: + internmap: 1.0.1 + + d3-array@3.2.4: + dependencies: + internmap: 2.0.3 + + d3-axis@3.0.0: {} + + d3-brush@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3-chord@3.0.1: + dependencies: + d3-path: 3.1.0 + + d3-color@3.1.0: {} + + d3-contour@4.0.2: + dependencies: + d3-array: 3.2.4 + + d3-delaunay@6.0.4: + dependencies: + delaunator: 5.0.1 + + d3-dispatch@3.0.1: {} + + d3-drag@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-selection: 3.0.0 + + d3-dsv@3.0.1: + dependencies: + commander: 7.2.0 + iconv-lite: 0.6.3 + rw: 1.3.3 + + d3-ease@3.0.1: {} + + d3-fetch@3.0.1: + dependencies: + d3-dsv: 3.0.1 + + d3-force@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-quadtree: 3.0.1 + d3-timer: 3.0.1 + + d3-format@3.1.0: {} + + d3-geo@3.1.1: + dependencies: + d3-array: 3.2.4 + + d3-hierarchy@3.1.2: {} + + d3-interpolate@3.0.1: + dependencies: + d3-color: 3.1.0 + + d3-path@1.0.9: {} + + d3-path@3.1.0: {} + + d3-polygon@3.0.1: {} + + d3-quadtree@3.0.1: {} + + d3-random@3.0.1: {} + + d3-sankey@0.12.3: + dependencies: + d3-array: 2.12.1 + d3-shape: 1.3.7 + + d3-scale-chromatic@3.1.0: + dependencies: + d3-color: 3.1.0 + d3-interpolate: 3.0.1 + + d3-scale@4.0.2: + dependencies: + d3-array: 3.2.4 + d3-format: 3.1.0 + d3-interpolate: 3.0.1 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + + d3-selection@3.0.0: {} + + d3-shape@1.3.7: + dependencies: + d3-path: 1.0.9 + + d3-shape@3.2.0: + dependencies: + d3-path: 3.1.0 + + d3-time-format@4.1.0: + dependencies: + d3-time: 3.1.0 + + d3-time@3.1.0: + dependencies: + d3-array: 3.2.4 + + d3-timer@3.0.1: {} + + d3-transition@3.0.1(d3-selection@3.0.0): + dependencies: + d3-color: 3.1.0 + d3-dispatch: 3.0.1 + d3-ease: 3.0.1 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-timer: 3.0.1 + + d3-zoom@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3@7.9.0: + dependencies: + d3-array: 3.2.4 + d3-axis: 3.0.0 + d3-brush: 3.0.0 + d3-chord: 3.0.1 + d3-color: 3.1.0 + d3-contour: 4.0.2 + d3-delaunay: 6.0.4 + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-dsv: 3.0.1 + d3-ease: 3.0.1 + d3-fetch: 3.0.1 + d3-force: 3.0.0 + d3-format: 3.1.0 + d3-geo: 3.1.1 + d3-hierarchy: 3.1.2 + d3-interpolate: 3.0.1 + d3-path: 3.1.0 + d3-polygon: 3.0.1 + d3-quadtree: 3.0.1 + d3-random: 3.0.1 + d3-scale: 4.0.2 + d3-scale-chromatic: 3.1.0 + d3-selection: 3.0.0 + d3-shape: 3.2.0 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + d3-timer: 3.0.1 + d3-transition: 3.0.1(d3-selection@3.0.0) + d3-zoom: 3.0.0 + + dagre-d3-es@7.0.11: + dependencies: + d3: 7.9.0 + lodash-es: 4.17.21 + + dayjs@1.11.13: {} + de-indent@1.0.2: {} debug@3.2.7: @@ -6247,6 +6993,10 @@ snapshots: defu@6.1.4: {} + delaunator@5.0.1: + dependencies: + robust-predicates: 3.0.2 + dequal@2.0.3: {} destr@2.0.5: {} @@ -6267,6 +7017,10 @@ snapshots: dependencies: domelementtype: 2.3.0 + dompurify@3.2.6: + optionalDependencies: + '@types/trusted-types': 2.0.7 + domutils@3.2.2: dependencies: dom-serializer: 2.0.0 @@ -6851,6 +7605,8 @@ snapshots: dependencies: duplexer: 0.1.2 + hachure-fill@0.5.2: {} + has-flag@4.0.0: {} hasown@2.0.2: @@ -6885,6 +7641,10 @@ snapshots: human-signals@5.0.0: {} + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + ignore@5.3.2: {} ignore@7.0.4: {} @@ -6898,6 +7658,10 @@ snapshots: indent-string@4.0.0: {} + internmap@1.0.1: {} + + internmap@2.0.3: {} + is-alphabetical@2.0.1: {} is-alphanumerical@2.0.1: @@ -7002,12 +7766,26 @@ snapshots: dependencies: json-buffer: 3.0.1 + khroma@2.1.0: {} + kleur@3.0.3: {} knitwork@1.2.0: {} kolorist@1.8.0: {} + langium@3.3.1: + dependencies: + chevrotain: 11.0.3 + chevrotain-allstar: 0.3.1(chevrotain@11.0.3) + vscode-languageserver: 9.0.1 + vscode-languageserver-textdocument: 1.0.12 + vscode-uri: 3.0.8 + + layout-base@1.0.2: {} + + layout-base@2.0.1: {} + levn@0.4.1: dependencies: prelude-ls: 1.2.1 @@ -7057,6 +7835,8 @@ snapshots: dependencies: p-locate: 5.0.0 + lodash-es@4.17.21: {} + lodash.memoize@4.1.2: {} lodash.merge@4.6.2: {} @@ -7093,6 +7873,8 @@ snapshots: markdown-table@3.0.4: {} + marked@15.0.12: {} + mdast-util-find-and-replace@3.0.2: dependencies: '@types/mdast': 4.0.4 @@ -7228,6 +8010,31 @@ snapshots: merge2@1.4.1: {} + mermaid@11.8.0: + dependencies: + '@braintree/sanitize-url': 7.1.1 + '@iconify/utils': 2.3.0 + '@mermaid-js/parser': 0.6.0 + '@types/d3': 7.4.3 + cytoscape: 3.32.0 + cytoscape-cose-bilkent: 4.1.0(cytoscape@3.32.0) + cytoscape-fcose: 2.2.0(cytoscape@3.32.0) + d3: 7.9.0 + d3-sankey: 0.12.3 + dagre-d3-es: 7.0.11 + dayjs: 1.11.13 + dompurify: 3.2.6 + katex: 0.16.22 + khroma: 2.1.0 + lodash-es: 4.17.21 + marked: 15.0.12 + roughjs: 4.6.6 + stylis: 4.3.6 + ts-dedent: 2.2.0 + uuid: 11.1.0 + transitivePeerDependencies: + - supports-color + micromark-core-commonmark@2.0.3: dependencies: decode-named-character-reference: 1.1.0 @@ -7646,6 +8453,8 @@ snapshots: path-browserify@1.0.1: {} + path-data-parser@0.1.0: {} + path-exists@4.0.0: {} path-key@3.1.1: {} @@ -7698,6 +8507,13 @@ snapshots: pnpm@10.4.0: {} + points-on-curve@0.2.0: {} + + points-on-path@0.2.1: + dependencies: + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + postcss-calc@10.1.1(postcss@8.5.3): dependencies: postcss: 8.5.3 @@ -7970,6 +8786,8 @@ snapshots: rfdc@1.4.1: {} + robust-predicates@3.0.2: {} + rollup-plugin-dts@6.2.1(rollup@4.41.1)(typescript@5.8.3): dependencies: magic-string: 0.30.17 @@ -8004,10 +8822,21 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.41.1 fsevents: 2.3.3 + roughjs@4.6.6: + dependencies: + hachure-fill: 0.5.2 + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + points-on-path: 0.2.1 + run-parallel@1.2.0: dependencies: queue-microtask: 1.2.3 + rw@1.3.3: {} + + safer-buffer@2.1.2: {} + sciux-laplace@0.0.1-beta.12: dependencies: '@vue/reactivity': 3.5.14 @@ -8181,6 +9010,8 @@ snapshots: postcss: 8.5.3 postcss-selector-parser: 7.1.0 + stylis@4.3.6: {} + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.8 @@ -8275,6 +9106,8 @@ snapshots: dependencies: typescript: 5.8.3 + ts-dedent@2.2.0: {} + ts-interface-checker@0.1.13: {} tsconfck@3.1.5(typescript@5.8.3): @@ -8526,6 +9359,8 @@ snapshots: util-deprecate@1.0.2: {} + uuid@11.1.0: {} + validate-npm-package-license@3.0.4: dependencies: spdx-correct: 3.2.0 @@ -8687,6 +9522,23 @@ snapshots: - tsx - yaml + vscode-jsonrpc@8.2.0: {} + + vscode-languageserver-protocol@3.17.5: + dependencies: + vscode-jsonrpc: 8.2.0 + vscode-languageserver-types: 3.17.5 + + vscode-languageserver-textdocument@1.0.12: {} + + vscode-languageserver-types@3.17.5: {} + + vscode-languageserver@9.0.1: + dependencies: + vscode-languageserver-protocol: 3.17.5 + + vscode-uri@3.0.8: {} + vue-eslint-parser@9.4.3(eslint@9.20.1(jiti@2.4.2)): dependencies: debug: 4.4.1 diff --git a/test/src/examples.ts b/test/src/examples.ts index 0b704b0..a5a018f 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -7,6 +7,7 @@ import circle from './template/math/circle.sciux?raw' import figure from './template/math/figure.sciux?raw' import parametric from './template/math/parametric.sciux?raw' import plane from './template/math/plane.sciux?raw' +import mermaid from './template/mermaid.sciux?raw' import model from './template/model.sciux?raw' import widget from './template/widget.sciux?raw' @@ -26,4 +27,5 @@ export default { ins01, ins02, }, + mermaid, } diff --git a/test/src/template/mermaid.sciux b/test/src/template/mermaid.sciux new file mode 100644 index 0000000..b7e8ba3 --- /dev/null +++ b/test/src/template/mermaid.sciux @@ -0,0 +1,225 @@ + + + + flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] + + + + + + sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! + + + + + + classDiagram + Animal <|-- Duck + Animal <|-- Fish + Animal <|-- Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + } + + + + + + stateDiagram-v2 + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] + + + + + + erDiagram + CUSTOMER }|..|{ DELIVERY-ADDRESS : has + CUSTOMER ||--o{ ORDER : places + CUSTOMER ||--o{ INVOICE : "liable for" + DELIVERY-ADDRESS ||--o{ ORDER : receives + INVOICE ||--|{ ORDER : covers + ORDER ||--|{ ORDER-ITEM : includes + PRODUCT-CATEGORY ||--|{ PRODUCT : contains + PRODUCT ||--o{ ORDER-ITEM : "ordered in" + + + + + + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d + + + + + + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me + + + + + + gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit + + + + + + pie title Pets adopted by volunteers + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 + + + + + + mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness<br/>and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid + + + + + + quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78] + + + + + + xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + + + + + + block-beta + columns 3 + doc>"Document"]:3 + space down1<[" "]>(down) space + + block:e:3 + l["left"] + m("A wide one in the middle") + r["right"] + end + space down2<[" "]>(down) space + db[("DB")]:3 + space:3 + D space C + db --> D + C --> db + D --> C + style m fill:#d6d,stroke:#333,stroke-width:4px + + + + + + packet-beta + 0-15: "Source Port" + 16-31: "Destination Port" + 32-63: "Sequence Number" + 64-95: "Acknowledgment Number" + 96-99: "Data Offset" + 100-105: "Reserved" + 106: "URG" + 107: "ACK" + 108: "PSH" + 109: "RST" + 110: "SYN" + 111: "FIN" + 112-127: "Window" + 128-143: "Checksum" + 144-159: "Urgent Pointer" + 160-191: "(Options and Padding)" + 192-255: "Data (variable length)" + + +
\ No newline at end of file From bce6fa8382d994dbf63453b78b7cbcd728fb73ad Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 5 Jul 2025 14:53:49 +0800 Subject: [PATCH 25/31] feat: projection --- packages/math/src/plane/index.ts | 6 ++ packages/math/src/plane/projection.ts | 78 +++++++++++++++++++++++++ packages/sciux/src/math.ts | 4 +- test/src/template/math/parametric.sciux | 3 +- 4 files changed, 88 insertions(+), 3 deletions(-) create mode 100644 packages/math/src/plane/projection.ts diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts index 222484a..cb43295 100644 --- a/packages/math/src/plane/index.ts +++ b/packages/math/src/plane/index.ts @@ -3,6 +3,7 @@ import { theme } from '@sciux/utils-theme' import { type } from 'arktype' import { defineAnimation, defineComponent, ref } from 'sciux-laplace' import { axis } from '../axis' +import { projection } from './projection' const T = type({ x: type.number, @@ -21,7 +22,10 @@ interface withLabelT { } export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { + const space = new Map() + space.set('projection', projection) return { + space, name: 'plane', provides: { division: attrs.division.value, @@ -154,3 +158,5 @@ export const planeCreation = defineAnimation((node: Node, _, { attrs, context }: return false } }) + +export { projectionCreation } from './projection' diff --git a/packages/math/src/plane/projection.ts b/packages/math/src/plane/projection.ts new file mode 100644 index 0000000..df0342f --- /dev/null +++ b/packages/math/src/plane/projection.ts @@ -0,0 +1,78 @@ +import type { ToRefs } from 'sciux-laplace' +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineAnimation, defineComponent } from 'sciux-laplace' +import { generateTexNode } from '../utils/tex' + +const T = type({ + x: 'number', + y: 'number', + type: '\'horizontal\' | \'vertical\' | \'both\'', + value: 'string', +}) + +export const projection = defineComponent<'projection', typeof T.infer, { + division: number +}>((attrs, context) => { + return { + name: 'projection', + attrs: T, + defaults: { + type: 'both', + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-plane-projection' + container.setAttribute('transform', `translate(${attrs.x.value * context.division}, ${attrs.y.value * context.division})`) + if (attrs.type.value === 'horizontal' || attrs.type.value === 'both') { + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.id = 'canvas-plane-projection-horizontal-line' + line.setAttribute('x1', '0') + line.setAttribute('y1', '0') + line.setAttribute('x2', '0') + line.setAttribute('y2', (-context.division * attrs.y.value).toString()) + line.setAttribute('stroke', theme.pallete('info')) + line.setAttribute('stroke-dasharray', theme.dasharray('dashed')) + container.append(line) + } + if (attrs.type.value === 'vertical' || attrs.type.value === 'both') { + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.id = 'canvas-plane-projection-vertical-line' + line.setAttribute('x1', '0') + line.setAttribute('y1', '0') + line.setAttribute('x2', (-context.division * attrs.x.value).toString()) + line.setAttribute('y2', '0') + line.setAttribute('stroke', theme.pallete('info')) + line.setAttribute('stroke-dasharray', theme.dasharray('dashed')) + container.append(line) + } + const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle') + dot.id = 'canvas-plane-projection-dot' + dot.setAttribute('r', '3') + dot.setAttribute('fill', theme.pallete('info')) + container.append(dot) + const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g') + texContainer.style.color = theme.pallete('info') + const tex = generateTexNode(attrs.value.value) + texContainer.append(tex) + container.append(texContainer) + return container + }, + } +}) + +export const projectionCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs, context: { division: number } }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-plane-projection') + return + const horizontalLine = el.querySelector('#canvas-plane-projection-horizontal-line') as SVGLineElement + const verticalLine = el.querySelector('#canvas-plane-projection-vertical-line') as SVGLineElement + return (progress) => { + if (progress > 1) + return true + horizontalLine.setAttribute('y2', `${-context.division * attrs.y.value * progress}`) + verticalLine.setAttribute('x2', `${-context.division * attrs.x.value * progress}`) + return false + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index cea83b2..78f01b5 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, tools } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -14,7 +14,7 @@ export default function ({ animations, context }: RegisterContext): void { canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation) + creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation) Object.assign(context, tools) } diff --git a/test/src/template/math/parametric.sciux b/test/src/template/math/parametric.sciux index 746729d..ebefb7d 100644 --- a/test/src/template/math/parametric.sciux +++ b/test/src/template/math/parametric.sciux @@ -1,5 +1,6 @@ - + + \ No newline at end of file From a10b96713abea9e001948efd0260a3990f8ca15e Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 5 Jul 2025 15:17:45 +0800 Subject: [PATCH 26/31] feat: vector --- packages/math/src/index.ts | 3 +- packages/math/src/vector/index.ts | 68 +++++++++++++++++++++++++ packages/sciux/src/math.ts | 5 +- test/src/template/math/parametric.sciux | 6 ++- 4 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 packages/math/src/vector/index.ts diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index b920adf..09621eb 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -7,5 +7,6 @@ export * from './line' export * from './parametric' export * from './plane' export * from './shared' - export * as tools from './tools' + +export * from './vector' diff --git a/packages/math/src/vector/index.ts b/packages/math/src/vector/index.ts new file mode 100644 index 0000000..5b2bd57 --- /dev/null +++ b/packages/math/src/vector/index.ts @@ -0,0 +1,68 @@ +import type { ToRefs } from 'sciux-laplace' +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineAnimation, defineComponent } from 'sciux-laplace' + +const T = type({ + from: 'number[]', + to: 'number[]', +}) + +export const vector = defineComponent<'vector', typeof T.infer, { + division: number +}>((attrs, context) => { + return { + name: 'vector', + attrs: T, + setup() { + const division = context.division ?? 1 + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.id = 'canvas-vector' + const line = document.createElementNS('http://www.w3.org/2000/svg', 'line') + line.id = 'canvas-vector-line' + line.setAttribute('x1', (attrs.from.value[0] * division).toString()) + line.setAttribute('y1', (attrs.from.value[1] * division).toString()) + line.setAttribute('x2', (attrs.to.value[0] * division).toString()) + line.setAttribute('y2', (attrs.to.value[1] * division).toString()) + line.setAttribute('stroke', theme.pallete('primary')) + line.setAttribute('stroke-dasharray', theme.dasharray('dashed')) + container.append(line) + + const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon') + arrow.id = 'canvas-vector-arrow' + arrow.setAttribute('points', '-7,5 10,0 -7,-5 0,0') + arrow.setAttribute('fill', theme.pallete('primary')) + arrow.setAttribute('stroke', theme.pallete('primary')) + arrow.setAttribute('transform', `translate(${attrs.to.value[0] * division - Math.cos(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}, ${attrs.to.value[1] * division - Math.sin(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}) + rotate(${Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0]) * 180 / Math.PI})`) + container.append(arrow) + + return container + }, + } +}) + +export const vectorCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs, context: { division: number } }) => { + const el = node as HTMLElement + if (el.id !== 'canvas-vector') + return + const line = el.querySelector('#canvas-vector-line') as SVGLineElement + const arrow = el.querySelector('#canvas-vector-arrow') as SVGPolygonElement + arrow.setAttribute('fill-opacity', '0') + const arrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17)) + return (progress) => { + if (progress > 1) + return true + line.setAttribute('x2', (attrs.to.value[0] * context.division * progress).toString()) + line.setAttribute('y2', (attrs.to.value[1] * context.division * progress).toString()) + arrow.setAttribute('transform', `translate(${attrs.to.value[0] * context.division * progress - Math.cos(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}, ${attrs.to.value[1] * context.division * progress - Math.sin(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}) + rotate(${Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0]) * 180 / Math.PI})`) + if (progress < 0.5) { + arrow.setAttribute('stroke-dasharray', `${arrowRound * (progress * 2)},${arrowRound * (1 - progress * 2)}`) + } + else { + arrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`) + } + return false + } +}) diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 78f01b5..97929f5 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -10,11 +10,12 @@ export default function ({ animations, context }: RegisterContext): void { canvasSpace.set('figure', figure) canvasSpace.set('circle', circle) canvasSpace.set('function', func) + canvasSpace.set('vector', vector) canvasSpace.set('axis', axis) canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) const creation = []> animations.get('creation') - creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation) + creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation, vectorCreation) Object.assign(context, tools) } diff --git a/test/src/template/math/parametric.sciux b/test/src/template/math/parametric.sciux index ebefb7d..f623dae 100644 --- a/test/src/template/math/parametric.sciux +++ b/test/src/template/math/parametric.sciux @@ -1,6 +1,8 @@ - + + - + + \ No newline at end of file From 3848406bf5d67a96508926a93ae2a9abae5ef8f5 Mon Sep 17 00:00:00 2001 From: Acbox Date: Sat, 5 Jul 2025 15:24:14 +0800 Subject: [PATCH 27/31] feat: add tools --- packages/math/src/tools.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/math/src/tools.ts b/packages/math/src/tools.ts index 4a0d240..d395d33 100644 --- a/packages/math/src/tools.ts +++ b/packages/math/src/tools.ts @@ -6,3 +6,21 @@ export function middle(from: Position, to: Position): Position { from[1] + (to[1] - from[1]) / 2, ] } + +export function normal(from: Position, to1: Position, to2: Position): Position { + const v1 = [to1[0] - from[0], to1[1] - from[1]] + const v2 = [to2[0] - from[0], to2[1] - from[1]] + const cross = v1[0] * v2[1] - v1[1] * v2[0] + return [ + v2[1] * cross, + -v1[0] * cross, + ] +} + +export function parallel(from: Position, to1: Position, to2: Position): Position { + const v = [to1[0] - to2[0], to1[1] - to2[1]] + return [ + from[0] + v[0], + from[1] + v[1], + ] +} From 765c5e5a5f9e3468326be129f0f37152b1bb29ad Mon Sep 17 00:00:00 2001 From: confuseder Date: Wed, 9 Jul 2025 17:49:01 +0800 Subject: [PATCH 28/31] feat: support components without an "as" attribute --- packages/math/src/angle/points.ts | 30 ++++++++++++++++++-------- packages/math/src/circle/points.ts | 23 +++++++++++++------- packages/math/src/line/points.ts | 20 +++++++++++------ test/src/template/instance/ins02.sciux | 10 ++++----- 4 files changed, 55 insertions(+), 28 deletions(-) diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index b8911d1..c306304 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -15,9 +15,13 @@ export const angleStartPoint = defineComponent<'start-point', typeof InfoPointTy return { name: 'start-point', attrs: InfoPointType, - globals: { - [attrs.as.value]: position, - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: position, + } + } + })(), defaults: { value: '', }, @@ -44,9 +48,13 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i return { name: 'end-point', attrs: InfoPointType, - globals: { - [attrs.as.value]: position, - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: position, + } + } + })(), defaults: { value: '', }, @@ -67,9 +75,13 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, { return { name: 'origin', attrs: InfoPointType, - globals: { - [attrs.as.value]: [context.x, context.y], - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: [context.x, context.y], + } + } + })(), defaults: { value: '', }, diff --git a/packages/math/src/circle/points.ts b/packages/math/src/circle/points.ts index a41cf19..bb75d5c 100644 --- a/packages/math/src/circle/points.ts +++ b/packages/math/src/circle/points.ts @@ -16,7 +16,7 @@ export const edgePoint = defineComponent< } >((attrs, context) => { const { x, y, radius } = context - const { value, as } = attrs + const { value } = attrs const point = [ x + radius * Math.cos(value.value), y + radius * Math.sin(value.value), @@ -24,9 +24,13 @@ export const edgePoint = defineComponent< return { name: 'edge-points', attrs: EdgePointType, - globals: { - [as.value]: point, - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: point, + } + } + })(), } }) @@ -42,12 +46,15 @@ export const origin = defineComponent< y: number } >((attrs, context) => { - const { as } = attrs return { name: 'origin', attrs: OriginType, - globals: { - [as.value]: [context.x, context.y], - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: [context.x, context.y], + } + } + })(), } }) diff --git a/packages/math/src/line/points.ts b/packages/math/src/line/points.ts index e98f6dd..3cd3cf6 100644 --- a/packages/math/src/line/points.ts +++ b/packages/math/src/line/points.ts @@ -18,9 +18,13 @@ export const lineStartPoint = defineComponent<'start-point', typeof InfoPointTyp container.append(texElement) return container }, - globals: { - [attrs.as.value]: context.from, - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: context.from, + } + } + })(), } }) @@ -40,8 +44,12 @@ export const lineEndPoint = defineComponent<'end-point', typeof InfoPointType.in container.append(texElement) return container }, - globals: { - [attrs.as.value]: context.to, - }, + globals: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: context.to, + } + } + })(), } }) diff --git a/test/src/template/instance/ins02.sciux b/test/src/template/instance/ins02.sciux index 7972b37..d6f1838 100644 --- a/test/src/template/instance/ins02.sciux +++ b/test/src/template/instance/ins02.sciux @@ -14,7 +14,6 @@ - - - - + + + - + + \ No newline at end of file From 7cfc19ae7988c4a69a075ce9265c9f13f47cdc2a Mon Sep 17 00:00:00 2001 From: 27Onion Nebell <57032603+onion108@users.noreply.github.com> Date: Thu, 10 Jul 2025 17:47:19 +0800 Subject: [PATCH 29/31] feat: add dot (#12) * feat/math: components `parametric`, `vector` and all the creation animation of comps * chore: add package `@sciux/math` * chore: change package path name * ci: add tsconfig for each package * feat: ``, and it's dependent components * feat: tex, data-point, tex-on-angle-mark * feat: line * feat: line and it's dependent comps * feat: figure * feat: circle * feat(math): add color pallete support for math comps * feat: `` & `` & `` * feat: plane grid * feat: function-creation animation * ci: update dependencies * ci: update denpendencies * feat: parametric * feat: creation animatiom of line & angle & arc * feat: circle animation * feat: point mark of angle * fix: angle src radius calculate * feat: Use right angle markers when the angle is right angle * ci: update dependencies * feat: creation animation of axis, plane * feat: add component `` * feat: projection * feat: vector * feat: add tools --------- Co-authored-by: confuseder * chore: release v0.0.7 * feat(math): component `dot` --------- Co-authored-by: Acbox Liu Co-authored-by: confuseder --- package.json | 2 +- packages/layout/package.json | 2 +- packages/math/package.json | 2 +- packages/math/src/angle/points.ts | 11 ++++++- packages/math/src/dot/index.ts | 40 ++++++++++++++++++++++++++ packages/math/src/index.ts | 1 + packages/model/package.json | 2 +- packages/sciux/package.json | 2 +- packages/sciux/src/math.ts | 3 +- packages/theme-default/package.json | 2 +- packages/utils-theme/package.json | 2 +- packages/widget/package.json | 2 +- test/src/examples.ts | 2 ++ test/src/template/instance/ins02.sciux | 10 +++---- test/src/template/math/dot.sciux | 5 ++++ 15 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 packages/math/src/dot/index.ts create mode 100644 test/src/template/math/dot.sciux diff --git a/package.json b/package.json index a436456..842c097 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/monorepo", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "private": true, "packageManager": "pnpm@10.4.0", "scripts": { diff --git a/packages/layout/package.json b/packages/layout/package.json index 6819fe6..495287a 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/layout", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Layout components for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/packages/math/package.json b/packages/math/package.json index 47339da..4fd84cb 100644 --- a/packages/math/package.json +++ b/packages/math/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/math", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Layout components for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index c306304..5de75b9 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -47,7 +47,7 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i ] return { name: 'end-point', - attrs: InfoPointType, + attrs: InfoPointType， globals: (() => { if ('as' in attrs) { return { @@ -91,5 +91,14 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, { container.append(texElement) return container }, + defaults: { + value: '', + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + const texElement = generateTexNode(attrs.value.value) + container.append(texElement) + return container + }, } }) diff --git a/packages/math/src/dot/index.ts b/packages/math/src/dot/index.ts new file mode 100644 index 0000000..4cf82e0 --- /dev/null +++ b/packages/math/src/dot/index.ts @@ -0,0 +1,40 @@ +import { theme } from '@sciux/utils-theme' +import { type } from 'arktype' +import { defineComponent } from 'sciux-laplace' +import { generateTexNode } from '../utils/tex' + +const T = type({ + x: type.number, + y: type.number, + label: 'string | undefined', +}) + +export const dot = defineComponent<'dot', typeof T.infer, { division: number | undefined }>((attrs, context) => { + return { + name: 'dot', + attrs: T, + defaults: { + x: 0, + y: 0, + }, + setup() { + const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') + container.setAttribute('transform', `translate(${attrs.x.value * (context.division ?? 1)}, ${attrs.y.value * (context.division ?? 1)})`) + + const dotSvg = document.createElementNS('http://www.w3.org/2000/svg', 'circle') + dotSvg.id = 'dot-circle' + container.id = 'canvas-dot' + dotSvg.setAttribute('stroke', 'none') + dotSvg.setAttribute('fill', theme.pallete('primary')) + dotSvg.setAttribute('r', '2') + + if (attrs.label.value) { + const label = generateTexNode(attrs.label.value) + container.append(label) + } + + container.appendChild(dotSvg) + return container + }, + } +}) diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts index 09621eb..67d9fe6 100644 --- a/packages/math/src/index.ts +++ b/packages/math/src/index.ts @@ -1,6 +1,7 @@ export * from './angle' export * from './axis' export * from './circle' +export * from './dot' export * from './figure' export * from './function' export * from './line' diff --git a/packages/model/package.json b/packages/model/package.json index 996677b..243cca5 100644 --- a/packages/model/package.json +++ b/packages/model/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/model", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Model components for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/packages/sciux/package.json b/packages/sciux/package.json index d596438..8f64b7c 100644 --- a/packages/sciux/package.json +++ b/packages/sciux/package.json @@ -1,7 +1,7 @@ { "name": "sciux", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Sciux library composed package.", "author": "BijonAI ", "license": "MIT", diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts index 97929f5..7fe108f 100644 --- a/packages/sciux/src/math.ts +++ b/packages/sciux/src/math.ts @@ -1,6 +1,6 @@ import type { Animation, Component } from 'sciux-laplace' import type { RegisterContext } from './types' -import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math' +import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, dot, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math' import { withSpace } from 'sciux-laplace' import { canvasSpace } from './widget' @@ -14,6 +14,7 @@ export default function ({ animations, context }: RegisterContext): void { canvasSpace.set('axis', axis) canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace)) canvasSpace.set('parametric', parametric) + canvasSpace.set('dot', dot) const creation = []> animations.get('creation') creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation, vectorCreation) Object.assign(context, tools) diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json index 6335ced..5b0043b 100644 --- a/packages/theme-default/package.json +++ b/packages/theme-default/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/theme-default", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Default theme for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/packages/utils-theme/package.json b/packages/utils-theme/package.json index 9c62a66..f11945c 100644 --- a/packages/utils-theme/package.json +++ b/packages/utils-theme/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/utils-theme", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Theme utilities for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/packages/widget/package.json b/packages/widget/package.json index aef372b..aea7635 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -1,7 +1,7 @@ { "name": "@sciux/widget", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "description": "Widgets for SciuxKit", "author": "BijonAI ", "license": "MIT", diff --git a/test/src/examples.ts b/test/src/examples.ts index a5a018f..0986d95 100644 --- a/test/src/examples.ts +++ b/test/src/examples.ts @@ -4,6 +4,7 @@ import ins02 from './template/instance/ins02.sciux?raw' import angle from './template/math/angle.sciux?raw' import axis from './template/math/axis.sciux?raw' import circle from './template/math/circle.sciux?raw' +import dot from './template/math/dot.sciux?raw' import figure from './template/math/figure.sciux?raw' import parametric from './template/math/parametric.sciux?raw' import plane from './template/math/plane.sciux?raw' @@ -22,6 +23,7 @@ export default { plane, parametric, axis, + dot, }, 'INSTANCE': { ins01, diff --git a/test/src/template/instance/ins02.sciux b/test/src/template/instance/ins02.sciux index d6f1838..7972b37 100644 --- a/test/src/template/instance/ins02.sciux +++ b/test/src/template/instance/ins02.sciux @@ -14,6 +14,7 @@ + - - - + + + - - + \ No newline at end of file diff --git a/test/src/template/math/dot.sciux b/test/src/template/math/dot.sciux new file mode 100644 index 0000000..4dcd3eb --- /dev/null +++ b/test/src/template/math/dot.sciux @@ -0,0 +1,5 @@ + + + + + From d8c43dee518f47287b61cecd9d4bceb22c3c98d0 Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 10 Jul 2025 17:57:09 +0800 Subject: [PATCH 30/31] fix: defaults value --- packages/math/src/angle/index.ts | 2 ++ packages/math/src/angle/points.ts | 11 +---------- packages/math/src/dot/index.ts | 15 ++++++++++++--- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts index c7e2065..b8a21f4 100644 --- a/packages/math/src/angle/index.ts +++ b/packages/math/src/angle/index.ts @@ -36,6 +36,8 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => { endSide: 10, startSideType: 'solid', endSideType: 'solid', + x: 0, + y: 0, }, setup(children) { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts index 5de75b9..c306304 100644 --- a/packages/math/src/angle/points.ts +++ b/packages/math/src/angle/points.ts @@ -47,7 +47,7 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i ] return { name: 'end-point', - attrs: InfoPointType， + attrs: InfoPointType, globals: (() => { if ('as' in attrs) { return { @@ -91,14 +91,5 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, { container.append(texElement) return container }, - defaults: { - value: '', - }, - setup() { - const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') - const texElement = generateTexNode(attrs.value.value) - container.append(texElement) - return container - }, } }) diff --git a/packages/math/src/dot/index.ts b/packages/math/src/dot/index.ts index 4cf82e0..c865493 100644 --- a/packages/math/src/dot/index.ts +++ b/packages/math/src/dot/index.ts @@ -6,7 +6,8 @@ import { generateTexNode } from '../utils/tex' const T = type({ x: type.number, y: type.number, - label: 'string | undefined', + value: type.string, + as: type.string, }) export const dot = defineComponent<'dot', typeof T.infer, { division: number | undefined }>((attrs, context) => { @@ -16,7 +17,15 @@ export const dot = defineComponent<'dot', typeof T.infer, { division: number | u defaults: { x: 0, y: 0, + value: '', }, + provides: (() => { + if ('as' in attrs) { + return { + [attrs.as.value]: [attrs.x.value * (context.division ?? 1), attrs.y.value * (context.division ?? 1)], + } + } + })(), setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') container.setAttribute('transform', `translate(${attrs.x.value * (context.division ?? 1)}, ${attrs.y.value * (context.division ?? 1)})`) @@ -28,8 +37,8 @@ export const dot = defineComponent<'dot', typeof T.infer, { division: number | u dotSvg.setAttribute('fill', theme.pallete('primary')) dotSvg.setAttribute('r', '2') - if (attrs.label.value) { - const label = generateTexNode(attrs.label.value) + if (attrs.value.value) { + const label = generateTexNode(attrs.value.value) container.append(label) } From 2195b55dedf96f0059c195f8ccb8646d3769da91 Mon Sep 17 00:00:00 2001 From: Acbox Date: Fri, 11 Jul 2025 02:41:46 +0800 Subject: [PATCH 31/31] feat: add needed default value --- packages/math/src/axis/index.ts | 3 +++ packages/math/src/plane/index.ts | 4 ++++ packages/math/src/plane/projection.ts | 2 ++ packages/model/src/checkbox.ts | 3 +++ packages/model/src/radio.ts | 6 ++++++ packages/model/src/select.ts | 7 +++++++ packages/model/src/slider.ts | 4 ++++ pnpm-lock.yaml | 26 +++++++++++++------------- pnpm-workspace.yaml | 2 +- 9 files changed, 43 insertions(+), 14 deletions(-) diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts index fc26c8d..691ee91 100644 --- a/packages/math/src/axis/index.ts +++ b/packages/math/src/axis/index.ts @@ -27,6 +27,9 @@ export const axis = defineComponent<'axis', typeof T.infer>((attrs) => { // division: 20, label: (count: number) => count.toString(), direction: 'right', + x: 0, + y: 0, + range: [-5, 5], }, setup(children) { const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts index cb43295..e1179ff 100644 --- a/packages/math/src/plane/index.ts +++ b/packages/math/src/plane/index.ts @@ -36,6 +36,10 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => { yLabel: (count: number) => count.toString(), xDirection: 'right', yDirection: 'top', + x: 0, + y: 0, + domain: [-5, 5], + range: [-5, 5], }, setup(children) { const root = document.createElementNS('http://www.w3.org/2000/svg', 'g') diff --git a/packages/math/src/plane/projection.ts b/packages/math/src/plane/projection.ts index df0342f..e6223bc 100644 --- a/packages/math/src/plane/projection.ts +++ b/packages/math/src/plane/projection.ts @@ -20,6 +20,8 @@ export const projection = defineComponent<'projection', typeof T.infer, { defaults: { type: 'both', value: '', + x: 0, + y: 0, }, setup() { const container = document.createElementNS('http://www.w3.org/2000/svg', 'g') diff --git a/packages/model/src/checkbox.ts b/packages/model/src/checkbox.ts index d31b34d..7e562d9 100644 --- a/packages/model/src/checkbox.ts +++ b/packages/model/src/checkbox.ts @@ -13,6 +13,9 @@ export default defineComponent<'checkbox', typeof T.infer, Context>((attrs, cont return { name: 'checkbox', attrs: T, + defaults: { + disabled: false, + }, setup: () => { const input = document.createElement('input') input.type = 'checkbox' diff --git a/packages/model/src/radio.ts b/packages/model/src/radio.ts index ec99267..34f6824 100644 --- a/packages/model/src/radio.ts +++ b/packages/model/src/radio.ts @@ -8,12 +8,18 @@ const T = type({ model: 'string', group: 'string', value: 'string', + disabled: 'boolean', }) export default defineComponent<'radio', typeof T.infer, Context>((attrs, context) => { return { name: 'radio', attrs: T, + defaults: { + value: '', + group: '__default_radio_group', + disabled: false, + }, setup: () => { const input = document.createElement('input') input.type = 'radio' diff --git a/packages/model/src/select.ts b/packages/model/src/select.ts index fe2ad2c..01cfa0b 100644 --- a/packages/model/src/select.ts +++ b/packages/model/src/select.ts @@ -18,6 +18,9 @@ export const select = defineComponent<'select', typeof SelectType.infer, Context return { name: 'select', attrs: SelectType, + defaults: { + disabled: false, + }, setup: (children) => { const select = document.createElement('select') if (attrs.model) { @@ -40,6 +43,10 @@ export const selectOption = defineComponent<'option', typeof SelectOptionType.in return { name: 'option', attrs: SelectOptionType, + defaults: { + disabled: false, + value: '__efault_select_option_value', + }, setup: (children) => { option.value = toValue(attrs.value) option.selected = toValue(attrs.selected) diff --git a/packages/model/src/slider.ts b/packages/model/src/slider.ts index fdfd1b5..6c8070c 100644 --- a/packages/model/src/slider.ts +++ b/packages/model/src/slider.ts @@ -14,6 +14,10 @@ export default defineComponent<'slider', typeof T.infer, Context>((attrs, contex return { name: 'slider', attrs: T, + defaults: { + value: 0, + disabled: false, + }, setup: () => { const input = document.createElement('input') input.type = 'range' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c8df32..7ccd03b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,8 +49,8 @@ catalogs: specifier: ^10.4.0 version: 10.4.0 sciux-laplace: - specifier: v0.0.1-beta.12 - version: 0.0.1-beta.12 + specifier: v0.0.1-beta.13 + version: 0.0.1-beta.13 simple-git-hooks: specifier: ^2.11.1 version: 2.11.1 @@ -194,7 +194,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 packages/math: dependencies: @@ -212,7 +212,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 packages/model: dependencies: @@ -224,7 +224,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 packages/sciux: dependencies: @@ -245,7 +245,7 @@ importers: version: link:../widget sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 packages/theme-default: dependencies: @@ -263,7 +263,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -278,7 +278,7 @@ importers: version: 2.1.20 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 packages/widget: dependencies: @@ -299,7 +299,7 @@ importers: version: 0.16.22 sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 shiki: specifier: ^3.4.2 version: 3.4.2 @@ -326,7 +326,7 @@ importers: version: link:../packages/sciux sciux-laplace: specifier: 'catalog:' - version: 0.0.1-beta.12 + version: 0.0.1-beta.13 devDependencies: typescript: specifier: ~5.8.3 @@ -4082,8 +4082,8 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - sciux-laplace@0.0.1-beta.12: - resolution: {integrity: sha512-mMj6cINCotgTS/IPwitfh6RRA3fujk+n0rDRIpag4FAGcYel8eFNhIYuCGn6QfBtQgVtmpCcXS+d7ec23rnvog==} + sciux-laplace@0.0.1-beta.13: + resolution: {integrity: sha512-816T+z5L+X2T/nXgsbjz98Ot7fWmDosQ/C0RQ6tSgE0671cIchFuAf8SxmmF/EM7Xf5IGA4mt0/egAQY0HCQxg==} scslre@0.3.0: resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==} @@ -8837,7 +8837,7 @@ snapshots: safer-buffer@2.1.2: {} - sciux-laplace@0.0.1-beta.12: + sciux-laplace@0.0.1-beta.13: dependencies: '@vue/reactivity': 3.5.14 '@vue/shared': 3.5.14 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 2a67f94..5b3b158 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -31,4 +31,4 @@ catalog: vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.5 vue: ^3.5.13 - sciux-laplace: v0.0.1-beta.12 + sciux-laplace: v0.0.1-beta.13