1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    Ansichtssache is on a distinguished road

      0  

    Default Unanswered: Building a Circuit Modeling Tool

    Unanswered: Building a Circuit Modeling Tool


    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!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,554
    Answers
    449
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    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.

    http://jsfiddle.net/slemmon/r3nVW/32/
    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.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    228
    Answers
    6
    Vote Rating
    51
    Misiu is a jewel in the rough Misiu is a jewel in the rough Misiu is a jewel in the rough

      0  

    Default


    @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.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,554
    Answers
    449
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 2

Tags for this Thread