Skip to content

Commit

Permalink
fix: remove console logs
Browse files Browse the repository at this point in the history 
Fixes #118
  • Loading branch information
@manekinekko
manekinekko committed Dec 21, 2018
1 parent 4b731bb commit ab8fa22
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 57 deletions.
85 changes: 56 additions & 29 deletions src/app/editor/viewer/lib/parsers/sketch-style-parser.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ export class SketchStyleParserService {

case 'symbolMaster':
this.setStyle(obj, root, {
'background-color': this.parseColors((obj as SketchMSSymbolMaster).backgroundColor).rgba
'background-color': this.parseColors(
(obj as SketchMSSymbolMaster).backgroundColor
).rgba
});
break;

Expand Down Expand Up @@ -77,13 +79,13 @@ export class SketchStyleParserService {

if ((obj as SketchMSLayer).frame) {
this.setStyle(obj, root, {
'display': 'block',
'position': 'absolute',
'left': `${obj.frame.x}px`,
'top': `${obj.frame.y}px`,
'width': `${obj.frame.width}px`,
'height': `${obj.frame.height}px`,
'visibility': obj.isVisible ? 'visible' : 'hidden'
display: 'block',
position: 'absolute',
left: `${obj.frame.x}px`,
top: `${obj.frame.y}px`,
width: `${obj.frame.width}px`,
height: `${obj.frame.height}px`,
visibility: obj.isVisible ? 'visible' : 'hidden'
});
}
}
Expand All @@ -107,14 +109,22 @@ export class SketchStyleParserService {
* @param root The root layer
*/
parseTextFont(obj: SketchMSLayer, root: any) {
const MSAttributedStringFontAttribute = obj.style.textStyle.encodedAttributes.MSAttributedStringFontAttribute;
const MSAttributedStringFontAttribute =
obj.style.textStyle.encodedAttributes.MSAttributedStringFontAttribute;
if (MSAttributedStringFontAttribute.hasOwnProperty('_archive')) {
const parsedMSAttributedStringFontAttribute = this.binaryPlistParser.parse64Content(MSAttributedStringFontAttribute._archive);
const parsedMSAttributedStringFontAttribute = this.binaryPlistParser.parse64Content(
MSAttributedStringFontAttribute._archive
);
(root.style.textStyle.encodedAttributes
.MSAttributedStringFontAttribute as any)._transformed = parsedMSAttributedStringFontAttribute;
} else if (MSAttributedStringFontAttribute.hasOwnProperty('_class') && MSAttributedStringFontAttribute._class === 'fontDescriptor') {
} else if (
MSAttributedStringFontAttribute.hasOwnProperty('_class') &&
MSAttributedStringFontAttribute._class === 'fontDescriptor'
) {
this.setStyle(obj, root, {
'font-family': `${MSAttributedStringFontAttribute.attributes.name}, 'Roboto', sans-serif`,
'font-family': `${
MSAttributedStringFontAttribute.attributes.name
}, 'Roboto', sans-serif`,
'font-size': `${MSAttributedStringFontAttribute.attributes.size}px`
});
}
Expand All @@ -129,9 +139,13 @@ export class SketchStyleParserService {
parseAttributeString(obj: SketchMSLayer, root: any) {
const attributedString = obj.attributedString;
if (attributedString.hasOwnProperty('archivedAttributedString')) {
const archivedAttributedString = attributedString.archivedAttributedString._archive as string;
const parsedArchivedAttributedString = this.binaryPlistParser.parse64Content(archivedAttributedString);
(root.attributedString.archivedAttributedString as any)._transformed = parsedArchivedAttributedString;
const archivedAttributedString = attributedString.archivedAttributedString
._archive as string;
const parsedArchivedAttributedString = this.binaryPlistParser.parse64Content(
archivedAttributedString
);
(root.attributedString
.archivedAttributedString as any)._transformed = parsedArchivedAttributedString;
}
}

Expand All @@ -144,9 +158,13 @@ export class SketchStyleParserService {
parseParagraphStyle(obj: SketchMSLayer, root: any) {
const encodedAttributes = obj.style.textStyle.encodedAttributes;
if (encodedAttributes.hasOwnProperty('NSParagraphStyle')) {
const NSParagraphStyle = root.style.textStyle.encodedAttributes.NSParagraphStyle._archive as string;
const parsedNSParagraphStyle = this.binaryPlistParser.parse64Content(NSParagraphStyle);
(root.style.textStyle.encodedAttributes.NSParagraphStyle as any)._transformed = parsedNSParagraphStyle;
const NSParagraphStyle = root.style.textStyle.encodedAttributes
.NSParagraphStyle._archive as string;
const parsedNSParagraphStyle = this.binaryPlistParser.parse64Content(
NSParagraphStyle
);
(root.style.textStyle.encodedAttributes
.NSParagraphStyle as any)._transformed = parsedNSParagraphStyle;
}
}

Expand All @@ -161,12 +179,15 @@ export class SketchStyleParserService {
const encodedAttributes = obj.style.textStyle.encodedAttributes;
if (encodedAttributes.hasOwnProperty('MSAttributedStringColorAttribute')) {
this.setStyle(obj, root, {
color: this.parseColors(encodedAttributes.MSAttributedStringColorAttribute).rgba
color: this.parseColors(
encodedAttributes.MSAttributedStringColorAttribute
).rgba
});
} else if (encodedAttributes.hasOwnProperty('NSColor')) {
const NSColor = encodedAttributes.NSColor._archive as string;
const parsedNSColor = this.binaryPlistParser.parse64Content(NSColor);
(root.style.textStyle.encodedAttributes.NSColor as any)._transformed = parsedNSColor;
(root.style.textStyle.encodedAttributes
.NSColor as any)._transformed = parsedNSColor;
} else {
this.setStyle(obj, root, {
color: 'black'
Expand Down Expand Up @@ -223,15 +244,12 @@ export class SketchStyleParserService {
// we only support one fill: take the first one!
// ignore the other fills
const firstFill = fills[0];
console.log(`firstFill`, firstFill);

this.setStyle(obj, root, {
'background-color': `${this.parseColors(firstFill.color).rgba}`
});

if (firstFill.gradient) {
console.log(`firstFill.gradient`, firstFill.gradient);

const fillsStyles: string[] = [];
firstFill.gradient.stops.forEach(stop => {
let fill = `${this.parseColors(stop.color).rgba}`;
Expand All @@ -241,8 +259,6 @@ export class SketchStyleParserService {
fillsStyles.push(fill);
});

console.log(`fillsStyles`, fillsStyles);

if (fillsStyles.length > 0) {
// apply gradient, if multiple fills
// default angle is 90deg
Expand All @@ -262,14 +278,20 @@ export class SketchStyleParserService {
innerShadows.forEach(innerShadow => {
const color = this.parseColors(innerShadow.color);
shadowsStyles.push(
`${innerShadow.offsetX}px ${innerShadow.offsetY}px ${innerShadow.blurRadius}px ${innerShadow.spread}px ${color.rgba} inset`
`${innerShadow.offsetX}px ${innerShadow.offsetY}px ${
innerShadow.blurRadius
}px ${innerShadow.spread}px ${color.rgba} inset`
);
});
}
if (shadows) {
shadows.forEach(shadow => {
const color = this.parseColors(shadow.color);
shadowsStyles.push(`${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.spread}px ${color.rgba}`);
shadowsStyles.push(
`${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${
shadow.spread
}px ${color.rgba}`
);
});
}
if (innerShadows.length > 0 || shadows.length > 0) {
Expand All @@ -280,7 +302,6 @@ export class SketchStyleParserService {
}

parseColors(color: SketchMSColor | undefined) {

if (typeof color === 'undefined') {
return {
hex: '#00FFFFFF',
Expand Down Expand Up @@ -336,7 +357,13 @@ export class SketchStyleParserService {
return (
'#' +
((256 + this.rgba(r)).toString(16).substr(1) +
(((1 << 24) + (this.rgba(g) << 16)) | (this.rgba(b) << 8) | this.rgba(a)).toString(16).substr(1))
(
((1 << 24) + (this.rgba(g) << 16)) |
(this.rgba(b) << 8) |
this.rgba(a)
)
.toString(16)
.substr(1))
);
}
}
82 changes: 54 additions & 28 deletions src/app/editor/viewer/lib/sketch-dropzone.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,54 @@
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import {
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core';
import { SketchService } from './sketch.service';

@Component({
selector: 'sketch-dropzone',
template: `
<mat-icon class="mode__mini"
*ngIf="isModeMini else large"
(drop)="onFileDrop($event)"
(dragover)="dragOverHandler($event)"
(click)="openFileBrowser()">cloud_upload</mat-icon>
<ng-template #large>
<section (drop)="onFileDrop($event)" (dragover)="dragOverHandler($event)">
<mat-icon class="mode__large">cloud_upload</mat-icon>
<h2 class="mat-headline">Drag&Drop your Sketch file here</h2>
<span class="mat-subheading-1">OR</span>
<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>
</section>
</ng-template>
<input #fileBrowserRef type="file" (input)="onFileChange($event)" accept=".sketch">
<mat-icon
class="mode__mini"
*ngIf="isModeMini; else: large"
(drop)="onFileDrop($event)"
(dragover)="dragOverHandler($event)"
(click)="openFileBrowser()"
>cloud_upload</mat-icon
>
<ng-template #large>
<section (drop)="onFileDrop($event)" (dragover)="dragOverHandler($event)">
<mat-icon class="mode__large">cloud_upload</mat-icon>
<h2 class="mat-headline">Drag&Drop your Sketch file here</h2>
<span class="mat-subheading-1">OR</span>
<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>
</section>
</ng-template>
<input
#fileBrowserRef
type="file"
(input)="onFileChange($event)"
accept=".sketch"
/>
`,
styles: [
`
Expand All @@ -32,7 +59,7 @@ import { SketchService } from './sketch.service';
position: relative;
align-items: center;
justify-content: center;
color: #B0B0B0;
color: #b0b0b0;
}
section {
width: 100%;
Expand All @@ -46,7 +73,7 @@ import { SketchService } from './sketch.service';
margin: 20px auto;
}
input[type="file"] {
input[type='file'] {
display: none;
}
Expand All @@ -71,9 +98,9 @@ export class SketchDropzoneComponent implements OnInit, OnChanges {
public isModeMini = false;
public selectedDemoFileError = false;

constructor(private service: SketchService) { }
constructor(private service: SketchService) {}

ngOnInit() { }
ngOnInit() {}

ngOnChanges(records: SimpleChanges) {
if (records.mode) {
Expand All @@ -91,8 +118,7 @@ export class SketchDropzoneComponent implements OnInit, OnChanges {
(file: Blob) => {
this.onFileChange(new File([file], `${fileName}.sketch`));
},
err => {
console.log(err);
_ => {
// include this status in the store for me it's an overkill
this.selectedDemoFileError = true;
setTimeout(() => {
Expand All @@ -102,7 +128,7 @@ export class SketchDropzoneComponent implements OnInit, OnChanges {
);
}

onFileDrop(event) {
onFileDrop(event: DragEvent) {
event.preventDefault();

if (event.dataTransfer.items) {
Expand Down Expand Up @@ -132,7 +158,7 @@ export class SketchDropzoneComponent implements OnInit, OnChanges {
this.removeDragData(event);
}

dragOverHandler(event) {
dragOverHandler(event: DragEvent) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}
Expand All @@ -154,7 +180,7 @@ export class SketchDropzoneComponent implements OnInit, OnChanges {
}
}

private removeDragData(event) {
private removeDragData(event: DragEvent) {
if (event.dataTransfer.items) {
// Use DataTransferItemList interface to remove the drag data
event.dataTransfer.items.clear();
Expand Down

0 comments on commit ab8fa22

Please sign in to comment.