omniJS – Experimenting with Graphics ⇄ JSON ⇄ Styles

Automation OmniGraffle Automation
1

Experimenting here with a JSON representation of OmniGraffle objects – here is a Keyboard Maestro palette of JXA macros which evaluate functions in the omniJS context, and use a draft jsonTools omniJS plugin for omniGraffle:

A hello world example – the rectangle on the left was copied as JSON (using omniJS), and then pasted back from the JSON representation as the copy on the right (JSON shown below):

{
  "objects": [
    {
      "type": "Shape",
      "geometry": {
        "x": 121.88976488545188,
        "y": 58.11023674771542,
        "width": 89.29133939283099,
        "height": 89.29133939283099
      },
      "magnets": [
        {
          "x": 0,
          "y": 1
        },
        {
          "x": 0,
          "y": -1
        }
      ],
      "text": "Hello world !",
      "styleName": "shapeStyleA"
    }
  ],
  "styles": {
    "shapeStyleA": {
      "autosizing": "Clip",
      "cornerRadius": 5,
      "fillType": "Solid",
      "fontName": "Helvetica",
      "imageSizing": "Manual",
      "strokeCap": "Round",
      "strokeColor": null,
      "strokeJoin": "Round",
      "strokePattern": "Solid",
      "strokeType": null,
      "textHorizontalAlignment": "Center",
      "textSize": 12,
      "textVerticalPadding": 0,
      "textVerticalPlacement": "Middle",
      "type": "Shape"
    }
  }
}
1 Like
2

A complete omniJS JSON transcription of the shape currently looks like this:

(the version above is shorter because we only need the non-default writable values to recreate a shape, line, or group)

[
  {
    "id": 9,
    "type": "Shape",
    "actionURL": null,
    "alignsEdgesToGrid": true,
    "allowsConnections": true,
    "automationAction": [],
    "autosizing": "Clip",
    "blendColor": null,
    "blendFraction": 0,
    "connectedLines": [],
    "cornerRadius": 5,
    "fillColor": {
      "r": 1,
      "g": 1,
      "b": 1,
      "a": 1
    },
    "fillType": "Solid",
    "flippedHorizontally": false,
    "flippedVertically": false,
    "fontName": "Helvetica",
    "geometry": {
      "x": 55.275591052704904,
      "y": 55.275591052704904,
      "width": 89.29133939283099,
      "height": 89.29133939283099
    },
    "gradientAngle": 90,
    "gradientCenter": {
      "x": 0,
      "y": 0
    },
    "gradientColor": {
      "r": 0.20000000298023224,
      "g": 0.20000000298023224,
      "b": 0.20000000298023224,
      "a": 1
    },
    "image": null,
    "imageOffset": {
      "x": 0,
      "y": 0
    },
    "imageOpacity": 0,
    "imagePage": 0,
    "imageSizing": "Manual",
    "incomingLines": [],
    "layer": "Layer 1",
    "locked": false,
    "magnets": [
      {
        "x": 0,
        "y": 1
      },
      {
        "x": 0,
        "y": -1
      }
    ],
    "name": null,
    "notes": "",
    "outgoingLines": [],
    "plasticCurve": null,
    "plasticHighlightAngle": null,
    "rotation": 0,
    "shadowColor": {
      "r": 0,
      "g": 0,
      "b": 0,
      "a": 0.5
    },
    "shadowFuzziness": 3,
    "shadowVector": {
      "x": 0,
      "y": 2
    },
    "shape": "Rectangle",
    "shapeControlPoints": [
      {
        "x": 60.275591052704904,
        "y": 55.275591052704904
      },
      {
        "x": 60.275591052704904,
        "y": 55.275591052704904
      },
      {
        "x": 139.5669304455359,
        "y": 55.275591052704904
      },
      {
        "x": 139.5669304455359,
        "y": 55.275591052704904
      },
      {
        "x": 142.32835419468987,
        "y": 55.275591052704904
      },
      {
        "x": 144.5669304455359,
        "y": 57.51416730355094
      },
      {
        "x": 144.5669304455359,
        "y": 60.275591052704904
      },
      {
        "x": 144.5669304455359,
        "y": 60.275591052704904
      },
      {
        "x": 144.5669304455359,
        "y": 139.5669304455359
      },
      {
        "x": 144.5669304455359,
        "y": 139.5669304455359
      },
      {
        "x": 144.5669304455359,
        "y": 142.32835419468987
      },
      {
        "x": 142.32835419468987,
        "y": 144.5669304455359
      },
      {
        "x": 139.5669304455359,
        "y": 144.5669304455359
      },
      {
        "x": 139.5669304455359,
        "y": 144.5669304455359
      },
      {
        "x": 60.275591052704904,
        "y": 144.5669304455359
      },
      {
        "x": 60.275591052704904,
        "y": 144.5669304455359
      },
      {
        "x": 57.51416730355094,
        "y": 144.5669304455359
      },
      {
        "x": 55.275591052704904,
        "y": 142.32835419468987
      },
      {
        "x": 55.275591052704904,
        "y": 139.5669304455359
      },
      {
        "x": 55.275591052704904,
        "y": 139.5669304455359
      },
      {
        "x": 55.27559105270492,
        "y": 60.275591052704904
      },
      {
        "x": 55.27559105270492,
        "y": 60.275591052704904
      },
      {
        "x": 55.27559105270492,
        "y": 57.51416730355094
      },
      {
        "x": 57.51416730355094,
        "y": 55.275591052704904
      },
      {
        "x": 60.27559105270492,
        "y": 55.275591052704904
      },
      {
        "x": 60.27559105270492,
        "y": 55.275591052704904
      },
      {
        "x": 60.275591052704904,
        "y": 55.275591052704904
      }
    ],
    "shapeVertices": [
      {
        "x": 60.275591052704904,
        "y": 55.275591052704904
      },
      {
        "x": 139.5669304455359,
        "y": 55.275591052704904
      },
      {
        "x": 144.5669304455359,
        "y": 60.275591052704904
      },
      {
        "x": 144.5669304455359,
        "y": 139.5669304455359
      },
      {
        "x": 139.5669304455359,
        "y": 144.5669304455359
      },
      {
        "x": 60.275591052704904,
        "y": 144.5669304455359
      },
      {
        "x": 55.275591052704904,
        "y": 139.5669304455359
      },
      {
        "x": 55.27559105270492,
        "y": 60.275591052704904
      },
      {
        "x": 60.27559105270492,
        "y": 55.275591052704904
      }
    ],
    "strokeCap": "Round",
    "strokeColor": null,
    "strokeJoin": "Round",
    "strokePattern": "Solid",
    "strokeThickness": 1,
    "strokeType": null,
    "text": "Hello world !",
    "textColor": {
      "r": 0,
      "g": 0,
      "b": 0,
      "a": 1
    },
    "textGeometry": {
      "x": 61.90954199912039,
      "y": 92.92126074912039,
      "width": 76.0234375,
      "height": 14
    },
    "textHorizontalAlignment": "Center",
    "textHorizontalPadding": 5,
    "textRotation": 0,
    "textRotationIsRelative": true,
    "textSize": 12,
    "textUnitRect": {
      "x": 0,
      "y": 0,
      "width": 1,
      "height": 1
    },
    "textVerticalPadding": 0,
    "textVerticalPlacement": "Middle",
    "textWraps": true,
    "tripleBlend": false,
    "userData": {}
  }
]