From c21a4edffc245d1455f81d2ba46578e36b7638f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= Date: Wed, 17 Apr 2019 09:09:56 -0300 Subject: [PATCH] Small Adjusts --- author/author.html | 2 +- author/js/dcc-author-server-address.js | 4 +- author/js/navigator.js | 188 ++++++++++++++++--------- 3 files changed, 125 insertions(+), 69 deletions(-) diff --git a/author/author.html b/author/author.html index 6d12d2611..df52f77de 100644 --- a/author/author.html +++ b/author/author.html @@ -7,7 +7,7 @@ - + diff --git a/author/js/dcc-author-server-address.js b/author/js/dcc-author-server-address.js index 6724cf211..07eda0de4 100644 --- a/author/js/dcc-author-server-address.js +++ b/author/js/dcc-author-server-address.js @@ -5,6 +5,6 @@ */ (function() { - DCCAuthorServer.serverAddress = "http://cloud.lis.ic.unicamp.br/case-notebook/latest/server/"; - // DCCAuthorServer.serverAddress = "http://127.0.0.1:8888/"; + // DCCAuthorServer.serverAddress = "http://cloud.lis.ic.unicamp.br/case-notebook/latest/server/"; + DCCAuthorServer.serverAddress = "http://127.0.0.1:8888/"; })(); diff --git a/author/js/navigator.js b/author/js/navigator.js index 48656bb19..2a7bb2cb9 100644 --- a/author/js/navigator.js +++ b/author/js/navigator.js @@ -8,12 +8,15 @@ class Navigator { constructor() { + this._retracted = true; + this.expandClicked = this.expandClicked.bind(this); window.messageBus.ext.subscribe("control/navigator/expand", this.expandClicked); this.retractClicked = this.retractClicked.bind(this); window.messageBus.ext.subscribe("control/navigator/retract", this.retractClicked); } - + +/* async mountPlainCase(author, knots) { this._author = author; this._knots = knots; @@ -46,34 +49,36 @@ async mountPlainCase(author, knots) { } } +*/ -_createKnotEntry(id) { - let miniature = document.createElement("div"); - miniature.id = id; - miniature.classList.add("sty-navigation-knot"); - miniature.classList.add("std-border"); - return miniature; -} - +/* async _createMiniature(kn) { let htmlKnot = await this._author._generateHTML(kn); let iframe = document.createElement('iframe'); - iframe.width = Navigator.miniKnot.width; - iframe.height = Navigator.miniKnot.height; - iframe.srcdoc = this._capsule.message.replace(/{width}/g, Navigator.miniKnot.width) - .replace(/{height}/g, Navigator.miniKnot.height-6) + iframe.width = Navigator.miniKnot[this._retracted].width; + iframe.height = Navigator.miniKnot[this._retracted].height; + iframe.srcdoc = this._capsule.message.replace(/{width}/g, Navigator.miniKnot[this._retracted].width) + .replace(/{height}/g, Navigator.miniKnot[this._retracted].height-6) .replace("{knot}", htmlKnot); return iframe; } +*/ async expandClicked(topic, message) { + document.querySelector("#navigation-block").style.flex = "80%"; + this._knotPanel.style.flex = "20%"; + this._retracted = false; this.mountTreeCase(this._author, this._knots); document.querySelector("#button-expand").style.display = "none"; document.querySelector("#button-retract").style.display = "initial"; } async retractClicked(topic, message) { - this.mountPlainCase(this._author, this._knots); + // this.mountPlainCase(this._author, this._knots); + document.querySelector("#navigation-block").style.flex = "20%"; + this._knotPanel.style.flex = "80%"; + this._retracted = true; + this.mountTreeCase(this._author, this._knots); document.querySelector("#button-expand").style.display = "initial"; document.querySelector("#button-retract").style.display = "none"; } @@ -87,8 +92,10 @@ async mountTreeCase(author, knots) { this._capsule = await window.messageBus.ext.request("capsule/knot/get", "", "capsule/knot"); this._navigationPanel.innerHTML = ""; + /* document.querySelector("#navigation-block").style.flex = "80%"; this._knotPanel.style.flex = "20%"; + */ // building the visual tree let tree = {level: 0, children: []}; @@ -98,7 +105,7 @@ async mountTreeCase(author, knots) { let maxLevel = 0; for (let k in this._knots) { if (!this._knots[k].categories || this._knots[k].categories.indexOf("note") < 0) { - let newKnot = {id: "mini-" + k.replace(/\./g, "_"), + let newKnot = {id: k.replace(/\./g, "_"), knotid: k, title: this._knots[k].title, level: this._knots[k].level}; @@ -123,11 +130,12 @@ async mountTreeCase(author, knots) { // computing dimensions const baseTitle = - Navigator.miniKnot.titleBase + Navigator.miniKnot.titleDelta * maxLevel; + Navigator.miniKnot[this._retracted].titleBase + + Navigator.miniKnot[this._retracted].titleDelta * maxLevel; this._computeDimension(tree, true, 0, -baseTitle, maxLevel); // set the dimensions and margins of the graph - let margin = {top: 10, right: 10, bottom: 10, left: 10}, + let margin = {top: 10, right: 0, bottom: 10, left: 0}, width = tree.width, height = tree.height; @@ -151,27 +159,31 @@ async mountTreeCase(author, knots) { .enter() .append("g"); + // knot square gs.append("rect") + .attr("id", function(d){ return "kmini-" + d.data.id; }) .attr("x", function (d) { return d.data.x; }) .attr("y", function (d) { return d.data.y; }) .attr("width", function (d) { return d.data.width; }) .attr("height", function (d) { return d.data.height; }) .style("opacity", function(d){ return 0.1}); + // area inside the knot square to insert the miniature HTML gs.append("foreignObject") + .attr("id", function(d){ return "mini-" + d.data.id; }) .attr("x", function (d) { return d.data.x; }) .attr("y", function (d) { return d.data.y + d.data.titleSize; }) - .attr("id", function(d){ return d.data.id; }) .attr("width", function (d) { return d.data.width; }) .attr("height", function (d) { return d.data.height; }); + // knot title svg.selectAll("text") .data(root.descendants().filter(function(d){return d.depth>=1 && d.depth <= 2})) .enter() .append("text") .attr("id", function(d) {return "t_" + d.data.id}) .attr("x", function(d){ return d.data.x + 5}) - .attr("y", function(d){ return d.data.y + 20}) + .attr("y", function(d){ return d.data.y + d.data.titleSize}) .text(function(d){ return d.data.title; }) .attr("font-size", function(d) {return d.data.titleSize + "px"}) .attr("fill", "black") @@ -186,18 +198,20 @@ async mountTreeCase(author, knots) { t.removeChild(t.firstChild); t.innerHTML = d.data.title}); + + // add miniatures inside knot squares for (let kn in this._knots) { if (this._knots[kn].render) { let id = "#mini-" + kn.replace(/\./g, "_"); let fo = document.querySelector(id); if (fo != null) { - let iframe = await this._createMiniature(kn); - fo.appendChild(iframe); + let miniature = await this._createMiniature(kn); + fo.appendChild(miniature); } } } - console.log(tree); + // console.log(tree); this._drawGroups(tree, svg); @@ -207,39 +221,39 @@ async mountTreeCase(author, knots) { _computeDimension(knot, horizontal, x, y, titleLevel) { knot.x = x; knot.y = y; - knot.titleSize = Navigator.miniKnot.titleBase + - Navigator.miniKnot.titleDelta * titleLevel; + knot.titleSize = Navigator.miniKnot[this._retracted].titleBase + + Navigator.miniKnot[this._retracted].titleDelta * titleLevel; if (!knot.children) { - knot.width = Navigator.miniKnot.width; - knot.height = Navigator.miniKnot.height; + knot.width = Navigator.miniKnot[this._retracted].width; + knot.height = Navigator.miniKnot[this._retracted].height; } else { knot.width = 0; knot.height = 0; - let shiftX = x + Navigator.miniKnot.paddingX; - let shiftY = y + Navigator.miniKnot.paddingY + knot.titleSize; + let shiftX = x + Navigator.miniKnot[this._retracted].paddingX; + let shiftY = y + Navigator.miniKnot[this._retracted].paddingY + knot.titleSize; if (knot.level < 1) { for (let k in knot.children) { this._computeDimension( knot.children[k], !horizontal, shiftX, shiftY, titleLevel - 1); - if (horizontal) { + if (horizontal && !this._retracted) { knot.width += knot.children[k].width; knot.height = (knot.children[k].height > knot.height) ? knot.children[k].height : knot.height; - shiftX += knot.children[k].width + Navigator.miniKnot.marginX; + shiftX += knot.children[k].width + Navigator.miniKnot[this._retracted].marginX; } else { knot.height += knot.children[k].height; knot.width = (knot.children[k].width > knot.width) ? knot.children[k].width : knot.width; - shiftY += knot.children[k].height + Navigator.miniKnot.marginY; + shiftY += knot.children[k].height + Navigator.miniKnot[this._retracted].marginY; } } - if (horizontal) - knot.width += (knot.children.length - 1) * Navigator.miniKnot.marginX; + if (horizontal && !this.retracted) + knot.width += (knot.children.length - 1) * Navigator.miniKnot[this._retracted].marginX; else - knot.height += (knot.children.length - 1) * Navigator.miniKnot.marginY; + knot.height += (knot.children.length - 1) * Navigator.miniKnot[this._retracted].marginY; } else if (knot.level < 2) { // compute all links in this level for (let kn in knot.children) { @@ -283,8 +297,8 @@ _computeDimension(knot, horizontal, x, y, titleLevel) { } // computes the block width/height - knot.width = (horizontal) ? Navigator.miniKnot.marginX * (sequence.length - 1) : 0, - knot.height = (horizontal) ? 0 : Navigator.miniKnot.marginY * (sequence.length - 1); + knot.width = (horizontal) ? Navigator.miniKnot[this._retracted].marginX * (sequence.length - 1) : 0, + knot.height = (horizontal) ? 0 : Navigator.miniKnot[this._retracted].marginY * (sequence.length - 1); for (let s in sequence) { for (let ss in sequence[s].subseq) { this._computeDimension( @@ -300,9 +314,9 @@ _computeDimension(knot, horizontal, x, y, titleLevel) { } } if (horizontal) - sequence[s].height += Navigator.miniKnot.marginY * (sequence[s].subseq.length - 1); + sequence[s].height += Navigator.miniKnot[this._retracted].marginY * (sequence[s].subseq.length - 1); else - sequence[s].width += Navigator.miniKnot.marginX * (sequence[s].subseq.length - 1); + sequence[s].width += Navigator.miniKnot[this._retracted].marginX * (sequence[s].subseq.length - 1); if (horizontal) { knot.width += sequence[s].width; @@ -323,39 +337,61 @@ _computeDimension(knot, horizontal, x, y, titleLevel) { this._computeDimension( sequence[s].subseq[ss], !horizontal, shiftX, shiftY, titleLevel - 1); if (horizontal) - shiftY += sequence[s].subseq[ss].height + Navigator.miniKnot.marginY; + shiftY += sequence[s].subseq[ss].height + Navigator.miniKnot[this._retracted].marginY; else - shiftX += sequence[s].subseq[ss].width + Navigator.miniKnot.marginX; + shiftX += sequence[s].subseq[ss].width + Navigator.miniKnot[this._retracted].marginX; } if (horizontal) - shiftX += sequence[s].width + Navigator.miniKnot.marginX; + shiftX += sequence[s].width + Navigator.miniKnot[this._retracted].marginX; else - shiftY += sequence[s].height + Navigator.miniKnot.marginY; + shiftY += sequence[s].height + Navigator.miniKnot[this._retracted].marginY; } } else { // groups - knot.width = Navigator.miniKnot.width; - knot.height = Navigator.miniKnot.height + - Navigator.microKnot.height + Navigator.microKnot.marginY; + knot.width = Navigator.miniKnot[this._retracted].width; + knot.height = Navigator.miniKnot[this._retracted].height + + Navigator.microKnot[this._retracted].height + Navigator.microKnot[this._retracted].marginY; if (knot.children) knot.id = knot.children[0].id; } } - knot.width += Navigator.miniKnot.paddingX * 2; - knot.height += Navigator.miniKnot.paddingY * 2 + knot.titleSize; + knot.width += Navigator.miniKnot[this._retracted].paddingX * 2; + knot.height += Navigator.miniKnot[this._retracted].paddingY * 2 + knot.titleSize; +} + +async _createMiniature(knotid) { + let miniature = document.createElement("div"); + // miniature.id = "mini-" + knotid.replace(/\./g, "_"; + miniature.classList.add("sty-navigation-knot"); + // miniature.classList.add("std-border"); + // const dot = this._knots[knotid].title.lastIndexOf("."); + // const title = (dot == -1) ? this._knots[knotid].title : this._knots[knotid].title.substring(dot); + miniature.innerHTML = ""; + + let htmlKnot = await this._author._generateHTML(knotid); + let iframe = document.createElement('iframe'); + iframe.width = Navigator.miniKnot[this._retracted].width; + iframe.height = Navigator.miniKnot[this._retracted].height; + iframe.srcdoc = this._capsule.message.replace(/{width}/g, Navigator.miniKnot[this._retracted].width) + .replace(/{height}/g, Navigator.miniKnot[this._retracted].height-6) + .replace("{knot}", htmlKnot); + miniature.appendChild(iframe); + + return miniature; } _drawGroups(knot, svg) { if (knot.level == 2 && knot.children) { for (let m = 0; m <= 3; m++) svg.append("rect") - .attr("x", knot.x + Navigator.miniKnot.paddingX + - (Navigator.microKnot.width + Navigator.microKnot.marginX) * m) - .attr("y", knot.y + knot.titleSize + Navigator.miniKnot.height + - Navigator.microKnot.marginY) - .attr("width", Navigator.microKnot.width) - .attr("height", Navigator.microKnot.height) + .attr("x", knot.x + Navigator.miniKnot[this._retracted].paddingX + + (Navigator.microKnot[this._retracted].width + Navigator.microKnot[this._retracted].marginX) * m) + .attr("y", knot.y + knot.titleSize + Navigator.miniKnot[this._retracted].height + + Navigator.microKnot[this._retracted].marginY) + .attr("width", Navigator.microKnot[this._retracted].width) + .attr("height", Navigator.microKnot[this._retracted].height) .attr("stroke", "#444444") .attr("fill", "#76a7d7") .attr("stroke-width", "2"); @@ -382,19 +418,39 @@ _drawLinks(knot, svg) { (function() { Navigator.miniKnot = { - width: 200, // 16:9 - height: 112, - marginX : 20, - marginY : 20, - paddingX: 3, - paddingY: 3, - titleBase: 10, - titleDelta: 10 + true: { + width: 100, // 16:9 + height: 56, + marginX : 10, + marginY : 10, + paddingX: 2, + paddingY: 2, + titleBase: 5, + titleDelta: 5 + }, + false: { + width: 200, // 16:9 + height: 112, + marginX : 20, + marginY : 20, + paddingX: 3, + paddingY: 3, + titleBase: 10, + titleDelta: 10 + } }; Navigator.microKnot = { - width: 40, - height: 24, - marginX: 5, - marginY: 5 - } + true: { + width: 20, + height: 12, + marginX: 3, + marginY: 3 + }, + false: { + width: 40, + height: 24, + marginX: 5, + marginY: 5 + } + }; })(); \ No newline at end of file