Home

What is xLayers ?

In application development, especially in web development. We tend to create a graphic prototype to get an idea of what an application would look like before beginning real application. The objective of xLayer is to create a pipeline between the design prototype and the real world application by generating an framework agnostic component.

What is xLayers for ?

xLayer is designed to do the following:

• Focus on added value rather than writing framework specific code
• Make framework migrations easier

How do xLayers work ?

Every project critical features reside inside /src/app/editor/viewer/lib.

At the root of the library are several UI components, including public components: SketchDropZone, SketchSettingContainer, SketchEditorContainer, SketchContainer and SketchTreeView. Those imported by the editor component to compose the final view page.

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;
  }
  ...

A Sketch file type is a zip container composed of a recurrent folder structure as:

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

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

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

The page file include a root object defining the page information and a recursive tree of layer describing the disposition and other properties of a form in space hierarchically.

{
  "_class": "String",
  ...
  "frame": {
    "_class": "String",
    "constrainProportions": "Boolean",
    "height": "Number",
    "width": "Number",
    "x": "Number",
    "y": "Number"
  },
  ...
  "style": {
    "_class": "style",
    ...
  },
  "layers": {
    "_class": "group",
    ...
    "layers": {
      ...
    }
  }
  ...
}

Sketch displayer

The previously parsed sketch file is then dispatched by the UIState listened to by SketchContainer and TreeView components.

The SketchContainer and TreeView will use the same layer hierarchy as the sketch file to, on the SketchContainer side the layers will be displayed using form in a canvas and on the TreeView side as a folder structure in the sidebar.

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

Component generation

// TODO