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.

So to summarize: an instance of the Graphic class can be a Solid or a Line.

NOTE: The Graphic class also includes specialized sub-classes of Group, Subgraph, and Table, all of which will be covered in the Graphic section of the website.

Getting Graphics

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

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

Get All Graphics on Current Canvas
Copy Try It!

cnvs = document.windows[0].selection.canvas
graphx = cnvs.graphics
console.log(graphx)
//--> [object Shape: blue],[object Shape: red],[object Shape: magenta],[object Shape: green]

Scripts using the ordering functions:

Move Bottom Graphic to the Top
Copy Try It!

graphx = document.windows[0].selection.canvas.graphics
if(graphx.length > 1){
	bottomGraphic = graphx[graphx.length-1]
	bottomGraphic.orderAbove(graphx[0])
}

NOTE: The orderAbove() and orderBelow() methods will move graphics between layers. See the section on Layers for more information.

Move Top Graphic to the Bottom
Copy Try It!

graphx = document.windows[0].selection.canvas.graphics
if(graphx.length > 1){
	bottomGraphic = graphx[graphx.length-1]
	graphx[0].orderBelow(bottomGraphic)
}

Using the remove() function:

Delete all but the Top Graphic
Copy Try It!

graphx = document.windows[0].selection.canvas.graphics
graphx = graphx.reverse()
for(i = 0; i < graphx.length - 1; i++){
	graphx[i].remove()
}

Using the duplicateTo(…) function:

Duplicate Selected Graphic to the Right
Copy Try It!

if (document.windows[0].selection.graphics.length === 1){
	graphk = document.windows[0].selection.graphics[0]
	geo = graphk.geometry
	graphk.duplicateTo(new Point(geo.maxX, geo.minY))
}

To duplicate to the same layer as the copied graphic, use the orderBelow(…) function:

Duplicate Selected Graphic to the Right (Same Layer)
Copy Try It!

if (document.windows[0].selection.graphics.length === 1){
	graphk = document.windows[0].selection.graphics[0]
	geo = graphk.geometry
	newGraphk = graphk.duplicateTo(new Point(geo.maxX, geo.minY))
	newGraphk.orderBelow(graphk)
}

Ordering graphics by name:

Reorder Canvas Graphics by Name
Copy Try It!

cnvs = document.windows[0].selection.canvas
graphx = cnvs.graphics
graphx.sort((a, b) => {
  var x = a.name;
  var y = b.name;
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
})
graphx.reverse().forEach(graphk => {
	topGraphk = cnvs.graphics[0]
	if(graphk !== topGraphk){
		graphk.orderAbove(topGraphk) 
	}
})

To reorder only the graphics in a specific layer (like the top layer) use this technique:

Reorder Graphics in the Topmost Layer by Name
Copy Try It!

cnvs = document.windows[0].selection.canvas
layr = cnvs.layers[0]
graphx = layr.graphics
graphx.sort((a, b) => {
  var x = a.name;
  var y = b.name;
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
})
graphx.reverse().forEach(graphk => {
	topGraphk = layr.graphics[0]
	if(graphk !== topGraphk){
		graphk.orderAbove(topGraphk) 
	}
})

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.

Select View Graphics
Copy

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.

Deselect View Graphics
Copy

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

To deselect all graphics, pass in an empty array as the value for the select(…) function:

Deselect All Graphics
Copy Try It!

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

Checking for Single Selected Graphic

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:

Check for Single Selected Graphic
Copy Try It!

(async () => {
	try {
		graphx = document.windows[0].selection.graphics
		if(graphx.length !== 1){
			throw {
				name: "Selection Issue",
				message: "Please select a single graphic."
			}
		}
		graphk = graphx[0]

		// STATEMENTS GO HERE

	}
	catch(err){
		new Alert(err.name, err.message).show()
	}
})();