Graphic

A graphic is an individual graphic element on a canvas. Graphic is an abstract superclass (that is, no actual Graphic objects exist, only more specialized sub-types of Graphic such as Solid and Line).

A Solid graphic is one that potentially has a fill, image, and text - as opposed to a Line, which has only a stroke. Almost all Solid graphics will actually be the subclass Shape, but a canvas background is a Solid without being a Shape.

A Shape is a “Solid” graphic which has a particular shape, either one of the built-in shapes (such as Circle), or a custom bezier shape.

A Line is a graphic which is a vector, potentially connecting two other graphics at its head and tail ends.

Getting Graphics

The graphics property of the Canvas class has a value that is an array of references to every graphic on the canvas.

Here is a script for creating an array of references to all graphics on the current canvas:

cnvs = document.windows[0].selection.canvas gs = cnvs.graphics

And here’s a script that uses the JavaScript forEach() method and the JavaScript concat() method to create an array of references to all graphics in the document:

var gs = new Array() canvases.forEach(function(cnvs){ gs = gs.concat(cnvs.graphics) })

Graphic Instance Functions

All graphics share common functions for duplicating, deleting, and reordering their position in the stack of graphics on a canvas. Here are script examples of each function:

graphics = document.windows[0].selection.canvas.graphics if(graphics.length > 1){ bottomGraphic = graphics[graphics.length-1] bottomGraphic.orderAbove(graphics[0]) }
omnigraffle:///omnijs-run?script=graphics%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%2Egraphics%0Aif%28graphics%2Elength%20%3E%201%29%7B%0A%09bottomGraphic%20%3D%20graphics%5Bgraphics%2Elength-1%5D%0A%09bottomGraphic%2EorderAbove%28graphics%5B0%5D%29%0A%7D
graphics = document.windows[0].selection.canvas.graphics if(graphics.length > 1){ bottomGraphic = graphics[graphics.length-1] graphics[0].orderBelow(bottomGraphic) }
omnigraffle:///omnijs-run?script=graphics%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%2Egraphics%0Aif%28graphics%2Elength%20%3E%201%29%7B%0A%09bottomGraphic%20%3D%20graphics%5Bgraphics%2Elength-1%5D%0A%09graphics%5B0%5D%2EorderBelow%28bottomGraphic%29%0A%7D
g = document.windows[0].selection.canvas.graphics g = g.reverse() for(i = 0; i < g.length - 1; i++){ g[i].remove() }
omnigraffle:///omnijs-run?script=g%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%2Egraphics%0Ag%20%3D%20g%2Ereverse%28%29%0Afor%28i%20%3D%200%3B%20i%20%3C%20g%2Elength%20-%201%3B%20i%2B%2B%29%7B%0A%09g%5Bi%5D%2Eremove%28%29%0A%7D
/*{ "type": "action", "targets": ["omnigraffle"], "author": "Your Name or Company", "description": "Deletes all graphics on selected canvas except the topmost one.", "label": "Remove All Except Top Graphic", "paletteLabel": "Remove All Except Top Graphic" }*/ var _ = function(){ var action = new PlugIn.Action(function(selection, sender) { g = selection.canvas.graphics g = g.reverse() for(i = 0; i < g.length - 1; i++){ g[i].remove() } }); action.validate = function(selection, sender) { // validation code if(selection.canvas.graphics.length > 0){return true} else {return false} }; return action; }(); _;
if (document.windows[0].selection.graphics.length == 1){ graphic = document.windows[0].selection.graphics[0] geo = graphic.geometry graphic.duplicateTo(new Point(geo.maxX,geo.minY)) }
omnigraffle:///omnijs-run?script=if%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%20%3D%3D%201%29%7B%0A%09graphic%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09geo%20%3D%20graphic%2Egeometry%0A%09graphic%2EduplicateTo%28new%20Point%28geo%2EmaxX%2Cgeo%2EminY%29%29%0A%7D
/*{ "type": "action", "targets": ["omnigraffle"], "author": "Your Name or Company", "description": "Makes a duplicate to the right of the selected graphic.", "label": "Duplicate Right", "paletteLabel": "Duplicate Right" }*/ var _ = function(){ var action = new PlugIn.Action(function(selection, sender) { // action code graphic = selection.graphics[0] geo = graphic.geometry graphic.duplicateTo(new Point(geo.maxX,geo.minY)) }); action.validate = function(selection, sender) { // validation code if(selection.graphics.length === 1){return true} else {return false} }; return action; }(); _;

Select and Deselect Graphics

The select function changes the selection to a new array of graphics. If the extending parameter is true, then the previous selection is retained as well.

document.windows[0].selection.view.select([arrayOfGraphics], false)

The deselect function removes any of the passed graphics from the current selection, leaving any other currently selected graphics still selected.

document.windows[0].selection.view.deselect([arrayOfGraphics])

Information about accessing and manipulating the document selection is on the Windows page.

Checking for Single Selected Graphic

It it is common to create scripts that require the user to have already selected a single graphic. Here is the outline of such a script:

if (document.windows[0].selection.graphics.length != 1){ title = "SELECTION ERROR" message = "Please select a single graphic." new Alert(title, message).show(function(result){}) } else { cnvs = document.windows[0].selection.canvas graphic = document.windows[0].selection.graphics[0] // processing code goes here }
omnigraffle:///omnijs-run?script=if%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%20%21%3D%201%29%7B%0A%09title%20%3D%20%22SELECTION%20ERROR%22%0A%09message%20%3D%20%22Please%20select%20a%20single%20graphic%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%7D%20else%20%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09graphic%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09%2F%2F%20processing%20code%20goes%20here%0A%7D
UNDER CONSTRUCTION

This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.

DISCLAIMER