View Full Version : Building a Circuit Modeling Tool

23 May 2013, 7:57 AM
I want to build a small circuit modeling tool, just like a little "Circuit Lab", with Ext JS.
There will be different electric components which can be dragged and dropped on a drawing surface and can be connected with wires. These electric component have different connections points, where a wire can st I already tried the last days, but I got stuck at the connection points on the edge of the electric components, from which I can start drawing a wire.

My approach was:
The whole drawing area is a Ext.draw.Component, the electric components are draggable Sprites on this drawing surface.
The problem with that approach is: The connection points are at different positions on every different electric component. When I change the position of a electric component via dragging and dropping, the connection points have to change their position on the surface, too, of course.
So I tried to pack every electric component, together with its connection points - also Sprites - and their positions relative to the center of the component, into a CompositeSprite. But unfortunately, that didn't solve any problems.

So... How would you start, if you wanted to build something like that?

Maybe the whole drawing-area should be a normal Panel, and every electric component is a (draggable) Ext.draw.Component inside this Panel (not only a Sprite) ? Or any different approaches?

I already tried a lot, but I couldn't get to any working conclusion.

I'm very pleased about your thoughts about that topic!

28 May 2013, 9:41 AM
It's been quite a while since I toyed with sprites on a draw component, but I think sprites on the surface directly is the way I'd go. You can use anything you find in this example in what you're building.

Start by clicking on Load Dataset A

That was a side project I was messing around with and ultimately was flawed in its layout since I moved sprites in concert by repositioning all of them at the same time instead of dragging the draw surface, so I'd never use this in production. But.... it does have connecting lines between sprites so maybe something in there comes in handy for you.

16 Oct 2014, 11:33 PM
@Slemmon - thanks for sharing Your code! Awesome work :)
I was thinking about doing something like this in ExtJS5 but I had some problems getting things started.
This will give me something I can base my code on.

18 Oct 2014, 2:43 AM
You'll have to do better than I did. :)

Mine works perfectly - until you put a little more than a little data in it. Then it's very, very sluggish. This was mostly for fun so I never went back and tried to optimize.