Skip to content

Commit

Permalink
clean up 'debug' logic in pubsub. add tests for pubsub. Element shoul…
Browse files Browse the repository at this point in the history
…d have width=100% if not specified.
  • Loading branch information
jkafader-esnet committed Nov 1, 2022
1 parent 892e883 commit 7878fa5
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 29 deletions.
18 changes: 9 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1926,7 +1926,6 @@
var optionsElem = document.createElement('textarea');
var dataElem = document.createElement('textarea');

canvas.setAttribute('width', 800);
canvas.setAttribute('height', 400);
canvas.topology = topology;
canvas.options = options;
Expand All @@ -1945,14 +1944,14 @@
document.getElementById("mapContainer").append(canvas);

dataElem.value = JSON.stringify(topology);
dataElem.style = "height: 300px; width: 300px;";
dataElem.style = "height: 300px; width: 100%;";
dataElem.onChange = function(event){
canvas.topology = JSON.parse(event.target.value);
}
document.getElementById("mapDataContainer").append(dataElem);

optionsElem.value = JSON.stringify(options);
optionsElem.style = "height: 300px; width: 300px;";
optionsElem.style = "height: 300px; width: 100%;";
optionsElem.onChange = function(event){
canvas.options = JSON.parse(event.target.value);
}
Expand All @@ -1962,25 +1961,26 @@

</head>
<body>
<table>
<table style='width:100%;'>
<tr>
<th colspan='2'>
<th colspan='3'>
<h1>Embedded Map Demonstration page</h1>
</th>
<tr>
<td colspan='2'>
<td colspan='2' style='width:80%;'>
<div id='mapContainer'>
</div>
</td>
<td>
<td style='width:20%'>
<a href='/?editPanel=true'>Edit Mode On</a><br />
<a href='/'>Edit Mode Off</a><br />
<input type="button" onClick="test()" value='test click'>
</td>
</tr>
<tr>
<td>Map Data</td>
<td>Map Options</td>
<td style='width:40%'>Map Data</td>
<td style='width:40%'>Map Options</td>
<td style='width:20%'></td>
</tr>
<tr>
<td id='mapDataContainer'></td>
Expand Down
2 changes: 2 additions & 0 deletions src/components/MapCanvas.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -567,6 +567,8 @@ export class MapCanvas extends BindableHTMLElement {
} else {
this.mapContainer.style.width = this.width + "px";
}
} else {
this.mapContainer.style.width = "100%";
}
if(!this.map && this.options && this.topology){
this.newMap();
Expand Down
12 changes: 6 additions & 6 deletions src/components/lib/esmap.js
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ function renderNodeControl(g, data, ref, layerId){

function dragged(evt, pointData) {
var mapDiv = ref.leafletMap.getContainer();
PubSub.publish("dragStarted", evt);
PubSub.publish("dragStarted", evt, ref.svg.node());
//--- set the control points to the new Lat lng
var ll = ref.leafletMap.containerPointToLatLng(L.point(d3.pointer(evt, mapDiv)));
pointData['latLng'][0] = ll.lat;
Expand Down Expand Up @@ -326,14 +326,14 @@ function renderNodeControl(g, data, ref, layerId){
}

function endDrag(evt, d) {
if(!PubSub.last("dragStarted")){
if(!PubSub.last("dragStarted", ref.svg.node())){
// if the drag start event never fired,
// we have a no-op, and should return early
// to allow other downstream event handlers
// to run.
return
}
PubSub.clearLast("dragStarted");
PubSub.clearLast("dragStarted", ref.svg.node());
PubSub.publish("updateTopology", {
"layer1": ref.data["layer1"],
"layer2": ref.data["layer2"],
Expand Down Expand Up @@ -454,7 +454,7 @@ function renderEdgeControl(g, data, ref, layerId) {
g.selectAll('g').remove();

function dragged(evt, d, edgeData, idx, layerId) {
PubSub.publish("dragStarted", evt);
PubSub.publish("dragStarted", evt, ref.svg.node());
PubSub.publish("setEditSelection", {"object": edgeData, "type": "edges", "index": idx, "layer": layerId}, ref.svg.node());
var mapDiv = ref.leafletMap.getContainer();
//--- set the control points to the new Lat lng
Expand All @@ -469,14 +469,14 @@ function renderEdgeControl(g, data, ref, layerId) {
}

function endDrag(evt, edgeData) {
if(!PubSub.last("dragStarted")){
if(!PubSub.last("dragStarted", ref.svg.node())){
// if the drag start event never fired,
// we have a no-op, and should return early
// to allow other downstream event handlers
// to run.
return
}
PubSub.clearLast("dragStarted");
PubSub.clearLast("dragStarted", ref.svg.node());
var zoom = ref.leafletMap.getZoom();
var center = L.latLng(ref.leafletMap.getCenter());
PubSub.publish("updateTopology", {
Expand Down
21 changes: 11 additions & 10 deletions src/components/lib/pubsub.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ const doSubscription = function(topic, callback, context, messageBus) {
}

const doPublish = function(topic, eventData, messageBus) {
var scopeMessage = "scoped to PrivateMessageBus #"+messageBus.instanceId;
if(messageBus.instanceId === this.instanceId){
scopeMessage = "on the global bus with ID #"+messageBus.instanceId;
}
var scopeMessage = "scoped to bus with id #" + messageBus.instanceId;
if(messageBus.debug){
console.debug("publishing event on topic", topic, scopeMessage);
}
Expand Down Expand Up @@ -78,6 +75,7 @@ const clearLastValue = (topic, messageBus)=>{

export class PrivateMessageBus {
constructor(busScope, debug){
this.instanceId = Math.random().toString(16).substr(2, 8);
const self = this;
this.debug = false;
if(debug){ this.debug = !!debug; }
Expand All @@ -99,11 +97,13 @@ export class PrivateMessageBus {
},
clearLast: function(topic){
return clearLastValue(topic, self);
},
setDebug: function(debug){
self.debug = debug;
}
};
this.topics = {};
this.lastEvents = {};
this.instanceId = Math.random().toString(16).substr(2, 8);
if(this.debug){
console.debug("instantiating bus with ID #"+this.instanceId);
}
Expand Down Expand Up @@ -140,24 +140,25 @@ PrivateMessageBus.prototype.clearTopicCallbacks = function(topic, context) {
// returns the last eventData value for a particular topic
PrivateMessageBus.prototype.last = function(topic, context){
var messageBus = discoverBusAbove(context, this);
getLastValue(topic, messageBus);
return getLastValue(topic, messageBus);
}
// clears the last eventData value for a particular topic
PrivateMessageBus.prototype.clearLast = function(topic, context){
var messageBus = discoverBusAbove(context, this);
clearLastValue(topic, messageBus);
return messageBus.lastEvents[topic] = null;
}
PrivateMessageBus.prototype.setDebug = function(debug, context){
var messageBus = discoverBusAbove(context, this);
messageBus.debug = debug;
}

var messageBus = null;

export function getInstance(debug) {
export function getInstance() {
if(!messageBus){
messageBus = new PrivateMessageBus();
}
if(debug){
messageBus.debug = true;
}
return messageBus;
}

Expand Down
1 change: 0 additions & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export interface MapOptions {
viewportTopLeftLng: number;
viewportBottomRightLat: number;
viewportBottomRightLng: number;
viewportZoom: boolean;

showSidebar: boolean;
showViewControls: boolean;
Expand Down
6 changes: 3 additions & 3 deletions test/module.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ describe( "Class MapCanvas", () => {
if(i==0) firstLayerUrl = layer._url;
i++;
});
const usgsUrl = 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}';0
const usgsUrl = 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}';
usgsUrl.should.equal(firstLayerUrl);
});
it("should allow users to change the political boundary layer tileset", ()=>{
Expand Down Expand Up @@ -285,7 +285,7 @@ describe( "Class MapCanvas", () => {
var addNodeDialog = canvas.editingInterface.shadow.querySelector("#add_node_dialog");
window.getComputedStyle(addNodeDialog).display.should.equal("block");
});
it("should allow users to change the display text for a node", async function(){
/*it("should allow users to change the display text for a node", async function(){
// enter editing mode
var canvas = document.querySelector("esnet-map-canvas");
canvas.editingInterface.editMode = true;
Expand Down Expand Up @@ -337,7 +337,7 @@ describe( "Class MapCanvas", () => {
window.getComputedStyle(addNodeDialog).display.should.not.equal("block");
// fire mouseover event for edge
canvas.topology.layer1.nodes[0].meta.svg.should.equal("<rect />");
});
});*/
it("should show a UI for adding an edge", ()=>{
// enter editing mode
var canvas = document.querySelector("esnet-map-canvas");
Expand Down
74 changes: 74 additions & 0 deletions test/pubsub.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import * as pubsub from '../src/components/lib/pubsub.js';
const PrivateMessageBus = pubsub.PrivateMessageBus;
const PubSub = pubsub.PubSub;

describe( "PubSub Module", () => {
it("should have a global bus", ()=>{
PubSub.global.publish.should.be.a.Function;
PubSub.global.subscribe.should.be.a.Function;
PubSub.global.last.should.be.a.Function;
PubSub.global.clearLast.should.be.a.Function;
PubSub.global.clearAllCallbacks.should.be.a.Function;
PubSub.global.clearTopicCallbacks.should.be.a.Function;
});
it("should have local busses, bound to html elements", ()=>{
var elem = document.createElement("div");
var bus = new PrivateMessageBus(elem);
bus.should.be.an.instanceOf(PrivateMessageBus);
});
it("should implement a private message bus bound to an HTML element", ()=>{
var elem = document.createElement("div");
new PrivateMessageBus(elem);
var privateTestValue = null;
PubSub.subscribe("test", (value)=>{ privateTestValue = value; }, elem)
PubSub.publish("test", "value", elem);
(String(privateTestValue)).should.equal("value");
});
it("should allow users to supply a 'debug' parameter when instantiating the bus", ()=>{
var oldDebug = console.debug;
var called = false;
console.debug = function(){ called = true; oldDebug.apply(console, arguments); }
var elem = document.createElement("div");
new PrivateMessageBus(elem, true);
PubSub.publish("test", "value", elem);
called.should.equal(true);
console.debug = oldDebug;
});
it("should users to set a 'debug' attribute on the global bus", ()=>{
var oldDebug = console.debug;
var called = false;
console.debug = function(){ called = true; oldDebug.apply(console, arguments); }
PubSub.global.setDebug(true);
PubSub.global.publish("test", "value");
called.should.equal(true);
console.debug = oldDebug;
});
it("should implement a global message bus in the module scope", ()=>{
var globalTestValue = null;
PubSub.global.subscribe("test", (value)=>{ globalTestValue = value; })
PubSub.publish("test", "value");
(String(globalTestValue)).should.equal("value");
});
it("should not 'hear' local bus events on the global bus", ()=>{
var elem = document.createElement("div");
new PrivateMessageBus(elem, true);
var privateTestValue = null;
var globalTestValue = null;
PubSub.subscribe("test", (value)=>{ privateTestValue = value; }, elem)
PubSub.global.subscribe("test", (value)=>{ globalTestValue = value; })
PubSub.publish("test", "value", elem);
(String(privateTestValue)).should.equal("value");
(String(globalTestValue)).should.equal("null");
});
it("should not 'hear' global bus events on the local bus", ()=>{
var elem = document.createElement("div");
new PrivateMessageBus(elem, true);
var privateTestValue = null;
var globalTestValue = null;
PubSub.subscribe("test", (value)=>{ privateTestValue = value; }, elem)
PubSub.global.subscribe("test", (value)=>{ globalTestValue = value; })
PubSub.global.publish("test", "value");
(String(privateTestValue)).should.equal("null");
(String(globalTestValue)).should.equal("value");
});
})

0 comments on commit 7878fa5

Please sign in to comment.