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
Create a New Layer
Copy Script Run Script
01 cnvs = document .windows [0].selection .canvas
02 layer = cnvs .newLayer ()
03 layer .name = "NEW LAYER"
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
Add Layers and Shapes
Copy Script Run Script
01 cnvs = addCanvas ()
02 cnvs .canvasSizingMode = CanvasSizingMode .Fixed
03 cnvs .size = new Size (576, 576)
04
05 layer = cnvs .layers [0]
06 graphic = layer .addShape ('Rectangle' , new Rect (0, 0, 144, 144))
07 graphic .fillColor = Color .RGB (0.5, 0.5, 1, 1)
08
09 layer = cnvs .newLayer ()
10 graphic = layer .addShape ('Rectangle' , new Rect (144, 0, 144, 144))
11 graphic .fillColor = Color .RGB (1, 0.5, 0.5, 1)
12
13 layer = cnvs .newLayer ()
14 graphic = layer .addShape ('Rectangle' , new Rect (144, 144, 144, 144))
15 graphic .fillColor = Color .RGB (1, 0.5, 1, 1)
16
17 layer = cnvs .newLayer ()
18 graphic = layer .addShape ('Rectangle' , new Rect (0, 144, 144, 144))
19 graphic .fillColor = Color .RGB (0.5, 1, 0.5, 1)
Instance Properties
Here are the properties of a layer object:
graphics (Array of Graphics ) • All graphics in this layer.
locked (boolean) • Whether this layer is locked, effectively locking all graphics contained in the layer.
name (string) • Name of this layer.
prints (boolean) • Whether graphics on this layer should be visible when this canvas is printed.
visible (boolean) • Whether graphics on this layer are visible.
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})
Getting a Property for All Layers of Current Canvas
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 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})
Get Layer Names of Current Canvas
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 layerNames = cnvs .layers .map (function (layer ){return layer .name })
And here’s a script that will hide all layers of the current canvas that do not contain at least one selected graphic:
var graphics = document.windows[0].selection.graphics
if (graphics.length > 0){
cnvs = document.windows[0].selection.canvas
cnvs.layers.forEach(function(layer){layer.visible = false})
graphics.forEach(function(graphic){graphic.layer.visible = true})
}
omnigraffle://localhost/omnijs-run?script=var%20graphics%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%0Aif%20%28graphics%2Elength%20%3E%200%29%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09cnvs%2Elayers%2EforEach%28function%28layer%29%7Blayer%2Evisible%20%3D%20false%7D%29%0A%09graphics%2EforEach%28function%28graphic%29%7Bgraphic%2Elayer%2Evisible%20%3D%20true%7D%29%0A%7D
Show Only Layers with Selected Graphics
Copy Script Run Script Install Plug-In
01 var graphics = document .windows [0].selection .graphics
02 if (graphics .length > 0){
03 cnvs = document .windows [0].selection .canvas
04 cnvs .layers .forEach (function (layer ){layer .visible = false })
05 graphics .forEach (function (graphic ){graphic .layer .visible = true })
06 }
And here’s a script for making sure that all layers of the current canvas are visible:
cnvs = document.windows[0].selection.canvas
cnvs.layers.forEach(function(aLayer){
aLayer.visible = true
})
omnigraffle://localhost/omnijs-run?script=cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Acnvs%2Elayers%2EforEach%28function%28aLayer%29%7B%0A%09aLayer%2Evisible%20%3D%20true%0A%7D%29
Show All Layers of Current Canvas
Copy Script Run Script Install Plug-In
01 cnvs = document .windows [0].selection .canvas
02 cnvs .layers .forEach (function (aLayer ){
03 aLayer .visible = true
04 })
Your browser does not support the video tag.
PLAY
PAUSE
BACK
REWIND
Instance Functions
The instance functions for a layer object include the ability to reorder or delete layers:
orderAbove(Layer) • Reorder this layer so that it is just above the given layer.
orderBelow(Layer) • Reorder this layer so that it is just below the given layer.
remove() • Remove this layer from its canvas, deleting it.
addShape(shapeNameString, boundsRect) (Shape ) • Create a new graphic of a given shape and place it on the layer.
newShape() (Shape ) • Create a zero-sized rectangle (presumably to be modified further) and place it on the layer.
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
})
Perform Operation with Each Layer
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 cnvs .layers .forEach (function (layer ){
03
04 })
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}
})
Show Hidden Layers of the Current Canvas
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 cnvs .layers .forEach (function (layer ){
03 if (layer .visible == false ){layer .visible = true }
04 })
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()}
})
Delete Hidden Layers of the Current Canvas
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 cnvs .layers .forEach (function (layer ){
03 if (layer .visible == false ){layer .remove ()}
04 })
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)
}
}
Getting a Layer by Name
Copy Script
01 function getLayerObjectOfCurrentCanvasByName (layerName ){
02 var targetLayer
03 cnvs = document .windows [0].selection .canvas
04 cnvs .layers .forEach (function (layer ){
05 if (layer .name .localeCompare (layerName ) == 0){targetLayer = layer }
06 })
07 if (targetLayer instanceof Layer ){
08 return targetLayer
09 } else {
10 errorString = "There is no layer named: " + layerName
11 new Alert ('MISSING OBJECT' , errorString ).show (function (result ){})
12 throw new Error (errorString )
13 }
14 }
The previous function can be used by the following function that reorders the layers of the current canvas by name sorted alphabetically.
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
Reorder Layers by Name
Copy Script Run Script
01 function reorderLayersOfCurrentCanvasByNameSort (){
02 var cnvs = document .windows [0].selection .canvas
03 layerNames = cnvs .layers .map (function (layer ){return layer .name })
04 layerNames = layerNames .sort ()
05 layerCount = cnvs .layers .length
06 layerNames .forEach (function (layerName ){
07 layer = getLayerObjectOfCurrentCanvasByName (layerName )
08 bottomLayer = cnvs .layers [layerCount -1]
09 if (layer != bottomLayer ){
10 layer .orderBelow (bottomLayer )
11 }
12 })
13 }
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.
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
Moving Objects Between Layers: orderAbove()
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 g0 = cnvs .layers [0].graphics [0]
03 g1 = cnvs .layers [1].graphics [0]
04 g2 = cnvs .layers [2].graphics [0]
05 g2 .orderAbove (g0)
06 g1 .orderAbove (g2)
07 g0 .orderAbove (g1)
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
Moving Objects Between Layers: orderBelow()
Copy Script
01 cnvs = document .windows [0].selection .canvas
02 g0 = cnvs .layers [0].graphics [0]
03 g1 = cnvs .layers [1].graphics [0]
04 g2 = cnvs .layers [2].graphics [0]
05 g1 .orderBelow (g2 )
06 g0 .orderBelow (g2 )
07 g2 .orderBelow (g1 )
TOPICS
Overview
OmniGraffle (API)
Stencil
Document
Canvas
Layer
Graphic
Image
Text
App-to-App
Action Template
OmniOutliner
OmniPlan
OmniFocus
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
Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. OMNI-AUTOMATION.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. OMNI-AUTOMATION.COM provides this only as a convenience to our users. OMNI-AUTOMATION.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and OMNI-AUTOMATION.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from OMNI-AUTOMATION.COM and that OMNI-AUTOMATION.COM has no control over the content on that website. Please contact the vendor for additional information.