fix(math): apply division to angle, circle and line

fix(math): apply division to translate of `arc`

Author: onion108

packages/math/src/angle/index.ts

@@ -21,7 +21,7 @@ const T = type({
   endSideValue: type.string.optional(),
 })
 
-export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
+export const angle = defineComponent<'angle', typeof T.infer, { division: number | undefined }>((attrs, context) => {
   const space = new Map()
   space.set('arc', arc)
   space.set('bounding', bounding)
@@ -40,16 +40,17 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
       y: 0,
     },
     setup(children) {
+      const division = context.division ?? 1
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       container.id = 'canvas-angle'
-      container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      container.setAttribute('transform', `translate(${attrs.x.value * division}, ${attrs.y.value * division})`)
       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),
+          x2: length * Math.cos(radian) * division,
+          y2: length * Math.sin(radian) * division,
         }
       }
       const startSide = resolve(attrs.from.value, attrs.startSide.value)

packages/math/src/circle/index.ts

@@ -16,7 +16,7 @@ const T = type({
   type: LineType,
 })
 
-export const circle = defineComponent<'circle', typeof T.infer>((attrs) => {
+export const circle = defineComponent<'circle', typeof T.infer, { division: number | undefined }>((attrs, ctx) => {
   const space = new Map()
   space.set('edge-point', edgePoint)
   space.set('origin', origin)
@@ -31,12 +31,13 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => {
       y: 0,
     },
     setup() {
+      const division = ctx.division ?? 1
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-      container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+      container.setAttribute('transform', `translate(${attrs.x.value * division}, ${attrs.y.value * division})`)
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       path.id = 'circle-path'
       container.id = 'canvas-circle'
-      path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.to.value))
+      path.setAttribute('d', describeArc([0, 0], attrs.radius.value * division, attrs.from.value, attrs.to.value))
       path.setAttribute('stroke', theme.pallete('primary'))
       path.setAttribute('fill', 'none')
       path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))

packages/math/src/line/index.ts

@@ -14,7 +14,7 @@ const T = type({
   type: LineType,
 })
 
-export const line = defineComponent<'line', typeof T.infer>((attrs, context) => {
+export const line = defineComponent<'line', typeof T.infer, { division: number | undefined }>((attrs, context) => {
   const space = new Map()
   space.set('start-point', lineStartPoint)
   space.set('end-point', lineEndPoint)
@@ -30,17 +30,22 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) =>
     },
     attrs: T,
     setup(_children) {
+      const division = context.division ?? 1
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       container.id = 'canvas-line'
+
+      const pos_from = { x: attrs.from.value[0] * division, y: attrs.from.value[1] * division }
+      const pos_to = { x: attrs.to.value[0] * division, y: attrs.to.value[1] * division }
+
       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('d', `M ${pos_from.x} ${pos_from.y} L ${pos_to.x} ${pos_to.y}`)
       path.id = 'line-path'
       path.setAttribute('stroke', theme.pallete('primary'))
       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,
+        pos_from.x + (pos_to.x - pos_from.x) / 2,
+        pos_from.y + (pos_to.y - pos_from.y) / 2,
       ]
       const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       texContainer.setAttribute('transform', `translate(${texPosition[0]}, ${texPosition[1]})`)

playground/src/instances/math/circle.sciux

@@ -1,3 +1,5 @@
-<canvas :width="300" :height="240" :origin="[150, 120]">
-  <circle :x="0" :y="0" :radius="100" :from="0" :to="120" type="dashed" />
-</canvas>
+<canvas :width="200" :height="300" :origin="[100, 150]">
+  <plane :x="0" :y="0" :domain="[-10, 10]" :range="[-10, 10]" :division="10">
+    <circle :x="0" :y="0" :radius="10" />
+  </plane>
+</canvas>

playground/src/instances/math/parametric.sciux

@@ -4,5 +4,8 @@
     <parametric $="creation,1000,in-out-cubic" :domain="[-10, 10]" :range="[-10, 10]" :expr="(t) => [Math.cos(t) * (Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.pow(Math.sin(t / 12), 5)), Math.sin(t) * (Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.pow(Math.sin(t / 12), 5))]" />
     <projection :x="x" :y="y" type="both" :value="`\\left(${x.toFixed(1)}, ${y.toFixed(1)}\\right)`" $="creation,1000,in-out-cubic" />
     <vector :from="[0, 0]" :to="[x, y]" $="creation,1000,in-out-cubic" />
+    <vector :from="[0, 0]" :to="[-x, -y]" $="creation,1000,in-out-cubic" />
+    <circle :x="x" :y="y" :radius="1" />
+    <circle :x="2" :y="2" :radius="1" />
   </plane>
-</canvas>
+</canvas>

playground/src/instances/math/plane.sciux

@@ -1,5 +1,16 @@
 <canvas :width="600" :height="600" :origin="[300, 300]">
   <plane :x="0" :y="0" :division="25" :domain="[-10, 10]" :range="[-5, 5]" :x-label="count => count.toString()" :y-label="count => count.toString()" $="creation,500,in-out-cubic">
     <function $="creation,1000,linear" :domain="[-10, 10]" :expr="(x) => Math.cos(x)" />
+    <line :from="[3, 2]" :to="[4, 1]" />
+    <angle :x="1" :y="1" :from="0" :to="120" :start-side="100" :end-side="100">
+      <bounding type="dashed" value="R = 2r" />
+      <arc type="dashed" value="120" />
+      <start-point as="A" />
+      <end-point as="B" />
+    </angle>
+  <line :from="A" :to="B" type="dotted" value="C">
+    <start-point as="A" />
+    <end-point as="B" />
+  </line>
   </plane>
-</canvas>
+</canvas>