diff --git a/index.html b/index.html index 1608292..f34562a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + diff --git a/package.json b/package.json index 9292047..63cb84b 100644 --- a/package.json +++ b/package.json @@ -50,12 +50,14 @@ "webpack-hot-middleware": "^2.21.0" }, "dependencies": { + "@fortawesome/fontawesome-free": "^5.1.1", "async": "^2.6.0", "bootstrap": "^3.3.7", "bootstrap-3-typeahead": "^4.0.2", "dagre": "^0.7.4", "electron-store": "^1.3.0", "eventemitter2": "^4.1.0", + "fontfaceobserver": "^2.0.13", "is-zip-file": "^1.0.2", "jquery": "^3.2.1", "linkurious": "^1.5.1", diff --git a/src/components/Graph.jsx b/src/components/Graph.jsx index bd70b91..fab246e 100644 --- a/src/components/Graph.jsx +++ b/src/components/Graph.jsx @@ -7,6 +7,7 @@ import { join } from "path"; import { remote } from "electron"; const { dialog } = remote; const uuidv4 = require('uuid/v4'); +var observer = require('fontfaceobserver'); export default class GraphContainer extends Component { constructor(props) { @@ -166,6 +167,13 @@ export default class GraphContainer extends Component { } componentDidMount() { + var font = new observer("Font Awesome 5 Free"); + font.load().then(x => { + this.inita(); + }) + } + + inita(){ this.initializeSigma(); this.doQueryNative({ @@ -182,17 +190,34 @@ export default class GraphContainer extends Component { if (appStore.currentTooltip !== null){ appStore.currentTooltip.close(); } - let node = this.state.sigmaInstance.graph.nodes(id); + let instance = this.state.sigmaInstance; + let node = instance.graph.nodes(id); if (status){ node.owned = true; node.notowned = false; + node.glyphs.push({ + position: "top-left", + font: '"Font Awesome 5 Free"', + content: "\uf54c", + fillColor: "black", + fontScale: 2.0, + fontStyle: "900" + }) }else{ + let newglyphs = []; + $.each(node.glyphs, (_, glyph) => { + if (glyph.position !== "top-left"){ + newglyphs.push(glyph) + } + }) + node.glyphs = newglyphs; node.notowned = true; node.owned = false; - } + } let q = driver.session(); q.run(`MATCH (n:${node.type} {name:{node}}) SET n.owned={status}`, {node: node.label, status: status}).then(x => { + this.relayout(); q.close(); }) } @@ -812,10 +837,11 @@ export default class GraphContainer extends Component { node.start = true; node.glyphs.push({ position: "bottom-right", - font: "FontAwesome", - content: "\uF21D", + font: '"Font Awesome 5 Free"', + content: "\uF3C5", fillColor: "#3399FF", - fontScale: 1.5 + fontScale: 1.5, + fontStyle: "900" }); } @@ -823,10 +849,22 @@ export default class GraphContainer extends Component { node.end = true; node.glyphs.push({ position: "bottom-right", - font: "FontAwesome", + font: '"Font Awesome 5 Free"', fillColor: "#990000", - content: "\uF05B", - fontScale: 1.5 + content: "\uF140", + fontScale: 1.5, + fontStyle: "900" + }); + } + + if (node.owned){ + node.glyphs.push({ + position: "top-left", + font: '"Font Awesome 5 Free"', + content: "\uf54c", + fillColor: "black", + fontScale: 2.0, + fontStyle: "900" }); } @@ -1033,6 +1071,32 @@ export default class GraphContainer extends Component { scalingMode: "inside" }); + //Monkeypatch the drawIcon function to add font-weight to the canvas drawing for drawIcon + //Kill me. + sigma.utils.canvas.drawIcon = function(node, x, y, size, context, threshold){ + var font = node.icon.font || 'Arial', + fgColor = node.icon.color || '#F00', + text = node.icon.content || '?', + px = node.icon.x || 0.5, + py = node.icon.y || 0.5, + height = size, + width = size; + var fontSizeRatio = 0.70; + if (typeof node.icon.scale === "number") { + fontSizeRatio = Math.abs(Math.max(0.01, node.icon.scale)); + } + + var fontSize = Math.round(fontSizeRatio * height); + + context.save(); + context.fillStyle = fgColor; + context.font = '900 ' + fontSize + 'px ' + font; + context.textAlign = 'center'; + context.textBaseline = 'middle'; + context.fillText(text, x, y); + context.restore(); + } + //Bind sigma events sigmaInstance.renderers[0].bind("render", function(e) { sigmaInstance.renderers[0].glyphs(); @@ -1104,6 +1168,12 @@ export default class GraphContainer extends Component { this.setState({tooltipPos: {x: newPos.x, y: newPos.y}}) }) + sigmaInstance.bind("clickStage", event => { + if (appStore.currentTooltip !== null){ + appStore.currentTooltip.close() + } + }) + //Some key binds $(window).on( "keyup", diff --git a/src/components/Menu/MenuContainer.jsx b/src/components/Menu/MenuContainer.jsx index b72ae93..284884e 100644 --- a/src/components/Menu/MenuContainer.jsx +++ b/src/components/Menu/MenuContainer.jsx @@ -338,7 +338,7 @@ export default class MenuContainer extends Component {
@@ -381,7 +381,7 @@ export default class MenuContainer extends Component {
diff --git a/src/components/SearchContainer/SearchContainer.jsx b/src/components/SearchContainer/SearchContainer.jsx index 498e637..fc5aeaa 100644 --- a/src/components/SearchContainer/SearchContainer.jsx +++ b/src/components/SearchContainer/SearchContainer.jsx @@ -62,6 +62,7 @@ export default class SearchContainer extends Component { emitter.on( "setStart", function(payload) { + appStore.currentTooltip.close() jQuery(this.refs.searchbar).val(payload); }.bind(this) ); @@ -69,6 +70,7 @@ export default class SearchContainer extends Component { emitter.on( "setEnd", function(payload) { + appStore.currentTooltip.close() jQuery(this.refs.pathbar).val(payload); var e = jQuery(this.refs.pathfinding); if (!e.is(":visible")) { @@ -375,7 +377,6 @@ export default class SearchContainer extends Component { } let [query, startTerm, endTerm] = buildSelectQuery(start, end); - emitter.emit("query", query, { aprop: startTerm, bprop: endTerm }, startTerm, endTerm); } @@ -629,7 +630,7 @@ export default class SearchContainer extends Component { tooltip tooltipDir="bottom" tooltipTitle="More Info" - classes="input-group-addon spanfix" + classes="input-group-addon spanfix glyph-hover-style" click={this._onExpandClick.bind(this)} > @@ -646,7 +647,7 @@ export default class SearchContainer extends Component { tooltip tooltipDir="bottom" tooltipTitle="Pathfinding" - classes="input-group-addon spanfix" + classes="input-group-addon spanfix glyph-hover-style" click={this._onPathfindClick.bind(this)} > @@ -655,7 +656,7 @@ export default class SearchContainer extends Component { tooltip tooltipDir="bottom" tooltipTitle="Back" - classes="input-group-addon spanfix" + classes="input-group-addon spanfix glyph-hover-style" click={function() { emitter.emit("graphBack"); }} @@ -666,7 +667,7 @@ export default class SearchContainer extends Component { tooltip tooltipDir="bottom" tooltipTitle="Filter Edge Types" - classes="input-group-addon spanfix" + classes="input-group-addon spanfix glyph-hover-style" click={this._onFilterClick.bind(this)} > diff --git a/src/components/SearchContainer/Tabs/DatabaseDataDisplay.jsx b/src/components/SearchContainer/Tabs/DatabaseDataDisplay.jsx index b156375..d2a7ead 100644 --- a/src/components/SearchContainer/Tabs/DatabaseDataDisplay.jsx +++ b/src/components/SearchContainer/Tabs/DatabaseDataDisplay.jsx @@ -138,7 +138,7 @@ export default class DatabaseDataDisplay extends Component {
-
+
- +
+
+