@khanacademy/perseus-editor 2.15.5 → 2.15.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/es/index.js +190 -329
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +190 -338
  5. package/dist/index.js.map +1 -1
  6. package/dist/widgets/interaction-editor/function-editor.d.ts +19 -20
  7. package/dist/widgets/interaction-editor/interaction-editor.d.ts +23 -14
  8. package/dist/widgets/interaction-editor/label-editor.d.ts +15 -16
  9. package/dist/widgets/interaction-editor/line-editor.d.ts +23 -24
  10. package/dist/widgets/interaction-editor/mathquill-input.d.ts +12 -0
  11. package/dist/widgets/interaction-editor/movable-line-editor.d.ts +23 -26
  12. package/dist/widgets/interaction-editor/movable-point-editor.d.ts +18 -22
  13. package/dist/widgets/interaction-editor/parametric-editor.d.ts +21 -22
  14. package/dist/widgets/interaction-editor/point-editor.d.ts +13 -14
  15. package/dist/widgets/interaction-editor/rectangle-editor.d.ts +17 -18
  16. package/package.json +3 -2
  17. package/src/widgets/__stories__/interaction-editor.stories.tsx +17 -4
  18. package/src/widgets/interaction-editor/constraint-editor.tsx +9 -21
  19. package/src/widgets/interaction-editor/function-editor.tsx +26 -29
  20. package/src/widgets/interaction-editor/interaction-editor.tsx +24 -17
  21. package/src/widgets/interaction-editor/label-editor.tsx +20 -24
  22. package/src/widgets/interaction-editor/line-editor.tsx +30 -34
  23. package/src/widgets/interaction-editor/mathquill-input.tsx +81 -0
  24. package/src/widgets/interaction-editor/movable-line-editor.tsx +30 -34
  25. package/src/widgets/interaction-editor/movable-point-editor.tsx +23 -26
  26. package/src/widgets/interaction-editor/parametric-editor.tsx +28 -33
  27. package/src/widgets/interaction-editor/point-editor.tsx +17 -24
  28. package/src/widgets/interaction-editor/rectangle-editor.tsx +23 -32
  29. package/tsconfig-build.tsbuildinfo +1 -1
package/src/widgets/interaction-editor/point-editor.tsx CHANGED
@@ -1,34 +1,32 @@
1
1
  import {
2
- components,
3
2
  Changeable,
4
3
  Dependencies,
5
4
  EditorJsonify,
6
5
  KhanColors,
7
6
  ColorPicker,
8
7
  } from "@khanacademy/perseus";
9
- import PropTypes from "prop-types";
10
8
  import * as React from "react";
11
9
  import _ from "underscore";
12
10
 
13
- const {MathInput} = components;
11
+ import MathquillInput from "./mathquill-input";
12
+
14
13
  const {getDependencies} = Dependencies;
15
14
 
16
- type PointEditorProps = any;
15
+ type Props = Changeable.ChangeableProps & {
16
+ coordX: string;
17
+ coordY: string;
18
+ color: string;
19
+ };
17
20
 
18
- //
19
- // Editor for non-interactive points
20
- //
21
- // TODO(eater): Factor this out
22
- //
23
- class PointEditor extends React.Component<PointEditorProps> {
24
- static propTypes = {
25
- ...Changeable.propTypes,
26
- coordX: PropTypes.string,
27
- coordY: PropTypes.string,
28
- color: PropTypes.string,
29
- };
21
+ type DefaultProps = {
22
+ coordX: Props["coordX"];
23
+ coordY: Props["coordY"];
24
+ color: Props["color"];
25
+ };
30
26
 
31
- static defaultProps = {
27
+ // Editor for non-interactive points
28
+ class PointEditor extends React.Component<Props> {
29
+ static defaultProps: DefaultProps = {
32
30
  coordX: "0",
33
31
  coordY: "0",
34
32
  color: KhanColors.BLACK,
@@ -44,24 +42,19 @@ class PointEditor extends React.Component<PointEditorProps> {
44
42
 
45
43
  render(): React.ReactNode {
46
44
  const {TeX} = getDependencies();
47
- const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
48
45
 
49
46
  return (
50
47
  <div className="graph-settings">
51
48
  <div className="perseus-widget-row">
52
49
  Coordinate: <TeX>\Large(</TeX>
53
- <MathInput
54
- buttonsVisible="never"
50
+ <MathquillInput
55
51
  value={this.props.coordX}
56
52
  onChange={this.change("coordX")}
57
- analytics={analyticsStub}
58
53
  />
59
54
  <TeX>,</TeX>{" "}
60
- <MathInput
61
- buttonsVisible="never"
55
+ <MathquillInput
62
56
  value={this.props.coordY}
63
57
  onChange={this.change("coordY")}
64
- analytics={analyticsStub}
65
58
  />
66
59
  <TeX>\Large)</TeX>
67
60
  </div>
package/src/widgets/interaction-editor/rectangle-editor.tsx CHANGED
@@ -1,36 +1,36 @@
1
1
  import {
2
- components,
3
2
  Changeable,
4
3
  Dependencies,
5
4
  EditorJsonify,
6
5
  KhanColors,
7
6
  ColorPicker,
8
7
  } from "@khanacademy/perseus";
9
- import PropTypes from "prop-types";
10
8
  import * as React from "react";
11
9
  import _ from "underscore";
12
10
 
13
- const {MathInput} = components;
11
+ import MathquillInput from "./mathquill-input";
12
+
14
13
  const {getDependencies} = Dependencies;
15
14
 
16
- type RectangleEditorProps = any;
15
+ type Props = Changeable.ChangeableProps & {
16
+ color: string;
17
+ coordX: string;
18
+ coordY: string;
19
+ height: string;
20
+ width: string;
21
+ };
17
22
 
18
- //
19
- // Editor for rectangles
20
- //
21
- // TODO(eater): Factor this out maybe?
22
- //
23
- class RectangleEditor extends React.Component<RectangleEditorProps> {
24
- static propTypes = {
25
- ...Changeable.propTypes,
26
- color: PropTypes.string,
27
- coordX: PropTypes.string,
28
- coordY: PropTypes.string,
29
- height: PropTypes.string,
30
- width: PropTypes.string,
31
- };
23
+ type DefaultProps = {
24
+ color: Props["color"];
25
+ coordX: Props["coordX"];
26
+ coordY: Props["coordY"];
27
+ height: Props["height"];
28
+ width: Props["width"];
29
+ };
32
30
 
33
- static defaultProps = {
31
+ // Editor for rectangles
32
+ class RectangleEditor extends React.Component<Props> {
33
+ static defaultProps: DefaultProps = {
34
34
  coordX: "-5",
35
35
  coordY: "5",
36
36
  width: "2",
@@ -48,43 +48,34 @@ class RectangleEditor extends React.Component<RectangleEditorProps> {
48
48
 
49
49
  render(): React.ReactNode {
50
50
  const {TeX} = getDependencies();
51
- const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
52
51
 
53
52
  return (
54
53
  <div className="graph-settings">
55
54
  <div className="perseus-widget-row">
56
55
  Bottom left: <TeX>\Large(</TeX>
57
- <MathInput
58
- buttonsVisible="never"
56
+ <MathquillInput
59
57
  value={this.props.coordX}
60
58
  onChange={this.change("coordX")}
61
- analytics={analyticsStub}
62
59
  />
63
60
  <TeX>,</TeX>{" "}
64
- <MathInput
65
- buttonsVisible="never"
61
+ <MathquillInput
66
62
  value={this.props.coordY}
67
63
  onChange={this.change("coordY")}
68
- analytics={analyticsStub}
69
64
  />
70
65
  <TeX>\Large)</TeX>
71
66
  </div>
72
67
  <div className="perseus-widget-row">
73
68
  Width:{" "}
74
- <MathInput
75
- buttonsVisible="never"
69
+ <MathquillInput
76
70
  value={this.props.width}
77
71
  onChange={this.change("width")}
78
- analytics={analyticsStub}
79
72
  />
80
73
  </div>
81
74
  <div className="perseus-widget-row">
82
75
  Height:{" "}
83
- <MathInput
84
- buttonsVisible="never"
76
+ <MathquillInput
85
77
  value={this.props.height}
86
78
  onChange={this.change("height")}
87
- analytics={analyticsStub}
88
79
  />
89
80
  </div>
90
81
  <div className="perseus-widget-row">