@pie-element/number-line 13.2.2-beta.5 → 13.2.2-beta.6
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.
- package/CHANGELOG.md +4 -0
- package/configure/CHANGELOG.md +4 -0
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +4 -0
- package/controller/package.json +1 -1
- package/package.json +2 -2
- package/configure/lib/arrows.js +0 -89
- package/configure/lib/arrows.js.map +0 -1
- package/configure/lib/card-bar.js +0 -57
- package/configure/lib/card-bar.js.map +0 -1
- package/configure/lib/defaults.js +0 -177
- package/configure/lib/defaults.js.map +0 -1
- package/configure/lib/domain.js +0 -87
- package/configure/lib/domain.js.map +0 -1
- package/configure/lib/index.js +0 -180
- package/configure/lib/index.js.map +0 -1
- package/configure/lib/main.js +0 -815
- package/configure/lib/main.js.map +0 -1
- package/configure/lib/number-text-field.js +0 -26
- package/configure/lib/number-text-field.js.map +0 -1
- package/configure/lib/point-config.js +0 -84
- package/configure/lib/point-config.js.map +0 -1
- package/configure/lib/size.js +0 -66
- package/configure/lib/size.js.map +0 -1
- package/configure/lib/ticks.js +0 -234
- package/configure/lib/ticks.js.map +0 -1
- package/configure/lib/utils.js +0 -12
- package/configure/lib/utils.js.map +0 -1
- package/controller/lib/defaults.js +0 -56
- package/controller/lib/defaults.js.map +0 -1
- package/controller/lib/index.js +0 -430
- package/controller/lib/index.js.map +0 -1
- package/controller/lib/tickUtils.js +0 -294
- package/controller/lib/tickUtils.js.map +0 -1
- package/controller/lib/utils.js +0 -168
- package/controller/lib/utils.js.map +0 -1
- package/lib/data-converter.js +0 -96
- package/lib/data-converter.js.map +0 -1
- package/lib/draggable/index.js +0 -114
- package/lib/draggable/index.js.map +0 -1
- package/lib/index.js +0 -197
- package/lib/index.js.map +0 -1
- package/lib/number-line/colors.js +0 -11
- package/lib/number-line/colors.js.map +0 -1
- package/lib/number-line/feedback.js +0 -92
- package/lib/number-line/feedback.js.map +0 -1
- package/lib/number-line/graph/arrow.js +0 -44
- package/lib/number-line/graph/arrow.js.map +0 -1
- package/lib/number-line/graph/elements/base.js +0 -20
- package/lib/number-line/graph/elements/base.js.map +0 -1
- package/lib/number-line/graph/elements/builder.js +0 -37
- package/lib/number-line/graph/elements/builder.js.map +0 -1
- package/lib/number-line/graph/elements/line.js +0 -259
- package/lib/number-line/graph/elements/line.js.map +0 -1
- package/lib/number-line/graph/elements/point.js +0 -204
- package/lib/number-line/graph/elements/point.js.map +0 -1
- package/lib/number-line/graph/elements/ray.js +0 -190
- package/lib/number-line/graph/elements/ray.js.map +0 -1
- package/lib/number-line/graph/index.js +0 -262
- package/lib/number-line/graph/index.js.map +0 -1
- package/lib/number-line/graph/line.js +0 -38
- package/lib/number-line/graph/line.js.map +0 -1
- package/lib/number-line/graph/stacks.js +0 -78
- package/lib/number-line/graph/stacks.js.map +0 -1
- package/lib/number-line/graph/tick-utils.js +0 -347
- package/lib/number-line/graph/tick-utils.js.map +0 -1
- package/lib/number-line/graph/ticks.js +0 -188
- package/lib/number-line/graph/ticks.js.map +0 -1
- package/lib/number-line/index.js +0 -384
- package/lib/number-line/index.js.map +0 -1
- package/lib/number-line/point-chooser/button.js +0 -49
- package/lib/number-line/point-chooser/button.js.map +0 -1
- package/lib/number-line/point-chooser/img.js +0 -8
- package/lib/number-line/point-chooser/img.js.map +0 -1
- package/lib/number-line/point-chooser/index.js +0 -197
- package/lib/number-line/point-chooser/index.js.map +0 -1
- package/lib/number-line/point-chooser/styles.js +0 -77
- package/lib/number-line/point-chooser/styles.js.map +0 -1
- package/lib/number-line/transitions/fade.js +0 -88
- package/lib/number-line/transitions/fade.js.map +0 -1
- package/lib/number-line/transitions/index.js +0 -14
- package/lib/number-line/transitions/index.js.map +0 -1
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Line = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
var _styles = require("@mui/material/styles");
|
|
13
|
-
var _lodashEs = require("lodash-es");
|
|
14
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
15
|
-
var _draggable = require("../../../draggable");
|
|
16
|
-
var _point = _interopRequireDefault(require("./point"));
|
|
17
|
-
var _base = require("./base");
|
|
18
|
-
const duration = '150ms';
|
|
19
|
-
const StyledLineGroup = (0, _styles.styled)('g')(({
|
|
20
|
-
$disabled,
|
|
21
|
-
$selected,
|
|
22
|
-
$correct
|
|
23
|
-
}) => ({
|
|
24
|
-
'& .line-handle': {
|
|
25
|
-
stroke: _renderUi.color.primary(),
|
|
26
|
-
cursor: 'pointer',
|
|
27
|
-
strokeWidth: '5px',
|
|
28
|
-
transition: `opacity ${duration} linear,
|
|
29
|
-
stroke-width ${duration} linear,
|
|
30
|
-
stroke ${duration} linear`
|
|
31
|
-
},
|
|
32
|
-
// was ".react-draggable-dragging" in the old version
|
|
33
|
-
'&.dnd-kit-dragging': {
|
|
34
|
-
opacity: 0.6,
|
|
35
|
-
'& .line-handle': {
|
|
36
|
-
opacity: 1.0,
|
|
37
|
-
strokeWidth: '12px'
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
...($disabled && {
|
|
41
|
-
cursor: 'not-allowed',
|
|
42
|
-
opacity: 0.8
|
|
43
|
-
}),
|
|
44
|
-
...($selected && {
|
|
45
|
-
'& .line-handle': {
|
|
46
|
-
stroke: _renderUi.color.primaryDark()
|
|
47
|
-
}
|
|
48
|
-
}),
|
|
49
|
-
...($correct === true && {
|
|
50
|
-
'& .line-handle': {
|
|
51
|
-
cursor: 'inherit',
|
|
52
|
-
stroke: _renderUi.color.correct()
|
|
53
|
-
}
|
|
54
|
-
}),
|
|
55
|
-
...($correct === false && {
|
|
56
|
-
'& .line-handle': {
|
|
57
|
-
cursor: 'inherit',
|
|
58
|
-
stroke: _renderUi.color.incorrect()
|
|
59
|
-
}
|
|
60
|
-
})
|
|
61
|
-
}));
|
|
62
|
-
class Line extends _react.default.Component {
|
|
63
|
-
constructor(props) {
|
|
64
|
-
super(props);
|
|
65
|
-
this.state = {
|
|
66
|
-
left: null,
|
|
67
|
-
right: null
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
71
|
-
if (nextProps) {
|
|
72
|
-
const {
|
|
73
|
-
position
|
|
74
|
-
} = nextProps;
|
|
75
|
-
this.setState({
|
|
76
|
-
left: position.left,
|
|
77
|
-
right: position.right
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
onDrag(side, p) {
|
|
82
|
-
const {
|
|
83
|
-
domain
|
|
84
|
-
} = this.props;
|
|
85
|
-
if (p >= domain.min && p <= domain.max) {
|
|
86
|
-
const newState = {};
|
|
87
|
-
newState[side] = p;
|
|
88
|
-
this.setState(newState);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
onMove(side, d) {
|
|
92
|
-
const {
|
|
93
|
-
position: p
|
|
94
|
-
} = this.props;
|
|
95
|
-
const newPosition = {
|
|
96
|
-
left: p.left,
|
|
97
|
-
right: p.right
|
|
98
|
-
};
|
|
99
|
-
newPosition[side] = d;
|
|
100
|
-
this.props.onMoveLine(newPosition);
|
|
101
|
-
}
|
|
102
|
-
render() {
|
|
103
|
-
const {
|
|
104
|
-
interval,
|
|
105
|
-
empty,
|
|
106
|
-
position,
|
|
107
|
-
domain,
|
|
108
|
-
y,
|
|
109
|
-
selected,
|
|
110
|
-
disabled,
|
|
111
|
-
correct
|
|
112
|
-
} = this.props;
|
|
113
|
-
const {
|
|
114
|
-
xScale
|
|
115
|
-
} = this.context;
|
|
116
|
-
const {
|
|
117
|
-
onDrag,
|
|
118
|
-
onMove
|
|
119
|
-
} = this;
|
|
120
|
-
const onMoveLeft = onMove.bind(this, 'left');
|
|
121
|
-
const onMoveRight = onMove.bind(this, 'right');
|
|
122
|
-
const onDragLeft = onDrag.bind(this, 'left');
|
|
123
|
-
const onDragRight = onDrag.bind(this, 'right');
|
|
124
|
-
const left = (0, _lodashEs.isNumber)(this.state.left) ? this.state.left : position.left;
|
|
125
|
-
const right = (0, _lodashEs.isNumber)(this.state.right) ? this.state.right : position.right;
|
|
126
|
-
const is = xScale(interval) - xScale(0);
|
|
127
|
-
const onMouseDown = e => e.nativeEvent.preventDefault();
|
|
128
|
-
const onLineClick = () => {
|
|
129
|
-
// click on the line toggles selection
|
|
130
|
-
this.props.onToggleSelect();
|
|
131
|
-
};
|
|
132
|
-
const onRectClick = () => {
|
|
133
|
-
this.props.onToggleSelect();
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
// dnd-kit drag stop handler (receives pixel deltaX from LocalDraggableDndKit)
|
|
137
|
-
const onLineDragStop = deltaX => {
|
|
138
|
-
// small movement -> treat as click (same threshold as before: is / 10)
|
|
139
|
-
const deltaAbs = Math.abs(deltaX);
|
|
140
|
-
if (deltaAbs < is / 10) {
|
|
141
|
-
this.props.onToggleSelect();
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
// convert pixel delta to domain delta (same math as before)
|
|
146
|
-
const invertedX = xScale.invert(deltaX + xScale(0));
|
|
147
|
-
const newPosition = {
|
|
148
|
-
left: position.left + invertedX,
|
|
149
|
-
right: position.right + invertedX
|
|
150
|
-
};
|
|
151
|
-
if (!(0, _lodashEs.isEqual)(newPosition, this.props.position)) {
|
|
152
|
-
this.props.onMoveLine(newPosition);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
const scaledLineBounds = {
|
|
156
|
-
left: (domain.min - position.left) / interval * is,
|
|
157
|
-
right: (domain.max - position.right) / interval * is
|
|
158
|
-
};
|
|
159
|
-
const common = {
|
|
160
|
-
interval,
|
|
161
|
-
selected,
|
|
162
|
-
disabled,
|
|
163
|
-
correct
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
// unique-ish id for this line; if you already have an id prop, use that instead
|
|
167
|
-
const draggableId = `line-${position.left}-${position.right}-${y}`;
|
|
168
|
-
return /*#__PURE__*/_react.default.createElement(_draggable.Draggable, {
|
|
169
|
-
id: draggableId,
|
|
170
|
-
disabled: disabled,
|
|
171
|
-
grid: [is],
|
|
172
|
-
bounds: scaledLineBounds,
|
|
173
|
-
onMouseDown: onMouseDown,
|
|
174
|
-
onDragEnd: onLineDragStop
|
|
175
|
-
}, ({
|
|
176
|
-
setNodeRef,
|
|
177
|
-
attributes,
|
|
178
|
-
listeners,
|
|
179
|
-
translateX,
|
|
180
|
-
isDragging,
|
|
181
|
-
onMouseDown: handleMouseDown
|
|
182
|
-
}) => /*#__PURE__*/_react.default.createElement(StyledLineGroup, (0, _extends2.default)({
|
|
183
|
-
ref: setNodeRef,
|
|
184
|
-
$disabled: disabled,
|
|
185
|
-
$selected: selected,
|
|
186
|
-
$correct: correct,
|
|
187
|
-
className: isDragging ? 'dnd-kit-dragging' : undefined,
|
|
188
|
-
onMouseDown: handleMouseDown
|
|
189
|
-
}, attributes), /*#__PURE__*/_react.default.createElement("g", {
|
|
190
|
-
transform: `translate(${translateX}, ${y})`
|
|
191
|
-
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
192
|
-
x: xScale(left),
|
|
193
|
-
width: Math.abs(xScale(right) - xScale(left)),
|
|
194
|
-
fill: "red",
|
|
195
|
-
fillOpacity: "0.0",
|
|
196
|
-
y: "-8",
|
|
197
|
-
height: 16,
|
|
198
|
-
onClick: onRectClick
|
|
199
|
-
}), /*#__PURE__*/_react.default.createElement("line", (0, _extends2.default)({
|
|
200
|
-
className: "line-handle",
|
|
201
|
-
x1: xScale(left),
|
|
202
|
-
x2: xScale(right),
|
|
203
|
-
onClick: onLineClick
|
|
204
|
-
// this is your "handle": only dragging when grabbing this line
|
|
205
|
-
}, listeners)), /*#__PURE__*/_react.default.createElement(_point.default, (0, _extends2.default)({}, common, {
|
|
206
|
-
empty: empty.left,
|
|
207
|
-
bounds: {
|
|
208
|
-
left: domain.min - position.left,
|
|
209
|
-
right: domain.max - position.left
|
|
210
|
-
},
|
|
211
|
-
position: position.left,
|
|
212
|
-
onDrag: onDragLeft,
|
|
213
|
-
onMove: onMoveLeft,
|
|
214
|
-
onClick: onRectClick
|
|
215
|
-
})), /*#__PURE__*/_react.default.createElement(_point.default, (0, _extends2.default)({}, common, {
|
|
216
|
-
empty: empty.right,
|
|
217
|
-
bounds: {
|
|
218
|
-
left: domain.min - position.right,
|
|
219
|
-
right: domain.max - position.right
|
|
220
|
-
},
|
|
221
|
-
position: position.right,
|
|
222
|
-
onDrag: onDragRight,
|
|
223
|
-
onMove: onMoveRight,
|
|
224
|
-
onClick: onRectClick
|
|
225
|
-
})))));
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
exports.Line = Line;
|
|
229
|
-
(0, _defineProperty2.default)(Line, "propTypes", {
|
|
230
|
-
...(0, _base.basePropTypes)(),
|
|
231
|
-
empty: _propTypes.default.shape({
|
|
232
|
-
left: _propTypes.default.bool.isRequired,
|
|
233
|
-
right: _propTypes.default.bool.isRequired
|
|
234
|
-
}).isRequired,
|
|
235
|
-
position: _propTypes.default.shape({
|
|
236
|
-
left: _propTypes.default.number.isRequired,
|
|
237
|
-
right: _propTypes.default.number.isRequired
|
|
238
|
-
}).isRequired,
|
|
239
|
-
y: _propTypes.default.number,
|
|
240
|
-
selected: _propTypes.default.bool,
|
|
241
|
-
disabled: _propTypes.default.bool,
|
|
242
|
-
correct: _propTypes.default.bool,
|
|
243
|
-
onMoveLine: _propTypes.default.func.isRequired,
|
|
244
|
-
onToggleSelect: _propTypes.default.func.isRequired,
|
|
245
|
-
onDragStart: _propTypes.default.func,
|
|
246
|
-
onDragStop: _propTypes.default.func
|
|
247
|
-
});
|
|
248
|
-
(0, _defineProperty2.default)(Line, "defaultProps", {
|
|
249
|
-
selected: false,
|
|
250
|
-
y: 0,
|
|
251
|
-
disabled: false,
|
|
252
|
-
correct: undefined
|
|
253
|
-
});
|
|
254
|
-
(0, _defineProperty2.default)(Line, "contextTypes", {
|
|
255
|
-
xScale: _propTypes.default.func.isRequired,
|
|
256
|
-
snapValue: _propTypes.default.func.isRequired
|
|
257
|
-
});
|
|
258
|
-
var _default = exports.default = Line;
|
|
259
|
-
//# sourceMappingURL=line.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"line.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_renderUi","_draggable","_point","_base","duration","StyledLineGroup","styled","$disabled","$selected","$correct","stroke","color","primary","cursor","strokeWidth","transition","opacity","primaryDark","correct","incorrect","Line","React","Component","constructor","props","state","left","right","UNSAFE_componentWillReceiveProps","nextProps","position","setState","onDrag","side","p","domain","min","max","newState","onMove","d","newPosition","onMoveLine","render","interval","empty","y","selected","disabled","xScale","context","onMoveLeft","bind","onMoveRight","onDragLeft","onDragRight","isNumber","is","onMouseDown","e","nativeEvent","preventDefault","onLineClick","onToggleSelect","onRectClick","onLineDragStop","deltaX","deltaAbs","Math","abs","invertedX","invert","isEqual","scaledLineBounds","common","draggableId","default","createElement","Draggable","id","grid","bounds","onDragEnd","setNodeRef","attributes","listeners","translateX","isDragging","handleMouseDown","_extends2","ref","className","undefined","transform","x","width","fill","fillOpacity","height","onClick","x1","x2","exports","_defineProperty2","basePropTypes","PropTypes","shape","bool","isRequired","number","func","onDragStart","onDragStop","snapValue","_default"],"sources":["../../../../src/number-line/graph/elements/line.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { isEqual, isNumber } from 'lodash-es';\nimport { color } from '@pie-lib/render-ui';\nimport { Draggable } from '../../../draggable';\n\nimport Point from './point';\nimport { basePropTypes } from './base';\n\nconst duration = '150ms';\n\nconst StyledLineGroup = styled('g')(({ $disabled, $selected, $correct }) => ({\n '& .line-handle': {\n stroke: color.primary(),\n cursor: 'pointer',\n strokeWidth: '5px',\n transition: `opacity ${duration} linear, \n stroke-width ${duration} linear,\n stroke ${duration} linear`,\n },\n // was \".react-draggable-dragging\" in the old version\n '&.dnd-kit-dragging': {\n opacity: 0.6,\n '& .line-handle': {\n opacity: 1.0,\n strokeWidth: '12px',\n },\n },\n ...($disabled && {\n cursor: 'not-allowed',\n opacity: 0.8,\n }),\n ...($selected && {\n '& .line-handle': {\n stroke: color.primaryDark(),\n },\n }),\n ...($correct === true && {\n '& .line-handle': {\n cursor: 'inherit',\n stroke: color.correct(),\n },\n }),\n ...($correct === false && {\n '& .line-handle': {\n cursor: 'inherit',\n stroke: color.incorrect(),\n },\n }),\n}));\n\nexport class Line extends React.Component {\n static propTypes = {\n ...basePropTypes(),\n empty: PropTypes.shape({\n left: PropTypes.bool.isRequired,\n right: PropTypes.bool.isRequired,\n }).isRequired,\n position: PropTypes.shape({\n left: PropTypes.number.isRequired,\n right: PropTypes.number.isRequired,\n }).isRequired,\n y: PropTypes.number,\n selected: PropTypes.bool,\n disabled: PropTypes.bool,\n correct: PropTypes.bool,\n onMoveLine: PropTypes.func.isRequired,\n onToggleSelect: PropTypes.func.isRequired,\n onDragStart: PropTypes.func,\n onDragStop: PropTypes.func,\n };\n\n static defaultProps = {\n selected: false,\n y: 0,\n disabled: false,\n correct: undefined,\n };\n\n static contextTypes = {\n xScale: PropTypes.func.isRequired,\n snapValue: PropTypes.func.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n left: null,\n right: null,\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (nextProps) {\n const { position } = nextProps;\n this.setState({ left: position.left, right: position.right });\n }\n }\n\n onDrag(side, p) {\n const { domain } = this.props;\n if (p >= domain.min && p <= domain.max) {\n const newState = {};\n newState[side] = p;\n this.setState(newState);\n }\n }\n\n onMove(side, d) {\n const { position: p } = this.props;\n const newPosition = { left: p.left, right: p.right };\n newPosition[side] = d;\n this.props.onMoveLine(newPosition);\n }\n\n render() {\n const { interval, empty, position, domain, y, selected, disabled, correct } = this.props;\n\n const { xScale } = this.context;\n\n const { onDrag, onMove } = this;\n const onMoveLeft = onMove.bind(this, 'left');\n const onMoveRight = onMove.bind(this, 'right');\n const onDragLeft = onDrag.bind(this, 'left');\n const onDragRight = onDrag.bind(this, 'right');\n\n const left = isNumber(this.state.left) ? this.state.left : position.left;\n const right = isNumber(this.state.right) ? this.state.right : position.right;\n\n const is = xScale(interval) - xScale(0);\n\n const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n const onLineClick = () => {\n // click on the line toggles selection\n this.props.onToggleSelect();\n };\n\n const onRectClick = () => {\n this.props.onToggleSelect();\n };\n\n // dnd-kit drag stop handler (receives pixel deltaX from LocalDraggableDndKit)\n const onLineDragStop = (deltaX) => {\n // small movement -> treat as click (same threshold as before: is / 10)\n const deltaAbs = Math.abs(deltaX);\n if (deltaAbs < is / 10) {\n this.props.onToggleSelect();\n return;\n }\n\n // convert pixel delta to domain delta (same math as before)\n const invertedX = xScale.invert(deltaX + xScale(0));\n const newPosition = {\n left: position.left + invertedX,\n right: position.right + invertedX,\n };\n\n if (!isEqual(newPosition, this.props.position)) {\n this.props.onMoveLine(newPosition);\n }\n };\n\n const scaledLineBounds = {\n left: ((domain.min - position.left) / interval) * is,\n right: ((domain.max - position.right) / interval) * is,\n };\n\n const common = {\n interval,\n selected,\n disabled,\n correct,\n };\n\n // unique-ish id for this line; if you already have an id prop, use that instead\n const draggableId = `line-${position.left}-${position.right}-${y}`;\n\n return (\n <Draggable\n id={draggableId}\n disabled={disabled}\n grid={[is]}\n bounds={scaledLineBounds}\n onMouseDown={onMouseDown}\n onDragEnd={onLineDragStop}\n >\n {({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown: handleMouseDown }) => (\n <StyledLineGroup\n ref={setNodeRef}\n $disabled={disabled}\n $selected={selected}\n $correct={correct}\n className={isDragging ? 'dnd-kit-dragging' : undefined}\n onMouseDown={handleMouseDown}\n {...attributes}\n >\n <g transform={`translate(${translateX}, ${y})`}>\n <rect\n x={xScale(left)}\n width={Math.abs(xScale(right) - xScale(left))}\n fill=\"red\"\n fillOpacity=\"0.0\"\n y=\"-8\"\n height={16}\n onClick={onRectClick}\n />\n <line\n className=\"line-handle\"\n x1={xScale(left)}\n x2={xScale(right)}\n onClick={onLineClick}\n // this is your \"handle\": only dragging when grabbing this line\n {...listeners}\n />\n <Point\n {...common}\n empty={empty.left}\n bounds={{\n left: domain.min - position.left,\n right: domain.max - position.left,\n }}\n position={position.left}\n onDrag={onDragLeft}\n onMove={onMoveLeft}\n onClick={onRectClick}\n />\n <Point\n {...common}\n empty={empty.right}\n bounds={{\n left: domain.min - position.right,\n right: domain.max - position.right,\n }}\n position={position.right}\n onDrag={onDragRight}\n onMove={onMoveRight}\n onClick={onRectClick}\n />\n </g>\n </StyledLineGroup>\n )}\n </Draggable>\n );\n }\n}\n\nexport default Line;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Point = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
var _styles = require("@mui/material/styles");
|
|
13
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
14
|
-
var _draggable = require("../../../draggable");
|
|
15
|
-
const duration = '150ms';
|
|
16
|
-
const StyledCircle = (0, _styles.styled)('circle')(({
|
|
17
|
-
$selected,
|
|
18
|
-
$disabled,
|
|
19
|
-
$correct,
|
|
20
|
-
$empty
|
|
21
|
-
}) => ({
|
|
22
|
-
cursor: 'pointer',
|
|
23
|
-
transition: `r ${duration} linear,
|
|
24
|
-
opacity ${duration} linear,
|
|
25
|
-
fill ${duration} linear,
|
|
26
|
-
stroke ${duration} linear`,
|
|
27
|
-
stroke: _renderUi.color.primary(),
|
|
28
|
-
fill: _renderUi.color.primary(),
|
|
29
|
-
// was ".react-draggable-dragging"
|
|
30
|
-
'&.dnd-kit-dragging': {
|
|
31
|
-
opacity: 0.25,
|
|
32
|
-
r: '10px'
|
|
33
|
-
},
|
|
34
|
-
'&:hover': {
|
|
35
|
-
stroke: _renderUi.color.primaryDark()
|
|
36
|
-
},
|
|
37
|
-
...($selected && {
|
|
38
|
-
stroke: _renderUi.color.primaryDark()
|
|
39
|
-
}),
|
|
40
|
-
...($disabled && {
|
|
41
|
-
cursor: 'not-allowed',
|
|
42
|
-
opacity: 0.8
|
|
43
|
-
}),
|
|
44
|
-
...($correct === true && {
|
|
45
|
-
cursor: 'inherit',
|
|
46
|
-
stroke: _renderUi.color.correct(),
|
|
47
|
-
fill: _renderUi.color.correct()
|
|
48
|
-
}),
|
|
49
|
-
...($correct === false && {
|
|
50
|
-
cursor: 'inherit',
|
|
51
|
-
stroke: _renderUi.color.incorrect(),
|
|
52
|
-
fill: _renderUi.color.incorrect()
|
|
53
|
-
}),
|
|
54
|
-
...($empty && {
|
|
55
|
-
fill: 'white'
|
|
56
|
-
})
|
|
57
|
-
}));
|
|
58
|
-
class Point extends _react.default.Component {
|
|
59
|
-
render() {
|
|
60
|
-
const {
|
|
61
|
-
onDragStop,
|
|
62
|
-
onDragStart,
|
|
63
|
-
onDrag: onDragCallback,
|
|
64
|
-
onClick,
|
|
65
|
-
onMove,
|
|
66
|
-
interval,
|
|
67
|
-
y,
|
|
68
|
-
bounds,
|
|
69
|
-
selected,
|
|
70
|
-
position,
|
|
71
|
-
disabled,
|
|
72
|
-
correct,
|
|
73
|
-
empty
|
|
74
|
-
} = this.props;
|
|
75
|
-
const {
|
|
76
|
-
snapValue,
|
|
77
|
-
xScale
|
|
78
|
-
} = this.context;
|
|
79
|
-
|
|
80
|
-
// same as old `is`
|
|
81
|
-
const step = xScale(interval) - xScale(0);
|
|
82
|
-
const dragPosition = deltaX => {
|
|
83
|
-
const normalized = deltaX + xScale(0);
|
|
84
|
-
const inverted = xScale.invert(normalized);
|
|
85
|
-
return snapValue(position + inverted);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// bounds in px (same as old scaledBounds)
|
|
89
|
-
const scaledBounds = bounds ? {
|
|
90
|
-
left: bounds.left / interval * step,
|
|
91
|
-
right: bounds.right / interval * step
|
|
92
|
-
} : null;
|
|
93
|
-
const handleMouseDown = e => e.nativeEvent.preventDefault();
|
|
94
|
-
|
|
95
|
-
// called when drag starts (via LocalDraggableDndKit)
|
|
96
|
-
const handleDragStart = () => {
|
|
97
|
-
if (onDragStart) {
|
|
98
|
-
onDragStart();
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
// called continuously while dragging (snapped+clamped deltaX in px)
|
|
103
|
-
const handleDragMove = deltaX => {
|
|
104
|
-
const p = dragPosition(deltaX);
|
|
105
|
-
if (onDragCallback) {
|
|
106
|
-
onDragCallback(p);
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
// called when drag ends (snapped+clamped deltaX in px)
|
|
111
|
-
const handleDragEnd = deltaX => {
|
|
112
|
-
if (onDragStop) {
|
|
113
|
-
onDragStop();
|
|
114
|
-
}
|
|
115
|
-
const deltaAbs = Math.abs(deltaX);
|
|
116
|
-
|
|
117
|
-
// click vs drag, same threshold as before: is / 10
|
|
118
|
-
if (deltaAbs < step / 10) {
|
|
119
|
-
if (onClick) {
|
|
120
|
-
onClick();
|
|
121
|
-
}
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
const newPosition = dragPosition(deltaX);
|
|
125
|
-
onMove(newPosition);
|
|
126
|
-
};
|
|
127
|
-
const id = `point-${position}-${y}`;
|
|
128
|
-
return /*#__PURE__*/_react.default.createElement(_draggable.Draggable, {
|
|
129
|
-
id: id,
|
|
130
|
-
disabled: disabled,
|
|
131
|
-
grid: [step],
|
|
132
|
-
bounds: scaledBounds,
|
|
133
|
-
onMouseDown: handleMouseDown,
|
|
134
|
-
onDragStart: handleDragStart,
|
|
135
|
-
onDragMove: handleDragMove,
|
|
136
|
-
onDragEnd: handleDragEnd
|
|
137
|
-
}, ({
|
|
138
|
-
setNodeRef,
|
|
139
|
-
attributes,
|
|
140
|
-
listeners,
|
|
141
|
-
translateX,
|
|
142
|
-
isDragging,
|
|
143
|
-
onMouseDown
|
|
144
|
-
}) => /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({
|
|
145
|
-
ref: setNodeRef,
|
|
146
|
-
onMouseDown: onMouseDown
|
|
147
|
-
// axis="x": only horizontal translate
|
|
148
|
-
,
|
|
149
|
-
transform: `translate(${translateX}, 0)`
|
|
150
|
-
}, attributes, listeners), /*#__PURE__*/_react.default.createElement("circle", {
|
|
151
|
-
r: "20",
|
|
152
|
-
strokeWidth: "3",
|
|
153
|
-
style: {
|
|
154
|
-
fill: 'transparent',
|
|
155
|
-
pointerEvents: 'visibleStroke'
|
|
156
|
-
},
|
|
157
|
-
cx: xScale(position),
|
|
158
|
-
cy: y,
|
|
159
|
-
stroke: selected ? _renderUi.color.primaryDark() : 'none'
|
|
160
|
-
}), /*#__PURE__*/_react.default.createElement(StyledCircle, {
|
|
161
|
-
r: "5",
|
|
162
|
-
strokeWidth: "3",
|
|
163
|
-
cx: xScale(position),
|
|
164
|
-
cy: y,
|
|
165
|
-
$selected: selected,
|
|
166
|
-
$disabled: disabled,
|
|
167
|
-
$correct: correct,
|
|
168
|
-
$empty: empty,
|
|
169
|
-
className: isDragging ? 'dnd-kit-dragging' : undefined
|
|
170
|
-
})));
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
exports.Point = Point;
|
|
174
|
-
(0, _defineProperty2.default)(Point, "defaultProps", {
|
|
175
|
-
y: 0,
|
|
176
|
-
selected: false,
|
|
177
|
-
empty: false,
|
|
178
|
-
disabled: false,
|
|
179
|
-
correct: undefined
|
|
180
|
-
});
|
|
181
|
-
(0, _defineProperty2.default)(Point, "propTypes", {
|
|
182
|
-
interval: _propTypes.default.number.isRequired,
|
|
183
|
-
position: _propTypes.default.number.isRequired,
|
|
184
|
-
bounds: _propTypes.default.shape({
|
|
185
|
-
left: _propTypes.default.number.isRequired,
|
|
186
|
-
right: _propTypes.default.number.isRequired
|
|
187
|
-
}),
|
|
188
|
-
selected: _propTypes.default.bool,
|
|
189
|
-
disabled: _propTypes.default.bool,
|
|
190
|
-
correct: _propTypes.default.bool,
|
|
191
|
-
empty: _propTypes.default.bool,
|
|
192
|
-
y: _propTypes.default.number,
|
|
193
|
-
onMove: _propTypes.default.func.isRequired,
|
|
194
|
-
onClick: _propTypes.default.func,
|
|
195
|
-
onDrag: _propTypes.default.func,
|
|
196
|
-
onDragStop: _propTypes.default.func,
|
|
197
|
-
onDragStart: _propTypes.default.func
|
|
198
|
-
});
|
|
199
|
-
(0, _defineProperty2.default)(Point, "contextTypes", {
|
|
200
|
-
xScale: _propTypes.default.func.isRequired,
|
|
201
|
-
snapValue: _propTypes.default.func.isRequired
|
|
202
|
-
});
|
|
203
|
-
var _default = exports.default = Point;
|
|
204
|
-
//# sourceMappingURL=point.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"point.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_renderUi","_draggable","duration","StyledCircle","styled","$selected","$disabled","$correct","$empty","cursor","transition","stroke","color","primary","fill","opacity","r","primaryDark","correct","incorrect","Point","React","Component","render","onDragStop","onDragStart","onDrag","onDragCallback","onClick","onMove","interval","y","bounds","selected","position","disabled","empty","props","snapValue","xScale","context","step","dragPosition","deltaX","normalized","inverted","invert","scaledBounds","left","right","handleMouseDown","e","nativeEvent","preventDefault","handleDragStart","handleDragMove","p","handleDragEnd","deltaAbs","Math","abs","newPosition","id","default","createElement","Draggable","grid","onMouseDown","onDragMove","onDragEnd","setNodeRef","attributes","listeners","translateX","isDragging","_extends2","ref","transform","strokeWidth","style","pointerEvents","cx","cy","className","undefined","exports","_defineProperty2","PropTypes","number","isRequired","shape","bool","func","_default"],"sources":["../../../../src/number-line/graph/elements/point.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport { Draggable } from '../../../draggable';\n\nconst duration = '150ms';\n\nconst StyledCircle = styled('circle')(({ $selected, $disabled, $correct, $empty }) => ({\n cursor: 'pointer',\n transition: `r ${duration} linear, \n opacity ${duration} linear, \n fill ${duration} linear,\n stroke ${duration} linear`,\n stroke: color.primary(),\n fill: color.primary(),\n // was \".react-draggable-dragging\"\n '&.dnd-kit-dragging': {\n opacity: 0.25,\n r: '10px',\n },\n '&:hover': {\n stroke: color.primaryDark(),\n },\n ...($selected && {\n stroke: color.primaryDark(),\n }),\n ...($disabled && {\n cursor: 'not-allowed',\n opacity: 0.8,\n }),\n ...($correct === true && {\n cursor: 'inherit',\n stroke: color.correct(),\n fill: color.correct(),\n }),\n ...($correct === false && {\n cursor: 'inherit',\n stroke: color.incorrect(),\n fill: color.incorrect(),\n }),\n ...($empty && {\n fill: 'white',\n }),\n}));\n\nexport class Point extends React.Component {\n static defaultProps = {\n y: 0,\n selected: false,\n empty: false,\n disabled: false,\n correct: undefined,\n };\n\n static propTypes = {\n interval: PropTypes.number.isRequired,\n position: PropTypes.number.isRequired,\n bounds: PropTypes.shape({\n left: PropTypes.number.isRequired,\n right: PropTypes.number.isRequired,\n }),\n selected: PropTypes.bool,\n disabled: PropTypes.bool,\n correct: PropTypes.bool,\n empty: PropTypes.bool,\n y: PropTypes.number,\n onMove: PropTypes.func.isRequired,\n onClick: PropTypes.func,\n onDrag: PropTypes.func,\n onDragStop: PropTypes.func,\n onDragStart: PropTypes.func,\n };\n\n static contextTypes = {\n xScale: PropTypes.func.isRequired,\n snapValue: PropTypes.func.isRequired,\n };\n\n render() {\n const {\n onDragStop,\n onDragStart,\n onDrag: onDragCallback,\n onClick,\n onMove,\n interval,\n y,\n bounds,\n selected,\n position,\n disabled,\n correct,\n empty,\n } = this.props;\n\n const { snapValue, xScale } = this.context;\n\n // same as old `is`\n const step = xScale(interval) - xScale(0);\n\n const dragPosition = (deltaX) => {\n const normalized = deltaX + xScale(0);\n const inverted = xScale.invert(normalized);\n return snapValue(position + inverted);\n };\n\n // bounds in px (same as old scaledBounds)\n const scaledBounds = bounds\n ? {\n left: (bounds.left / interval) * step,\n right: (bounds.right / interval) * step,\n }\n : null;\n\n const handleMouseDown = (e) => e.nativeEvent.preventDefault();\n\n // called when drag starts (via LocalDraggableDndKit)\n const handleDragStart = () => {\n if (onDragStart) {\n onDragStart();\n }\n };\n\n // called continuously while dragging (snapped+clamped deltaX in px)\n const handleDragMove = (deltaX) => {\n const p = dragPosition(deltaX);\n if (onDragCallback) {\n onDragCallback(p);\n }\n };\n\n // called when drag ends (snapped+clamped deltaX in px)\n const handleDragEnd = (deltaX) => {\n if (onDragStop) {\n onDragStop();\n }\n\n const deltaAbs = Math.abs(deltaX);\n\n // click vs drag, same threshold as before: is / 10\n if (deltaAbs < step / 10) {\n if (onClick) {\n onClick();\n }\n return;\n }\n\n const newPosition = dragPosition(deltaX);\n onMove(newPosition);\n };\n\n const id = `point-${position}-${y}`;\n\n return (\n <Draggable \n id={id}\n disabled={disabled}\n grid={[step]}\n bounds={scaledBounds}\n onMouseDown={handleMouseDown}\n onDragStart={handleDragStart}\n onDragMove={handleDragMove}\n onDragEnd={handleDragEnd}\n >\n {({\n setNodeRef,\n attributes,\n listeners,\n translateX,\n isDragging,\n onMouseDown,\n }) => (\n <g\n ref={setNodeRef}\n onMouseDown={onMouseDown}\n // axis=\"x\": only horizontal translate\n transform={`translate(${translateX}, 0)`}\n {...attributes}\n {...listeners}\n >\n <circle\n r=\"20\"\n strokeWidth=\"3\"\n style={{ fill: 'transparent', pointerEvents: 'visibleStroke' }}\n cx={xScale(position)}\n cy={y}\n stroke={selected ? color.primaryDark() : 'none'}\n />\n <StyledCircle\n r=\"5\"\n strokeWidth=\"3\"\n cx={xScale(position)}\n cy={y}\n $selected={selected}\n $disabled={disabled}\n $correct={correct}\n $empty={empty}\n className={isDragging ? 'dnd-kit-dragging' : undefined}\n />\n </g>\n )}\n </ Draggable>\n );\n }\n}\n\nexport default Point;\n"],"mappings":"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","ignoreList":[]}
|