Skip to content

Commit decfffb

Browse files
hmskleehmsklee
committed
stash before creating new objects - update word text/tags
1 parent ca10165 commit decfffb

File tree

6 files changed

+192
-76
lines changed

6 files changed

+192
-76
lines changed

‎index.html‎

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,42 @@
33

44
<!-- turns off text selection for svg canvas -->
55
<style>
6+
body {
7+
margin:0;
8+
-moz-osx-font-smoothing:grayscale;
9+
-webkit-font-smoothing:antialiased;
10+
}
11+
612
svg text {
7-
cursor: default;
8-
-webkit-user-select: none;
9-
-moz-user-select: none;
10-
-ms-user-select: none;
11-
user-select: none;
13+
cursor: default;
14+
-webkit-user-select: none;
15+
-moz-user-select: none;
16+
-ms-user-select: none;
17+
user-select: none;
18+
}
19+
20+
#header {
21+
position:absolute;
22+
top:0;
23+
left:0;
24+
background:#333;
25+
color:white;
26+
width:calc( 100% - 20px );
27+
padding:10px;
28+
}
29+
30+
#drawing {
31+
margin-top:30px;
32+
}
33+
34+
button {
35+
background:white;
36+
border:none;
37+
outline:none;
38+
}
39+
40+
button.active {
41+
background:#ff8;
1242
}
1343

1444
.split-left {width:66.5%; overflow:hidden;}
@@ -31,6 +61,12 @@
3161

3262
<body>
3363

64+
<div id="header">
65+
<input type="file">
66+
<button class="active" id="POS">POS</button>
67+
<button id="BIO">BIO</button>
68+
</div>
69+
3470
<div id="drawing">
3571

3672
</div>
@@ -144,9 +180,23 @@
144180

145181
// init objects/listeners...
146182
window.onload = function() {
147-
var prevWidth = svgWidth;
148-
149183

184+
// init buttons
185+
const State = {
186+
annotationStyle: document.querySelector('button.active').id,
187+
setAnnotationStyle: function(type) {
188+
this.annotationStyle = type;
189+
}
190+
};
191+
const buttons = document.querySelectorAll('#header button');
192+
buttons.forEach(function(clickableButton) {
193+
clickableButton.onclick = function() {
194+
buttons.forEach(button => {
195+
button.classList.toggle('active', button == this);
196+
})
197+
State.setAnnotationStyle(this.id);
198+
}
199+
});
150200

151201
/* load JSON file */
152202
var json = './data/angus-ex.json';
@@ -174,6 +224,7 @@
174224
* - second hierarchy: events--paths | arguments--themes
175225
*/
176226
function parseData(data) {
227+
console.log(data);
177228

178229
let datamap = {}; // map Word instances to indices in data
179230

@@ -191,6 +242,7 @@
191242
lemma: sentence.lemmas[k],
192243
entity: sentence.entities[k]
193244
}
245+
w.tag = w.syntaxData.tag;
194246
wordObjs.push(w);
195247
datamap[i + '-' + j + '-' + k + '-' + word] = idx;
196248
})
@@ -292,6 +344,7 @@
292344

293345
/* init graph layout object */
294346
var Panel = new GraphLayout();
347+
var prevWidth = svgWidth;
295348

296349
function svgResize() {
297350
var w, widthPercChange;
@@ -311,7 +364,7 @@
311364
// draw.size(svgWidth, draw.height());
312365

313366
}
314-
367+
315368
widthPercChange = svgWidth / prevWidth;
316369
prevWidth = svgWidth;
317370
//console.log("\nwidthPercChange = " + widthPercChange);

‎js/annotate.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ class Row {
101101
}
102102

103103
draw() {
104-
console.log(" in Row " + this.idx + " about to call drawRow");
104+
//console.log(" in Row " + this.idx + " about to call drawRow");
105105
drawRow(this);
106106
}
107107

@@ -170,7 +170,7 @@ class Word {
170170
//take temp values and update actual svg values
171171
update() {
172172

173-
// console.log("\n***\nin update X = " + this.tempX + ", Y = " + this.tempY + ", W = " + this.tempW );
173+
//// console.log("\n***\nin update X = " + this.tempX + ", Y = " + this.tempY + ", W = " + this.tempW );
174174
this.aboveRect.x(this.tempX);
175175
this.aboveRect.width(this.tempW);
176176

@@ -196,7 +196,7 @@ class Word {
196196

197197

198198
draw() {
199-
//console.log(" in Word " + this.val + " about to call drawWord");
199+
////console.log(" in Word " + this.val + " about to call drawWord");
200200
drawWord(this);
201201
}
202202

@@ -215,7 +215,7 @@ class Word {
215215
}
216216

217217
static testMe(val) {
218-
console.log(" in Word, static testMe, val = " + val);
218+
//console.log(" in Word, static testMe, val = " + val);
219219
return '' + val + '' + val;
220220

221221
}
@@ -228,9 +228,9 @@ function checkSlotAvailabity(num, slotArr) {
228228

229229
if (debug) {
230230
if (slotArr.indexOf(num) < 0) {
231-
//console.log("slot " + num + " not found..." );
231+
////console.log("slot " + num + " not found..." );
232232
} else {
233-
//console.log("slot " + num + " found! index = " + slotArr.indexOf(num));
233+
////console.log("slot " + num + " found! index = " + slotArr.indexOf(num));
234234
}
235235
}
236236

@@ -268,7 +268,7 @@ function checkAndUpdateWordToWordSlots(link, startSlot) { //, minWord, minSide,
268268
break;
269269
}
270270
}
271-
//console.log("looking for slot " + x + " in right side of " + wordObjs[i].val);
271+
////console.log("looking for slot " + x + " in right side of " + wordObjs[i].val);
272272

273273
if (checkSlotAvailabity(x, wordObjs[i].slotsR)) {
274274
slotIsAvailable = false;
@@ -341,7 +341,7 @@ function checkAndUpdateWordToWordSlots(link, startSlot) { //, minWord, minSide,
341341
}
342342

343343
} else {
344-
//console.log("error: couldn't find any slot available out of 100 slots!");
344+
////console.log("error: couldn't find any slot available out of 100 slots!");
345345
}
346346

347347
debugSlots();
@@ -355,14 +355,14 @@ function traceBackToWordObj(link, type, word, attach) {
355355
var retVal = {w: -1, s: -1};
356356

357357
if (type == types.WORD) {
358-
// console.log("in traceback, node is a word, wordObj.val = " + word.val + ", attachSide = " + attach);
358+
//// console.log("in traceback, node is a word, wordObj.val = " + word.val + ", attachSide = " + attach);
359359

360360
retVal.w = word;
361361
retVal.s = attach;
362362
return retVal;
363363

364364
} else {
365-
// console.log("in traceback, node is a link, wordObj.val, attachSide = " + attach);
365+
//// console.log("in traceback, node is a link, wordObj.val, attachSide = " + attach);
366366

367367
var nextLink = word;
368368
var nextType, nextWord, nextAttach;
@@ -381,7 +381,7 @@ function traceBackToWordObj(link, type, word, attach) {
381381

382382
}
383383

384-
// console.log("now going to traceback... link: " + nextLink + ", nextType: " + nextType + " nextWord " + nextWord.val + ", nextAttach: " + nextAttach);
384+
//// console.log("now going to traceback... link: " + nextLink + ", nextType: " + nextType + " nextWord " + nextWord.val + ", nextAttach: " + nextAttach);
385385

386386
return traceBackToWordObj(nextLink, nextType, nextWord, nextAttach);
387387
}
@@ -395,35 +395,35 @@ function calcAttachPoints(link, strategy) {
395395

396396
if (link.ts == types.WORD) {
397397
rootS = link.leftWord.idx;
398-
console.log("rootS = " + link.leftWord.id);
398+
//console.log("rootS = " + link.leftWord.id);
399399

400400
} else {
401401
rootS = link.leftWord.rootMinWord.idx;
402-
console.log("rootS = " + link.leftWord.rootMinWord.id);
402+
//console.log("rootS = " + link.leftWord.rootMinWord.id);
403403

404404
}
405405

406406
if (link.te == types.WORD) {
407407
rootE = link.rightWord.idx;
408-
console.log("rootE = " + link.rightWord.id);
408+
//console.log("rootE = " + link.rightWord.id);
409409

410410
} else {
411411
rootE = link.rightWord.rootMaxWord.idx;
412-
console.log("rootE = " + link.rightWord.rootMaxWord.id);
412+
//console.log("rootE = " + link.rightWord.rootMaxWord.id);
413413
}
414414

415415
if (strategy == strategies.CLOSEST) {
416416

417-
console.log("" + link.id + " strategy = CLOSEST");
417+
//console.log("" + link.id + " strategy = CLOSEST");
418418

419419
if (rootS < rootE) {
420-
console.log("rootS < rootE (" +rootS +" < " + rootE +")");
420+
//console.log("rootS < rootE (" +rootS +" < " + rootE +")");
421421
link.leftWord.nr += 1;
422422
link.rightWord.nl += 1;
423423
link.leftAttach = sides.RIGHT;
424424
link.rightAttach = sides.LEFT;
425425
} else {
426-
console.log("rootS >= rootE (" +rootS +" >= " + rootE +")");
426+
//console.log("rootS >= rootE (" +rootS +" >= " + rootE +")");
427427

428428
link.leftWord.nl += 1;
429429
link.rightWord.nr += 1;
@@ -435,7 +435,7 @@ function calcAttachPoints(link, strategy) {
435435

436436
}
437437
} else if (strategy == strategies.FARTHEST) {
438-
console.log("" + link.id + " strategy = FARTHEST");
438+
//console.log("" + link.id + " strategy = FARTHEST");
439439

440440

441441
if (rootS < rootE) {
@@ -503,7 +503,7 @@ function flipIfNecessary(link) {
503503
)
504504
{
505505

506-
console.log("YES, " + link.id + " needs to flip!");
506+
//console.log("YES, " + link.id + " needs to flip!");
507507

508508
flip(link);
509509

@@ -548,39 +548,39 @@ function createLink(link) {
548548

549549
flipIfNecessary( link );
550550

551-
//console.log("printing link... " + link.id);
552-
//console.log(link);
551+
////console.log("printing link... " + link.id);
552+
////console.log(link);
553553

554554
//what slot is open? (ie figure out y position)
555555
link.h = checkAndUpdateWordToWordSlots(link, checkSlotAt);
556556

557557

558558
//testing attaching the PARENT link to each child..
559559

560-
//console.log("attaching the PARENT link to each child");
561-
//console.log("leftWord = " + link.leftWord.id);
562-
//console.log("rightWord = " + link.rightWord.id);
560+
////console.log("attaching the PARENT link to each child");
561+
////console.log("leftWord = " + link.leftWord.id);
562+
////console.log("rightWord = " + link.rightWord.id);
563563

564564
//explicitly link parents of link (i.e., links that attach to this link)
565565
//if (link.leftAttach == 0) {
566566
if (link.leftAttach == sides.LEFT) {
567-
//console.log(link.leftWord);
568-
//console.log(link.leftWord.parentsL);
567+
////console.log(link.leftWord);
568+
////console.log(link.leftWord.parentsL);
569569
link.leftWord.parentsL.push(link);
570570
} else if (link.leftAttach == sides.RIGHT) {
571-
//console.log(link.leftWord);
572-
//console.log(link.leftWord.parentsR);
571+
////console.log(link.leftWord);
572+
////console.log(link.leftWord.parentsR);
573573
link.leftWord.parentsR.push(link);
574574
}
575575

576576
//if (link.rightAttach == 0) {
577577
if (link.rightAttach == sides.LEFT) {
578-
//console.log(link.rightWord);
579-
//console.log(link.rightWord.parentsL);
578+
////console.log(link.rightWord);
579+
////console.log(link.rightWord.parentsL);
580580
link.rightWord.parentsL.push(link);
581581
} else if (link.rightAttach == sides.RIGHT) {
582-
//console.log(link.rightWord);
583-
//console.log(link.rightWord.parentsR);
582+
////console.log(link.rightWord);
583+
////console.log(link.rightWord.parentsR);
584584
link.rightWord.parentsR.push(link);
585585
}
586586
}

‎js/reader.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* reader.js
3+
* -------------------
4+
* parse a json file
5+
*
6+
*/
7+
8+
document.addEventListener('DOMContentLoaded',function() {
9+
10+
const input = document.querySelector('input[type="file"]');
11+
input.onchange = function() {
12+
console.log(this.files[0])
13+
}
14+
15+
})

0 commit comments

Comments
 (0)