Friday, 27 May 2011

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:

Screen shot 2011 05 27 at 12 05 37 PM

into this:


Screen shot 2011 05 27 at 12 05 43 PM


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


Thursday, 26 May 2011

Dubbiya with popup help

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

Gmail help


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

Screen shot 2011 05 26 at 3 17 25 PM

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



Wednesday, 25 May 2011

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

Screen shot 2011 05 25 at 3 11 48 PM


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:

Screen shot 2011 05 25 at 11 20 33 AM






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:

Screen shot 2011 05 25 at 11 18 06 AM

Tuesday, 24 May 2011

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.

Screen shot 2011 05 24 at 4 26 40 PM

Screen shot 2011 05 24 at 4 26 48 PM

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

Screen shot 2011 05 24 at 4 29 41 PM

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.

Screen shot 2011 05 24 at 4 30 48 PM

Sunday, 22 May 2011

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)) {


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.