Code generation

Sketch file processing

The SketchContainer component is responsible for listening to the input file emitted by SketchDropZone.

sketch-dropzone.component.ts

@Component({
  ...
  template: `
    ...
      <button color="primary" class="mat-headline" mat-button (click)="openFileBrowser()">BROWSE FILES</button>
      <sketch-select-demo-files [error]="selectedDemoFileError" (changed)="openSelectedDemoFile($event)"></sketch-select-demo-files>
    ...
  `
  ...
})
export class SketchDropzoneComponent implements OnInit, OnChanges {
  ...
  @Output() changed: EventEmitter<File> = new EventEmitter();  
  ...
  onFileChange(inputEvent: any | File) {
    let file;
    if (!inputEvent.target) {
      file = inputEvent as File;
    } else {
      const files = inputEvent.target.files || inputEvent.dataTransfer.files;
      if (!files.length) {
        return;
      }
      file = files[0];
    }

    if (file.name.endsWith('.sketch')) {
      this.changed.emit(file);
    }
  }
}

And then delegate the file to the SketchService for processing.

sketch-container.component.ts

@Component({
  ...
  template: `
    ...
      <sketch-dropzone (changed)="onFileSelected($event)"></sketch-dropzone>
    ...
  `
  ...
})
export class SketchContainerComponent implements OnInit {
  constructor(private service: SketchService, private store: Store) {}
  ...
  ngOnInit() {
    this.store.select(UiState.currentPage).subscribe(currentPage => {
      this.currentPage = currentPage;
    });
  }
  ...
  async onFileSelected(file: File) {
    try {
      this.data = await this.service.process(file);
      this.store.dispatch(new CurrentFile(this.data));
    } catch (e) {
      console.error(e);
    }
  }
  ...
}

sketch.service.ts

  ...
  async process(file: File) {
    this._data = await this.sketch2Json(file);
    this.parseColors(this._data.pages);
    return this._data;
  }
  ...

Sketch files anatomy

A Sketch (*.sketch) file an archive file with the following content:

.
+-- pages/
|   *.json
+-- previews/
|   +--preview.png
+-- meta.json
+-- user.json

The meta.json file is the entrypoint of the file that describes the sketch project. And referencing all pages files present under the pages folder by their hash in the "pagesAndArtboards" key.

{
  ...
  "pagesAndArtboards": {
    "*": {
      "name": "String",
      "artboards": {}
    }
  },
  ...
}

The page file include a root object defining the page information and a recursive tree of layers providing a bunch of 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": [{
      ...
    }]
  }]
  ...
}

Sketch Viewer

The previously parsed sketch file is then dispatched by the UIState (NGXS instance) and handled to by SketchContainer and TreeView components.

The SketchContainer and TreeView will use the same layer hierarchy as the sketch file to render the design in xlayers.app. The SketchContainer renders the design as a visual and on the TreeView renders the layers hierarchy, on the sidebar.

.
+-- SketchContainer
|   +-- TreeViwer
|       ...
|   +-- SketchPage
|      +-- SketchLayer
|          +-- SketchLayer
|              ...

Component generation

// TODO