bloombooks / comical-js Goto Github PK

I haven't found a good name for this; it has to be distinguished from "shout".

It would be good to have a name that isn't hard to translate (e.g. "puckered" would be hard).

For now, let's call it "Exclamation2".

This one is another simple SVG.

Should have 12 points:

See #9 for an arithmetically drawn version we'd like to have eventually.

When bubbles overlap (but are not part of the same "family"), we need a way to say "Move to Top". Internally, we need some way to model this ordering/level.

Not a requirement, but notice that hand-drawn though bubbles are often drawn with ellipses instead of circles, and sometimes the initial ellipses overlap:

We can get a long way with just 0 or 1. So that's all the code needs to implement; but the model should be an array of them, so that some day we can support crowds saying something.

Don't allow this:

I would like to try out comical-js for a prototype I am trying to create to incorporate speech bubbles in my web content. Seems like comical-js can do what I am looking for based on the description. I am looking for a way to run some standalone samples along with it's source code to get an idea how to use the library. I looked at the github readme.md but couldn't quite follow. I see this step in the Developing section:

"Do this to launch a browser window in which you can see various examples of ComicalJS running, or add your own yarn storybook"

Which I thought will enable me to checkout some samples. But I get the following:

$ yarn storybook
yarn run v1.22.10
warning package.json: No license field
error Command "storybook" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is the first time I have used yarn, so don't know if I am missing some step or missing something in the package.json. I haven't really started developing anything with comical-js so don't know if I am supposed to configure yarn or my project before being able to run those samples. Any pointers would be greatly appreciated.

• Add borderStyleName property
• Add getBorderStyleNameChoices() method that returns the set of supported style names.

All we need is a set of strings like : "solid", "dashed", "dotted".

These can map to hard-coded paperjs strokes. In the future we can add a different property that allows you to have access to the details of the stroke, but this property will still allow for a cheap UI.

I think we just need simple bottom to top gradient, so, two colors.

See http://clintflickerlettering.blogspot.com/2010/11/lettering-in-adobe-illustrator-five.html for how this is done in Illustrator, which may give some hints to doing it in paperjs.

This one would seem to require a method other than using an SVG template, because the number of points really should vary:

Not that there is randomness in there; it's not as though every point is the same distance from the center. But that's just a "nice to have".

1. In the default "auto" mode, it should add points as the bubble gets larger.
2. And also take a value that controls how many points it has.

The problem is that once the tip is in there, it gets hard or impossible for the user to select it again because it will seem that they are clicking in the text. (We're trying to avoid the multitude of selection modes that some products have).

. When they have no tail, they are captions.

• a bubble may have one child bubble

• a bubble and its children cannot have a different level

• bubbles in this kind of "family grouping" share a border when they overlap

• when a child should have a tail that ends in the center of the parent so that when they are apart, you see that tail.

The value should be whatever paperjs supports, which I assume is anything that canvas supports which I assume is anything that css supports. E.g. "red" and "#FECBA1".