From 1385e9d434af2c77caa84dee098d122b62c59b04 Mon Sep 17 00:00:00 2001 From: Acbox Date: Thu, 12 Jun 2025 16:18:36 +0800 Subject: [PATCH 01/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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/15] 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