Skip to content

Commit

Permalink
Small Adjusts
Browse files Browse the repository at this point in the history
  • Loading branch information
@santanche
santanche committed Apr 17, 2019
1 parent 2bd3dc0 commit c21a4ed
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 69 deletions.
2 changes: 1 addition & 1 deletion author/author.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/author.css">
<link rel="stylesheet" href="../templates/classic/css/presentation.css">
<link rel="stylesheet" href="../templates/classic/css/templates.css">
<link rel="stylesheet" href="js/quill-1-3-6/quill.snow.css">
<link rel="stylesheet" href="../lib/quill-1-3-6/quill.snow.css">

<script src="../infra/utils.js"></script>
<script src="../infra/bus.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions author/js/dcc-author-server-address.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/";
})();
188 changes: 122 additions & 66 deletions author/js/navigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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";
}
Expand All @@ -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: []};
Expand All @@ -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};
Expand All @@ -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;

Expand All @@ -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")
Expand All @@ -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);

Expand All @@ -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) {
Expand Down Expand Up @@ -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(
Expand All @@ -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;
Expand All @@ -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 = "<dcc-trigger action='knot/" + knotid + "/selected' " +
"xstyle='sty-navigation-knot-cover' label = ''>";

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");
Expand All @@ -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
}
};
})();

0 comments on commit c21a4ed

Please sign in to comment.