SVG Tool – Early Crisis

This slideshow requires JavaScript.

As you can see from the gallery, my SDT (unfortunate abbreviation for SVG Design Tool) doesn’t look half bad.

But there are problems.

The main one is that it is non responsive, despite the usage of flexbox in the column/section that contains the message area.  Annoying, that.

Also, the fact the SVG does not operate under the box model is a major problem.

This means that when I zoom in and out, perspective gets totally out of whack..

I might see if CSS grid can fix these problems, and also simplify my spaghetti CSS. So there could be a seconf version of this interface using grid.

My goal is to build a simple, easy-to-use visual tool for creating Islamic Designs, and not stray to far into the shoals of advanced CSS.

I want to focus on clean geometric patterns and elegant tessellations.

Meanwhile, I am trying to come up with a simple event listener/handler scheme that will listen for click-downs on marker pairs.  Nothing fancy or overly clever, just a KISS function that listens for clicks on the markers.

Drawing or undrawing a line between them will a cinch once I figure that one out.

 

UPDATE 8/22: Fixed all major problems; some minor issues remain.  Beta code is now stable, bug free, and responsive.  No need for CSS grid, which I think would not have been a good fit for this layout. I was able to simulate grid like functionality with a little trick in the main columns container div. Will upload new version to github soon. Finally I can return to working on SVG and Islamic Patterns.

UPDATE 2.  It is a bad workman who blames his tools. Having said that, I will state right out that I think Javascript is a strange language.  Working with (pseudo) multidimensional untyped arrays (JS does support true 2 and 3 dim arrays or types) is disorienting, particularly for one more used to this

   int arr[2][3];

In the end, I figured it out.  One always does. My strategy is to hang a point’s (ie, marker) <title> off this structure:

   var anglesObj = [];

I tested it, and both mark() and unmark() correctly add / remove point <title>s to anglesObj.

Now I have to write an event listener that waits for 2 markers to be clicked in sequence (or maybe click the first and double click the second) before firing off a function that draws a line between then.  I also have to provide a way to “unline” two markers.