mathplot/index.js at master · tutory/mathplot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const m = global.HYPER_SCRIPT

const types = {
  coord: require('./components/coord'),
  circle: require('./components/circle'),
  ellipse: require('./components/circle'),
  function: require('./components/function'),
  polygon: require('./components/polygon'),
  line: require('./components/line'),
  point: require('./components/point'),
  arc: require('./components/arc'),
  rect: require('./components/rect'),
  label: require('./components/label'),
}
const { group } = require('./components/forms')

const ONE_CM_PER_UNIT = 37.8

module.exports = function view(
  shapes,
  { showSolution, scaleX, scaleY, clipRect, padding },
  attrs = {}
) {
  scaleX = scaleX || ONE_CM_PER_UNIT
  scaleY = scaleY || ONE_CM_PER_UNIT
  let minX, maxX, minY, maxY
  if (clipRect) {
    minX = clipRect.startX
    maxX = clipRect.endX
    minY = clipRect.startY
    maxY = clipRect.endY
  } else {
    const dimensions = shapes.map(shape =>
      types[shape.type].getDimensions(shape)
    )
    minX = Math.min(...dimensions.map(d => d[0])) - (padding || 0)
    maxX = Math.max(...dimensions.map(d => d[1])) + (padding || 0)
    minY = Math.min(...dimensions.map(d => d[2])) - (padding || 0)
    maxY = Math.max(...dimensions.map(d => d[3])) + (padding || 0)
  }
  const offsetX = -minX
  const offsetY = maxY
  const renderedShapes = shapes.map(shape =>
    group(
      shape.attrs,
      types[shape.type].view(shape.args, {
        offsetX,
        offsetY,
        scaleX,
        scaleY,
        offScaleX: x => scaleX * (offsetX + x),
        offScaleY: y => scaleY * (offsetY - y),
        showSolution: showSolution !== false ? true : false,
      })
    )
  )

  return [
    m(
      'style',
      `
        svg.mathplot .axisLabel {
          font-style: italic;
        }
        svg.mathplot text {
          stroke: white;
          stroke-width: 7px;
          paint-order: stroke fill;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
        svg.mathplot text.horizontalLeft {
          text-anchor: start;
        }
        svg.mathplot text.horizontalCenter {
          text-anchor: middle;
        }
        svg.mathplot text.horizontalRight {
          text-anchor: end;
        }
        svg.mathplot text.verticalTop {
          dominant-baseline: hanging;
        }
        svg.mathplot text.verticalCenter {
          dominant-baseline: middle;
        }
        svg.mathplot text.verticalBottom {
          dominant-baseline: baseline;
        }
        svg.mathplot .cloze {
          fill: white;
          fill-opacity: 1;
        }
      `
    ),
    m(
      'svg.mathplot',
      {
        width: `${(maxX - minX) * scaleX}px`,
        height: `${(maxY - minY) * scaleY}px`,
        ...attrs,
      },
      renderedShapes
    ),
  ]
}

module.exports.types = types