Once #49 is merged in, these features remain to do for full svg support:

• Add support for images. (I didn't know how to do this with the imageCache stuff.)
• Support css filter stuff if that's possible / important.
• Have bounds (xMin, xMax, etc in Editor.exportSvgString) populated in the same way that the hypothetical "artboard" feature populates the web export bounds.
• Add an export button to the UI. Also allow customization of the dpi. (Perhaps dpi is also related to web export concerns?)

When you click a primitive shape (Circle, Rectangle, Text) in the create panel that you can't edit, there should be a tooltip or feedback of some kind that you should drag the shape in to the canvas. Beginners often get caught by this.

Here is the file where the create panel view is defined,
https://github.com/cdglabs/apparatus/blob/master/src/View/CreatePanel.coffee

There are currently no tooltips in the system. Maybe there should be a system-wide way to make tooltips/hints. Do you see any other places in the interface that could use tooltips/hints?

For a beginner it's mystifying how to select objects in the Outline panel. At first it seems to not work at all. Then you find that it works once in a while. Then you realize there's a tiny area between the collapse button and the text that you have to click. Finally you reach enlightenment and discover that clicking in the blank area to the right of the content is the way to go. Life is easy after that.

Would it break anything if the object becomes selected when you click on anything in the area, including the collapse button and the name?

Right now, if you copy and paste an expression with references in it, you end up with code like max(id5m38cxihpln70zk6.length - idk1l7lrihplna3nk9 + 1, 0), which does not work at all. We should detect pasted ids and create real references.

When there are too many symbols in the list, the view itself becomes obscured by the scrollbar.
I'd like to show a screenshot of this happening, but I can't upload from my current location. Not sure if this is an issue in browsers other than Firefox.

Anyhow, even if it weren't obscured, working with just a few symbols very quickly becomes cumbersome.

By default, the symbols take up a lot of white-space, perhaps we could halve their size? Halve the size of the symbol containers, and scale up the symbols themselves to fit the rectangles, approximately four times as many symbols will fit in the same view!

It looks like #43 was caused by a recursive structure which I accidentally created and then deleted, but which remains in the object network and which is still serialized along with everything else.

This diagram isn't very complex. But for some reason, successive mouse clicks are processed over 400ms apart, so double-clicks cannot be registered. I'll poke around.

EDIT: Profiling suggests there's a big lag from serialization! Possible solutions:

• Make double-click a single event, rather than a pair of events (selection, double-click selection).
• Fix something serialization-scheduling-related.
• Check if there's some reason serialization of this particular diagram is problematic... I guess the file is unusually large...

Have you thought about allowing apparatus to talk to external services?

For example, I am doing some work with stage lights. It would be really cool to create things like that RGB slider and have that control a physical light. To do this however, it would need to send some network traffic on every update.

For example, you could add the ability to send a websocket message on every update of a certain variable...

Or maybe it makes more sense to have the other outputs be represented physically on the screen by something.

I've tried apparatus in two different browsers and get this error in most examples and when dragging anything in from the left

TypeError: Array.from is not a function

The two browsers are Firefox and Chromium.

This is the second time I come across this project (I think I unfortunately hit a bug very early on my first try :( ) and from the Strange Loop video, it looks amazing! So this time I decided to open an issue. When you run it, it isn't clunky at all. The wheel example that does run is a bit slow and I'm not using a particularly old computer.

Could you also list some examples of computer/browser combinations that do work well somewhere?

Feature

Make it possible for users to create rich, media experiences through direct manipulation. These experiences would allow non-linear navigation, exploration, and evolution.

User stories

As a creator
I would like to create a rich multimedia experience
so that I can integrate new media elements into my narrative

As a creator
I would like to add navigational possibilities to my creation
so that people can interact with and explore my idea through sequence and flow

Collaboration

The p5.js project may offer a good toolkit for canvas rendering, animation, sound, and other multimedia objects for inclusion in an Apparatus project. Specifically, issue #189 may prove a good starting point for collaboration.

When you drag an Anchor in the outline into a spot where it will render it throws an exception ("Not implemented") because the Graphic.Anchor does not implement the render or hitDetect methods.

I see 3 ways to resolve this:

1. Don't allow Anchors to be dragged. This is the simplest and might make sense since there is not much that can be done with draggable anchors.
2. Make anchors renderable. They could be represented as little circles. I don't know if this is a good idea because anchors are more of an abstract concept than a shape.
3. Only make anchors draggable to areas that don't render. I think this would mean it could only be reordered within itself and dragged within other shapes.

I'd be willing to do a pr for this. Let me know if any of these sound good.

I believe a two-point path is currently only selectable via the outline. It should probably be hoverable and selectable in the canvas.

If you try to copy & paste an expression containing a reference, the reference is pasted as its id (like idamaqsuihcjrezl7z), which is not reinterpreted as a reference.

See how wide the vertical blue line is?

Right now, creating variables and changing built-in parameters from their default values are irreversible actions. Both of them create entries in the Outline & Inspector views which you can't remove and which clutter up the view.

Some interface to fix this would be nice:

• deletion "X"
• drag to trash bin
• right click and select "delete"

If you click the disclosure triangle to toggle from "collapsed" to "expanded" on an element with no children, then the disclosure triangle exists in a glitched-out superimposed state until you move the mouse out:

Pretty wacky!

It has to do with the implementation of the "hovered" attribute. In particular, commenting out the lines under "Manage the "hovered" attributes of elements" fixes it.

Here's the JSON: bug.txt

The examples currently don't work.

In the console I get for example:
Editor.coffee:151GET http://aprt.us/editor/doc/examples/Polygon.json 404 (Not Found)

Some diagrams which used to work OK now take dozens of seconds to load. Profiling suggests that > 90% of these diagrams' render time is spent in Attribute._value's call to Attribute.circularReferencePath, so I'm guessing this is #32's fault.

Example of a very slow drawing: Field.json.txt.

I'm not sure exactly what property of a drawing makes it susceptible to this slow-down. But the Field drawing has a large spread. It makes sense that not caching the circular-reference check would cause especially big problems for drawings like that.

Reordering variables under a shape would be friggin' great! Some kinda drag-and-drop situation?

Scrolling with the mouse is extremely slow, every scrollwheel "tick" zooms for maybe 1 pixel..

I've tried it on chrome also, scrolling works fine there.

See errors in console which occur when the Y expression is completed:

Uncaught TypeError: Cannot read property 'a' of undefined at Matrix.coffee:26

I've had trouble reproducing sometimes. This is unpredictable.

The domain linked from your site www.cdglabs.org appears to be under new (spammy, but potentially malware-like) ownership.

When dragging the components of an rgba color, it is possible to drag them outside of the range [0, 1]. Colors should be clamped to this valid range.

In the slider example, I'd like to constrain the value of the value variable to between, for example, 0 and 1.
I can't figure out how to do it :( I tried making the x coord of the handle be max(0, min(1, value)), but then the handle is just unresponsive.

Really awesome project! Thanks for sharing.

Was there a particular motivation for making Dataflow.cell a big ol' closure rather than a class with an evaluate method? Without knowing such a motivation, I feel like it would be easier to understand as a class.

(I'm interested in working on this.)

Steps to reproduce:

1. create a circle at (0, 0)
2. create a variable called slider and initialize to 0.0
3. set X of circle to min(5.0, max(0.0, slider))
4. Set control of circle to X/slider

Now drag the circle quickly. You'll notice that you can easily get the slider value below 0.0 or above 5.0, violating the constraint. When this happens, the circle also gets stuck and you can't drag it anymore.

I'm trying to create a variable i that depends on a rectangle's X and Y. Dragging the X to i works. Multiplying by a constant works: X*0.1. But dragging the Y in the hopes of creating X*Y crashes it with an id-string instead of the properly styled Y.

JSON: https://gist.github.com/johshoff/9ca6babef61101e02478

Before:

After:

Feature suggestion: Holding Command (on Mac) while dragging an object constrains its X/Y to discrete multiples of 0.1, which is useful for aligning to the background grid. When dragging an attribute value in the inspector to the left or right to "scrub" the value, it would similarly be useful to be able to hold down Command and scrub the value in discrete 0.1 increments.

Related: Holding ALT on Windows should have the same effect as holding Command on Mac. Or use Control on both platforms?

The canvas grid is currently fixed from [-10,-10] to [10,10] with the grid lines always visible.

Zooming is currently not restricted in anyway. You can manage to "lose" the position of the grid by accident.

Some additions to the current behavior could improve usability:

• Ability to the turn grid on/off.
• A strong gridline for 10s of units. A less visible line for single increments.
• Show the grid for the whole canvas.
• Constraint the zoom and panning to a restricted plane: either [-100,-100] to [100,100] or double the size of the current sketch, whichever is larger.

Current these panels take a fixed amount of space which limits the available real estate for the canvas.

If there is a way to resize these panels (by drag and drop a vertical bar?), it would make app much more fun in "play" mode.

I should be able to contribute a patch if the feature is approved.

My first test with apparatus, and I've already broken it. :-)

There's a bug whenever you use a variable for any parameter of a spread, and the variable itself depends on the value of another spread, even for very small sizes. The user interface makes it extremely easy to do this, and it makes sense for any drawing that would have been programmed with nested loops in a traditional language.

I've attached my example. It's a grid looping over X and Y variables, where the Y max value is not constant but made dependent on the current value of X.

The first file (1-recursivity global var.json) contains a functional grid, having the "Y" max equal to the global "pileup" variable. If you then drag the spread variable X to be value of pileup, the interface freezes and most options become unresponsive.

The second file (2-recursivity pileup.json) is what happens after assigning X as the value of pileup.

The funniest thing is that the group thumbnail works as expected! :-) When you drag X over pileup, the thumbnail draws the staircase shape. Therefore recursion is working well there. Can we get the whole interface work like the thumbnail? ;-)

Other than that, Apparatus is an amazing tool. Keep up the excelent work!

Text just uses the bounding box. But when I added Image, I included fancy hit-detection which doesn't recognizes hits from transparent parts of the image.

This seems needlessly inconsistent. Which should we use?

Reordering variables feels so nice. Would be good to do the same for the symbols on the left hand side, as you develop similar kinds of "dependency orders" for these.

Hey guys, this is really neat.

I wanted to suggest a potential platform to distribute this app on, that would give you the document and user management components that you need for a robust sharing-enabled web platform, without devoting a lot of specific development time to all of those features.

It's called Sandstorm.io, github.com/sandstorm.io/sandstorm and it's a app hosting platform that your app would probably run on pretty smoothly. It's easiest to explain by trying the ten-second demo at https://demo.sandstorm.io

cc: @paulproteus

Eg: Setting a circle's X position to be that same circle's X position. This locks up the whole editor forcing me to refresh the page.

This probably either:

• Shouldn't be allowed, or
• Should have recursion limited

If you set an attribute to spread(0,0) (which evaluates to an empty spread), an error occurs:

Uncaught TypeError: Cannot read property 'a' of undefined (Matrix.coffee:26)

Drawing is at https://gist.github.com/joshuahhh/803198a67c7332a17548. The chain of circles starts at the bottom and goes up. If you hover over an early circle, it turns red immediately. By the time you get 8 or 9 deep, hover-to-red latency is noticeable. By the end of the chain, hovering freezes and then crashes the tab.

(I'm not sure how well recursive drawing is supposed to be supported, so this may be a low priority.)

When I saw this announcement, Apparatus was the first project I thought of: http://coffeescript.org/announcing-coffeescript-2/

Is there interest in migrating to CoffeeScript 2? Presumably this would help the project keep up with new developments in the JS world.

Instead of having to input the desired string into the "text" attribute of a text element, it would be really nice if it was possible to type directly into the text symbol.

It would be especially great if you could edit a text field from a symbol like this, then we'd be able to create forms!

The same way you can scrub numbers, you should be able to scrub colors with a color picker.

Here is a mockup of what I'm thinking,

Any text of the form "rgba(#, #, #, #)" would get a mark to its left showing the color. When you click the color swatch the color picker pops up and you can change the color live.

The place in the code to do this is here,
https://github.com/cdglabs/apparatus/blob/master/src/View/ExpressionCode.coffee#L154

A nice looking color picker to use might be this one as it is already React-ready.

E.g. cmd+z for undo