Draw threat models using a drag-n-drop interface

[Glavin001]

[Medium] This is the core feature of the application and top priority. We will use jsPlumb, a graph drawing tool, for this task. We will need to extend certain features of jsPlumb to suit our needs. Elements added will each have their own properties that can be edited by the user.

[Glavin001]

See http://www.html5rocks.com/en/tutorials/dnd/basics/

[Frozenfire92]

Since we are using the jquery-ui version of jsPlumb I suspect this will be valuable as well

http://jqueryui.com/demos/ under the Interactions headings

[Glavin001]

Is the jQuery-UI implementation of accordion desirable for the collapsable left side menu?

[MatKallada]

@Glavin001 That accordion works well for now.

[Glavin001]

After a little research: using jQuery UI with Angular would require a little work to build (or find) a directive.

Bootstrap UI for Angular has an Angular directive working for Accordion. I'll use that.

[MatKallada]

:+1: Thanks, that works well.

[Glavin001]

Accordion all working

[Glavin001]

Got it so that I can now dynamically create new jsPlumb elements (add Stencils, in our context).

Click on the Stencil # and it will add the Stencil element to the jsPlumb instance, drawing panel.

I am debating if we even want drag-n-drop. Why not simply click stencil to create it and then drag it around. Drag-n-drop could be an improvement for down the road, but is not really a requirement to accomplish the goal of drawing a threat model.

[MatKallada]

Drag-n-drop is much more intuitive; it requires a bit more gimmicking with jsPlumb, but is worth it for lucid threat-model creation. The 'click-create-drag' model, is a bit of a clunky-approach, also rarely used in graphical drawing tools today (e.g. Google Draw or Draw.io who uses drag-n-drop).

For the early scaffolding stage, we can stick to the 'click-create-drag' model, but ideally have the drag-n-drop complete for the Alpha milestone.

[Glavin001]

Makes sense, I like drag-n-drop, too.

I really just want to make sure this is not a blocker and I can start working on more critical subtasks. I have a ton more to code and while drag-n-drop makes it nicer it isn't our top priority in terms of tasks to implement. The other tasks I have to work on will actually make Seasponge functional and allow us to develop threat models. I want to get to that development sooner.

For the early scaffolding stage, we can stick to the 'click-create-drag' model, but ideally have the drag-n-drop complete for the Alpha milestone.

Agreed. I think we are on the same page :+1:.

[Glavin001]

• [x] Stencil base class
  • Model Fields
  • name {string}, a distinct name within the given type
  • type {string}, such as Process, or Boundary, or Store, etc
  • anchors {array or object}, see http://www.jsplumb.org/doc/anchors.html
  • icon {img ref}, for displaying in stencils listing in left-sidebar menu
• [x] Stencil UI in left side-bar should be dynamically generated to display list of stencil icons/names

[Glavin001]

This looks like it generates the same UUIDs as are used in the Microsoft Threat Model file format ( see #4, /cc @Frozenfire92 ): http://stackoverflow.com/a/2117523/2578205 I will use this for generating the UUIDs for the stencil instances.

Update: jsPlumb uses the same function internally.

jsPlumbUtil.uuid()

[Glavin001]

I can now dynamically create new jsPlumb elements from Stencils (currently only the Base stencil class).

More coming later today/this week.

[Glavin001]

Got the connections working:

[Glavin001]

Improved the BaseStencil Class, added a BaseProcessStencil, and the side-bar for selecting stencils now is dynamically updated from the list of available stencils (can apply search filter in future):

[Glavin001]

• [ ] Create all of the stencil classes, from Microsoft's Thread Modelling Tool

---

@rainbee2214, when are your exams done? Would you be up for creating all of the Stencil classes? For instance, I already created them all for Process type Stencil. There are Boundary, External, Flow, and of course Process, and will be more in the future of SeaSponge! :smile: I just need a hand getting thru some of this workload, if you have some time I could borrow. It's pretty easy -- organize the stencil class files in it's type directory and then copy and paste and change the title / super class to extend from. And while you are going thru them you will get familiar with where the potential Threats (STRIDE, #11 ) will go in the class. The instances will store the Mitigations.

[Glavin001]

We can now create and select the stencil instances!

The selected element has it's background changed to blue and the Properties menu is displaying it's title and type:

[Glavin001]

Going to try and use https://github.com/codef0rmer/angular-dragdrop for drag-n-drop support.

[rainbee2214]

Ill help you, no worries! I've been looking into the stride analysis already as well :)

[Glavin001]

Thank you, @rainbee2214 ! I am working on drag-n-drop now and then we can close this issue and get onto other cool stuff. I'll probably work with @Frozenfire92 and figure out the .sponge file format ( #22 ), and then I'll quickly implement that (de)serialization and then I can work with you on the Threat / STRIDE stuff. Now this is getting to the exciting parts :smiley:

[Glavin001]

Some UI improvements could be made, however drag-n-drop is implemented and working.