@pie-element/extended-text-entry 15.1.1-next.131 → 15.1.1-next.138
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/configure/package.json +2 -2
- package/docs/demo/PIE-927-math-repro.md +170 -0
- package/lib/annotation/annotation-menu.js +17 -14
- package/lib/annotation/annotation-menu.js.map +1 -1
- package/lib/annotation/freeform-editor.js +11 -12
- package/lib/annotation/freeform-editor.js.map +1 -1
- package/module/element.js +1 -1
- package/module/manifest.json +2 -6
- package/module/print.js +1 -1
- package/package.json +5 -5
package/configure/package.json
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"@mui/icons-material": "^7.3.4",
|
|
14
14
|
"@mui/material": "^7.3.4",
|
|
15
15
|
"@pie-framework/pie-configure-events": "^1.3.0",
|
|
16
|
-
"@pie-lib/config-ui": "13.0.
|
|
17
|
-
"@pie-lib/editable-html-tip-tap": "2.1.
|
|
16
|
+
"@pie-lib/config-ui": "13.0.16",
|
|
17
|
+
"@pie-lib/editable-html-tip-tap": "2.1.14",
|
|
18
18
|
"lodash-es": "^4.17.23",
|
|
19
19
|
"prop-types": "^15.8.1",
|
|
20
20
|
"react": "18.3.1",
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# PIE-927 — math prompt repro harness (archived)
|
|
2
|
+
|
|
3
|
+
Reported as **DNAFORM-2099**: `extended-text-entry` prompts showed their raw latex source
|
|
4
|
+
(`P\left(x\right)=-2x^{3}...`) instead of typeset math.
|
|
5
|
+
|
|
6
|
+
This file archives the throwaway demo harness built to reproduce it. The demo itself was reverted to
|
|
7
|
+
its plain single-item form once the fix landed — everything needed to rebuild the harness is below.
|
|
8
|
+
|
|
9
|
+
## Cause and fix
|
|
10
|
+
|
|
11
|
+
The prompt container was located by a **shared DOM id**. With several items of the same element on
|
|
12
|
+
one page, every item resolved that id to the *first* match, so an item would request math
|
|
13
|
+
typesetting against another item's node — leaving its own prompt untypeset.
|
|
14
|
+
|
|
15
|
+
Fixed in two halves:
|
|
16
|
+
|
|
17
|
+
| Repo | Change |
|
|
18
|
+
| --- | --- |
|
|
19
|
+
| `pie-lib` | `fix(render-ui)!: scope PreviewPrompt to its own node instead of a shared id` — breaking, shipped in `@pie-lib/render-ui@7.0.0` |
|
|
20
|
+
| `pie-elements` | `fix: read the prompt container by class, not by the id pie-lib removed` |
|
|
21
|
+
|
|
22
|
+
## Why the harness needed several items
|
|
23
|
+
|
|
24
|
+
**A single item on a page typesets fine.** The id collision cannot happen with one item, so a
|
|
25
|
+
one-item demo shows nothing. Any future repro must mount **more than one** item of the same element.
|
|
26
|
+
|
|
27
|
+
The harness mounted 5 items × 6 expressions = **30 tagged prompt expressions**, each prefixed with a
|
|
28
|
+
unique tag (`[3.E2]`) so a mis-rendered one could be named exactly. Two extra tags per item —
|
|
29
|
+
`[n.T1]` in teacher instructions, `[n.F1]` in feedback — need `role=instructor` (with `mode=view` or
|
|
30
|
+
`evaluate`) and `mode=evaluate` respectively to appear at all.
|
|
31
|
+
|
|
32
|
+
## Expression shapes covered
|
|
33
|
+
|
|
34
|
+
The two forms below both appeared in the reported items and both must render. `E1`'s wrapper holds no
|
|
35
|
+
delimiters and braces its exponents; `E2`'s holds the delimiters and leaves exponents unbraced.
|
|
36
|
+
|
|
37
|
+
| Tag | Shape |
|
|
38
|
+
| --- | --- |
|
|
39
|
+
| `E1` | wrapper without delimiters, braced exponents — `P\left(x\right)=-2x^{3}-4x^{2}+18x+36` |
|
|
40
|
+
| `E2` | wrapper with delimiters, unbraced exponents — `P\left(x\right)=-2x^3-4x^2+18x+36` |
|
|
41
|
+
| `E3` | fraction and radical — `x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}` |
|
|
42
|
+
| `E4` | radical, no delimiters — `\sqrt[3]{27x^{6}}=3x^{2}` |
|
|
43
|
+
| `E5` | series with limits — `\sum_{n=1}^{\infty}\frac{1}{n^{2}}=\frac{\pi^{2}}{6}` |
|
|
44
|
+
| `E6` | MathML pasted raw, no `data-latex` wrapper (exercises the other code path) |
|
|
45
|
+
| `T1` | teacher instructions (needs `role=instructor`) |
|
|
46
|
+
| `F1` | feedback (needs `mode=evaluate`) |
|
|
47
|
+
|
|
48
|
+
Two wrapper builders drove `E1`–`E5`:
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
// no delimiters inside the wrapper: renderMath() adds them itself, via fixMathElements()
|
|
52
|
+
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
53
|
+
|
|
54
|
+
// already delimited - the form that shipped in the item that failed to render
|
|
55
|
+
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Rebuilding it
|
|
59
|
+
|
|
60
|
+
Run with `yarn pie-install` / the usual demo flow from `packages/extended-text-entry`. Restore these
|
|
61
|
+
four files, then remember that `ITEM_COUNT` drives `config.js` and `session.js` **but not**
|
|
62
|
+
`index.html`, which hardcodes its elements — raising the count means adding matching markup there.
|
|
63
|
+
|
|
64
|
+
### `generate.js`
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
const LATEX = {
|
|
68
|
+
polyBraced: 'P\\left(x\\right)=-2x^{3}-4x^{2}+18x+36',
|
|
69
|
+
polyPlain: 'P\\left(x\\right)=-2x^3-4x^2+18x+36',
|
|
70
|
+
quadratic: 'x=\\frac{-b\\pm\\sqrt{b^{2}-4ac}}{2a}',
|
|
71
|
+
radical: '\\sqrt[3]{27x^{6}}=3x^{2}',
|
|
72
|
+
series: '\\sum_{n=1}^{\\infty}\\frac{1}{n^{2}}=\\frac{\\pi^{2}}{6}',
|
|
73
|
+
inequality: '-3\\le x\\le 2',
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const MATHML =
|
|
77
|
+
'<math xmlns="http://www.w3.org/1998/Math/MathML">' +
|
|
78
|
+
'<mfrac><mrow><mn>3</mn><mi>x</mi></mrow><mn>4</mn></mfrac></math>';
|
|
79
|
+
|
|
80
|
+
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
81
|
+
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
82
|
+
const tag = (label) => `<strong style="color:#b00020;font-family:ui-monospace,Menlo,monospace">[${label}]</strong>`;
|
|
83
|
+
const line = (label, note, markup) => `<div>${tag(label)} ${note}: ${markup}</div>`;
|
|
84
|
+
|
|
85
|
+
const prompt = (item) =>
|
|
86
|
+
[
|
|
87
|
+
`<p>Item ${item}. Every expression below must show as typeset math — ` +
|
|
88
|
+
'if any shows its raw latex source instead, report it by its tag.</p>',
|
|
89
|
+
line(`${item}.E1`, 'wrapper without delimiters, braced exponents', bare(LATEX.polyBraced)),
|
|
90
|
+
line(`${item}.E2`, 'wrapper with delimiters, unbraced exponents', delimited(LATEX.polyPlain)),
|
|
91
|
+
line(`${item}.E3`, 'fraction and radical', delimited(LATEX.quadratic)),
|
|
92
|
+
line(`${item}.E4`, 'radical, no delimiters', bare(LATEX.radical)),
|
|
93
|
+
line(`${item}.E5`, 'series with limits', delimited(LATEX.series)),
|
|
94
|
+
line(`${item}.E6`, 'mathml, no data-latex wrapper', MATHML),
|
|
95
|
+
].join('');
|
|
96
|
+
|
|
97
|
+
exports.model = (id, element) => ({
|
|
98
|
+
id,
|
|
99
|
+
element,
|
|
100
|
+
customKeys: ['\\square'],
|
|
101
|
+
feedback: {
|
|
102
|
+
type: 'custom',
|
|
103
|
+
default: 'this is default feedback',
|
|
104
|
+
custom: line(`${id}.F1`, 'feedback', delimited(LATEX.inequality)),
|
|
105
|
+
},
|
|
106
|
+
feedbackEnabled: true,
|
|
107
|
+
prompt: prompt(id),
|
|
108
|
+
promptEnabled: true,
|
|
109
|
+
teacherInstructions: line(`${id}.T1`, 'teacher instructions', delimited(LATEX.polyPlain)),
|
|
110
|
+
teacherInstructionsEnabled: true,
|
|
111
|
+
mathInput: true,
|
|
112
|
+
playersToolbarPosition: 'bottom',
|
|
113
|
+
toolbarEditorPosition: 'bottom',
|
|
114
|
+
spellCheckEnabled: true,
|
|
115
|
+
rubricEnabled: false,
|
|
116
|
+
annotationsEnabled: false,
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
exports.ITEM_COUNT = 5;
|
|
120
|
+
exports.PROMPT_EXPRESSIONS_PER_ITEM = 6;
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### `config.js`
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
const { model, ITEM_COUNT } = require('./generate');
|
|
127
|
+
|
|
128
|
+
const ids = Array.from({ length: ITEM_COUNT }, (_, i) => `${i + 1}`);
|
|
129
|
+
|
|
130
|
+
module.exports = {
|
|
131
|
+
elements: {
|
|
132
|
+
'extended-text-entry': '../..',
|
|
133
|
+
},
|
|
134
|
+
models: ids.map((id) => model(id, 'extended-text-entry')),
|
|
135
|
+
};
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### `session.js`
|
|
139
|
+
|
|
140
|
+
One session per model — the player needs a session whose `id` matches each model's `id`, so this must
|
|
141
|
+
stay the same length as `config.js`.
|
|
142
|
+
|
|
143
|
+
```js
|
|
144
|
+
const { ITEM_COUNT } = require('./generate');
|
|
145
|
+
|
|
146
|
+
module.exports = Array.from({ length: ITEM_COUNT }, (_, i) => ({
|
|
147
|
+
id: `${i + 1}`,
|
|
148
|
+
element: 'extended-text-entry',
|
|
149
|
+
}));
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### `index.html`
|
|
153
|
+
|
|
154
|
+
Five `<extended-text-entry>` elements with `pie-id="1"`…`"5"`, each wrapped in a labelled box:
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<div class="body">
|
|
158
|
+
<div class="math-demo-item">
|
|
159
|
+
<h5>item 1 — 1.E1–1.E6</h5>
|
|
160
|
+
<extended-text-entry pie-id="1"></extended-text-entry>
|
|
161
|
+
</div>
|
|
162
|
+
<!-- repeat for pie-id 2..5 -->
|
|
163
|
+
</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Regression check
|
|
167
|
+
|
|
168
|
+
Nothing here is covered by the Jest suite — it needs a real browser to observe typesetting. Rebuild
|
|
169
|
+
this harness and eyeball all 30 tags after any change to prompt rendering or to the math-rendering
|
|
170
|
+
libs (`@pie-lib/render-ui`, `@pie-lib/math-rendering`, `@pie-lib/math-rendering-accessible`).
|
|
@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _styles = require("@mui/material/styles");
|
|
12
12
|
var _material = require("@mui/material");
|
|
13
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
13
14
|
const StyledPopover = (0, _styles.styled)(_material.Popover)({
|
|
14
15
|
'& .MuiPaper-root': {
|
|
15
16
|
overflowX: 'unset',
|
|
@@ -24,47 +25,49 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)({
|
|
|
24
25
|
width: 0,
|
|
25
26
|
pointerEvents: 'none',
|
|
26
27
|
borderWidth: '7px',
|
|
27
|
-
borderTopColor:
|
|
28
|
+
borderTopColor: _renderUi.color.border()
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
|
|
33
|
+
/*
|
|
34
|
+
* Surface and stroke move together. Tokenising the border alone would put a scheme's
|
|
35
|
+
* border colour on a fixed white popover -- under white-on-black, `--pie-border` is
|
|
36
|
+
* #ffffff, so the outline would vanish. `--pie-white` inverts with the scheme, which
|
|
37
|
+
* is what `common.white` was standing in for.
|
|
38
|
+
*/
|
|
39
|
+
const MainWrapper = (0, _styles.styled)('div')(() => ({
|
|
34
40
|
width: '300px',
|
|
35
41
|
overflow: 'hidden',
|
|
36
42
|
borderRadius: '4px',
|
|
37
|
-
backgroundColor:
|
|
38
|
-
border: `2px solid ${
|
|
43
|
+
backgroundColor: _renderUi.color.white(),
|
|
44
|
+
border: `2px solid ${_renderUi.color.border()}`
|
|
39
45
|
}));
|
|
40
46
|
const AnnotationsWrapper = (0, _styles.styled)('div')({
|
|
41
47
|
display: 'flex',
|
|
42
48
|
flexWrap: 'wrap'
|
|
43
49
|
});
|
|
44
|
-
const ControlsWrapper = (0, _styles.styled)('div')(({
|
|
45
|
-
theme
|
|
46
|
-
}) => ({
|
|
50
|
+
const ControlsWrapper = (0, _styles.styled)('div')(() => ({
|
|
47
51
|
display: 'flex',
|
|
48
52
|
flexWrap: 'wrap',
|
|
49
|
-
borderTop: `2px solid ${
|
|
53
|
+
borderTop: `2px solid ${_renderUi.color.border()}`
|
|
50
54
|
}));
|
|
51
55
|
const Button = (0, _styles.styled)('div')(({
|
|
52
|
-
theme,
|
|
53
56
|
variant
|
|
54
57
|
}) => ({
|
|
55
58
|
width: '22%',
|
|
56
59
|
textAlign: 'center',
|
|
57
60
|
padding: '4px',
|
|
58
61
|
cursor: 'pointer',
|
|
59
|
-
borderBottom: `1px solid ${
|
|
62
|
+
borderBottom: `1px solid ${_renderUi.color.border()}`,
|
|
60
63
|
'&:not(:nth-child(4n))': {
|
|
61
|
-
borderRight: `1px solid ${
|
|
64
|
+
borderRight: `1px solid ${_renderUi.color.border()}`
|
|
62
65
|
},
|
|
63
66
|
'&:nth-child(4n)': {
|
|
64
67
|
flexGrow: 1
|
|
65
68
|
},
|
|
66
69
|
'&:hover': {
|
|
67
|
-
backgroundColor:
|
|
70
|
+
backgroundColor: _renderUi.color.backgroundDark()
|
|
68
71
|
},
|
|
69
72
|
...(variant === 'positive' && {
|
|
70
73
|
backgroundColor: 'rgb(153, 255, 153) !important',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","StyledPopover","styled","Popover","overflowX","overflowY","marginTop","position","left","border","content","height","width","pointerEvents","borderWidth","borderTopColor","
|
|
1
|
+
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","_renderUi","StyledPopover","styled","Popover","overflowX","overflowY","marginTop","position","left","border","content","height","width","pointerEvents","borderWidth","borderTopColor","color","MainWrapper","overflow","borderRadius","backgroundColor","white","AnnotationsWrapper","display","flexWrap","ControlsWrapper","borderTop","Button","variant","textAlign","padding","cursor","borderBottom","borderRight","flexGrow","backgroundDark","filter","AnnotationMenu","React","Component","render","anchorEl","annotations","isNewAnnotation","onAnnotate","onClose","onEdit","onDelete","onWrite","open","props","default","createElement","elevation","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","map","annotation","index","key","type","onClick","label","style","Fragment","_defineProperty2","PropTypes","object","bool","array","func","_default","exports"],"sources":["../../src/annotation/annotation-menu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { Popover } from '@mui/material';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledPopover = styled(Popover)({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginTop: '-16px',\n '&::after': {\n position: 'absolute',\n left: 'calc(50% - 7px)',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderTopColor: color.border(),\n },\n },\n});\n\n/*\n * Surface and stroke move together. Tokenising the border alone would put a scheme's\n * border colour on a fixed white popover -- under white-on-black, `--pie-border` is\n * #ffffff, so the outline would vanish. `--pie-white` inverts with the scheme, which\n * is what `common.white` was standing in for.\n */\nconst MainWrapper = styled('div')(() => ({\n width: '300px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: color.white(),\n border: `2px solid ${color.border()}`,\n}));\n\nconst AnnotationsWrapper = styled('div')({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\nconst ControlsWrapper = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${color.border()}`,\n}));\n\nconst Button = styled('div')(({ variant }) => ({\n width: '22%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n borderBottom: `1px solid ${color.border()}`,\n '&:not(:nth-child(4n))': {\n borderRight: `1px solid ${color.border()}`,\n },\n '&:nth-child(4n)': {\n flexGrow: 1,\n },\n '&:hover': {\n backgroundColor: color.backgroundDark(),\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n}));\n\nclass AnnotationMenu extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n annotations: PropTypes.array,\n isNewAnnotation: PropTypes.bool,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onEdit: PropTypes.func,\n onWrite: PropTypes.func,\n onAnnotate: PropTypes.func,\n };\n\n render() {\n const { anchorEl, annotations, isNewAnnotation, onAnnotate, onClose, onEdit, onDelete, onWrite, open } =\n this.props;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n open={open}\n onClose={onClose}\n elevation={5}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n >\n <MainWrapper>\n <AnnotationsWrapper>\n {annotations.map((annotation, index) => (\n <Button\n key={`annotation-${index}`}\n variant={annotation.type}\n onClick={() => onAnnotate(annotation)}\n >\n {annotation.label}\n </Button>\n ))}\n </AnnotationsWrapper>\n <ControlsWrapper>\n <Button onClick={onClose}>\n Cancel\n </Button>\n <Button style={{ pointerEvents: 'none' }} />\n {isNewAnnotation ? (\n <React.Fragment>\n <Button variant=\"positive\" onClick={() => onWrite('positive')}>\n Write\n </Button>\n <Button variant=\"negative\" onClick={() => onWrite('negative')}>\n Write\n </Button>\n </React.Fragment>\n ) : (\n <React.Fragment>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button onClick={onEdit}>\n Edit\n </Button>\n </React.Fragment>\n )}\n </ControlsWrapper>\n </MainWrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default AnnotationMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,8 +10,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _material = require("@mui/material");
|
|
12
12
|
var _styles = require("@mui/material/styles");
|
|
13
|
+
var _renderUi = require("@pie-lib/render-ui");
|
|
13
14
|
const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
14
|
-
theme,
|
|
15
15
|
annotationType
|
|
16
16
|
}) => ({
|
|
17
17
|
'& .MuiPaper-root': {
|
|
@@ -28,7 +28,7 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
28
28
|
width: 0,
|
|
29
29
|
pointerEvents: 'none',
|
|
30
30
|
borderWidth: '7px',
|
|
31
|
-
borderRightColor:
|
|
31
|
+
borderRightColor: _renderUi.color.border()
|
|
32
32
|
},
|
|
33
33
|
...(annotationType === 'negative' && {
|
|
34
34
|
'&::before': {
|
|
@@ -42,15 +42,17 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
42
42
|
})
|
|
43
43
|
}
|
|
44
44
|
}));
|
|
45
|
+
|
|
46
|
+
// See annotation-menu: the popover surface has to follow the scheme alongside its
|
|
47
|
+
// stroke, or a scheme's border colour lands on a permanently white card.
|
|
45
48
|
const Wrapper = (0, _styles.styled)('div')(({
|
|
46
|
-
theme,
|
|
47
49
|
annotationType
|
|
48
50
|
}) => ({
|
|
49
51
|
width: '200px',
|
|
50
52
|
overflow: 'hidden',
|
|
51
53
|
borderRadius: '4px',
|
|
52
|
-
backgroundColor:
|
|
53
|
-
border: `4px solid ${
|
|
54
|
+
backgroundColor: _renderUi.color.white(),
|
|
55
|
+
border: `4px solid ${_renderUi.color.border()}`,
|
|
54
56
|
...(annotationType === 'negative' && {
|
|
55
57
|
borderColor: 'rgb(255, 204, 238) !important'
|
|
56
58
|
}),
|
|
@@ -58,15 +60,12 @@ const Wrapper = (0, _styles.styled)('div')(({
|
|
|
58
60
|
borderColor: 'rgb(153, 255, 153) !important'
|
|
59
61
|
})
|
|
60
62
|
}));
|
|
61
|
-
const Holder = (0, _styles.styled)('div')(({
|
|
62
|
-
theme
|
|
63
|
-
}) => ({
|
|
63
|
+
const Holder = (0, _styles.styled)('div')(() => ({
|
|
64
64
|
display: 'flex',
|
|
65
65
|
flexWrap: 'wrap',
|
|
66
|
-
borderTop: `2px solid ${
|
|
66
|
+
borderTop: `2px solid ${_renderUi.color.border()}`
|
|
67
67
|
}));
|
|
68
68
|
const Button = (0, _styles.styled)('div')(({
|
|
69
|
-
theme,
|
|
70
69
|
variant,
|
|
71
70
|
annotationType
|
|
72
71
|
}) => ({
|
|
@@ -76,10 +75,10 @@ const Button = (0, _styles.styled)('div')(({
|
|
|
76
75
|
padding: '4px',
|
|
77
76
|
cursor: 'pointer',
|
|
78
77
|
'&:not(:nth-child(3n))': {
|
|
79
|
-
borderRight: `1px solid ${
|
|
78
|
+
borderRight: `1px solid ${_renderUi.color.border()}`
|
|
80
79
|
},
|
|
81
80
|
'&:hover': {
|
|
82
|
-
backgroundColor:
|
|
81
|
+
backgroundColor: _renderUi.color.backgroundDark()
|
|
83
82
|
},
|
|
84
83
|
...(variant === 'positive' && {
|
|
85
84
|
backgroundColor: 'rgb(153, 255, 153) !important',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","StyledPopover","styled","Popover","theme","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","palette","grey","Wrapper","overflow","borderRadius","backgroundColor","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\nconst StyledPopover = styled(Popover)(({ theme, annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: theme.palette.grey[100],\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\nconst Wrapper = styled('div')(({ theme, annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: '#ffffff',\n border: `4px solid ${theme.palette.grey[100]}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(({ theme }) => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst Button = styled('div')(({ theme, variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${theme.palette.grey[100]}`,\n },\n '&:hover': {\n backgroundColor: theme.palette.grey[100],\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,MAAMI,aAAa,GAAG,IAAAC,cAAM,EAACC,iBAAO,CAAC,CAAC,CAAC;EAAEC,KAAK;EAAEC;AAAe,CAAC,MAAM;EACpE,kBAAkB,EAAE;IAClBC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,OAAO;IAClBC,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE;MACXC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,MAAM;MACbC,GAAG,EAAE,MAAM;MACXC,MAAM,EAAE,mBAAmB;MAC3BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE,CAAC;MACRC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE,KAAK;MAClBC,gBAAgB,EAAEd,KAAK,CAACe,OAAO,CAACC,IAAI,CAAC,GAAG;IAC1C,CAAC;IACD,IAAIf,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC,CAAC;IACF,IAAIb,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC;EACH;AACF,CAAC,CAAC,CAAC;AAEH,MAAMG,OAAO,GAAG,IAAAnB,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE,KAAK;EAAEC;AAAe,CAAC,MAAM;EAC5DU,KAAK,EAAE,OAAO;EACdO,QAAQ,EAAE,QAAQ;EAClBC,YAAY,EAAE,KAAK;EACnBC,eAAe,EAAE,SAAS;EAC1BZ,MAAM,EAAE,aAAaR,KAAK,CAACe,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,EAAE;EAC9C,IAAIf,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC,CAAC;EACF,IAAIpB,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAG,IAAAxB,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE;AAAM,CAAC,MAAM;EAC3CuB,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,SAAS,EAAE,aAAazB,KAAK,CAACe,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,MAAMU,MAAM,GAAG,IAAA5B,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE,KAAK;EAAE2B,OAAO;EAAE1B;AAAe,CAAC,MAAM;EACpE2B,QAAQ,EAAE,CAAC;EACXjB,KAAK,EAAE,KAAK;EACZkB,SAAS,EAAE,QAAQ;EACnBC,OAAO,EAAE,KAAK;EACdC,MAAM,EAAE,SAAS;EACjB,uBAAuB,EAAE;IACvBC,WAAW,EAAE,aAAahC,KAAK,CAACe,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;EACnD,CAAC;EACD,SAAS,EAAE;IACTI,eAAe,EAAEpB,KAAK,CAACe,OAAO,CAACC,IAAI,CAAC,GAAG;EACzC,CAAC;EACD,IAAIW,OAAO,KAAK,UAAU,IAAI;IAC5BP,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTa,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIN,OAAO,KAAK,UAAU,IAAI;IAC5BP,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTa,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIN,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTmB,eAAe,EAAE;IACnB;EACF,CAAC,CAAC;EACF,IAAIO,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTmB,eAAe,EAAE;IACnB;EACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMc,cAAc,SAASC,cAAK,CAACC,SAAS,CAAC;EAa3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,yBAaEC,KAAK,IAAK,IAAI,CAACC,QAAQ,CAAC;MAAEC,KAAK,EAAEF,KAAK,CAACG,MAAM,CAACD;IAAM,CAAC,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,sBAE1D,MAAM;MACjB,MAAM;QAAEG,KAAK,EAAEE,QAAQ;QAAEC,MAAM;QAAEC,OAAO;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MACjE,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ;MAEA,IAAIH,QAAQ,KAAKF,KAAK,EAAE;QACtBG,MAAM,CAACD,QAAQ,EAAEF,KAAK,CAAC;MACzB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;MAC5BI,OAAO,CAAC,CAAC;IACX,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEU,YAAY;QAAEF;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MAC7C,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ,CAAC,MAAM;QACLE,YAAY,CAACP,KAAK,CAAC;MACrB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;IAC9B,CAAC;IAzCC,IAAI,CAACM,KAAK,GAAG;MAAEN,KAAK,EAAEL,KAAK,CAACK;IAAM,CAAC;EACrC;EAEAQ,gCAAgCA,CAACC,SAAS,EAAE;IAC1C,MAAM;MAAET;IAAM,CAAC,GAAGS,SAAS;IAC3B,MAAM;MAAET,KAAK,EAAEU;IAAW,CAAC,GAAG,IAAI,CAACf,KAAK;IAExC,IAAIK,KAAK,KAAKU,UAAU,EAAE;MACxB,IAAI,CAACX,QAAQ,CAAC;QAAEC;MAAM,CAAC,CAAC;IAC1B;EACF;EAiCAW,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAER,QAAQ;MAAES,IAAI;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACpB,KAAK;IAC7D,MAAM;MAAEK;IAAM,CAAC,GAAG,IAAI,CAACM,KAAK;IAE5B,oBACE1D,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAAC9D,aAAa;MACZ0D,QAAQ,EAAEA,QAAS;MACnBK,SAAS,EAAE,CAAE;MACbH,IAAI,EAAEA,IAAK;MACXV,OAAO,EAAE,IAAI,CAACc,UAAW;MACzB5D,cAAc,EAAEyD,IAAK;MACrBI,KAAK,EAAE;QAAEC,SAAS,EAAE,GAAGP,MAAM,IAAI;QAAEQ,UAAU,EAAE;MAAyB,CAAE;MAC1EC,kBAAkB,EAAE;QAAEC,KAAK,EAAE,GAAG;QAAEC,IAAI,EAAE;MAAI,CAAE;MAC9CC,YAAY,EAAE;QACZC,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd,CAAE;MACFC,eAAe,EAAE;QACfF,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd;IAAE,gBAEF/E,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAAC1C,OAAO;MAAChB,cAAc,EAAEyD;IAAK,gBAC5BnE,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAAChE,SAAA,CAAA6E,SAAS;MACRC,EAAE,EAAC,mBAAmB;MACtBX,KAAK,EAAE;QACLhC,OAAO,EAAE,SAAS;QAClBnB,KAAK,EAAE;MACT,CAAE;MACF+D,SAAS;MACTC,SAAS;MACTC,IAAI,EAAE,CAAE;MACRC,OAAO,EAAE,CAAE;MACXlC,KAAK,EAAEA,KAAM;MACbmC,QAAQ,EAAE,IAAI,CAACC,aAAc;MAC7BC,UAAU,EAAE;QAAEC,gBAAgB,EAAE;MAAK;IAAE,CACxC,CAAC,eACF1F,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAACrC,MAAM,qBACL/B,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAACjC,MAAM;MAACwD,OAAO,EAAElC;IAAS,GAAC,QAEnB,CAAC,eACTzD,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAACjC,MAAM;MAACC,OAAO,EAAC,YAAY;MAAC1B,cAAc,EAAEyD,IAAK;MAACwB,OAAO,EAAE,IAAI,CAACC;IAAiB,GAC/EzB,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,MAC3B,CAAC,eACTnE,MAAA,CAAAiD,OAAA,CAAAmB,aAAA,CAACjC,MAAM;MAACwD,OAAO,EAAE,IAAI,CAACrB;IAAW,GAAC,MAE1B,CACF,CACD,CACI,CAAC;EAEpB;AACF;AAAC,IAAAtB,gBAAA,CAAAC,OAAA,EA9GKN,cAAc,eACC;EACjBqB,QAAQ,EAAE6B,kBAAS,CAACC,MAAM;EAC1B5B,IAAI,EAAE2B,kBAAS,CAACE,IAAI;EACpB9B,MAAM,EAAE4B,kBAAS,CAACG,MAAM;EACxB5C,KAAK,EAAEyC,kBAAS,CAACI,MAAM;EACvB9B,IAAI,EAAE0B,kBAAS,CAACI,MAAM;EACtBzC,OAAO,EAAEqC,kBAAS,CAACK,IAAI;EACvBzC,QAAQ,EAAEoC,kBAAS,CAACK,IAAI;EACxB3C,MAAM,EAAEsC,kBAAS,CAACK,IAAI;EACtBvC,YAAY,EAAEkC,kBAAS,CAACK;AAC1B,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAnD,OAAA,GAqGYN,cAAc","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","_renderUi","StyledPopover","styled","Popover","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","color","Wrapper","overflow","borderRadius","backgroundColor","white","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","backgroundDark","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledPopover = styled(Popover)(({ annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: color.border(),\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\n// See annotation-menu: the popover surface has to follow the scheme alongside its\n// stroke, or a scheme's border colour lands on a permanently white card.\nconst Wrapper = styled('div')(({ annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: color.white(),\n border: `4px solid ${color.border()}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${color.border()}`,\n}));\n\nconst Button = styled('div')(({ variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${color.border()}`,\n },\n '&:hover': {\n backgroundColor: color.backgroundDark(),\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,MAAMK,aAAa,GAAG,IAAAC,cAAM,EAACC,iBAAO,CAAC,CAAC,CAAC;EAAEC;AAAe,CAAC,MAAM;EAC7D,kBAAkB,EAAE;IAClBC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,OAAO;IAClBC,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE;MACXC,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,MAAM;MACbC,GAAG,EAAE,MAAM;MACXC,MAAM,EAAE,mBAAmB;MAC3BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE,CAAC;MACRC,aAAa,EAAE,MAAM;MACrBC,WAAW,EAAE,KAAK;MAClBC,gBAAgB,EAAEC,eAAK,CAACP,MAAM,CAAC;IACjC,CAAC;IACD,IAAIP,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC,CAAC;IACF,IAAIb,cAAc,KAAK,UAAU,IAAI;MACnC,WAAW,EAAE;QACXa,gBAAgB,EAAE;MACpB;IACF,CAAC;EACH;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA,MAAME,OAAO,GAAG,IAAAjB,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE;AAAe,CAAC,MAAM;EACrDU,KAAK,EAAE,OAAO;EACdM,QAAQ,EAAE,QAAQ;EAClBC,YAAY,EAAE,KAAK;EACnBC,eAAe,EAAEJ,eAAK,CAACK,KAAK,CAAC,CAAC;EAC9BZ,MAAM,EAAE,aAAaO,eAAK,CAACP,MAAM,CAAC,CAAC,EAAE;EACrC,IAAIP,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC,CAAC;EACF,IAAIpB,cAAc,KAAK,UAAU,IAAI;IACnCoB,WAAW,EAAE;EACf,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAG,IAAAvB,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EAClCwB,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,SAAS,EAAE,aAAaV,eAAK,CAACP,MAAM,CAAC,CAAC;AACxC,CAAC,CAAC,CAAC;AAEH,MAAMkB,MAAM,GAAG,IAAA3B,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAE4B,OAAO;EAAE1B;AAAe,CAAC,MAAM;EAC7D2B,QAAQ,EAAE,CAAC;EACXjB,KAAK,EAAE,KAAK;EACZkB,SAAS,EAAE,QAAQ;EACnBC,OAAO,EAAE,KAAK;EACdC,MAAM,EAAE,SAAS;EACjB,uBAAuB,EAAE;IACvBC,WAAW,EAAE,aAAajB,eAAK,CAACP,MAAM,CAAC,CAAC;EAC1C,CAAC;EACD,SAAS,EAAE;IACTW,eAAe,EAAEJ,eAAK,CAACkB,cAAc,CAAC;EACxC,CAAC;EACD,IAAIN,OAAO,KAAK,UAAU,IAAI;IAC5BR,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTe,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIP,OAAO,KAAK,UAAU,IAAI;IAC5BR,eAAe,EAAE,+BAA+B;IAChD,SAAS,EAAE;MACTe,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EACF,IAAIP,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTkB,eAAe,EAAE;IACnB;EACF,CAAC,CAAC;EACF,IAAIQ,OAAO,KAAK,YAAY,IAAI1B,cAAc,KAAK,UAAU,IAAI;IAC/D,SAAS,EAAE;MACTkB,eAAe,EAAE;IACnB;EACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMgB,cAAc,SAASC,cAAK,CAACC,SAAS,CAAC;EAa3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,yBAaEC,KAAK,IAAK,IAAI,CAACC,QAAQ,CAAC;MAAEC,KAAK,EAAEF,KAAK,CAACG,MAAM,CAACD;IAAM,CAAC,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,sBAE1D,MAAM;MACjB,MAAM;QAAEG,KAAK,EAAEE,QAAQ;QAAEC,MAAM;QAAEC,OAAO;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MACjE,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ;MAEA,IAAIH,QAAQ,KAAKF,KAAK,EAAE;QACtBG,MAAM,CAACD,QAAQ,EAAEF,KAAK,CAAC;MACzB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;MAC5BI,OAAO,CAAC,CAAC;IACX,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEU,YAAY;QAAEF;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MAC7C,MAAM;QAAEK;MAAM,CAAC,GAAG,IAAI,CAACM,KAAK;MAE5B,IAAIN,KAAK,KAAK,EAAE,EAAE;QAChBK,QAAQ,CAAC,CAAC;MACZ,CAAC,MAAM;QACLE,YAAY,CAACP,KAAK,CAAC;MACrB;MAEA,IAAI,CAACD,QAAQ,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,CAAC;IAC9B,CAAC;IAzCC,IAAI,CAACM,KAAK,GAAG;MAAEN,KAAK,EAAEL,KAAK,CAACK;IAAM,CAAC;EACrC;EAEAQ,gCAAgCA,CAACC,SAAS,EAAE;IAC1C,MAAM;MAAET;IAAM,CAAC,GAAGS,SAAS;IAC3B,MAAM;MAAET,KAAK,EAAEU;IAAW,CAAC,GAAG,IAAI,CAACf,KAAK;IAExC,IAAIK,KAAK,KAAKU,UAAU,EAAE;MACxB,IAAI,CAACX,QAAQ,CAAC;QAAEC;MAAM,CAAC,CAAC;IAC1B;EACF;EAiCAW,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAER,QAAQ;MAAES,IAAI;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACpB,KAAK;IAC7D,MAAM;MAAEK;IAAM,CAAC,GAAG,IAAI,CAACM,KAAK;IAE5B,oBACE3D,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAC9D,aAAa;MACZ0D,QAAQ,EAAEA,QAAS;MACnBK,SAAS,EAAE,CAAE;MACbH,IAAI,EAAEA,IAAK;MACXV,OAAO,EAAE,IAAI,CAACc,UAAW;MACzB7D,cAAc,EAAE0D,IAAK;MACrBI,KAAK,EAAE;QAAEC,SAAS,EAAE,GAAGP,MAAM,IAAI;QAAEQ,UAAU,EAAE;MAAyB,CAAE;MAC1EC,kBAAkB,EAAE;QAAEC,KAAK,EAAE,GAAG;QAAEC,IAAI,EAAE;MAAI,CAAE;MAC9CC,YAAY,EAAE;QACZC,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd,CAAE;MACFC,eAAe,EAAE;QACfF,QAAQ,EAAE,KAAK;QACfC,UAAU,EAAE;MACd;IAAE,gBAEFhF,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAC5C,OAAO;MAACf,cAAc,EAAE0D;IAAK,gBAC5BpE,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAACjE,SAAA,CAAA8E,SAAS;MACRC,EAAE,EAAC,mBAAmB;MACtBX,KAAK,EAAE;QACLjC,OAAO,EAAE,SAAS;QAClBnB,KAAK,EAAE;MACT,CAAE;MACFgE,SAAS;MACTC,SAAS;MACTC,IAAI,EAAE,CAAE;MACRC,OAAO,EAAE,CAAE;MACXlC,KAAK,EAAEA,KAAM;MACbmC,QAAQ,EAAE,IAAI,CAACC,aAAc;MAC7BC,UAAU,EAAE;QAAEC,gBAAgB,EAAE;MAAK;IAAE,CACxC,CAAC,eACF3F,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAACtC,MAAM,qBACL/B,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACyD,OAAO,EAAElC;IAAS,GAAC,QAEnB,CAAC,eACT1D,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACC,OAAO,EAAC,YAAY;MAAC1B,cAAc,EAAE0D,IAAK;MAACwB,OAAO,EAAE,IAAI,CAACC;IAAiB,GAC/EzB,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,MAC3B,CAAC,eACTpE,MAAA,CAAAkD,OAAA,CAAAmB,aAAA,CAAClC,MAAM;MAACyD,OAAO,EAAE,IAAI,CAACrB;IAAW,GAAC,MAE1B,CACF,CACD,CACI,CAAC;EAEpB;AACF;AAAC,IAAAtB,gBAAA,CAAAC,OAAA,EA9GKN,cAAc,eACC;EACjBqB,QAAQ,EAAE6B,kBAAS,CAACC,MAAM;EAC1B5B,IAAI,EAAE2B,kBAAS,CAACE,IAAI;EACpB9B,MAAM,EAAE4B,kBAAS,CAACG,MAAM;EACxB5C,KAAK,EAAEyC,kBAAS,CAACI,MAAM;EACvB9B,IAAI,EAAE0B,kBAAS,CAACI,MAAM;EACtBzC,OAAO,EAAEqC,kBAAS,CAACK,IAAI;EACvBzC,QAAQ,EAAEoC,kBAAS,CAACK,IAAI;EACxB3C,MAAM,EAAEsC,kBAAS,CAACK,IAAI;EACtBvC,YAAY,EAAEkC,kBAAS,CAACK;AAC1B,CAAC;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAnD,OAAA,GAqGYN,cAAc","ignoreList":[]}
|