feat(math): component dot

Author: onion108

packages/math/src/dot/index.ts

@@ -0,0 +1,40 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { generateTexNode } from '../utils/tex'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  label: 'string | undefined',
+})
+
+export const dot = defineComponent<'dot', typeof T.infer, { division: number | undefined }>((attrs, context) => {
+  return {
+    name: 'dot',
+    attrs: T,
+    defaults: {
+      x: 0,
+      y: 0,
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${attrs.x.value * (context.division ?? 1)}, ${attrs.y.value * (context.division ?? 1)})`)
+
+      const dotSvg = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+      dotSvg.id = 'dot-circle'
+      container.id = 'canvas-dot'
+      dotSvg.setAttribute('stroke', 'none')
+      dotSvg.setAttribute('fill', theme.pallete('primary'))
+      dotSvg.setAttribute('r', '2')
+
+      if (attrs.label.value) {
+        const label = generateTexNode(attrs.label.value)
+        container.append(label)
+      }
+
+      container.appendChild(dotSvg)
+      return container
+    },
+  }
+})

packages/math/src/index.ts

@@ -1,6 +1,7 @@
 export * from './angle'
 export * from './axis'
 export * from './circle'
+export * from './dot'
 export * from './figure'
 export * from './function'
 export * from './line'

packages/sciux/src/math.ts

@@ -1,6 +1,6 @@
 import type { Animation, Component } from 'sciux-laplace'
 import type { RegisterContext } from './types'
-import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math'
+import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, dot, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math'
 import { withSpace } from 'sciux-laplace'
 import { canvasSpace } from './widget'
 
@@ -14,6 +14,7 @@ export default function ({ animations, context }: RegisterContext): void {
   canvasSpace.set('axis', axis)
   canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace))
   canvasSpace.set('parametric', parametric)
+  canvasSpace.set('dot', dot)
   const creation = <Animation<[], any, any>[]> animations.get('creation')
   creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation, vectorCreation)
   Object.assign(context, tools)

test/src/examples.ts

@@ -4,6 +4,7 @@ import ins02 from './template/instance/ins02.sciux?raw'
 import angle from './template/math/angle.sciux?raw'
 import axis from './template/math/axis.sciux?raw'
 import circle from './template/math/circle.sciux?raw'
+import dot from './template/math/dot.sciux?raw'
 import figure from './template/math/figure.sciux?raw'
 import parametric from './template/math/parametric.sciux?raw'
 import plane from './template/math/plane.sciux?raw'
@@ -22,6 +23,7 @@ export default {
     plane,
     parametric,
     axis,
+    dot,
   },
   'INSTANCE': {
     ins01,

test/src/template/math/dot.sciux

@@ -0,0 +1,5 @@
+<canvas :width="200" :height="300" :origin="[100, 150]">
+  <plane :x="0" :y="0" :domain="[0, 10]" :range="[0, 12]" :division="15">
+    <dot label="(5, 7)" :x="5" :y="7" />
+  </plane>
+</canvas>