Layers

A canvas contains one or more layers, upon which are located the canvas' elements, such as graphics or images.

Layers are created using the newLayer() instance method of the canvas class.

cnvs = document.windows[0].selection.canvas layer = cnvs.newLayer() layer.name = "NEW LAYER"
omnigraffle:///omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Alayer%20%3D%20cnvs%2EnewLayer%28%29%0Alayer%2Ename%20%3D%20%22NEW%20LAYER%22

The newLayer() method creates a new top-most layer for the canvas instance.

Here’s a script that demonstrates the creation of a canvas, layers, and shapes:

cnvs = addCanvas() cnvs.canvasSizingMode = CanvasSizingMode.Fixed cnvs.size = new Size(288, 288) layer = cnvs.layers[0] graphic = layer.addShape('Rectangle', new Rect(0, 0, 144, 144)) graphic.fillColor = Color.RGB(0.5, 0.5, 1, 1) graphic.shadowColor = null graphic.name = 'blue' layer = cnvs.newLayer() graphic = layer.addShape('Rectangle', new Rect(144, 0, 144, 144)) graphic.fillColor = Color.RGB(1, 0.5, 0.5, 1) graphic.shadowColor = null graphic.name = 'red' layer = cnvs.newLayer() graphic = layer.addShape('Rectangle', new Rect(144, 144, 144, 144)) graphic.fillColor = Color.RGB(1, 0.5, 1, 1) graphic.shadowColor = null graphic.name = 'magenta' layer = cnvs.newLayer() graphic = layer.addShape('Rectangle', new Rect(0, 144, 144, 144)) graphic.fillColor = Color.RGB(0.5, 1, 0.5, 1) graphic.shadowColor = null graphic.name = 'green'
omnigraffle:///omnijs-run?script=cnvs%20%3D%20addCanvas%28%29%0Acnvs%2EcanvasSizingMode%20%3D%20CanvasSizingMode%2EFixed%0Acnvs%2Esize%20%3D%20new%20Size%28288%2C%20288%29%0A%0Alayer%20%3D%20cnvs%2Elayers%5B0%5D%0Agraphic%20%3D%20layer%2EaddShape%28%27Rectangle%27%2C%20new%20Rect%280%2C%200%2C%20144%2C%20144%29%29%0Agraphic%2EfillColor%20%3D%20Color%2ERGB%280%2E5%2C%200%2E5%2C%201%2C%201%29%0Agraphic%2EshadowColor%20%3D%20null%0Agraphic%2Ename%20%3D%20%27blue%27%0A%0Alayer%20%3D%20cnvs%2EnewLayer%28%29%0Agraphic%20%3D%20layer%2EaddShape%28%27Rectangle%27%2C%20new%20Rect%28144%2C%200%2C%20144%2C%20144%29%29%0Agraphic%2EfillColor%20%3D%20Color%2ERGB%281%2C%200%2E5%2C%200%2E5%2C%201%29%0Agraphic%2EshadowColor%20%3D%20null%0Agraphic%2Ename%20%3D%20%27red%27%0A%0Alayer%20%3D%20cnvs%2EnewLayer%28%29%0Agraphic%20%3D%20layer%2EaddShape%28%27Rectangle%27%2C%20new%20Rect%28144%2C%20144%2C%20144%2C%20144%29%29%0Agraphic%2EfillColor%20%3D%20Color%2ERGB%281%2C%200%2E5%2C%201%2C%201%29%0Agraphic%2EshadowColor%20%3D%20null%0Agraphic%2Ename%20%3D%20%27magenta%27%0A%0Alayer%20%3D%20cnvs%2EnewLayer%28%29%0Agraphic%20%3D%20layer%2EaddShape%28%27Rectangle%27%2C%20new%20Rect%280%2C%20144%2C%20144%2C%20144%29%29%0Agraphic%2EfillColor%20%3D%20Color%2ERGB%280%2E5%2C%201%2C%200%2E5%2C%201%29%0Agraphic%2EshadowColor%20%3D%20null%0Agraphic%2Ename%20%3D%20%27green%27
color-square

Instance Properties

Here are the properties of a layer object:

Working with Properties

Here is a script outline using the JavaScript map function, that retrieves the value of a specific property for all layers of the current canvas. Replace the propTitle placeholder with the name of the layer property whose value you want to retrieve:

cnvs = document.windows[0].selection.canvas propValues = cnvs.layers.map(function(layer){return layer.propTitle})

Using the script outline shown above, to create a script for retrieving the names of the layers of the current canvas:

cnvs = document.windows[0].selection.canvas layerNames = cnvs.layers.map(function(layer){return layer.name})

Instance Functions

The instance functions for a layer object include the ability to reorder or delete layers:

Performing Tasks with Layers

Here is a script outline for performing operations with each of the layers of the current canvas:

cnvs = document.windows[0].selection.canvas cnvs.layers.forEach(function(layer){ //function code })

Using the script outline above to create a script that shows hidden layers of the current canvas:

cnvs = document.windows[0].selection.canvas cnvs.layers.forEach(function(layer){ if (layer.visible == false){layer.visible = true} })

Here’s a script that deletes the hidden layers of the current canvas. NOTE: The remove() function deletes layers regardless of the status of their locked property.

cnvs = document.windows[0].selection.canvas cnvs.layers.forEach(function(layer){ if (layer.visible == false){layer.remove()} })

Getting a layer object by using the layer’s name:

function getLayerObjectOfCurrentCanvasByName(layerName){ var targetLayer cnvs = document.windows[0].selection.canvas cnvs.layers.forEach(function(layer){ if (layer.name.localeCompare(layerName) == 0){targetLayer = layer} }) if (targetLayer instanceof Layer){ return targetLayer } else { errorString = "There is no layer named: " + layerName new Alert('MISSING OBJECT', errorString).show(function(result){}) throw new Error(errorString) } }

The previous function can be used by the following function that reorders the layers of the current canvas by name sorted alphabetically.

layer-order-01 layer-order-02
function reorderLayersOfCurrentCanvasByNameSort(){ var cnvs = document.windows[0].selection.canvas layerNames = cnvs.layers.map(function(layer){return layer.name}) layerNames = layerNames.sort() layerCount = cnvs.layers.length layerNames.forEach(function(layerName){ layer = getLayerObjectOfCurrentCanvasByName(layerName) bottomLayer = cnvs.layers[layerCount-1] if (layer != bottomLayer){ layer.orderBelow(bottomLayer) } }) }
omnigraffle:///omnijs-run?script=function%20getLayerObjectOfCurrentCanvasByName%28layerName%29%7B%0A%09var%20targetLayer%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09cnvs%2Elayers%2EforEach%28function%28layer%29%7B%0A%09%09if%20%28layer%2Ename%2ElocaleCompare%28layerName%29%20%3D%3D%200%29%7BtargetLayer%20%3D%20layer%7D%0A%09%7D%29%0A%09if%20%28targetLayer%20instanceof%20Layer%29%7B%0A%09%09return%20targetLayer%0A%09%7D%20else%20%7B%0A%09%09errorString%20%3D%20%22There%20is%20no%20layer%20named%3A%20%22%20%2B%20layerName%0A%09%09new%20Alert%28%27MISSING%20OBJECT%27%2C%20errorString%29%2Eshow%28function%28result%29%7B%7D%29%0A%09%09throw%20new%20Error%28errorString%29%0A%09%7D%0A%7D%0A%0Afunction%20reorderLayersOfCurrentCanvasByNameSort%28%29%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09layerNames%20%3D%20cnvs%2Elayers%2Emap%28function%28layer%29%7Breturn%20layer%2Ename%7D%29%0A%09layerNames%20%3D%20layerNames%2Esort%28%29%0A%09layerCount%20%3D%20cnvs%2Elayers%2Elength%0A%09layerNames%2EforEach%28function%28layerName%29%7B%0A%09%09layer%20%3D%20getLayerObjectOfCurrentCanvasByName%28layerName%29%0A%09%09bottomLayer%20%3D%20cnvs%2Elayers%5BlayerCount-1%5D%0A%09%09if%20%28layer%20%21%3D%20bottomLayer%29%7B%0A%09%09%09layer%2EorderBelow%28bottomLayer%29%0A%09%09%7D%0A%09%7D%29%0A%7D%0A%0AreorderLayersOfCurrentCanvasByNameSort%28%29

NOTE: the window view may need to be refreshed in order to display the reordered canvases correctly.

Moving Objects to Other Layers

Currently, the scripting implementation in OmniGraffle does not offer commands for merging layers or for moving objects between layers. However, because references ot objects are based on the unique value of their id property, you can use the orderAbove() and orderBelow() methods from the Graphic class to move objects between the layers of a canvas.

For example, in the OmniGraffle document pictured below, there are three objects, each on its own layer. You can use the orderAbove() method to move them to the top layer while maintaining their stacking relationship.

layers-00
cnvs = document.windows[0].selection.canvas g0 = cnvs.layers[0].graphics[0] // diamond g1 = cnvs.layers[1].graphics[0] // circle g2 = cnvs.layers[2].graphics[0] // square g2.orderAbove(g0) // move square above diamond g1.orderAbove(g2) // move circle above square g0.orderAbove(g1) // move diamond above circle
layers-01

Alternatively, you can use the orderBelow() method to move the three objects to the bottom layer while maintaining their stacking relationship.

cnvs = document.windows[0].selection.canvas g0 = cnvs.layers[0].graphics[0] // diamond g1 = cnvs.layers[1].graphics[0] // circle g2 = cnvs.layers[2].graphics[0] // square g1.orderBelow(g2) // move circle below square g0.orderBelow(g2) // move diamond below sqaure g2.orderBelow(g1) // move square below circle
layers-02
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