-
-
Notifications
You must be signed in to change notification settings - Fork 85
Sketch AST anatomy
At the root of the /apps/xlayers/src/app/editor/preview/viewer we can find several UI components of the preview and the core project reside inside /libs which are located different types of Sketch AST parsers and optimisers.
A Sketch file (*.sketch) is a compressed archive with the following content:
.
+-- pages/
| *.json
+-- previews/
| +--preview.png
+-- meta.json
+-- user.json
The meta.json
file describes the sketch project:
{
"commit" : "ebe35af5ba78090fd351ed427ecaafac003e0331",
"pagesAndArtboards" : {
"DF58F6C1-4219-4E6B-86D1-3F805B49AD2E" : {
"name" : "Page 1",
"artboards" : {
}
}
},
"version" : 121,
"fonts" : [
"Roboto-Regular",
"Roboto-Medium"
],
"compatibilityVersion" : 99,
"app" : "com.bohemiancoding.sketch3",
"autosaved" : 0,
"variant" : "NONAPPSTORE",
"created" : {
"commit" : "ebe35af5ba78090fd351ed427ecaafac003e0331",
"appVersion" : "59.1",
"build" : 86144,
"app" : "com.bohemiancoding.sketch3",
"compatibilityVersion" : 99,
"version" : 121,
"variant" : "NONAPPSTORE"
},
"saveHistory" : [
"NONAPPSTORE.86144"
],
"appVersion" : "59.1",
"build" : 86144
}
This file also references all pages by their hash under the "pagesAndArtboards" property:
{
// ...
"pagesAndArtboards": {
"<hash>": {
"name": "<string>",
"artboards": {}
}
},
// ...
}
The page file include a root object defining the page information and a recursive tree of layers providing data and properties (position, styles, dimensions...) about the actual design produced by SketchApp:
{
"_class": "String",
// ...
"frame": {
"_class": "String",
"constrainProportions": "Boolean",
"height": "Number",
"width": "Number",
"x": "Number",
"y": "Number"
},
// ...
"style": {
"_class": "style",
// ...
},
"layers": [{
"_class": "group",
// ...
"layers": [{
// ...
}]
}]
// ...
}
In SketchApp, all elements are of type shape
which contains a set of points describing each point position and curve parameters that will be described later.
{
// ...
"points": [
// ...
{
"_class": "curvePoint",
// ...
"point": "{Number, Number}"
},
// ...
]
// ...
}
Each cuvePoint
have at least the coordinate of the current point represented as {x, y}
in the point field. Every point will be linked sequentially by these point in order they are declared in the points array.
In some cases, the current point can be the beginning; the end of a Bezier curve or between several curves (polybezier).
To know if the point is part of the a curve we have the fields hasCurve(From|To)
which are simple Boolean.
And the fields curve(From|To)
applying the respective transform on the control points of the curve.
{
// ...
"points": [
// ...
{
"_class": "curvePoint",
"curveFrom": "{Number, Number}",
"curveMode": "Number",
"curveTo": "{Number, Number}"
// ...
},
// ...
]
// ...
}