Automated graph layout

Oh this is fun.

I want to add automated graph layout to Dubbiya, my embryonic browser-based database diagramming tool. I've been doing my research (i.e. reading Wikipedia) and have found a way to turn this:

into this:

 

 

Try it yourself here. Each time you refresh the page, it'll start again with a new random arrangement.

 

Dubbiya with popup help

Gmail has a nice popup window that shows keyboard shortcuts. Press '?' in Gmail and you'll see it.

 

I wanted to add something similar to Dubbiya. The jQuery expansion FancyBox gave it to me.

You can click on the help icon next to the "Quick Add" box. Or when the drawing area has the focus, you can press '?':

 

 

Dubbiya now has different relationship types

Dubbiya can now do one-to-many, many-to-one, one-to-one, and many-to-many relationships.

 

Here is the result of the following "Quick Add" entries:

Form < Student

Student = Subject

Subject - Teacher

 

The syntax is:

• one-to-many: [entity 1] < [entity 2]
• one-to-one: [entity 1] - [entity 2]
• many-to-one: [entity 1] > [entity 2]
• many-to-many  [entity 1] = [entity 2]

Remembering how to do geometry; JavaScript 'namespaces'

To make the lines representing relationships in Dubbiya, I needed to find where a line intersects a rectangle. I was pretty sure I once knew how to do this. But the knowledge was lurking in an inaccessible part of my mind. So I needed to do some relearning.

I enjoy these parts of projects like Dubbiya. It is many times more enjoyable than the forms-and-reports programming than most of us software developers have to do in their professional life.

Along the way, I learnt that you can't have two functions in JavaScript with the same name, even if the number of arguments differ.

function doSomething(x) {
   ...
}

clashes with

function doSomething(x, y) {
   ...
}

A good IDE alerts you to this before it bites you:

 

 

 

 

 

I also learnt a relatively nice way to emulate namespaces in JavaScript. At the top of each JavaScript file I can have something like this:

if (typeof dubbiya === 'undefined') {
    dubbiya = {};
}

if (typeof dubbiya.geometry === 'undefined') {
    dubbiya.geometry = {};
}

Then each function definition is added as such:

dubbiya.geometry.intersectionPointLineLine = function (line1, line2) {
    ...
};

Now I can call the function as follows:

var pt1 = dubbiya.geometry.intersectionPointLineLine(line1, line2);

It's a bit silly that one needs to artificially create namespaces. Luckily a good IDE makes this style of code readable:

Dubbiya now with tooltips and relationships

Work continues on Dubbiya, the code-name for an in-browser entity-relationship diagram editor. There's now tooltips and relationships.

Let the mouse sit over a shape for a couple of seconds and you'll see a tooltip.

Type "Person-Address" into the "Quick Add" box, and you'll get two new entities, and a line between them:

Now type "Address-Country" into "Quick Add". Because Address already exists, only a Country entity is made. It is connected to the existing Address entity.

Adding a method to a built-in JavaScript object

I discovered I can easily add my own methods to the String object - or any other built in object. JavaScript is missing a String.startsWith(prefix) method, so let's create one:


String.prototype.startsWith = function (s) {
    return this.length >= s.length  && this.substring(0, s.length) === s;
};

Now I can write
if (myString.startsWith("foobar)) {
    ...
}

or

if ("Saturday".startsWith("Sat")) {
   ...
}

So easy...but there is a problem. If I'm using a third-party JavaScript library, it might add an identically-named method to String, overriding my version. Their version will have different bugs than my version, leading to horribly difficult debugging sessions.

I don't yet know a sane solution to this. The best I've come up with is to give my own extra methods a nasty prefix.