feat: math improvement

packages/math/src/angle/index.ts

@@ -36,6 +36,8 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
       endSide: 10,
       startSideType: 'solid',
       endSideType: 'solid',
+      x: 0,
+      y: 0,
     },
     setup(children) {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')

packages/math/src/angle/points.ts

@@ -15,9 +15,13 @@
   return {
     name: 'start-point',
     attrs: InfoPointType,
-    globals: {
-      [attrs.as.value]: position,
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: position,
+        }
+      }
+    })(),
     defaults: {
       value: '',
     },
@@ -44,9 +48,13 @@
   return {
     name: 'end-point',
     attrs: InfoPointType,
-    globals: {
-      [attrs.as.value]: position,
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: position,
+        }
+      }
+    })(),
     defaults: {
       value: '',
     },
@@ -67,13 +75,26 @@
   return {
     name: 'origin',
     attrs: InfoPointType,
-    globals: {
-      [attrs.as.value]: [context.x, context.y],
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: [context.x, context.y],
+        }
+      }
+    })(),
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const texElement = generateTexNode(attrs.value.value)
+      container.append(texElement)
+      return container
     },
     defaults: {
       value: '',
     },
     setup() {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       const texElement = generateTexNode(attrs.value.value)
       container.append(texElement)

packages/math/src/axis/index.ts

@@ -3,7 +3,7 @@
 import { type } from 'arktype'
 import { defineAnimation, defineComponent } from 'sciux-laplace'
 
 const T = type({
   x: type.number,
   y: type.number,
   division: type.number,
@@ -11,7 +11,7 @@
   label: type.unknown,
   direction: type.enumerated('top', 'bottom', 'left', 'right'),
 })
 interface withLabelT {
   label: (count: number) => string
 }
 
@@ -27,6 +27,9 @@
       // division: 20,
       label: (count: number) => count.toString(),
       direction: 'right',
+      x: 0,
+      y: 0,
+      range: [-5, 5],
     },
     setup(children) {
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')

packages/math/src/circle/points.ts

@@ -16,17 +16,21 @@ export const edgePoint = defineComponent<
   }
 >((attrs, context) => {
   const { x, y, radius } = context
-  const { value, as } = attrs
+  const { value } = attrs
   const point = [
     x + radius * Math.cos(value.value),
     y + radius * Math.sin(value.value),
   ]
   return {
     name: 'edge-points',
     attrs: EdgePointType,
-    globals: {
-      [as.value]: point,
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: point,
+        }
+      }
+    })(),
   }
 })
 
@@ -42,12 +46,15 @@ export const origin = defineComponent<
     y: number
   }
 >((attrs, context) => {
-  const { as } = attrs
   return {
     name: 'origin',
     attrs: OriginType,
-    globals: {
-      [as.value]: [context.x, context.y],
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: [context.x, context.y],
+        }
+      }
+    })(),
   }
 })

packages/math/src/dot/index.ts

@@ -0,0 +1,49 @@
+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,
+  value: type.string,
+  as: type.string,
+})
+
+export const dot = defineComponent<'dot', typeof T.infer, { division: number | undefined }>((attrs, context) => {
+  return {
+    name: 'dot',
+    attrs: T,
+    defaults: {
+      x: 0,
+      y: 0,
+      value: '',
+    },
+    provides: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: [attrs.x.value * (context.division ?? 1), attrs.y.value * (context.division ?? 1)],
+        }
+      }
+    })(),
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${attrs.x.value * (context.division ?? 1)}, ${attrs.y.value * (context.division ?? 1)})`)
+
+      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.value.value) {
+        const label = generateTexNode(attrs.value.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/math/src/line/points.ts

@@ -18,9 +18,13 @@ export const lineStartPoint = defineComponent<'start-point', typeof InfoPointTyp
       container.append(texElement)
       return container
     },
-    globals: {
-      [attrs.as.value]: context.from,
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: context.from,
+        }
+      }
+    })(),
   }
 })
 
@@ -40,8 +44,12 @@ export const lineEndPoint = defineComponent<'end-point', typeof InfoPointType.in
       container.append(texElement)
       return container
     },
-    globals: {
-      [attrs.as.value]: context.to,
-    },
+    globals: (() => {
+      if ('as' in attrs) {
+        return {
+          [attrs.as.value]: context.to,
+        }
+      }
+    })(),
   }
 })

packages/math/src/plane/index.ts

@@ -5,7 +5,7 @@
 import { axis } from '../axis'
 import { projection } from './projection'
 
 const T = type({
   x: type.number,
   y: type.number,
   division: type.number,
@@ -16,7 +16,7 @@
   xDirection: type.enumerated('left', 'right'),
   yDirection: type.enumerated('top', 'bottom'),
 })
 interface withLabelT {
   xLabel: (count: number) => string
   yLabel: (count: number) => string
 }
@@ -36,6 +36,10 @@
       yLabel: (count: number) => count.toString(),
       xDirection: 'right',
       yDirection: 'top',
+      x: 0,
+      y: 0,
+      domain: [-5, 5],
+      range: [-5, 5],
     },
     setup(children) {
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')

packages/math/src/plane/projection.ts

@@ -20,6 +20,8 @@ export const projection = defineComponent<'projection', typeof T.infer, {
     defaults: {
       type: 'both',
       value: '',
+      x: 0,
+      y: 0,
     },
     setup() {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')

packages/model/src/checkbox.ts

@@ -13,6 +13,9 @@ export default defineComponent<'checkbox', typeof T.infer, Context>((attrs, cont
   return {
     name: 'checkbox',
     attrs: T,
+    defaults: {
+      disabled: false,
+    },
     setup: () => {
       const input = document.createElement('input')
       input.type = 'checkbox'

packages/model/src/radio.ts

@@ -8,12 +8,18 @@ const T = type({
   model: 'string',
   group: 'string',
   value: 'string',
+  disabled: 'boolean',
 })
 
 export default defineComponent<'radio', typeof T.infer, Context>((attrs, context) => {
   return {
     name: 'radio',
     attrs: T,
+    defaults: {
+      value: '',
+      group: '__default_radio_group',
+      disabled: false,
+    },
     setup: () => {
       const input = document.createElement('input')
       input.type = 'radio'

packages/model/src/select.ts

@@ -18,6 +18,9 @@ export const select = defineComponent<'select', typeof SelectType.infer, Context
   return {
     name: 'select',
     attrs: SelectType,
+    defaults: {
+      disabled: false,
+    },
     setup: (children) => {
       const select = document.createElement('select')
       if (attrs.model) {
@@ -40,6 +43,10 @@ export const selectOption = defineComponent<'option', typeof SelectOptionType.in
   return {
     name: 'option',
     attrs: SelectOptionType,
+    defaults: {
+      disabled: false,
+      value: '__efault_select_option_value',
+    },
     setup: (children) => {
       option.value = toValue(attrs.value)
       option.selected = toValue(attrs.selected)

packages/model/src/slider.ts

@@ -14,6 +14,10 @@ export default defineComponent<'slider', typeof T.infer, Context>((attrs, contex
   return {
     name: 'slider',
     attrs: T,
+    defaults: {
+      value: 0,
+      disabled: false,
+    },
     setup: () => {
       const input = document.createElement('input')
       input.type = 'range'

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)