Skip to content

Commit 3cd21dc

Browse files
MadinventorZeroMadinventorZero
authored
Merge pull request #14 from buddhajjigae/annotation-feature
Annotation feature update
2 parents 1e94c14 + c91e5b5 commit 3cd21dc

File tree

9 files changed

+173
-124
lines changed

9 files changed

+173
-124
lines changed

‎app/src/components/main/Annotation.tsx

Lines changed: 57 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,92 @@
1-
import React, { useContext, useRef } from 'react';
2-
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
3-
import { ItemTypes } from '../../constants/ItemTypes';
4-
import StateContext from '../../context/context';
5-
import { combineStyles } from '../../helperFunctions/combineStyles';
6-
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1+
// Caret Start
2+
import React, {
3+
useRef, useState, useContext, useEffect,
4+
} from 'react';
5+
import { Annotations } from '../../interfaces/Interfaces';
76
import Modal from '@material-ui/core/Modal';
7+
import StateContext from '../../context/context';
88

99
function Annotation({
10-
childId,
11-
type,
12-
typeId,
13-
style,
14-
children
15-
}: ChildElement) {
10+
id,
11+
name,
12+
}: Annotations) {
13+
const [annotations, setAnnotations] = useState('');
1614
const [state, dispatch] = useContext(StateContext);
1715
const ref = useRef(null);
1816

19-
// find the HTML element corresponding with this instance of an HTML element
20-
// find the current component to render on the canvas
21-
const HTMLType: HTMLType = state.HTMLTypes.find(
22-
(type: HTMLType) => type.id === typeId
23-
);
24-
25-
// hook that allows component to be draggable
26-
27-
// combine all styles so that higher priority style specifications overrule lower priority style specifications
28-
// priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
29-
const defaultNestableStyle = { ...globalDefaultStyle };
30-
const separatorStyle = {
31-
padding: '5px 10px',
32-
margin: '1px 10px',
33-
};
34-
35-
36-
const combinedStyle = combineStyles(
37-
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
38-
separatorStyle
39-
);
40-
17+
// React hook setting the annotation button modal open/close state
4118
const [open, setOpen] = React.useState(false);
4219

43-
const handleAnnoOpen = (id) => {
20+
// For showing the modal
21+
const handleOpen = (id) => {
4422
setOpen(true);
45-
//annotateOpen(id);
4623
};
4724

25+
// For closing the modal
4826
const handleClose = () => {
4927
setOpen(false);
5028
};
5129

30+
// Handles when text exists in the textarea of the modal. If text exists/does not exist, corresponding button changes colors.
5231
const handleAnnoChange = (event) => {
5332
const { value } = event.target;
33+
const focusIndex = state.canvasFocus.componentId - 1;
34+
const childrenArray = state.components[focusIndex].children;
5435

55-
console.log("ID ", event.target.id)
56-
console.log(event.target);
5736
if(value === '') {
58-
document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
59-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
37+
ref.current.style.background = '#3ec1ac';
38+
ref.current.id = 'btn' + event.target.id;
6039
} else {
61-
document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
62-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
40+
ref.current.style.background = '#cc99ff';
41+
ref.current.id = 'btn' + event.target.id;
42+
setAnnotations(value);
43+
44+
let childEle = handleSaveAnno(childrenArray, event.target.id);
45+
46+
if(childEle) {
47+
childEle.annotations = annotations;
48+
setState(childEle.annotations);
49+
}
50+
}
51+
}
52+
53+
54+
const handleSaveAnno = (array, id) => {
55+
for(let i = 0; i < array.length; i++) {
56+
if(array[i].childId === id) {
57+
return array[i];
58+
}
59+
if(array[i].children.length > 0) {
60+
return handleSaveAnno(array[i], id);
61+
}
6362
}
6463
}
6564

65+
/*
66+
<span className='annotate-textarea-footer'>
67+
<button className='annotate-textarea-savebutton'>Save Notes</button>
68+
</span>
69+
*/
70+
const body = (
71+
<div className='annotate-position'>
72+
<span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
73+
<textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}></textarea>
74+
</div>
75+
)
76+
6677
return (
67-
<div>
68-
{/* Caret start */}
69-
<button className='annotate-button-empty' id={"btn" + childId} onClick={() => handleAnnoOpen(childId)}>DIRECT CHILD HTML NESTABLE HERE</button>
78+
<div style={{padding: '1px', float: 'right'}}>
79+
<button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
7080
<Modal
7181
open={open}
7282
onClose={handleClose}
7383
keepMounted={true}
7484
>
75-
<textarea className='annotate-textarea' id={state.canvasFocus.childId} onChange={handleAnnoChange}></textarea>
85+
{body}
7686
</Modal>
77-
{/* Caret end */}
7887
</div>
7988
);
8089
}
8190

8291
export default Annotation;
92+
// Caret End

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ import { ItemTypes } from '../../constants/ItemTypes';
88
import StateContext from '../../context/context';
99
import { combineStyles } from '../../helperFunctions/combineStyles';
1010
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
11+
// Caret
12+
import Annotation from './Annotation'
1113

1214
function DirectChildHTML({
1315
childId,
16+
name,
1417
type,
1518
typeId,
1619
style,
@@ -66,7 +69,14 @@ function DirectChildHTML({
6669

6770
return (
6871
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
69-
{HTMLType.placeHolderShort}
72+
<strong>{HTMLType.placeHolderShort}</strong>
73+
{/* Caret start */}
74+
{` (${childId})`}
75+
<Annotation
76+
id={childId}
77+
name={name}
78+
/>
79+
{/* Caret end */}
7080
</div>
7181
);
7282
}

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 9 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import React, { useContext, useEffect, useRef } from 'react';
2-
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
2+
import { ChildElement, HTMLType} from '../../interfaces/Interfaces';
33
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
55
import StateContext from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
9-
import Modal from '@material-ui/core/Modal';
10-
import Annotation from './Annotation'
11-
// Caret
12-
import { makeStyles } from '@material-ui/core';
13-
import validateNewParent from '../../helperFunctions/changePositionValidation'
149
// Caret
15-
import TextField from '@material-ui/core/TextField';
16-
import uniqid from 'uniqid';
10+
import Annotation from './Annotation'
1711

1812
function DirectChildHTMLNestable({
1913
childId,
@@ -116,30 +110,6 @@ const snapShotFunc = () => {
116110
changeFocus(state.canvasFocus.componentId, childId);
117111
}
118112

119-
// Caret Start
120-
const [open, setOpen] = React.useState(false);
121-
122-
const handleAnnoOpen = (id) => {
123-
setOpen(true);
124-
//annotateOpen(id);
125-
};
126-
127-
const handleClose = () => {
128-
setOpen(false);
129-
};
130-
131-
const handleAnnoChange = (event) => {
132-
const { value } = event.target;
133-
if(value === '') {
134-
document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
135-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
136-
} else {
137-
document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
138-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
139-
}
140-
}
141-
// Caret End
142-
143113
// combine all styles so that higher priority style specifications overrule lower priority style specifications
144114
// priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
145115
const defaultNestableStyle = { ...globalDefaultStyle };
@@ -156,20 +126,19 @@ const snapShotFunc = () => {
156126
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
157127
interactiveStyle
158128
);
129+
159130
drag(drop(ref));
131+
160132
return (
161133
<div onClick={onClickHandler} style={combinedStyle} ref={ref}>
162-
{HTMLType.placeHolderShort}
163-
{renderChildren(children)}
134+
<strong>{HTMLType.placeHolderShort}</strong>
164135
{/* Caret start */}
136+
{` ( ${childId} )`}
165137
<Annotation
166-
childId={childId}
167-
typeId={typeId}
168-
type={type}
138+
id={childId}
169139
name={name}
170-
style={style}
171-
>
172-
</Annotation>
140+
/>
141+
{renderChildren(children)}
173142
{/* Caret end */}
174143
</div>
175144
);

‎app/src/components/main/IndirectChild.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
33
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
44
import StateContext from '../../context/context';
55
import { Component } from '../../interfaces/Interfaces';
6+
import Annotation from './Annotation'
67

7-
function IndirectChild({ style, children, placeHolder, linkId }) {
8+
function IndirectChild({ style, children, placeHolder, linkId, childId, name }) {
89
const [state, dispatch] = useContext(StateContext);
910
let combinedStyle = combineStyles(globalDefaultStyle, style);
1011

@@ -33,6 +34,13 @@ function IndirectChild({ style, children, placeHolder, linkId }) {
3334
placeHolder
3435
)}
3536
{children}
37+
{/* Caret start */}
38+
{` ( ${childId} )`}
39+
<Annotation
40+
id={childId}
41+
name={name}
42+
/>
43+
{/* Caret end */}
3644
</div>
3745
);
3846
}

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
109109
};
110110

111111
const keyBindCreateComponent = useCallback((e) => {
112-
if(e.key === 'Enter') {
112+
// Caret
113+
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
113114
e.preventDefault();
114115
document.getElementById('addComponentButton').click();
115116
}

‎app/src/containers/RightContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
341341
? handleRedo()
342342
: // Delete HTML tag off canvas
343343
// Caret
344-
e.key === 'Backspace' && e.ctrlKey
344+
e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT"
345345
? handleDelete()
346346
: // Save
347347
(e.key === 's' && e.ctrlKey && e.shiftKey) ||

0 commit comments

Comments
 (0)