Skip to content
Please note that GitHub no longer supports Internet Explorer.

We recommend upgrading to the latest Microsoft Edge, Google Chrome, or Firefox.

Learn more
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to style diagram #11

Open
azriel91 opened this issue Apr 2, 2017 · 20 comments
Open

Ability to style diagram #11

azriel91 opened this issue Apr 2, 2017 · 20 comments
Assignees
Labels

Comments

@azriel91
Copy link

@azriel91 azriel91 commented Apr 2, 2017

Raising this out of this thread to not digress too much.

Should svgbob allow the ability to style nodes? It would be nice to be able to do it so that diagrams can be represented in text and still support colour. The ascii version of the diagram is not very readable with styling information included in each node. @ivanceras gave an example of using single letters to represent colour, but I foresee potential use cases for additional styling.

I've copied a bit of the post and edited it to see what it may look like:

 .---------.            .-----------.
( Alice {a} )  ---->   / Bob {b,c} /
 `---------'          '-----------'

 .---------.            .----------.
( Apple {a} )  ---->   / Ball {b} /
 `---------'          '----------'

# Legend:

a: { color: red }
b: { color: blue }
c: { opacity: 0.5 }

Also, what about people wanting to style lines? Maybe we leave that as a separate topic.

@ivanceras ivanceras self-assigned this Apr 2, 2017
@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Apr 2, 2017

Hmn, it's neat.
To improve, maybe we will copy rust formatting

i.e:

println!("Hello {arg}!", arg = "world")
 .---------.            .-----------.     .---.   
( Alice {a} )  ---->   / Bob {b,c} / ->  ( {d} )
 `---------'          '-----------'       `---'
                                         
 .---------.            .----------.      .-.
( Apple {a} )  ---->   / Ball {b} /  ->  ({e})
 `---------'          '----------'        `-'

 ( ͡° ͜ʖ ͡°)

#Legend:
a = {color: red }
b = {color: blue }
c = {opacity: 0.5 }
d = "Hello world!"
e = {text = "Foo", color: red, opacity: 0.5, font-size: 8px}

  • {d} "Hello world" text will be rendered in the small circle
  • {e} "Foo" text will fit into a tiny red circle using a small font size.

Might as well color the emoji faces:
( ͡° ͜ʖ ͡°) = {color: brown}

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented May 6, 2017

Haven't started the ground work for this one, but thinking of something like using css as the syntax for the styling.

Using . for class and # for id

 .---------.            .-----------.     .--.   
( Alice {.a})  ---->   / Bob {.b.c}/ ->  ({.d})
 `---------'          '-----------'       `--'
                                         
 .---------.             .-----------.      .-.
( Apple $.a )   ---->   / Ball $.b.c/  ->  ($#e)
 `---------'           '-----------'        `-'

#Legend:
.a {color: red }
.b {color: blue }
.c {opacity: 0.5 }
.d{ text: "Hello world!"}
#e{text:"Foo", color: red, opacity: 0.5, font-size: 8px}

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Feb 28, 2018

@ivanceras Would the diagram with the class and id specified get more space? Where

+-----------+
| Alice $.a |
+-----------+

# Legend:
.a { color: red }

Would be render as:

+-----------+
| Alice     |
+-----------+

or

+-------+
| Alice |
+-------+
@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 28, 2018

@pickfire It would like be the first one, since there could be scribbles connecting to the left side of the box, which means shrinking the box would make the surrounding scribbles out of place. I haven't started any work on this yet, since I hit a wall on recognizing bigger shapes such as circle, rect, etc. This needs a different algorithm than the current implementation.

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Mar 1, 2018

@ivanceras I would like to help out on this project too since there aren't many good alternatives online where the second would be rendered in which I feel like the extra whitespace for style is useless. (I prefer the second)

As well, CJK characters without needing to decrease the whitespace would be nice:

+---+
| 一 |
+---+

From what I know, the current project uses links between characters with neighbour characters to determine what needs to be drawn, doesn't it identify like say box, circle, cloud, some other predefined shapes ...

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Mar 1, 2018

@pickfire, if you prefer the second one, then it would be very difficult to have a coherent render.
illustration

As for the CJK, CJK are 2 space width in terminals while just ~1.5 space width in browsers and any other GUI-based text editor. I'm sticking with the terminal 2 space width, it's much simpler to deal than ~1.5 width.

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Mar 1, 2018

True for the CJK case, if it would be like a box in the terminal, I rather it be render the same in svg. If there by any chance that the current reader is able to determine the content of the box and render it again without really matching each character that creates the box? Say, identify the box first before the content.

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Mar 1, 2018

No, the current implementation only determine the location of the character relative to the number of character from the left of the line, summing all character widths from the left of it.

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Mar 1, 2018

Have you tried recognizing shapes rather than matching each character to svg? Any downside? As far as I know, I never seen any projects doing this.

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Mar 1, 2018

That's the plan, recognizing the shape at higher level, but the algorithm to use doesn't look very simple. If you can show something like that, then I'd be happy to include it in the project.

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Mar 1, 2018

@ivanceras Well, I need to do some research before that. I might come back to this afterward.

@haroldcarr

This comment has been minimized.

Copy link

@haroldcarr haroldcarr commented Jan 17, 2019

The initial issue description said

"Also, what about people wanting to style lines? Maybe we leave that as a separate topic."

I would definitely like to style lines (in particular, color).

@virtualritz

This comment has been minimized.

Copy link

@virtualritz virtualritz commented Jan 28, 2020

This is a must have feature! +1

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 1, 2020

Took me awhile to get back to work on this, but I think I've completed the needed algorithms to solve this issue. Stay tuned.

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 2, 2020

I'm taking the design route originally proposed by @azriel91 since it is easier to parse.
I only modify the colon to be equal sign and css styles follow right after the # Legend: marker (only 1 \n)

.---------.            .-----------.
( Alice {a} )  ---->   / Bob {b,c} /
 `---------'          '-----------'

 .---------.            .----------.
( Apple {a} )  ---->   / Ball {b} /
 `---------'          '----------'

# Legend:
a = { color: red }
b = { color: blue }
c = { opacity: 0.5 }

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 3, 2020

This was a huge rewrite and a disconnect of the core code.
It's now sitting on the a different branch since most of the nice behavior is not yet ported into this new architecture. Please check the code out. https://github.com/ivanceras/svgbob/tree/rewrite3-vectorize

I need help with:

  • porting the little details from the old code base to the new one.
  • documents, specs, how to use svgbob
@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 3, 2020

Screenshot from 2020-02-02 21-08-06

@pickfire

This comment has been minimized.

Copy link

@pickfire pickfire commented Feb 3, 2020

@ivanceras Is it possible to reuse the same legend?

@ivanceras

This comment has been minimized.

Copy link
Owner

@ivanceras ivanceras commented Feb 3, 2020

@pickfire , yes it is possible to reuse the legend for other shapes, as it is implemented like a class in html/css.

@virtualritz

This comment has been minimized.

Copy link

@virtualritz virtualritz commented Feb 3, 2020

There is another thing, kinda belongs here. Typesetting is horrible atm. It would be nice if that could be styled a bit too. At least set if text is aligned left, centered or right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.