Graphic Properties
It is a basic tenet of all object-model scripting languages that scriptable objects have properties that define the way they look and interact in their parent containers. Since the Graphic class has subclasses, the properties of the Graphic class are inherited by all graphic items, including shapes, solids, and lines. Here’s a list of the properties of a graphic object in OmniGraffle:
| StrokeColor: Line | ||
| 01 | line = document.windows[0].selection.lines[0] | |
| 02 | line.strokeColor = Color.red | |
| StrokeColor: Graphic | ||
| 01 | graphic = document.windows[0].selection.graphics[0] | |
| 02 | graphic.strokeColor = Color.blue | |
actionURL (URL or nil) • URL to be opened when this graphic is clicked/tapped with the action tool or in presentation mode.
alignsEdgesToGrid (boolean) • Align edges or center to the grid.
allowsConnections (boolean) • Allow line connections to this graphic.
automationAction (Array of Strings) • An array of two strings, the first being the plugin id and the second being the action id for an automation action. This automation action is performed when this graphic is clicked/tapped with the action tool or in presentation mode. NOTE: solitary (single-file) actions use the action identifier for both parameters.
connectedLines (array of Lines) • An array of all Line graphics connected to this graphic.
cornerRadius (Number) • Corner radius of the stroke.
flippedHorizontally (boolean) • Is this graphic flipped horizontally?
flippedVertically (boolean) • Is this graphic flipped vertically?
geometry (Rect) • The bounds rectangle of this graphic.
id (Number r/o) • The unique identifier (within this document) of this graphic.
incomingLines (array of Lines r/o) • A subset of the connected lines: those lines whose head are connected to this graphic.
layer (Layer) • The layer this graphic is on.
locked (boolean) • Whether this graphic is locked.
name (String or nil) • The name of this graphic, if any. The name appears (and can be edited) in the sidebar. A graphic without a name is identified in the sidebar by its type or shape (e.g. “Rectangle” or “Line”).
notes (String) • Notes attached to this graphic.
outgoingLines (array of Lines r/o) • A subset of the connected lines: those lines whose tail are connected to this graphic.
plasticCurve (Number) • If the stroke style is plastic, this is the depth of curvature.
plasticHighlightAngle (Number) • If the stroke style is plastic, this is the highlight angle of the “light” shining on the plastic.
shadowColor (Color of nil) • Color of the shadow.
shadowFuzziness (Number) • Fuzziness of the shadow.
shadowVector (Point) • Direction and length of the shadow.
shape (String) • Inherited from the solid shape class, this property represents the type of shape of the graphic. It applies only to graphics that are solids, not lines. Here are the standard string values: AndGate, Bolt, Circle, Cloud, Cross, Cube, Cylinder, Delete, Diamond, DisplayShape, DocumentShape, DoubleHorizontalArrow, Heart, Hexagon, HorizontalArrow, HorizontalBrackets, HorizontalTriangle, House, Lightning Bolt, NoteShape, Octagon, OrGate, ParallelLines, Parallelogram, Patch, Pentagon, Puzzle Piece, QuarterArc, QuarterCircle, Rectangle, RightTriangle, RoundRect, RoundedStack, SemiCircle, SingleLine, SlopedRect, Speech Bubble, Star, Sticky, Subprocess, Think Bubble, Trapazoid, VerticalArrow, VerticalBrackets, VerticalParallelLines, VerticalTriangle, iOSAppIcon
strokeCap (LineCap) • Type of end cap on the stroke.
strokeColor (Color of nil) • Color of the stroke.
strokeJoin (LineJoin) • Type of join on segments of the stroke.
strokePattern (StrokeDash) • Dash pattern of the stroke.
strokeThickness (Number) • Thickness of the stroke in points.
strokeType (StrokeType) • Type of stroke (the outline around the graphic).
userData (Object record) • An object record of keys/value pairs of user data. {"keyName":"keyValue", etc.}
Opacity
The opacity of a graphic is controlled by the alpha value of its fill or stroke color (see Color class). For example, this script will generate an instance of the Color class whose color is red with 50% transparency:
| Alpha Channel Opacity | ||
| 01 | Color.RGB(1, 0, 0, 0.5) | |
| 02 | //--> [object Color] {alpha: 0.5, blue: 0, brightness: 1, colorSpace: [object ColorSpace: RGB], green: 0, hue: 1, red: 1, saturation: 1, white: 0.3} | |
| 03 | ||
Here is an Omni Automation plug-in for OmniGraffle that will change the opacity of the selected items (shapes, lines, and groups) to the percentage value provided by the plug-in user:
| Set Opacity of Selected Items | ||
| 01 | /*{ | |
| 02 | "type": "action", | |
| 03 | "targets": ["omnigraffle"], | |
| 04 | "author": "Otto Automator", | |
| 05 | "identifier": "com.omni-automation.og.set-opacity-of-selection", | |
| 06 | "version": "1.0", | |
| 07 | "description": "This action will set the opacity of the selected graphics to the indicated percentage.", | |
| 08 | "label": "Set Opacity", | |
| 09 | "shortLabel": "Opacity" | |
| 10 | }*/ | |
| 11 | (() => { | |
| 12 | ||
| 13 | function processStroke(item,opacity){ | |
| 14 | var c = item.strokeColor | |
| 15 | var newColor = Color.RGB(c.red, c.green, c.blue, opacity) | |
| 16 | item.strokeColor = newColor | |
| 17 | } | |
| 18 | ||
| 19 | function processFill(item,opacity){ | |
| 20 | var c = item.fillColor | |
| 21 | var newColor = Color.RGB(c.red, c.green, c.blue, opacity) | |
| 22 | item.fillColor = newColor | |
| 23 | } | |
| 24 | ||
| 25 | function processGroup(group,opacity,shouldIncludeStroke){ | |
| 26 | group.graphics.forEach(item => { | |
| 27 | if(item instanceof Shape){ | |
| 28 | processFill(item,opacity) | |
| 29 | if (shouldIncludeStroke){processStroke(item,opacity)} | |
| 30 | } | |
| 31 | if (item instanceof Line){ | |
| 32 | processStroke(item,opacity) | |
| 33 | } | |
| 34 | if (item instanceof Group){ | |
| 35 | processGroup(item,opacity,shouldIncludeStroke) | |
| 36 | } | |
| 37 | }) | |
| 38 | } | |
| 39 | ||
| 40 | var action = new PlugIn.Action(function(selection, sender){ | |
| 41 | // action code | |
| 42 | // selection options: canvas, document, graphics, lines, solids, view | |
| 43 | ||
| 44 | var textInputField = new Form.Field.String( | |
| 45 | "textInput", | |
| 46 | null, | |
| 47 | "50" | |
| 48 | ) | |
| 49 | ||
| 50 | var checkSwitchField = new Form.Field.Checkbox( | |
| 51 | "shouldIncludeStroke", | |
| 52 | "Apply opacity setting to shape’s stroke", | |
| 53 | true | |
| 54 | ) | |
| 55 | ||
| 56 | var inputForm = new Form() | |
| 57 | inputForm.addField(textInputField) | |
| 58 | inputForm.addField(checkSwitchField) | |
| 59 | var formPrompt = "Enter an opacity value (0-100):" | |
| 60 | var buttonTitle = "Continue" | |
| 61 | var formPromise = inputForm.show(formPrompt,buttonTitle) | |
| 62 | ||
| 63 | inputForm.validate = function(formObject){ | |
| 64 | inputText = formObject.values['textInput'] | |
| 65 | if (!inputText) {return false} | |
| 66 | var isnum = /^[0-9]+$/i.test(inputText) | |
| 67 | if (isnum){ | |
| 68 | var opacityValue = Number(inputText) | |
| 69 | return ((opacityValue >= 0 && opacityValue <= 100)? true:false) | |
| 70 | } | |
| 71 | return false | |
| 72 | } | |
| 73 | ||
| 74 | formPromise.then(function(formObject){ | |
| 75 | try { | |
| 76 | var textValue = formObject.values['textInput'] | |
| 77 | console.log('textValue: ',textValue) | |
| 78 | var shouldIncludeStroke = formObject.values['shouldIncludeStroke'] | |
| 79 | var opacityValue = Number(inputText) * .01 | |
| 80 | ||
| 81 | selection.graphics.forEach(item => { | |
| 82 | if (item instanceof Shape){ | |
| 83 | processFill(item,opacityValue) | |
| 84 | if (shouldIncludeStroke){processStroke(item,opacityValue)} | |
| 85 | } | |
| 86 | if (item instanceof Line){ | |
| 87 | processStroke(item,opacityValue) | |
| 88 | } | |
| 89 | if (item instanceof Group){ | |
| 90 | processGroup(item,opacityValue,shouldIncludeStroke) | |
| 91 | } | |
| 92 | }) | |
| 93 | } | |
| 94 | catch(err){ | |
| 95 | console.error(err.message) | |
| 96 | new Alert("ERROR",err.message).show() | |
| 97 | } | |
| 98 | }) | |
| 99 | ||
| 100 | formPromise.catch(function(err){ | |
| 101 | console.error("form cancelled", err.message) | |
| 102 | }) | |
| 103 | ||
| 104 | }); | |
| 105 | ||
| 106 | action.validate = function(selection, sender){ | |
| 107 | // validation code | |
| 108 | // selection options: canvas, document, graphics, lines, solids, view | |
| 109 | return (selection.graphics.length > 0) | |
| 110 | }; | |
| 111 | ||
| 112 | return action; | |
| 113 | })(); | |
LineCap Properties
The LineCap properties are the value for the strokeCap property of the Graphic class:
| LineCap | ||
| 01 | graphic = document.windows[0].selection.graphics[0] | |
| 02 | graphic.strokeCap = LineCap.Square | |
Butt (LineCap 0) • The line has a flat end cap, exactly at the end point of the line.
Round (LineCap 1) • The line has a round end cap, with the center at the end point of the line, and radius of half its width.
Square (LineCap 2) • The line has a flat end cap, extending half the line width past the end point.
LineJoin Properties
The LineJoin properties are the value for the strokeJoin property of the Graphic class:
| LineJoin | ||
| 01 | graphic = document.windows[0].selection.graphics[0] | |
| 02 | graphic.strokeJoin = LineJoin.Bevel | |
Bevel (LineJoin 2) • Line segments are joined with a squared-off end.
Miter (LineJoin 0) • Line segments are joined with a sharp (angled) corner.
Round (LineJoin 1) • Line segments are joined with a rounded end.
StrokeDash Properties
The StrokeDash properties are the value for the strokePattern property of the Graphic class:
| StrokeDash: Line | ||
| 01 | line = document.windows[0].selection.lines[0] | |
| 02 | line.strokePattern = StrokeDash.Dash10on3off2on3off | |
| StrokeDash: Graphic | ||
| 01 | graphic = document.windows[0].selection.graphics[0] | |
| 02 | graphic.strokePattern = StrokeDash.Dash4on3off1on3off | |
Dash10on3off2on3off (StrokeDash 15)
Dash10on3off2on3off2on3off (StrokeDash 16)
Dash16on9off (StrokeDash 17)
Dash16on9off16on9off1on9off (StrokeDash 21)
Dash16on9off1on9off (StrokeDash 19)
Dash16on9off1on9off1on9off (StrokeDash 20)
Dash1on3off (StrokeDash 11)
Dash1on4off (StrokeDash 2)
Dash1on5off (StrokeDash 5)
Dash1on9off (StrokeDash 18)
Dash20on5off4on5off (StrokeDash 9)
Dash20on5off4on5off4on5off (StrokeDash 10)
Dash2on2off (StrokeDash 24)
Dash40on9off8on9off (StrokeDash 22)
Dash40on9off8on9off8on9off (StrokeDash 23)
Dash4on3off1on3off (StrokeDash 12)
Dash4on3off1on3off1on3off (StrokeDash 13)
Dash4on3off4on3off1on3off (StrokeDash 14)
Dash4on4off (StrokeDash 1)
Dash4on9off1on5off (StrokeDash 6)
Dash4on9off1on5off1on5off (StrokeDash 7)
Dash8on4off1on4off (StrokeDash 3)
Dash8on5off (StrokeDash 4)
Dash8on5off8on5off1on5off (StrokeDash 8)
Solid (StrokeDash 0)
StrokeType Properties
The StrokeType properties are the value for the strokeType property (note lowercase s) of the Graphic class:
| StrokeType | ||
| 01 | graphic = document.windows[0].selection.graphics[0] | |
| 02 | graphic.strokeType = StrokeType.Double | |
Double (StrokeType 2) • Double
Freehand (StrokeType 3) • Freehand
Inner (StrokeType 5) • Inner
Outer (StrokeType 6) • Outer
Plastic (StrokeType 4) • Plastic
Single (StrokeType 1) • Single
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.
DISCLAIMER