diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js
index 65f5ff46..f4fe1540 100644
--- a/frontend/src/Metamaps/JIT.js
+++ b/frontend/src/Metamaps/JIT.js
@@ -990,7 +990,7 @@ const JIT = {
Visualize.mGraph.plot()
midpoint.x = JIT.tempNode.pos.getc().x + (JIT.tempNode2.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
midpoint.y = JIT.tempNode.pos.getc().y + (JIT.tempNode2.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
- pixelPos = Util.coordsToPixels(midpoint)
+ pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
$('#new_synapse').css('left', pixelPos.x + 'px')
$('#new_synapse').css('top', pixelPos.y + 'px')
Create.newSynapse.open()
diff --git a/frontend/src/Metamaps/PasteInput.js b/frontend/src/Metamaps/PasteInput.js
index f0425032..e44a284e 100644
--- a/frontend/src/Metamaps/PasteInput.js
+++ b/frontend/src/Metamaps/PasteInput.js
@@ -2,6 +2,7 @@
import Import from './Import'
import Util from './Util'
+import Visualize from './Visualize'
const PasteInput = {
// thanks to https://github.com/kevva/url-regex
@@ -19,7 +20,7 @@ const PasteInput = {
window.addEventListener("drop", function(e) {
e = e || window.event;
e.preventDefault();
- var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
+ var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) {
self.handleFile(e.dataTransfer.files[0], coords)
}
diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js
index ca17ddb1..49fd357d 100644
--- a/frontend/src/Metamaps/Realtime/index.js
+++ b/frontend/src/Metamaps/Realtime/index.js
@@ -278,7 +278,7 @@ let Realtime = {
x: event.pageX,
y: event.pageY
}
- var coords = Util.pixelsToCoords(pixels)
+ var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
self.sendCoords(coords)
}
$(document).on('mousemove.map', sendCoords)
@@ -289,7 +289,7 @@ let Realtime = {
x: e.pageX,
y: e.pageY
}
- var coords = Util.pixelsToCoords(pixels)
+ var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
self.sendCoords(coords)
}
self.positionPeerIcons()
@@ -448,7 +448,7 @@ let Realtime = {
var compassDiameter = 56
var compassArrowSize = 24
- var origPixels = Util.coordsToPixels(mapper.coords)
+ var origPixels = Util.coordsToPixels(Visualize.mGraph, mapper.coords)
var pixels = self.limitPixelsToScreen(origPixels)
$('#compass' + id).css({
left: pixels.x + 'px',
diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js
index ddf20840..91c720aa 100644
--- a/frontend/src/Metamaps/Topic.js
+++ b/frontend/src/Metamaps/Topic.js
@@ -211,7 +211,7 @@ const Topic = {
// position the form
midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
- pixelPos = Util.coordsToPixels(midpoint)
+ pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
$('#new_synapse').css('left', pixelPos.x + 'px')
$('#new_synapse').css('top', pixelPos.y + 'px')
// show the form
diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js
index 49797ab4..e1e43141 100644
--- a/frontend/src/Metamaps/Util.js
+++ b/frontend/src/Metamaps/Util.js
@@ -2,8 +2,6 @@
import { Parser, HtmlRenderer } from 'commonmark'
-import Visualize from './Visualize'
-
const Util = {
// helper function to determine how many lines are needed
// Line Splitter Function
@@ -23,14 +21,15 @@ const Util = {
}
return b + s
},
- nowDateFormatted: function () {
- var date = new Date(Date.now())
- var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
- var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
- var year = date.getFullYear()
+
+ nowDateFormatted: function (date = new Date(Date.now())) {
+ const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
+ const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+ const year = date.getFullYear()
return month + '/' + day + '/' + year
},
+
decodeEntities: function (desc) {
var str, temp = document.createElement('p')
temp.innerHTML = desc // browser handles the topics
@@ -38,12 +37,15 @@ const Util = {
temp = null // delete the element
return str
}, // decodeEntities
+
getDistance: function (p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
},
- coordsToPixels: function (coords) {
- if (Visualize.mGraph) {
- var canvas = Visualize.mGraph.canvas,
+
+ // Try using Visualize.mGraph
+ coordsToPixels: function (mGraph, coords) {
+ if (mGraph) {
+ var canvas = mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
@@ -62,10 +64,12 @@ const Util = {
}
}
},
- pixelsToCoords: function (pixels) {
+
+ // Try using Visualize.mGraph
+ pixelsToCoords: function (mGraph, pixels) {
var coords
- if (Visualize.mGraph) {
- var canvas = Visualize.mGraph.canvas,
+ if (mGraph) {
+ var canvas = mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
@@ -84,10 +88,13 @@ const Util = {
}
return coords
},
- getPastelColor: function () {
- var r = (Math.round(Math.random() * 127) + 127).toString(16)
- var g = (Math.round(Math.random() * 127) + 127).toString(16)
- var b = (Math.round(Math.random() * 127) + 127).toString(16)
+ getPastelColor: function ({ rseed, gseed, bseed }) {
+ if (rseed === undefined) rseed = Math.random()
+ if (gseed === undefined) gseed = Math.random()
+ if (bseed === undefined) bseed = Math.random()
+ var r = (Math.round(rseed * 127) + 127).toString(16)
+ var g = (Math.round(gseed * 127) + 127).toString(16)
+ var b = (Math.round(bseed * 127) + 127).toString(16)
return Util.colorLuminance('#' + r + g + b, -0.4)
},
// darkens a hex value by 'lum' percentage
@@ -109,21 +116,6 @@ const Util = {
return rgb
},
- generateOptionsList: function (data) {
- var newlist = ''
- for (var i = 0; i < data.length; i++) {
- newlist = newlist + ''
- }
- return newlist
- },
- checkURLisImage: function (url) {
- // when the page reloads the following regular expression will be screwed up
- // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
- return (url.match(/\.(jpeg|jpg|gif|png)$/) != null)
- },
- checkURLisYoutubeVideo: function (url) {
- return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
- },
openLink: function(url){
var win = (url !== "") ? window.open(url, '_blank') : "empty";
diff --git a/frontend/test/Metamaps.Util.spec.js b/frontend/test/Metamaps.Util.spec.js
new file mode 100644
index 00000000..cc1f5839
--- /dev/null
+++ b/frontend/test/Metamaps.Util.spec.js
@@ -0,0 +1,128 @@
+/* global describe, it */
+
+import chai from 'chai'
+
+import Util from '../src/Metamaps/Util'
+
+const { expect } = chai
+
+describe('Metamaps.Util.js', function () {
+ describe('splitLine', function () {
+ it('splits on words', function () {
+ expect(Util.splitLine('test test test', 10))
+ .to.equal('test test\ntest')
+ })
+ // TODO this test seems like it's incorrect behaviour
+ it('splits mid-word if need be', function () {
+ expect(Util.splitLine('test test', 2))
+ .to.equal('te\nt\nte\nt')
+ })
+ it('splits words over 30 chars', function () {
+ expect(Util.splitLine('suprainterpostantidisestablishmentarianism', 30))
+ .to.equal('suprainterpostantidisestablish\nentarianism')
+ })
+ })
+ describe('nowDateFormatted', function () {
+ it.skip('TODO need `Date`')
+ })
+ describe('decodeEntities', function () {
+ it.skip('TODO need `document`')
+ })
+ describe('getDistance', function () {
+ it('(0,0) -> (0,0) = 0', function () {
+ expect(Util.getDistance({ x: 0, y: 0 }, { x: 0, y: 0 }))
+ .to.equal(0)
+ })
+ it('(-5,0) -> (5,0) = 10', function () {
+ expect(Util.getDistance({ x: -5, y: 0 }, { x: 5, y: 0 }))
+ .to.equal(10)
+ })
+ it('(0,0) -> (5,7) = 8.6023', function () {
+ expect(Util.getDistance({ x: 0, y: 0 }, { x: 5, y: 7 }).toFixed(4))
+ .to.equal('8.6023')
+ })
+ })
+ describe('coordsToPixels', function () {
+ it('returns 0,0 for null canvas', function () {
+ expect(Util.coordsToPixels(null).x).to.equal(0)
+ expect(Util.coordsToPixels(null).y).to.equal(0)
+ })
+ it.skip('TODO need initialized mGraph to test further')
+ })
+ describe('pixelsToCoords', function () {
+ it('returns 0,0 for null canvas', function () {
+ expect(Util.pixelsToCoords(null).x).to.equal(0)
+ expect(Util.pixelsToCoords(null).y).to.equal(0)
+ })
+ it.skip('TODO need initialized mGraph to test further')
+ })
+ describe('getPastelColor', function () {
+ it('1 => fefefe', function () {
+ expect(Util.getPastelColor({ rseed: 1, gseed: 1, bseed: 1 }))
+ .to.equal(Util.colorLuminance('#fefefe', -0.4))
+ })
+ it('0 => 7f7f7f', function () {
+ expect(Util.getPastelColor({ rseed: 0, gseed: 0, bseed: 0 }))
+ .to.equal(Util.colorLuminance('#7f7f7f', -0.4))
+ })
+ })
+ describe('colorLuminance', function () {
+ describe('-0.4 lum', function () {
+ it('white => ?', function () {
+ expect(Util.colorLuminance('#ffffff', -0.4)).to.equal('#999999')
+ })
+ it('black => ?', function () {
+ expect(Util.colorLuminance('#000000', -0.4)).to.equal('#000000')
+ })
+ it('7f7f7f => ?', function () {
+ expect(Util.colorLuminance('#7f7f7f', -0.4)).to.equal('#4c4c4c')
+ })
+ })
+
+ describe('other lum values', function () {
+ it('-1', function () {
+ expect(Util.colorLuminance('#7f7f7f', -1)).to.equal('#000000')
+ })
+ it('-0.5', function () {
+ expect(Util.colorLuminance('#7f7f7f', -0.5)).to.equal('#404040')
+ })
+ it('0', function () {
+ expect(Util.colorLuminance('#7f7f7f', 0)).to.equal('#7f7f7f')
+ })
+ it('0.5', function () {
+ expect(Util.colorLuminance('#7f7f7f', 0.5)).to.equal('#bfbfbf')
+ })
+ it('1', function () {
+ expect(Util.colorLuminance('#7f7f7f', 1)).to.equal('#fefefe')
+ })
+ })
+ })
+ describe('openLink', function () {
+ it.skip('TODO need `window`')
+ })
+ describe('mdToHTML', function () {
+ it('filters xss', function () {
+ const md = ''
+ const html = ''
+ expect(Util.mdToHTML(md).trim()).to.equal(html)
+ })
+
+ it('bold and italics', function () {
+ const md = '**Bold** *Italics*'
+ const html = 'Bold Italics
'
+ expect(Util.mdToHTML(md).trim()).to.equal(html)
+ })
+
+ it('links and images', function () {
+ const md = '[Link](https://metamaps.cc) '
+ const html = 'Link 
'
+ expect(Util.mdToHTML(md).trim()).to.equal(html)
+ })
+ })
+ describe('logCanvasAttributes', function () {
+ it.skip('TODO need a canvas')
+ })
+ describe('resizeCanvas', function () {
+ it.skip('TODO need a canvas')
+ })
+})
diff --git a/package.json b/package.json
index 8dca7615..940f7c58 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"scripts": {
"build": "webpack",
"build:watch": "webpack --watch",
- "test": "mocha --compilers js:babel-core/register frontend/test || (echo 'Run `npm install` to setup testing' && false)"
+ "test": "mocha --compilers js:babel-core/register frontend/test"
},
"repository": {
"type": "git",