public/guilloche-generator
2
0
Fork 0
Code Pull Requests Activity

prepared library publishing

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-31 15:05:12 +02:00
parent da36b71b2c
commit 04b049f39f
24 changed files with 82 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "nls-guilloche", "name": "nls-guilloche-generator",
"version": "0.2.0", "version": "0.2.0",
"repository": { "repository": {
"type": "git", "type": "git",

3
projects/nls-guilloche/package.json
View File

@@ -26,6 +26,9 @@
"url": "https://dailysh.it" "url": "https://dailysh.it"
} }
], ],
"dependencies": {
"d3": "^5.3.0"
},
"peerDependencies": { "peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0" "@angular/core": "^6.0.0-rc.0 || ^6.0.0"

49
src/app/directives/guilloche.directive.ts → projects/nls-guilloche/src/lib/directives/guilloche.directive.ts
View File

@@ -14,7 +14,7 @@
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/ */
import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; import { ElementRef, HostListener, Input, Directive, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import * as Selection from 'd3-selection'; import * as Selection from 'd3-selection';
import * as Shape from 'd3-shape'; import * as Shape from 'd3-shape';
import * as Random from 'd3-random'; import * as Random from 'd3-random';
@@ -22,22 +22,20 @@ import * as Drag from 'd3-drag';
import * as Ease from 'd3-ease'; import * as Ease from 'd3-ease';
import * as Timer from 'd3-timer'; import * as Timer from 'd3-timer';
import { environment as env } from './../../environments/environment';
import { Config } from './../models/config.model'; import { Config } from './../models/config.model';
import { Graph } from './../models/graph.model'; import { Graph } from './../models/graph.model';
import { Point } from './../models/point.model'; import { Point } from './../models/point.model';
import { Param } from './../models/param.model'; import { Param } from './../models/param.model';
import { CanvasService } from './../services/canvas.service'; import { NlsCanvasService } from './../services/canvas.service';
import { MathService } from './../services/math.service'; import { NlsMathService } from './../services/math.service';
import { GraphService } from '../services/graph.service'; import { NlsGraphService } from '../services/graph.service';
import { AnimationService } from './../services/animation.service';
const ANIMATION_INTERVAL = 60; const ANIMATION_INTERVAL = 60;
@Directive({ @Directive({
selector: '[guilloche]' selector: '[nlsGuilloche]'
}) })
export class GuillocheDirective implements OnChanges, OnDestroy { export class NlsGuillocheDirective implements OnChanges, OnDestroy {
private canvas: any; private canvas: any;
private group: any; private group: any;
@@ -55,14 +53,11 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
@Input() config: any; @Input() config: any;
@Input() animate: boolean; @Input() animate: boolean;
@Output() guillocheChange = new EventEmitter();
constructor( constructor(
private canvasService: CanvasService, private canvasService: NlsCanvasService,
private el: ElementRef, private el: ElementRef,
private math: MathService, private math: NlsMathService,
private graphService: GraphService, private graphService: NlsGraphService
private animationService: AnimationService
) { ) {
} }
@@ -121,7 +116,6 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
this.graph.end.direction, this.graph.end.direction,
this.graph.end.point, this.graph.end.point,
]).forEach((points, index) => this.drawGraph(points)); ]).forEach((points, index) => this.drawGraph(points));
this.guillocheChanged();
} }
private animateGraph(x) { private animateGraph(x) {
@@ -160,12 +154,6 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
.x(p => p.x) .x(p => p.x)
.y(p => p.y) .y(p => p.y)
.curve(Shape.curveBasis)(points)); .curve(Shape.curveBasis)(points));
// if (env.debug) {
// this.group.selectAll('circle').remove();
// this.group.selectAll('text').remove();
// // this.debugGraph(points);
// }
} }
private drawGraph(points: Point[]): void { private drawGraph(points: Point[]): void {
@@ -180,14 +168,6 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
.x(p => p.x) .x(p => p.x)
.y(p => p.y) .y(p => p.y)
.curve(Shape.curveBasis)(points))); .curve(Shape.curveBasis)(points)));
if (env.debug) {
this.debugGraph(points);
}
}
public guillocheChanged() {
this.guillocheChange.emit(this.el.nativeElement);
} }
private debugGraph(points: Point[]) { private debugGraph(points: Point[]) {
@@ -210,15 +190,4 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
.text(index); .text(index);
}); });
} }
private debugBounce(point: Point): void {
if (env.debug) {
this.group.append('circle')
.attr('cx', point.x)
.attr('cy', point.y)
.attr('r', 2)
.attr('fill-opacity', 0.4)
.attr('fill', 'darkgray');
}
}
} }

0
src/app/models/config.model.ts → projects/nls-guilloche/src/lib/models/config.model.ts
View File

0
src/app/models/graph.model.ts → projects/nls-guilloche/src/lib/models/graph.model.ts
View File

0
src/app/models/param.model.ts → projects/nls-guilloche/src/lib/models/param.model.ts
View File

0
src/app/models/point.model.ts → projects/nls-guilloche/src/lib/models/point.model.ts
View File

25
projects/nls-guilloche/src/lib/nls-guilloche.component.spec.ts
View File

@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NlsGuillocheComponent } from './nls-guilloche.component';
describe('NlsGuillocheComponent', () => {
let component: NlsGuillocheComponent;
let fixture: ComponentFixture<NlsGuillocheComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NlsGuillocheComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NlsGuillocheComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

19
projects/nls-guilloche/src/lib/nls-guilloche.component.ts
View File

@@ -1,19 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'lib-nls-guilloche',
template: `
<p>
nls-guilloche works!
</p>
`,
styles: []
})
export class NlsGuillocheComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

10
projects/nls-guilloche/src/lib/nls-guilloche.module.ts
View File

@@ -1,10 +0,0 @@
import { NgModule } from '@angular/core';
import { NlsGuillocheComponent } from './nls-guilloche.component';
@NgModule({
imports: [
],
declarations: [NlsGuillocheComponent],
exports: [NlsGuillocheComponent]
})
export class NlsGuillocheModule { }

15
projects/nls-guilloche/src/lib/nls-guilloche.service.spec.ts
View File

@@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { NlsGuillocheService } from './nls-guilloche.service';
describe('NlsGuillocheService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [NlsGuillocheService]
});
});
it('should be created', inject([NlsGuillocheService], (service: NlsGuillocheService) => {
expect(service).toBeTruthy();
}));
});

9
projects/nls-guilloche/src/lib/nls-guilloche.service.ts
View File

@@ -1,9 +0,0 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NlsGuillocheService {
constructor() { }
}

10
src/app/services/animation.service.ts → projects/nls-guilloche/src/lib/services/animation.service.ts
View File

@@ -19,11 +19,11 @@ import { interval, Observable } from 'rxjs';
import * as Selection from 'd3-selection'; import * as Selection from 'd3-selection';
import { Graph } from '../models/graph.model'; import { Graph } from '../models/graph.model';
import { MathService } from './math.service'; import { NlsMathService } from './math.service';
import { HistoryService } from './history.service'; import { NlsHistoryService } from './history.service';
@Injectable() @Injectable()
export class AnimationService { export class NlsAnimationService {
public graphs: Graph[]; public graphs: Graph[];
public speed: number; public speed: number;
@@ -33,8 +33,8 @@ export class AnimationService {
// private subscribtion: any; // private subscribtion: any;
constructor( constructor(
private math: MathService, private math: NlsMathService,
private historyService: HistoryService, private historyService: NlsHistoryService,
) { ) {
} }

2
src/app/services/canvas.service.ts → projects/nls-guilloche/src/lib/services/canvas.service.ts
View File

@@ -18,7 +18,7 @@ import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import * as Selection from 'd3-selection'; import * as Selection from 'd3-selection';
@Injectable() @Injectable()
export class CanvasService { export class NlsCanvasService {
private renderer: Renderer2; private renderer: Renderer2;
public canvas: any; public canvas: any;

6
src/app/services/graph.service.ts → projects/nls-guilloche/src/lib/services/graph.service.ts
View File

@@ -18,17 +18,17 @@ import { Validators } from '@angular/forms';
import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import * as Selection from 'd3-selection'; import * as Selection from 'd3-selection';
import { MathService } from './math.service'; import { NlsMathService } from './math.service';
import { Graph } from './../models/graph.model'; import { Graph } from './../models/graph.model';
import { Point } from './../models/point.model'; import { Point } from './../models/point.model';
@Injectable() @Injectable()
export class GraphService { export class NlsGraphService {
private graphs: Graph[]; private graphs: Graph[];
private animation: boolean | null; private animation: boolean | null;
constructor( constructor(
private math: MathService private math: NlsMathService
) {} ) {}
public get() { public get() {

2
src/app/services/history.service.ts → projects/nls-guilloche/src/lib/services/history.service.ts
View File

@@ -20,7 +20,7 @@ import * as Selection from 'd3-selection';
import { Graph } from '../models/graph.model'; import { Graph } from '../models/graph.model';
@Injectable() @Injectable()
export class HistoryService { export class NlsHistoryService {
public history: any[]; public history: any[];

2
src/app/services/math.service.ts → projects/nls-guilloche/src/lib/services/math.service.ts
View File

@@ -22,7 +22,7 @@ import { Point } from './../models/point.model';
import { Graph } from './../models/graph.model'; import { Graph } from './../models/graph.model';
@Injectable() @Injectable()
export class MathService { export class NlsMathService {
/** /**
* Calculate distance between to points with coordinates. * Calculate distance between to points with coordinates.

13
projects/nls-guilloche/src/public_api.ts
View File

@@ -2,6 +2,13 @@
* Public API Surface of nls-guilloche * Public API Surface of nls-guilloche
*/ */
export * from './lib/nls-guilloche.service'; export * from './lib/directives/guilloche.directive';
export * from './lib/nls-guilloche.component'; export * from './lib/models/config.model';
export * from './lib/nls-guilloche.module'; export * from './lib/models/graph.model';
export * from './lib/models/param.model';
export * from './lib/models/point.model';
export * from './lib/services/animation.service';
export * from './lib/services/canvas.service';
export * from './lib/services/graph.service';
export * from './lib/services/history.service';
export * from './lib/services/math.service';

20
src/app/app.component.ts
View File

@@ -18,18 +18,16 @@ import { ConfigForm } from './forms/config.form';
import { Component, OnInit, HostListener } from '@angular/core'; import { Component, OnInit, HostListener } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
// import { Moment } from 'moment';
import * as moment from 'moment'; import * as moment from 'moment';
import 'moment/min/locales'; import 'moment/min/locales';
import { environment as env } from '../environments/environment'; import { environment as env } from '../environments/environment';
import { Param } from './models/param.model'; import { Param } from './../../projects/nls-guilloche/src/lib/models/param.model';
import { Config } from './models/config.model'; import { Config } from './../../projects/nls-guilloche/src/lib/models/config.model';
import { CanvasService } from './services/canvas.service'; import { Graph } from './../../projects/nls-guilloche/src/lib/models/graph.model';
import { HistoryService } from './services/history.service'; import { NlsCanvasService } from './../../projects/nls-guilloche/src/lib/services/canvas.service';
import { Graph } from './models/graph.model'; import { NlsHistoryService } from './../../projects/nls-guilloche/src/lib/services/history.service';
import { GraphService } from './services/graph.service'; import { NlsGraphService } from './../../projects/nls-guilloche/src/lib/services/graph.service';
import { AnimationService } from './services/animation.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -48,9 +46,9 @@ export class AppComponent implements OnInit {
public animationActive: boolean; public animationActive: boolean;
constructor( constructor(
private canvasService: CanvasService, private canvasService: NlsCanvasService,
private historyService: HistoryService, private historyService: NlsHistoryService,
private graphService: GraphService, private graphService: NlsGraphService,
) { ) {
moment.locale('de'); moment.locale('de');

24
src/app/app.module.ts
View File

@@ -22,18 +22,18 @@ import { MomentModule } from 'ngx-moment';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { GraphsComponent } from './components/graphs.component'; import { GraphsComponent } from './components/graphs.component';
import { GuillocheDirective } from './directives/guilloche.directive'; import { NlsGuillocheDirective } from './../../projects/nls-guilloche/src/lib/directives/guilloche.directive';
import { CanvasService } from './services/canvas.service'; import { NlsCanvasService } from './../../projects/nls-guilloche/src/lib/services/canvas.service';
import { HistoryService } from './services/history.service'; import { NlsHistoryService } from './../../projects/nls-guilloche/src/lib/services/history.service';
import { AnimationService } from './services/animation.service'; import { NlsAnimationService } from './../../projects/nls-guilloche/src/lib/services/animation.service';
import { MathService } from './services/math.service'; import { NlsMathService } from './../../projects/nls-guilloche/src/lib/services/math.service';
import { GraphService } from './services/graph.service'; import { NlsGraphService } from './../../projects/nls-guilloche/src/lib/services/graph.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
GraphsComponent, GraphsComponent,
GuillocheDirective NlsGuillocheDirective
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@@ -43,11 +43,11 @@ import { GraphService } from './services/graph.service';
MomentModule, MomentModule,
], ],
providers: [ providers: [
CanvasService, NlsCanvasService,
HistoryService, NlsHistoryService,
AnimationService, NlsAnimationService,
MathService, NlsMathService,
GraphService, NlsGraphService,
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

6
src/app/components/graphs.component.html
View File

@@ -1,6 +1,6 @@
<svg #svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" <svg #svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
version="1.1" shape-rendering="geometricPrecision"> version="1.1" shape-rendering="geometricPrecision">
<g guilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> <g nlsGuilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true"></g>
<g guilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> <g nlsGuilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true"></g>
<!-- <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> --> <!-- <g nlsGuilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true"></g> -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 597 B

After

Width:  |  Height:  |  Size: 453 B

6
src/app/components/graphs.component.scss
View File

@@ -14,9 +14,9 @@
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/ */
svg { // svg {
// opacity: 0.4; // // opacity: 0.4;
} // }
// svg { // svg {
// stroke-dasharray: 1000px; // stroke-dasharray: 1000px;

24
src/app/components/graphs.component.ts
View File

@@ -22,14 +22,13 @@ import * as Random from 'd3-random';
import * as Drag from 'd3-drag'; import * as Drag from 'd3-drag';
import { environment as env } from '../../environments/environment'; import { environment as env } from '../../environments/environment';
import { CanvasService } from './../services/canvas.service'; import { Graph } from './../../../projects/nls-guilloche/src/lib/models/graph.model';
import { HistoryService } from './../services/history.service'; import { Point } from './../../../projects/nls-guilloche/src/lib/models/point.model';
import { AnimationService } from '../services/animation.service'; import { NlsCanvasService } from './../../../projects/nls-guilloche/src/lib/services/canvas.service';
import { MathService } from '../services/math.service'; import { NlsHistoryService } from './../../../projects/nls-guilloche/src/lib/services/history.service';
import { GuillocheDirective } from './../directives/guilloche.directive'; import { NlsMathService } from './../../../projects/nls-guilloche/src/lib/services/math.service';
import { Graph } from '../models/graph.model'; import { NlsGuillocheDirective } from './../../../projects/nls-guilloche/src/lib/directives/guilloche.directive';
import { Point } from '../models/point.model'; import { NlsGraphService } from './../../../projects/nls-guilloche/src/lib/services/graph.service';
import { GraphService } from '../services/graph.service';
@Component({ @Component({
selector: 'app-graphs', selector: 'app-graphs',
@@ -63,11 +62,10 @@ export class GraphsComponent implements OnChanges, OnInit {
} }
constructor( constructor(
private canvasService: CanvasService, private canvasService: NlsCanvasService,
private historyService: HistoryService, private historyService: NlsHistoryService,
private animationService: AnimationService, private math: NlsMathService,
private math: MathService, private graphService: NlsGraphService
private graphService: GraphService
) { ) {
this.genLoadedAllGraphs = this.countLoadedGraphs(); this.genLoadedAllGraphs = this.countLoadedGraphs();
this.timer = interval(500); this.timer = interval(500);

10
yarn.lock
View File

@@ -4288,6 +4288,10 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
dependencies: dependencies:
minimist "0.0.8" minimist "0.0.8"
moment@^2.22.2:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
move-concurrently@^1.0.1: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -4394,6 +4398,12 @@ ng-packagr@^3.0.0-rc.2:
uglify-js "^3.0.7" uglify-js "^3.0.7"
update-notifier "^2.3.0" update-notifier "^2.3.0"
ngx-moment@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/ngx-moment/-/ngx-moment-3.1.0.tgz#41380b4dd8b68e7bd6d17cc6fe7f703ae506dc3a"
dependencies:
tslib "^1.9.0"
no-case@^2.2.0: no-case@^2.2.0:
version "2.3.2" version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac" resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"