Theming Approach

[de-coy]

I've been looking at how to approach themes and wondered if you had any thoughts on it so far. I can think of a couple of approaches:

1. Extend the existing theme approach but allow more flexibility with line colours, fills etc.
2. Add CSS classes to the individual elements e.g. title, actor, signal, note etc. and use external style sheets to add fill and stroke colours.

My thoughts are that option 1 might become unwieldy as the number of theme options grows larger whereas option 2 keeps a nice separation of concerns. The jQuery initialisation would then look something like this:

$(function() {
    $(".sequence").sequenceDiagram({linestyle: 'hand',themecss:'css/mytheme.css'}); 
});

Any thoughts?

[bramp]

I am all for the CSS approach, however, because I'm using Raphaël this is not possible. Raphaël outputs either SVG or VML (on Internet Explorer). The later doesn't support styling with CSS.

I think the long term solution is for me to drop Raphaël and use a pure SVG solution. I think Raphaël was a poor choice on my part as I keep getting blocked by it.

[de-coy]

I've started looking to see if there's a way to abstract the drawing
library from the code to make it easier to swap new libraries in and out.
I've not got very far yet but would appreciate your thoughts on this
approach.

On Sunday, May 19, 2013, Andrew Brampton wrote:

I am all for the CSS approach, however, because I'm using Raphaël this is
not possible. Raphaël outputs either SVG or VML (on Internet Explorer). The
later doesn't support styling with CSS.

I think the long term solution is for me to drop Raphaël and use a pure
SVG solution. I think Raphaël was a poor choice on my part as I keep
getting blocked by it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/35#issuecomment-18120780
.

dmgcoyle@gmail.com
07718 159 544

[bramp]

I've tried to structure the code to make that possible. For example: HandRaphaëlTheme extends RaphaëlTheme which extends BaseTheme.

You can create a new SomethingTheme that extends BaseTheme. Then all the drawing code can go into the draw_line/draw_rect methods, and it should just work. I don't think there is any Raphael specific code in the BaseTheme.

[de-coy]

Ok, great, I'll take a look.

On Sunday, May 19, 2013, Andrew Brampton wrote:

I've tried to structure the code to make that possible. For example:
HandRaphaëlTheme extends RaphaëlTheme which extends BaseTheme.

You can create a new SomethingTheme that extends BaseTheme. Then all the
drawing code can go into the draw_line/draw_rect methods, and it should
just work. I don't think there is any Raphael specific code in the
BaseTheme.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/35#issuecomment-18122036
.

dmgcoyle@gmail.com
07718 159 544

[rahulsom]

+1

[de-coy]

OK, initial version using svg.js is working on a fork.
Current issues:

• no line styles
• no arrow heads
• no css classes

Bramp can you take a look and see if you agree it's on the right track before I push on further?

[bramp]

Awesome, I will look as soon as I can.
On May 31, 2013 5:55 PM, "de-coy" notifications@github.com wrote:

OK, initial version using svg.js is working on a fork.
Current issues:

• no line styles
• no arrow heads
• no css classes

Bramp can you take a look and see if you agree it's on the right track
before I push on further?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/35#issuecomment-18773737
.

[bramp]

@de-coy I've had a look at what you are doing, and it's certainly on the right track. I think the game plan here is to finish your svg.js version, and then I'll make js-sequence-diagram support both Raphael and svg.js, but make svg.js the default. Then in future we can support CSS styles, etc.

[rahulsom]

Any idea when this will be merged? Or is @de-coy's branch stable enough to be used in production?

[bramp]

@rahulsom based on a quick look at @de-coy code, I think he is still missing some features. As such I don't think his svg.js version is production ready.

[de-coy]

It is definitely not suitable for Production and I'm struggling to fit in
any work on it due to family commitments. I'll see if I can fit some time
in over the next couple of weeks...

On Tuesday, August 27, 2013, Andrew Brampton wrote:

@rahulsom https://github.com/rahulsom based on a quick look at @de-coyhttps://github.com/de-coycode, I think he is still missing some features. As such I don't think his
svg.js version is production ready.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/35#issuecomment-23352821
.

dmgcoyle@gmail.com
07718 159 544

[benweet]

Is there a way to access BaseTheme without modifying sequence-diagram.js? Basically I just want to customize the font as RaphaëlTheme does, but outside the lib.

[bramp]

Ok since v2.0 we use Snap.svg, which allows styling via CSS! https://github.com/bramp/js-sequence-diagrams#styling

I think this can now be closed.