Allow user to put comments/notes in DMX doc. It will look like this:
Data model:
modify DMX data model in dmx.js and ball.js, add a collaborative map, call it "comments". (dmx.doc.attributes is a collaborative map, for your reference)
for elements in dmx.doc.comments, structure them like this:
dmx.doc.comments['0'] = { // 0 is an unique id, just sequential number, convert to string.
content: "this is a sample comment",
ts: 12344565, //last update timestamp
userId: "user1@xxx.com", //whatever string google uses to identify an user
x: 50, //absolute position
y: 340,
w: 100, //width
h: 30, //height
color: "FFFFFF", // the user color
}
UI:
add a button " + comment ", when user clicks on it, allow user to draw a rectangle, and allow user to edit the content of this div(
). Similar to Google drawings.
add a button to toggle all comments, i.e. show all comments, hide all comments.
when showing the comments, just loop through all the dmx.doc.comments and draw divs on the screen.
to delete a comment, right click the comment, show a delete icon "X"(), click on the icon, delete the comment.
The user is now able to create comments, which are draggable, resizeable and can be removed by right clicking to show a close button. The show and hide all button has also been added
Allow user to put comments/notes in DMX doc. It will look like this:
Data model:
UI: add a button " + comment ", when user clicks on it, allow user to draw a rectangle, and allow user to edit the content of this div(
add a button to toggle all comments, i.e. show all comments, hide all comments. when showing the comments, just loop through all the dmx.doc.comments and draw divs on the screen.
to delete a comment, right click the comment, show a delete icon "X"(), click on the icon, delete the comment.
no need for edit for now.
The user is now able to create comments, which are draggable, resizeable and can be removed by right clicking to show a close button. The show and hide all button has also been added