The first app I've written using an early version of this is the Color Arranger Apps Script Add-on, but I'm expecting to be able to use this in a few more things I have in the pipeline.
Here's how it works.
This is used to manage canvas operations for a collection of shapes. It provides default mouse, dragging and animation functions and events (all of which can be customized) for dealing with the dragging, dropping and painting of shapes on a canvas. This first version only supports rectangular shapes, but I'll be adding more stuff as I use it for more apps.
In addition to x,y co-ordinates relative to the canvas, it also supports a z level for layers (what goes in front).
The purpose is to manage all the mouse and shape coordination to generate a smooth drag and drop experience. Below is an apps script webapp using canvasser with some shapes to play around with.
Let's work through the example.
It needs the element containing the canvas it's supposed to work on.
Canvasser keeps track of all the shapes plotted on it with CanvasserShape objects. A new, default shape is created like this.
The default shape template object looks like this. Each shape that is added will use these values as the default. An example is the black shape in the top left corner of the demo.
Any of the above can be changed by passing an example object to the CanvasserShape constructor. Here's the green and yellow shapes in the demo.
There are a number of specific events that can be monitored. Many events can be global (apply to all shapes), or can be tailored for specific shapes. We'll dig into that a little more later, but for now, let's say I want to provoke a callback when the mouse enters a new shape, or exits an old one.
In this case I want to turn an element on my web page 'block' , to the same color as the shape I'm entering, or gray if I'm leaving.
Try on the demo moving the mouse over various shapes
You may want to use one shape as the template for another. In this case, I'm creating the blue shape and copying it to make the pink shape
and then make a few minor adjustments directly
In the blue/pink example you'll notice that the CanvasserShape is initialized with a shape property, plus a data property. The shape property describes the shape's characteristics, but the data property is provided as a convenient container for whatever data you want to associate with a shape. This means that when you get a callback where the CanvasserShape is passed to you, any data that it carries will be accessible too.
Each shape can have its own personal callback for a dragEnd (or dragStart) that can override the default dragEnd behavior. In this case we want to fill a couple of elements (defined earlier in the data property of the pink and blue shapes) with some data associated with each shape.
onDragEnd callback is called with 2 arguments.
In this example both the pink and blue shapes now have the same customized onDragEnd event, whereas the other shapes do not. Play around with dragging the pink and blue shapes in the demo below
When a shape is dropped in a new position, there are a number of positioning modes. These have been identified so far
By default, items use the PLACE mode. Here's an example of selecting the SWAP mode
There is a primitive text capability, which allows you to label shapes. See the default item earlier for the properties supported
By default a dragged items Z position will be changed when dropped to put it on the top layer. However you can configure a shape to retain its original position after being dragged as in the lemonchiffon example above, or you can specify a specific Z position.
Play around with the lemonchiffon and indigo shapes to see the SWAP and UNCHANGED behaviors in action.
For more like this, see Google Apps Scripts snippets. Why not join our forum,follow the blog or follow me on twitter to ensure you get updates when they are available.
You want to learn Google Apps Script?
Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, available All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly.
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > Google Apps Scripts snippets >