Skip to content

Commit dbb545a

Browse files
buddhajjigaejonocrxkevinparkwilliamdyoonMadinventorZero
committed
Created annotation textarea header that display current element and index. Fixed hotkeys for enter and backspace so that they only fire on the canvas. Adjusted positioning of annotation button and textarea. Prevented textarea from resizing. Cleaned up canvas titles and added id's. Added name to Annotation interface. Changed styles for annotation textarea and added annotation textarea header style
Co-authored-by: jonocr <[email protected]> Co-authored-by: xkevinpark <[email protected]> Co-authored-by: williamdyoon <[email protected]> Co-authored-by: MadinventorZero <[email protected]>
1 parent 22c66be commit dbb545a

File tree

10 files changed

+102
-126
lines changed

10 files changed

+102
-126
lines changed

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const HTMLPanel = (props): JSX.Element => {
142142
};
143143

144144
const handleCreateElement = useCallback((e) => {
145-
if(e.key === 'Enter') {
145+
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
146146
e.preventDefault();
147147
document.getElementById('submitButton').click();
148148
}

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

Lines changed: 27 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,61 @@
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, { useRef } from 'react';
3+
import { Annotations } from '../../interfaces/Interfaces';
74
import Modal from '@material-ui/core/Modal';
85

96
function Annotation({
10-
childId,
11-
type,
12-
typeId,
13-
style,
14-
children
15-
}: ChildElement) {
16-
const [state, dispatch] = useContext(StateContext);
7+
id,
8+
name,
9+
}: Annotations) {
1710
const ref = useRef(null);
1811

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-
12+
// React hook setting the annotation button modal open/close state
4113
const [open, setOpen] = React.useState(false);
4214

43-
const handleAnnoOpen = (id) => {
15+
// For showing the modal
16+
const handleOpen = (id) => {
4417
setOpen(true);
45-
//annotateOpen(id);
4618
};
4719

20+
// For closing the modal
4821
const handleClose = () => {
4922
setOpen(false);
5023
};
5124

25+
// Handles when text exists in the textarea of the modal. If text exists/does not exist, corresponding button changes colors.
5226
const handleAnnoChange = (event) => {
5327
const { value } = event.target;
5428

55-
console.log("ID ", event.target.id)
56-
console.log(event.target);
5729
if(value === '') {
58-
document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
59-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
30+
ref.current.style.background = '#3ec1ac';
31+
ref.current.id = 'btn' + event.target.id;
6032
} else {
61-
document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
62-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
33+
ref.current.style.background = '#cc99ff';
34+
ref.current.id = 'btn' + event.target.id;
6335
}
6436
}
6537

66-
return (
38+
const body = (
6739
<div>
68-
{/* Caret start */}
69-
<button className='annotate-button-empty' id={"btn" + childId} onClick={() => handleAnnoOpen(childId)}>DIRECT CHILD HTML NESTABLE HERE</button>
40+
<p className='annotate-textarea-header'>Notes for: {name} ( {id} )</p>
41+
<textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}></textarea>
42+
</div>
43+
)
44+
45+
return (
46+
<div style={{padding: '1px', float: 'right'}}>
47+
<button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
7048
<Modal
7149
open={open}
7250
onClose={handleClose}
7351
keepMounted={true}
7452
>
75-
<textarea className='annotate-textarea' id={state.canvasFocus.childId} onChange={handleAnnoChange}></textarea>
53+
{body}
54+
7655
</Modal>
77-
{/* Caret end */}
7856
</div>
7957
);
8058
}
8159

8260
export default Annotation;
61+
// Caret End

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ 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,
@@ -66,7 +68,13 @@ function DirectChildHTML({
6668

6769
return (
6870
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
69-
{HTMLType.placeHolderShort}
71+
<strong>{HTMLType.placeHolderShort}</strong>
72+
{` (${childId})`}
73+
{/* Caret start */}
74+
<Annotation
75+
id={childId}
76+
/>
77+
{/* Caret end */}
7078
</div>
7179
);
7280
}

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

Lines changed: 11 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +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';
139
// Caret
14-
import TextField from '@material-ui/core/TextField';
15-
import uniqid from 'uniqid';
10+
import Annotation from './Annotation'
1611

1712
function DirectChildHTMLNestable({
1813
childId,
@@ -111,30 +106,6 @@ const snapShotFunc = () => {
111106
changeFocus(state.canvasFocus.componentId, childId);
112107
}
113108

114-
// Caret Start
115-
const [open, setOpen] = React.useState(false);
116-
117-
const handleAnnoOpen = (id) => {
118-
setOpen(true);
119-
//annotateOpen(id);
120-
};
121-
122-
const handleClose = () => {
123-
setOpen(false);
124-
};
125-
126-
const handleAnnoChange = (event) => {
127-
const { value } = event.target;
128-
if(value === '') {
129-
document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
130-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
131-
} else {
132-
document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
133-
document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
134-
}
135-
}
136-
// Caret End
137-
138109
// combine all styles so that higher priority style specifications overrule lower priority style specifications
139110
// priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
140111
const defaultNestableStyle = { ...globalDefaultStyle };
@@ -151,20 +122,20 @@ const snapShotFunc = () => {
151122
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
152123
interactiveStyle
153124
);
125+
154126
drag(drop(ref));
127+
155128
return (
156129
<div onClick={onClickHandler} style={combinedStyle} ref={ref}>
157-
{HTMLType.placeHolderShort}
158-
{renderChildren(children)}
159-
{/* Caret start */}
130+
<strong>{HTMLType.placeHolderShort}</strong>
131+
{` ( ${childId} )`}
160132
<Annotation
161-
childId={childId}
162-
typeId={typeId}
163-
type={type}
133+
id={childId}
164134
name={name}
165-
style={style}
166-
>
167-
</Annotation>
135+
/>
136+
{renderChildren(children)}
137+
{/* Caret start */}
138+
168139
{/* Caret end */}
169140
</div>
170141
);

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

Lines changed: 6 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 }) {
89
const [state, dispatch] = useContext(StateContext);
910
let combinedStyle = combineStyles(globalDefaultStyle, style);
1011

@@ -33,6 +34,10 @@ function IndirectChild({ style, children, placeHolder, linkId }) {
3334
placeHolder
3435
)}
3536
{children}
37+
{` ( ${childId} )`}
38+
<Annotation
39+
id={childId}
40+
/>
3641
</div>
3742
);
3843
}

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

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

111111
const keyBindCreateComponent = useCallback((e) => {
112-
if(e.key === 'Enter') {
112+
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
113113
e.preventDefault();
114114
document.getElementById('addComponentButton').click();
115115
}

‎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) ||

‎app/src/context/HTMLTypes.tsx

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const HTMLTypes: HTMLType[] = [
3535
tag: 'img',
3636
name: 'Image',
3737
style: {},
38-
placeHolderShort: 'Image',
38+
placeHolderShort: 'image',
3939
placeHolderLong: '',
4040
icon: ImageIcon
4141
},
@@ -44,40 +44,34 @@ const HTMLTypes: HTMLType[] = [
4444
tag: 'form',
4545
name: 'Form',
4646
style: {},
47-
placeHolderShort: 'Form',
47+
placeHolderShort: 'form',
4848
placeHolderLong: '',
4949
icon: FormIcon
5050
},
5151
{
5252
id: 3,
5353
tag: 'li',
5454
name: 'List',
55-
style: { color: 'purple' },
56-
placeHolderShort: (
57-
<ul>
58-
<li>item 1</li>
59-
<li>item 2</li>
60-
<li>item 3</li>
61-
</ul>
62-
),
55+
style: {},
56+
placeHolderShort: 'list item',
6357
placeHolderLong: '',
6458
icon: ListIcon
6559
},
6660
{
6761
id: 4,
6862
tag: 'button',
6963
name: 'Button',
70-
style: { textAlign: 'center', border: 'none' },
71-
placeHolderShort: <button>Button</button>,
64+
style: {},
65+
placeHolderShort: 'button',
7266
placeHolderLong: '',
7367
icon: ButtonIcon
7468
},
7569
{
7670
id: 6,
7771
tag: 'a',
7872
name: 'Link',
79-
style: { border: 'none' },
80-
placeHolderShort: <a href="#">Link</a>,
73+
style: {},
74+
placeHolderShort: 'link',
8175
placeHolderLong: '',
8276
icon: LinkIcon
8377
},
@@ -86,53 +80,52 @@ const HTMLTypes: HTMLType[] = [
8680
tag: 'p',
8781
name: 'Paragraph',
8882
style: {},
89-
placeHolderShort:
90-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu',
83+
placeHolderShort: 'paragraph',
9184
placeHolderLong: '',
9285
icon: ParagraphIcon
9386
},
9487
{
9588
id: 9,
9689
tag: 'h1',
9790
name: 'Header 1',
98-
style: { fontSize: '2em' },
99-
placeHolderShort: 'Header 1',
91+
style: {},
92+
placeHolderShort: 'header 1',
10093
placeHolderLong: '',
10194
icon: HeaderIcon
10295
},
10396
{
10497
id: 10,
10598
tag: 'h2',
10699
name: 'Header 2',
107-
style: { fontSize: '1.5em' },
108-
placeHolderShort: 'Header 2',
100+
style: {},
101+
placeHolderShort: 'header 2',
109102
placeHolderLong: '',
110103
icon: HeaderIcon
111104
},
112105
{
113106
id: 5,
114107
tag: 'span',
115108
name: 'Span',
116-
style: { fontSize: '1em' },
117-
placeHolderShort: 'Span',
109+
style: {},
110+
placeHolderShort: 'span',
118111
placeHolderLong: '',
119112
icon: HeaderIcon
120113
},
121114
{
122115
id: 12,
123116
tag: 'input',
124117
name: 'Input',
125-
style: { fontSize: '1em' },
126-
placeHolderShort: 'Input',
118+
style: {},
119+
placeHolderShort: 'input',
127120
placeHolderLong: '',
128121
icon: HeaderIcon
129122
},
130123
{
131124
id: 13,
132125
tag: 'label',
133126
name: 'Label',
134-
style: { fontSize: '1em' },
135-
placeHolderShort: <label>Label</label>,
127+
style: {},
128+
placeHolderShort: 'label',
136129
placeHolderLong: '',
137130
icon: HeaderIcon
138131
}

‎app/src/interfaces/Interfaces.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,10 @@ export interface DragItemType {
8585
export interface LoginInt {
8686
isLoggedIn: boolean;
8787
}
88+
89+
// Caret start
90+
export interface Annotations {
91+
id: number;
92+
name: string;
93+
}
94+
// Caret end

0 commit comments

Comments
 (0)