diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 80a112a..2199c67 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpModule } from '@angular/http';
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { MaptoKeysPipe, ModelJsonPipe } from './common/maptokeys.pipe';
+import { DateFormatPipe, MomentModule } from 'angular2-moment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -64,6 +65,12 @@ import { DomainComponent } from './canvas/domain.component';
import { foStructureCardComponent } from './fo-inspector/fo-structure-card.component';
import { foSolutionCardComponent } from './fo-inspector/fo-solution-card.component';
import { DevSecOpsComponent } from './canvas/devsecops.component';
+import { ShapeTestingComponent } from './specs/shape-testing/shape-testing.component';
+import { foControllerCardComponent } from './fo-inspector/fo-controller-card.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { CardAComponent } from './dashboard/card-a.component';
+import { CardBComponent } from './dashboard/card-b.component';
+import { CardCComponent } from './dashboard/card-c.component';
@NgModule({
declarations: [
@@ -113,7 +120,18 @@ import { DevSecOpsComponent } from './canvas/devsecops.component';
DomainComponent,
foStructureCardComponent,
foSolutionCardComponent,
- DevSecOpsComponent
+ DevSecOpsComponent,
+ ShapeTestingComponent,
+ foControllerCardComponent,
+ DashboardComponent,
+ CardAComponent,
+ CardBComponent,
+ CardCComponent
+ ],
+ entryComponents: [
+ CardAComponent,
+ CardBComponent,
+ CardCComponent
],
imports: [
BrowserAnimationsModule,
@@ -122,6 +140,7 @@ import { DevSecOpsComponent } from './canvas/devsecops.component';
TabsModule.forRoot(),
ToastModule.forRoot(),
+ MomentModule,
BrowserModule,
FormsModule,
HttpModule,
@@ -129,6 +148,7 @@ import { DevSecOpsComponent } from './canvas/devsecops.component';
],
providers: [
DockerecosystemService,
+ DateFormatPipe,
SwimService,
SignalRService,
SharingService
diff --git a/src/app/canvas/boid.model.ts b/src/app/canvas/boid.model.ts
new file mode 100644
index 0000000..e2ea49e
--- /dev/null
+++ b/src/app/canvas/boid.model.ts
@@ -0,0 +1,421 @@
+import { Tools } from '../foundry/foTools';
+
+import { iPoint2D, Action } from '../foundry/foInterface';
+import { cPoint2D } from '../foundry/shapes/foGeometry2D';
+import { foGlyph2D } from '../foundry/shapes/foGlyph2D.model';
+
+import { foShape2D } from '../foundry/shapes/foShape2D.model';
+import { foStencilLibrary } from '../foundry/foStencil';
+import { foCollection } from '../foundry/foCollection.model';
+import { foController, foToggle } from '../foundry/foController';
+
+export let BoidStencil: foStencilLibrary = new foStencilLibrary().defaultName(
+ 'Boids'
+);
+export { foShape2D } from '../foundry/shapes/foShape2D.model';
+import { foPage } from '../foundry/shapes/foPage.model';
+
+export let globalBoidList: foCollection
= new foCollection<
+ boidMixin
+>().setName('All Boids');
+// http://www.kfish.org/boids/pseudocode.html
+
+class boidController extends foController {
+ applyRule1: boolean = false;
+ applyRule2: boolean = false;
+ applyRule3: boolean = false;
+ applyRule4: boolean = false;
+
+ applyRules(boid: boidMixin, func: Action) {
+ const v = new cPoint2D();
+ if (this.applyRule1) {
+ this.rule1(boid).sumTo(v);
+ }
+
+ if (this.applyRule2) {
+ this.rule2(boid, boid.gap).sumTo(v);
+ }
+
+ if (this.applyRule3) {
+ this.rule3(boid).sumTo(v);
+ }
+
+ if (this.applyRule4) {
+ this.rule4(boid).sumTo(v);
+ }
+
+ if (
+ this.applyRule1 ||
+ this.applyRule2 ||
+ this.applyRule3 ||
+ this.applyRule4
+ ) {
+ func(v);
+ }
+ }
+
+ ruleCenter(boid: boidMixin): cPoint2D {
+ // center of mass sum up all the locations for all the others
+
+ if (globalBoidList.length <= 1) {
+ return boid.p;
+ }
+
+ let count = 0;
+ const center = new cPoint2D();
+ globalBoidList.forEach(item => {
+ if (item.myIndex > 1) {
+ item.p.sumTo(center);
+ count++;
+ }
+ });
+
+ if (count) {
+ const g = 1.0 / count;
+ center.scale(g);
+ }
+ return center;
+ }
+
+ //Rule 1: Boids try to fly towards the centre of mass of neighbouring boids.
+ rule1(boid: boidMixin): cPoint2D {
+ //center of mass sum up all the locations for all the others
+
+ let count = 0;
+ let center = new cPoint2D();
+
+ globalBoidList.forEach(item => {
+ if (item !== boid && item.myIndex > 1) {
+ item.p.sumTo(center);
+ count++;
+ }
+ });
+
+ if (count) {
+ const g = 1.0 / count;
+ center.scale(g);
+ center = boid.p.deltaBetween(center);
+ center.scale(-0.1);
+ }
+
+ return center;
+ }
+
+ //Rule 2: Boids try to keep a small distance away from other objects (including other boids).
+ rule2(boid: boidMixin, gap: number = 100): cPoint2D {
+ const center = new cPoint2D();
+
+ globalBoidList.forEach(item => {
+ if (item !== boid && item.myIndex > 1) {
+ const delta = boid.p.deltaBetween(item.p);
+ const dist = delta.mag();
+ if (dist < gap) {
+ delta.sumTo(center);
+ }
+ }
+ });
+
+ return center;
+ }
+
+ //Rule 3: Boids try to match velocity with near boids.
+ rule3(boid: boidMixin): cPoint2D {
+ //average of the velosity
+
+ let count = 0;
+ let speed = new cPoint2D();
+
+ globalBoidList.forEach(item => {
+ if (item !== boid && item.myIndex > 1) {
+ item.velosity.sumTo(speed);
+ count++;
+ }
+ });
+
+ if (count) {
+ const g = 1.0 / count;
+ speed.scale(g);
+ speed = boid.velosity.deltaBetween(speed);
+ speed.scale(0.2);
+ }
+
+ return speed;
+ }
+
+ //Rule 4: Boids list to perch when they are tired.
+ rule4(boid: boidMixin): cPoint2D {
+ //stop the motion and land
+ const stop = new cPoint2D();
+
+ if (boid.perchCountdown > 0) {
+ return stop;
+ }
+
+ if (Tools.randomInt(0, 1000) < 2) {
+ boid.perchCountdown = Tools.randomInt(50, 60);
+ }
+
+ return stop;
+ }
+
+ creatBoids(page: foPage, count: number = 1): Array {
+ const list: Array = new Array();
+ const knowledge = BoidStencil.find('Boid++');
+
+ for (let i = 0; i < count; i++) {
+ const result = knowledge.newInstance().defaultName() as foGlyph2D;
+ result
+ .dropAt(page.centerX, page.centerY)
+ .addAsSubcomponent(page)
+ .pushTo(list);
+ }
+ return list;
+ }
+
+ toggleRule1: foToggle = new foToggle(
+ 'group',
+ () => {
+ this.applyRule1 = !this.applyRule1;
+ },
+ () => {
+ return { active: this.applyRule1 };
+ }
+ );
+ toggleRule2: foToggle = new foToggle(
+ 'no crash',
+ () => {
+ this.applyRule2 = !this.applyRule2;
+ },
+ () => {
+ return { active: this.applyRule2 };
+ }
+ );
+ toggleRule3: foToggle = new foToggle(
+ 'speed',
+ () => {
+ this.applyRule3 = !this.applyRule3;
+ },
+ () => {
+ return { active: this.applyRule3 };
+ }
+ );
+ toggleRule4: foToggle = new foToggle(
+ 'perch',
+ () => (this.applyRule4 = !this.applyRule4),
+ () => {
+ return { active: this.applyRule4 };
+ }
+ );
+}
+
+export let boidBehaviour: boidController = new boidController().defaultName(
+ 'Boids'
+);
+boidBehaviour.addToggle(
+ boidBehaviour.toggleRule1,
+ boidBehaviour.toggleRule2,
+ boidBehaviour.toggleRule3,
+ boidBehaviour.toggleRule4
+);
+
+export class boidMixin extends foShape2D {
+ public myIndex: number;
+ public perchCountdown: number = 0;
+ public gap: number = 50;
+ public s: number = 0;
+ public h: number = 0;
+ public p: cPoint2D = new cPoint2D(0, 0);
+
+ public pinX = (): number => {
+ return 0.5 * this.width;
+ }
+ public pinY = (): number => {
+ return 0.5 * this.height;
+ }
+
+ protected toJson(): any {
+ return Tools.mixin(super.toJson(), {
+ p: this.p,
+ h: this.h,
+ s: this.s,
+ gap: this.gap
+ });
+ }
+
+ get velosity() {
+ const x = this.s * Math.cos(this.h);
+ const y = this.s * Math.sin(this.h);
+ return new cPoint2D(x, y);
+ }
+
+ doAnimation = () => {
+ if (this.myIndex > 1) {
+ let v = this.velosity;
+ const s = v.mag();
+ boidBehaviour.applyRules(this, dv => {
+ v = v
+ .sum(dv)
+ .normal()
+ .scale(s);
+ });
+
+ if (this.perchCountdown === 0) {
+ v.sumTo(this.p);
+ this.s = v.mag();
+ this.h = v.atan();
+ } else {
+ this.perchCountdown--;
+ }
+ } else {
+ boidBehaviour.ruleCenter(this).setTo(this.p);
+ }
+ this.x = this.p.x;
+ this.y = this.p.y;
+ this.angle = this.h * foGlyph.RAD_TO_DEG;
+
+ if (this.isOffCanvasX) {
+ const x = Math.cos(this.h);
+ const y = Math.sin(this.h);
+ this.h = Math.atan2(y, -x);
+ }
+
+ if (this.isOffCanvasY) {
+ const x = Math.cos(this.h);
+ const y = Math.sin(this.h);
+ this.h = Math.atan2(-y, x);
+ }
+ }
+
+ get isOffCanvasX(): boolean {
+ // off the right side off the left side off the bottom
+ const parent = this.myParent && (this.myParent() as foShape2D);
+ if (parent) {
+ const width = parent.width;
+ return this.x > width || this.x < 0;
+ }
+ }
+
+ get isOffCanvasY(): boolean {
+ // off the right side off the left side off the bottom
+ const parent = this.myParent && (this.myParent() as foShape2D);
+ if (parent) {
+ const height = parent.height;
+ return this.y > height || this.y < 0;
+ }
+ }
+}
+
+class BoidShape extends boidMixin {
+ // doAnimation = () => { };
+
+ public render(ctx: CanvasRenderingContext2D, deep: boolean = true) {
+ this.doAnimation();
+ super.render(ctx, deep);
+ }
+
+ public drawSelected = (ctx: CanvasRenderingContext2D): void => {
+ ctx.strokeStyle = 'red';
+ ctx.lineWidth = 4;
+ this.drawOutline(ctx);
+ this.drawPin(ctx);
+ }
+
+ findObjectUnderPoint(hit: iPoint2D, deep: boolean): foGlyph2D {
+ const found: foGlyph2D = this.hitTest(hit) ? this : undefined;
+ return found;
+ }
+}
+
+export class Boid extends BoidShape {
+ constructor(properties?: any) {
+ super(properties);
+ globalBoidList.addMember(this);
+ this.myIndex = globalBoidList.length;
+ }
+
+ public dropAt(
+ x: number = Number.NaN,
+ y: number = Number.NaN,
+ angle: number = Number.NaN
+ ) {
+ super.dropAt(x, y, angle);
+ this.p = new cPoint2D(x, y);
+ return this;
+ }
+
+ drawTriangle(ctx: CanvasRenderingContext2D, x1, y1, x2, y2, x3, y3) {
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ drawSquare(ctx: CanvasRenderingContext2D, x1, y1, x2, y2) {
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y1);
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x1, y2);
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ drawCircle(ctx: CanvasRenderingContext2D, x1, y1, radius: number = 100) {
+ ctx.beginPath();
+ ctx.arc(x1, y1, radius, 0, 2 * Math.PI);
+ ctx.stroke();
+ }
+
+ public draw = (ctx: CanvasRenderingContext2D): void => {
+ ctx.fillStyle = this.color;
+ ctx.lineWidth = 1;
+ ctx.globalAlpha = this.opacity;
+ if (this.myIndex === 1) {
+ this.drawSquare(ctx, 0, 0, this.width, this.height);
+ this.drawSelected(ctx);
+ } else {
+ this.drawTriangle(ctx, 0, this.height, this.width, this.height / 2, 0, 0);
+ this.isVisible &&
+ this.drawCircle(ctx, this.pinX(), this.pinY(), this.gap);
+ }
+ }
+}
+
+const core = BoidStencil.mixin('core', {
+ color: 'blue',
+ opacity: 0.5,
+ width: 50,
+ height: 50,
+ s: Tools.randomInt(7, 11)
+});
+
+BoidStencil.define('Boid', Boid, {
+ width: 20,
+ height: 20,
+ h: function() {
+ return Tools.random(0, Math.PI / 2);
+ },
+ s: function() {
+ return Tools.random(1, 21);
+ }
+});
+
+BoidStencil.define('Boid+', Boid, {}).mixin(core);
+
+BoidStencil.define('Boid++', Boid, {
+ color: 'green',
+ opacity: 0.5,
+ width: 30,
+ height: 30
+}).onCreation(obj => {
+ obj.color = Tools.randomRGBColor();
+ obj.h = Tools.random(0, 2 * Math.PI);
+ obj.s = Tools.random(1, 21);
+ obj.gap = Tools.random(25, 100);
+});
+
+import { RuntimeType } from '../foundry/foRuntimeType';
+import { foGlyph } from '../foundry/foGlyph.model';
+RuntimeType.define(Boid);
diff --git a/src/app/canvas/canvastest.component.ts b/src/app/canvas/canvastest.component.ts
index c570cf4..2991429 100644
--- a/src/app/canvas/canvastest.component.ts
+++ b/src/app/canvas/canvastest.component.ts
@@ -1,5 +1,6 @@
import { Component, Input, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
+
//https://medium.com/@tarik.nzl/creating-a-canvas-component-with-free-hand-drawing-with-rxjs-and-angular-61279f577415
import { Observable } from 'rxjs/Observable';
@@ -11,12 +12,13 @@ import 'rxjs/add/operator/switchMap';
@Component({
selector: 'app-testcanvas',
- template: '',
+ template: ' ',
styles: ['canvas { border: 1px solid #000; }']
})
export class CanvasTestComponent implements AfterViewInit {
// a reference to the canvas element from our template
@ViewChild('canvas') public canvas: ElementRef;
+ @ViewChild('input') public input: ElementRef;
// setting a width and height for the canvas
@Input() public width = 400;
@@ -24,6 +26,7 @@ export class CanvasTestComponent implements AfterViewInit {
private cx: CanvasRenderingContext2D;
+
public ngAfterViewInit() {
// get the context
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
@@ -38,6 +41,9 @@ export class CanvasTestComponent implements AfterViewInit {
this.cx.lineCap = 'round';
this.cx.strokeStyle = '#000';
+ const inputEl: HTMLCanvasElement = this.input.nativeElement;
+
+
// we'll implement this method to start capturing mouse events
this.captureEvents(canvasEl);
}
diff --git a/src/app/canvas/devsecops.component.html b/src/app/canvas/devsecops.component.html
index 979821b..d8d331f 100644
--- a/src/app/canvas/devsecops.component.html
+++ b/src/app/canvas/devsecops.component.html
@@ -2,16 +2,23 @@
+
diff --git a/src/app/canvas/devsecops.component.ts b/src/app/canvas/devsecops.component.ts
index d299135..365e0c7 100644
--- a/src/app/canvas/devsecops.component.ts
+++ b/src/app/canvas/devsecops.component.ts
@@ -1,19 +1,31 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-
-import { foWorkspace } from "../foundry/foWorkspace.model";
-import { foPage } from "../foundry/shapes/foPage.model";
-import { foModel } from "../foundry/foModel.model";
-
-import { Screen2D } from "../foundry/shapes/canvasDriver";
+import {
+ Component,
+ OnInit,
+ Input,
+ ViewChild,
+ ElementRef,
+ AfterViewInit
+} from '@angular/core';
+
+import { foWorkspace } from '../foundry/foWorkspace.model';
+import { foPage } from '../foundry/shapes/foPage.model';
+import { foModel } from '../foundry/foModel.model';
+
+import { Screen2D } from '../foundry/shapes/canvasDriver';
import { foDocument } from '../foundry/shapes/foDocument.model';
import { cPoint2D } from '../foundry/shapes/foGeometry2D';
-import { foGlyph2D } from "../foundry/shapes/foGlyph2D.model";
+import { foGlyph2D } from '../foundry/shapes/foGlyph2D.model';
+
+import { Toast } from '../common/emitter.service';
+import { SharingService } from '../common/sharing.service';
+import { DevSecOps } from './devsecops.model';
-import { SharingService } from "../common/sharing.service";
-import { DevSecOps, DevSecOpsShapes, DevSecOpsSolids } from "./devsecops.model";
+import { BoidStencil, boidBehaviour } from './boid.model';
+import { FactoryStencil, factoryBehaviour } from './factory.model';
+import { foCommand, foToggle } from '../foundry/foController';
-import { Star } from "konva";
+import { Star } from 'konva';
@Component({
selector: 'fo-devsecops',
@@ -21,104 +33,219 @@ import { Star } from "konva";
styleUrls: ['./devsecops.component.css']
})
export class DevSecOpsComponent implements OnInit, AfterViewInit {
-
+ showZones: boolean = true;
workspace: foWorkspace = DevSecOps;
- model: foModel;
+ model: foModel = DevSecOps.model.getItem('default');
- @ViewChild('canvas')
- public canvasRef: ElementRef;
+ @ViewChild('canvas') public canvasRef: ElementRef;
- @Input()
- public pageWidth = 1400;
- @Input()
- public pageHeight = 800;
+ @Input() public pageWidth = 1400;
+ @Input() public pageHeight = 800;
screen2D: Screen2D = new Screen2D();
currentDocument: foDocument;
-
- constructor(
- private sharing: SharingService) {
+
+ constructor(private sharing: SharingService) {}
+
+ doOpen() {
+ this.workspace.openFile(result => {
+ Toast.info('open', result.filename);
+ this.workspace.reHydratePayload(result.payload);
+ });
+ }
+
+ doSave() {
+ this.workspace.SaveInstanceAs(
+ this.workspace.activePage,
+ 'page1',
+ '.json',
+ result => {
+ Toast.info('saved', result.filename);
+ }
+ );
+ }
+
+ doClear() {
+ this.workspace.clearActivePage();
+ }
+
+ doSaveWorkspace() {
+ this.workspace.SaveFileAs('work', '.json', result => {
+ Toast.info('saved', result.filename);
+ });
}
ngOnInit() {
+ const space = this.workspace;
+
+ space.stencil.add(FactoryStencil);
+ space.controller.add(factoryBehaviour);
+
+ factoryBehaviour.addCommands(
+ new foCommand('layout', () => {
+ const page = space.activePage;
+ const shape = factoryBehaviour.buildLayout(page);
+ page.centerShape( shape );
+ })
+ );
+
+ // factoryBehaviour.addCommands(new foCommand('grid', () => {
+ // factoryBehaviour.buildGrid(space.activePage);
+ // }));
+
+ factoryBehaviour.addCommands(
+ new foCommand('create package', () => {
+ factoryBehaviour.createPackage(space.activePage);
+ })
+ );
+
+ factoryBehaviour.addCommands(
+ new foCommand('build factory', () => {
+ factoryBehaviour.buildFactory(space.activePage);
+ })
+ );
+
+ factoryBehaviour.addCommands(
+ new foCommand('run', () => {
+ factoryBehaviour.runFactory(space.activePage);
+ })
+ );
+
+ space.library.members.forEach(lib => {
+ lib.solutions.publicMembers.forEach(know => {
+ factoryBehaviour.addCommands(
+ new foCommand(know.myName, () => {
+ const model = space.model.establish('default');
+ const item = know.makeComponent(model).defaultName();
+ factoryBehaviour.renderModel(space.activePage, item);
+ })
+ );
+ });
+ });
+
+ space.stencil.add(BoidStencil);
+ space.controller.add(boidBehaviour);
+
+ boidBehaviour.addCommands(
+ new foCommand('100++', () => {
+ boidBehaviour.creatBoids(space.activePage, 100);
+ })
+ );
+
+ boidBehaviour.addCommands(
+ new foCommand('+1', () => {
+ boidBehaviour.creatBoids(space.activePage, 1);
+ })
+ );
+
+ const root = this;
+ boidBehaviour.addToggle(
+ new foToggle(
+ 'zone',
+ () => {
+ root.showZones = !root.showZones;
+ const page = space.activePage;
+ page.Subcomponents.forEach(boid => {
+ boid.isVisible = root.showZones;
+ });
+ },
+ () => {
+ return { active: root.showZones };
+ }
+ )
+ );
+
this.currentDocument = this.workspace.document.override({
pageWidth: this.pageWidth,
- pageHeight: this.pageHeight,
+ pageHeight: this.pageHeight
});
- this.workspace.model.addItem('default', new foModel({}));
-
- this.model = this.workspace.model.getItem('default')
+ this.model = this.workspace.model.establish('default');
//this.model = workspace.context()
}
public ngAfterViewInit() {
+ this.screen2D.setRoot(
+ this.canvasRef.nativeElement,
+ this.pageWidth,
+ this.pageHeight
+ );
- this.screen2D.setRoot(this.canvasRef.nativeElement, this.pageWidth, this.pageHeight);
-
this.sharing.startSharing();
- setTimeout( _ => {
+ setTimeout(_ => {
this.doSetCurrentPage(this.currentDocument.currentPage);
- })
-
-
+ });
}
addEventHooks(page: foPage) {
-
- page.onItemHoverEnter = (loc: cPoint2D, shape: foGlyph2D, keys?: any): void => {
+ page.onItemHoverEnter = (
+ loc: cPoint2D,
+ shape: foGlyph2D,
+ keys?: any
+ ): void => {
if (shape) {
- shape.drawHover = function (ctx: CanvasRenderingContext2D) {
- ctx.strokeStyle = "yellow";
+ shape.drawHover = function(ctx: CanvasRenderingContext2D) {
+ ctx.strokeStyle = 'yellow';
ctx.lineWidth = 4;
shape.drawOutline(ctx);
- }
+ };
}
- }
+ };
- page.onItemHoverExit = (loc: cPoint2D, shape: foGlyph2D, keys?: any): void => {
+ page.onItemHoverExit = (
+ loc: cPoint2D,
+ shape: foGlyph2D,
+ keys?: any
+ ): void => {
if (shape) {
shape.drawHover = undefined;
}
- }
-
- page.onItemOverlapEnter = (loc: cPoint2D, shape: foGlyph2D, shapeUnder: foGlyph2D, keys?: any): void => {
-
+ };
+
+ page.onItemOverlapEnter = (
+ loc: cPoint2D,
+ shape: foGlyph2D,
+ shapeUnder: foGlyph2D,
+ keys?: any
+ ): void => {
if (shapeUnder) {
- shapeUnder.drawHover = function (ctx: CanvasRenderingContext2D) {
- ctx.strokeStyle = "green";
+ shapeUnder.drawHover = function(ctx: CanvasRenderingContext2D) {
+ ctx.strokeStyle = 'green';
ctx.lineWidth = 8;
shapeUnder.drawOutline(ctx);
- ctx.strokeStyle = "yellow";
+ ctx.strokeStyle = 'yellow';
ctx.lineWidth = 4;
shapeUnder.drawOutline(ctx);
- }
+ };
}
- }
-
- page.onItemOverlapExit = (loc: cPoint2D, shape: foGlyph2D, shapeUnder: foGlyph2D, keys?: any): void => {
-
+ };
+
+ page.onItemOverlapExit = (
+ loc: cPoint2D,
+ shape: foGlyph2D,
+ shapeUnder: foGlyph2D,
+ keys?: any
+ ): void => {
if (shapeUnder) {
shapeUnder.drawHover = undefined;
}
- }
-
+ };
}
doSetCurrentPage(page: foPage) {
-
this.screen2D.clear();
+ page.canvas = this.canvasRef.nativeElement;
+
//with the render function you could
//1) render a single page
//2) render pages like layers
//3) render pages side by side
this.screen2D.render = (ctx: CanvasRenderingContext2D) => {
page.render(ctx);
- }
+ };
this.screen2D.go();
this.addEventHooks(page);
}
-
}
diff --git a/src/app/canvas/devsecops.knowledge.ts b/src/app/canvas/devsecops.knowledge.ts
new file mode 100644
index 0000000..d12a042
--- /dev/null
+++ b/src/app/canvas/devsecops.knowledge.ts
@@ -0,0 +1,58 @@
+import { foComponent } from '../foundry/foComponent.model';
+import { foLibrary } from '../foundry/foLibrary.model';
+
+export let DevSecOpsKnowledge: foLibrary = new foLibrary().defaultName('definitions');
+
+function Concept(name: string, spec?: any) {
+ return DevSecOpsKnowledge.concepts.define(name, foComponent, spec).hide();
+}
+
+function Structure(name: string, spec?: any) {
+ return DevSecOpsKnowledge.structures.define(name, spec).hide();
+}
+
+function Solution(name: string, spec?: any) {
+ return DevSecOpsKnowledge.solutions.define(name, spec).hide();
+}
+
+const root = Concept('Root', {
+ pipelineName: 'dave'
+});
+
+const gitRepository = Concept('gitRepository');
+const gitOrganization = Concept('gitOrganization');
+const gitBranch = Concept('gitBranch');
+
+const environment = Concept('environment');
+const workpacket = Concept('workpacket');
+
+const user = Concept('user');
+const developer = Concept('developer').inheritsFrom(user);
+const tester = Concept('tester').inheritsFrom(user);
+
+const test = Concept('test');
+
+const compile = Concept('compile');
+compile.subComponent('details');
+
+const stage1 = Structure('stage1').concept(compile);
+
+const stage2 = Structure('stage2').concept(test);
+
+const stage3 = Structure('stage3')
+ .concept(Concept('package'))
+ .subComponent('local');
+
+const pipe = Structure('Pipeline').show()
+ .concept(root)
+ .subComponent('stage1', stage1)
+ .subComponent('stage2', stage2)
+ .subComponent('stage3', stage3);
+
+
+ Solution('DevOps').show()
+ .useStructure(pipe)
+ .subSolution('security', Solution('security'))
+ .subSolution('metrics', Solution('metrics'))
+ .subSolution('governance', Solution('governance'));
+//.useStructureWhen(pipe, function(c) { return true});
diff --git a/src/app/canvas/devsecops.model.ts b/src/app/canvas/devsecops.model.ts
index 7533618..e96ca48 100644
--- a/src/app/canvas/devsecops.model.ts
+++ b/src/app/canvas/devsecops.model.ts
@@ -1,21 +1,29 @@
-import { foLibrary } from "../foundry/foLibrary.model";
-import { foStencilLibrary } from "../foundry/foStencil";
-import { foWorkspace } from "../foundry/foWorkspace.model";
-import { foComponent } from "../foundry/foComponent.model";
-import { foModel } from "../foundry/foModel.model";
-import { foImage2D } from "../foundry/shapes/foImage2D.model";
-import { foShape3D } from "../foundry/solids/foShape3D.model";
-import { foShape2D } from "./particle.model";
+import { foStencilLibrary } from '../foundry/foStencil';
+import { foWorkspace } from '../foundry/foWorkspace.model';
+
+import { foModel } from '../foundry/foModel.model';
+import { foImage2D } from '../foundry/shapes/foImage2D.model';
+import { foInputText2D } from '../foundry/shapes/foText2D.model';
+import { foShape2D } from '../foundry/shapes/foShape2D.model';
+import { foShape3D } from '../foundry/solids/foShape3D.model';
+//import { foShape2D } from "./particle.model";
import { iPoint2D } from '../foundry/foInterface';
import { foGlyph2D } from '../foundry/shapes/foGlyph2D.model';
import { foPath2D } from '../foundry/shapes/foPath2D.model';
+import { DevSecOpsKnowledge } from './devsecops.knowledge';
+export { DevSecOpsKnowledge } from './devsecops.knowledge';
+
+import { RuntimeType } from '../foundry/foRuntimeType';
+
+
-export let DevSecOpsKnowledge: foLibrary = new foLibrary().defaultName('definitions');
export let DevSecOpsShapes: foStencilLibrary = new foStencilLibrary().defaultName('shapes');
+
export let DevSecOpsSolids: foStencilLibrary = new foStencilLibrary().defaultName('solids');
+
export let DevSecOps: foWorkspace = new foWorkspace().defaultName('Dev Sec Ops');
DevSecOps.library.add(DevSecOpsKnowledge);
@@ -25,54 +33,70 @@ DevSecOps.stencil.add(DevSecOpsSolids);
DevSecOps.context.define('DevOpsFactory', foModel, {
title: 'Understand DevSecOps',
subtitle: 'Strutured Flexability'
-})
+});
+
+DevSecOpsShapes.define
('Text', foInputText2D, {
+ text: 'Understand DevSecOps',
+ fontSize: 30
+});
DevSecOpsShapes.define('Image', foImage2D, {
background: 'green',
- imageURL: "https://lorempixel.com/900/500?r=2",
+ imageURL: 'https://lorempixel.com/900/500?r=2',
width: 400,
height: 250
});
class shapeDevOps extends foShape2D {
+ doAnimation = () => {};
+
+ public render(ctx: CanvasRenderingContext2D, deep: boolean = true) {
+ this.doAnimation();
+ super.render(ctx, deep);
+ }
+
public drawSelected = (ctx: CanvasRenderingContext2D): void => {
- ctx.strokeStyle = "red";
+ ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
this.drawOutline(ctx);
- //this.drawHandles(ctx);
- //this.drawConnectionPoints(ctx);
this.drawPin(ctx);
}
findObjectUnderPoint(hit: iPoint2D, deep: boolean): foGlyph2D {
- let found: foGlyph2D = this.hitTest(hit) ? this : undefined;
-
- // if (deep) {
- // let child = this.findChildObjectUnderPoint(hit);
- // found = child ? child : found;
- // }
+ const found: foGlyph2D = this.hitTest(hit) ? this : undefined;
return found;
}
}
-let core = DevSecOpsShapes.mixin('core', {
+const core = DevSecOpsShapes.mixin('core', {
color: 'blue',
- opacity: .5,
+ opacity: 0.5,
width: 50,
height: 50
});
-DevSecOpsShapes.define('Heart', foPath2D, {
- scale: 2,
+DevSecOpsShapes.define('Heart', foPath2D, {
+ scale: 2
+}).mixin(core);
+
+DevSecOpsShapes.define('rocket', foPath2D, {
+ path:
+ // tslint:disable-next-line:max-line-length
+ 'M 201.2 222.1 C 210 216.5 218.6 210.1 225.7 203 C 249.9 178.8 252.6 157.5 250.1 149.9 C 253.7 146.3 257.3 142.7 260.9 139.1 C 261.9 138.1 261.9 136.5 260.9 135.5 C 259.9 134.5 258.3 134.5 257.3 135.5 C 253.7 139.1 250.1 142.7 246.5 146.3 C 238.9 143.8 217.6 146.5 193.4 170.7 C 186.3 177.8 179.9 186.4 174.3 195.2 C 166.2 193.2 152.1 193.2 142.3 204.1 C 131.1 216.4 137.7 228.1 140.2 225.7 C 142.2 223.6 145.6 211.3 160.4 220.8 C 158 225.8 158.1 228.9 159.7 230.4 C 161.8 232.5 163.9 234.6 166 236.7 C 167.6 238.3 170.6 238.5 175.7 236 C 185.1 250.8 172.8 254.2 170.8 256.3 C 168.3 258.7 180 265.3 192.3 254.1 C 203.2 244.3 203.2 230.2 201.2 222.1M 216.5 179.9 C 212.9 176.3 212.9 170.3 216.5 166.7 C 220.2 163 226.1 163 229.7 166.7 C 233.4 170.4 233.4 176.2 229.7 179.9 C 226.1 183.5 220.2 183.5 216.5 179.9M 156.4 233.5 C 156.4 233.5 146.4 235.3 142.7 253.7 C 161.1 250.1 162.9 240 162.9 240 C 160.8 237.8 158.6 235.7 156.4 233.5z'
}).mixin(core);
-DevSecOpsShapes.define('rocket', foPath2D, {
- path: "M 201.2 222.1 C 210 216.5 218.6 210.1 225.7 203 C 249.9 178.8 252.6 157.5 250.1 149.9 C 253.7 146.3 257.3 142.7 260.9 139.1 C 261.9 138.1 261.9 136.5 260.9 135.5 C 259.9 134.5 258.3 134.5 257.3 135.5 C 253.7 139.1 250.1 142.7 246.5 146.3 C 238.9 143.8 217.6 146.5 193.4 170.7 C 186.3 177.8 179.9 186.4 174.3 195.2 C 166.2 193.2 152.1 193.2 142.3 204.1 C 131.1 216.4 137.7 228.1 140.2 225.7 C 142.2 223.6 145.6 211.3 160.4 220.8 C 158 225.8 158.1 228.9 159.7 230.4 C 161.8 232.5 163.9 234.6 166 236.7 C 167.6 238.3 170.6 238.5 175.7 236 C 185.1 250.8 172.8 254.2 170.8 256.3 C 168.3 258.7 180 265.3 192.3 254.1 C 203.2 244.3 203.2 230.2 201.2 222.1M 216.5 179.9 C 212.9 176.3 212.9 170.3 216.5 166.7 C 220.2 163 226.1 163 229.7 166.7 C 233.4 170.4 233.4 176.2 229.7 179.9 C 226.1 183.5 220.2 183.5 216.5 179.9M 156.4 233.5 C 156.4 233.5 146.4 235.3 142.7 253.7 C 161.1 250.1 162.9 240 162.9 240 C 160.8 237.8 158.6 235.7 156.4 233.5z",
+DevSecOpsShapes.define('body', foPath2D, {
+ path:
+ // tslint:disable-next-line:max-line-length
+ 'M13.38,201.93a101.41,101.41,0,0,1,2-19.62,99.45,99.45,0,0,1,27-50.85,96.1,96.1,0,0,1,21.5-16.3c1.32-.74,2-.19,2.86.56a64,64,0,0,0,82.22.46l2-1.62c34.2,17.57,52.4,55.17,51.68,87.36Z'
+}).mixin(core);
+DevSecOpsShapes.define('head', foPath2D, {
+ path:
+ 'M55.62,66.49c-.22-28.7,23.73-52.88,53.65-52.41,28,.44,51.48,24.15,51.41,52.53a52.53,52.53,0,1,1-105.06-.13Z'
}).mixin(core);
class shapeUI extends shapeDevOps {
-
drawTriangle(ctx: CanvasRenderingContext2D, x1, y1, x2, y2, x3, y3) {
ctx.beginPath();
ctx.moveTo(x1, y1);
@@ -86,7 +110,15 @@ class shapeUI extends shapeDevOps {
ctx.fillStyle = this.color;
ctx.lineWidth = 1;
ctx.globalAlpha = this.opacity;
- this.drawTriangle(ctx, 0, this.height, this.width / 2, 0, this.width, this.height);
+ this.drawTriangle(
+ ctx,
+ 0,
+ this.height,
+ this.width / 2,
+ 0,
+ this.width,
+ this.height
+ );
}
}
@@ -113,19 +145,18 @@ class shapeEnv extends shapeDevOps {
ctx.lineWidth = 1;
ctx.globalAlpha = this.opacity;
ctx.fillRect(0, this.height / 2, this.width, this.height / 2);
- this.drawSemiCircle(ctx, this.width / 2, this.height / 2, this.radius)
+ this.drawSemiCircle(ctx, this.width / 2, this.height / 2, this.radius);
}
}
DevSecOpsShapes.define('Env', shapeEnv, {
- radius: 10,
+ radius: 10
}).mixin(core);
-
class shapeInvEnv extends shapeDevOps {
radius: number;
drawSemiCircle(ctx: CanvasRenderingContext2D, x, y, r) {
- ctx.save()
+ ctx.save();
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
@@ -139,16 +170,15 @@ class shapeInvEnv extends shapeDevOps {
ctx.lineWidth = 1;
ctx.globalAlpha = this.opacity;
ctx.fillRect(0, 0, this.width, this.height / 2);
- this.drawSemiCircle(ctx, this.width / 2, this.height / 2, this.radius)
+ this.drawSemiCircle(ctx, this.width / 2, this.height / 2, this.radius);
}
}
DevSecOpsShapes.define('InvEnv', shapeInvEnv, {
- radius: 10,
+ radius: 10
}).mixin(core);
class shapeData extends shapeDevOps {
-
drawCircle(ctx: CanvasRenderingContext2D, r) {
ctx.beginPath();
ctx.arc(this.width / 2, this.height / 2, r, 0, 2 * Math.PI);
@@ -160,83 +190,159 @@ class shapeData extends shapeDevOps {
ctx.fillStyle = this.color;
ctx.strokeStyle = this.color;
ctx.lineWidth = 1;
- this.drawCircle(ctx, this.width / 2)
+ this.drawCircle(ctx, this.width / 2);
}
}
-DevSecOpsShapes.define('UI', shapeUI, {
-}).mixin(core);
+DevSecOpsShapes.define('UI', shapeUI, {}).mixin(core);
-DevSecOpsShapes.define('Service', shapeService, {
-}).mixin(core);
-
-DevSecOpsShapes.define('Data', shapeData, {
-}).mixin(core);
+DevSecOpsShapes.define('Service', shapeService, {}).mixin(core);
+DevSecOpsShapes.define('Data', shapeData, {}).mixin(core);
class shapeApp extends shapeDevOps {
+ //override the storage of subcomponents because
+ //they get created during on creation
+ public deHydrate(context?: any, deep: boolean = false) {
+ return super.deHydrate(context, false);
+ }
}
DevSecOpsShapes.define('App', shapeApp, {
- color: 'cyan',
+ color: 'cyan'
}).onCreation(obj => {
-
- let UI = DevSecOpsShapes.find('UI').makeComponent(obj);
- let Service = DevSecOpsShapes.find('Service').makeComponent(obj);
- let Data = DevSecOpsShapes.find('Data').makeComponent(obj);
- let InvEnv = DevSecOpsShapes.find('InvEnv').makeComponent(obj);
+ //with predefined names, save and restore is easire
+ const UI = DevSecOpsShapes.find('UI')
+ .makeComponent(obj)
+ .setName('UI');
+ const Service = DevSecOpsShapes.find('Service')
+ .makeComponent(obj)
+ .setName('Service');
+ const Data = DevSecOpsShapes.find('Data')
+ .makeComponent(obj)
+ .setName('Data');
+ const InvEnv = DevSecOpsShapes.find('InvEnv')
+ .makeComponent(obj)
+ .setName('InvEnv');
obj.width = 1.3 * UI.width;
obj.height = 3.3 * UI.height;
- let x = obj.width / 2;
- let y = obj.height / 6;
+ const x = obj.width / 2;
+ const y = obj.height / 6;
UI.dropAt(x, 1 * y);
Service.dropAt(x, 3 * y);
Data.dropAt(x, 5 * y);
InvEnv.dropAt(x, 7 * y);
-})
+ UI.doAnimation = function(): void {
+ let angle = this.angle + 2;
+ angle = angle >= 360 ? 0 : angle;
+ this.angle = angle;
+ };
+});
DevSecOpsSolids.define('red box', foShape3D, {
color: 'red',
- opacity: .5,
+ opacity: 0.5,
width: 100,
height: 400,
depth: 900
-})
-
-
-
-function getConcept(name: string, spec?: any) {
- return DevSecOpsKnowledge.concepts.define(name, foComponent, spec).hide();
-}
-let root = getConcept('Root', {
- pipelineName: 'dave',
});
-let compile = getConcept('compile');
-compile.subComponent('details', {})
-let s1 = DevSecOpsKnowledge.structures.define('stage1', {})
- .concept(compile).hide();
-let s2 = DevSecOpsKnowledge.structures.define('stage2', {})
- .concept(getConcept('test')).hide();
-let s3 = DevSecOpsKnowledge.structures.define('stage3', {})
- .concept(getConcept('package')).hide()
- .subComponent('local', {})
+class legoCore extends foShape2D {
+ description: string;
+ size: string = '0:0';
+
+ constructor(properties?: any) {
+ super(properties);
+ this.description = this.myType;
+
+ this.override({
+ height: function() {
+ // tslint:disable-next-line:radix
+ const size = parseInt(this.size.split(':')[1]);
+ return 25 * size;
+ },
+ width: function() {
+ // tslint:disable-next-line:radix
+ const size = parseInt(this.size.split(':')[0]);
+ return 25 * size;
+ }
+ });
+ }
-let pipe = DevSecOpsKnowledge.structures.define('Pipeline', {
-}).concept(root)
- .subComponent('s1', s1)
- .subComponent('s2', s2)
- .subComponent('s3', s3)
+ doAnimation = () => {};
+ public render(ctx: CanvasRenderingContext2D, deep: boolean = true) {
+ this.doAnimation();
+ super.render(ctx, deep);
+ }
-DevSecOpsKnowledge.solutions.define('DevOps')
- .useStructure(pipe)
- .subSolution('security', DevSecOpsKnowledge.solutions.define('security').hide())
- .subSolution('metrics', DevSecOpsKnowledge.solutions.define('metrics').hide())
- .subSolution('governance', DevSecOpsKnowledge.solutions.define('governance').hide())
- //.useStructureWhen(pipe, function(c) { return true});
+ public postDraw = (ctx: CanvasRenderingContext2D): void => {
+ this.drawPin(ctx);
+ }
+}
+
+class TwoByFour extends legoCore {
+ public pinX = (): number => {
+ return 0 * this.width / 2;
+ }
+ public pinY = (): number => {
+ return 1 * this.height / 2;
+ }
+ constructor(properties?: any) {
+ super(properties);
+ this.size = '2:4';
+ }
+ doAnimation = function(): void {
+ let angle = this.angle + 5;
+ angle = angle >= 360 ? 0 : angle;
+ this.angle = angle;
+ };
+}
+RuntimeType.define(TwoByFour);
+class TenByTen extends legoCore {
+ constructor(properties?: any) {
+ super(properties);
+ this.size = '10:10';
+ }
+}
+RuntimeType.define(TenByTen);
+
+DevSecOpsShapes.factory('animation', (spec?: any) => {
+ const results = Array();
+
+ const shape = RuntimeType.create(TenByTen, {
+ myGuid: spec && spec.shape,
+ opacity: 0.5,
+ color: 'gray',
+ angle: 10
+ })
+ .dropAt(600, 300)
+ .pushTo(results)
+ .defaultName();
+
+ const subShape = RuntimeType.create(TwoByFour, {
+ myGuid: spec && spec.subShape,
+ color: 'red'
+ })
+ .addAsSubcomponent(shape, {
+ x: function() {
+ return shape.width / 4;
+ },
+ y: 150,
+ angle: 0
+ })
+ .setName('spinner');
+
+ // subShape.doAnimation = function (): void {
+ // let angle = this.angle + 5;
+ // angle = angle >= 360 ? 0 : angle;
+ // this.angle = angle;
+ // }
+
+ return results;
+});
diff --git a/src/app/canvas/domain.component.html b/src/app/canvas/domain.component.html
index a82006a..9438964 100644
--- a/src/app/canvas/domain.component.html
+++ b/src/app/canvas/domain.component.html
@@ -2,8 +2,13 @@
@@ -38,4 +43,4 @@ {{workspace.myName}}
-
+
\ No newline at end of file
diff --git a/src/app/canvas/domain.component.ts b/src/app/canvas/domain.component.ts
index f60e4f1..590c88e 100644
--- a/src/app/canvas/domain.component.ts
+++ b/src/app/canvas/domain.component.ts
@@ -1,17 +1,17 @@
-import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChild, HostListener } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { Tools } from "../foundry/foTools";
+import { globalWorkspace, foWorkspace } from '../foundry/foWorkspace.model';
+import { foModel } from '../foundry/foModel.model';
-import { globalWorkspace, foWorkspace } from "../foundry/foWorkspace.model";
-import { foPage } from "../foundry/shapes/foPage.model";
-import { foModel } from "../foundry/foModel.model";
-
-import { SharingService } from "../common/sharing.service";
-import { Lifecycle, foLifecycleEvent, Knowcycle } from "../foundry/foLifecycle";
-
-import { DevSecOpsKnowledge, DevSecOpsShapes, DevSecOpsSolids } from "./devsecops.model";
+import { SharingService } from '../common/sharing.service';
+import { Toast } from '../common/emitter.service';
+import {
+ DevSecOpsKnowledge,
+ DevSecOpsShapes,
+ DevSecOpsSolids
+} from './devsecops.model';
@Component({
selector: 'fo-domain',
@@ -19,22 +19,40 @@ import { DevSecOpsKnowledge, DevSecOpsShapes, DevSecOpsSolids } from "./devsecop
styleUrls: ['./domain.component.css']
})
export class DomainComponent implements OnInit {
-
workspace: foWorkspace = globalWorkspace;
model: foModel;
-
- constructor(
- private sharing: SharingService) {
- }
+
+ constructor() {}
ngOnInit() {
-
+ globalWorkspace.setName('Domain Model');
this.workspace.stencil.add(DevSecOpsShapes);
this.workspace.stencil.add(DevSecOpsSolids);
this.workspace.library.add(DevSecOpsKnowledge);
- this.workspace.model.addItem('default', new foModel({}));
- this.model = this.workspace.model.getItem('default')
+ this.model = new foModel().defaultName('Domain Model');
+ this.workspace.model.addItem('default', this.model);
}
+ doSave() {
+ this.workspace.SaveInstanceAs(
+ this.model,
+ this.model.myName,
+ '.json',
+ result => {
+ Toast.info('saved', result.filename);
+ }
+ );
+ }
+
+ doOpen() {
+ this.workspace.openFile(result => {
+ Toast.info('open', result.filename);
+ this.workspace.reHydratePayload(result.payload);
+ });
+ }
+
+ doClear() {
+ this.model.clearAll();
+ }
}
diff --git a/src/app/canvas/domain.model.ts b/src/app/canvas/domain.model.ts
index 52d0ea4..fabc002 100644
--- a/src/app/canvas/domain.model.ts
+++ b/src/app/canvas/domain.model.ts
@@ -1,6 +1,6 @@
-import { foLibrary } from "../foundry/foLibrary.model";
-import { foComponent } from "../foundry/foComponent.model";
+import { foLibrary } from '../foundry/foLibrary.model';
+import { foComponent } from '../foundry/foComponent.model';
//import { RuntimeType } from '../foundry/foRuntimeType';
export let PersonDomain: foLibrary = new foLibrary().defaultName();
diff --git a/src/app/canvas/drawing.component.ts b/src/app/canvas/drawing.component.ts
index e55909d..f64bd81 100644
--- a/src/app/canvas/drawing.component.ts
+++ b/src/app/canvas/drawing.component.ts
@@ -1,42 +1,47 @@
-import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChild, HostListener } from '@angular/core';
+import {
+ Component,
+ Input,
+ OnInit,
+ AfterViewInit,
+ ElementRef,
+ ViewChild,
+ HostListener
+} from '@angular/core';
-import { Tools } from "../foundry/foTools";
+import { Tools } from '../foundry/foTools';
-import { globalWorkspace, foWorkspace } from "../foundry/foWorkspace.model";
-import { foPage } from "../foundry/shapes/foPage.model";
-import { foModel } from "../foundry/foModel.model";
+import { globalWorkspace, foWorkspace } from '../foundry/foWorkspace.model';
+import { foPage } from '../foundry/shapes/foPage.model';
+import { foModel } from '../foundry/foModel.model';
-import { Screen2D } from "../foundry/shapes/canvasDriver";
-import { Screen3D } from "../foundry/solids/threeDriver";
+import { Screen2D } from '../foundry/shapes/canvasDriver';
+import { Screen3D } from '../foundry/solids/threeDriver';
import { BroadcastChange } from '../foundry/foChange';
import { cPoint2D } from '../foundry/shapes/foGeometry2D';
-import { foGlyph2D } from "../foundry/shapes/foGlyph2D.model";
-import { foShape3D } from "../foundry/solids/foShape3D.model";
+import { foGlyph2D } from '../foundry/shapes/foGlyph2D.model';
+import { foShape3D } from '../foundry/solids/foShape3D.model';
-import { SharingService } from "../common/sharing.service";
-import { Lifecycle, foLifecycleEvent, Knowcycle } from "../foundry/foLifecycle";
+import { SharingService } from '../common/sharing.service';
+import { Lifecycle, foLifecycleEvent, Knowcycle } from '../foundry/foLifecycle';
import { foChangeEvent } from '../foundry/foChange';
import { foDocument } from '../foundry/shapes/foDocument.model';
import { foStudio } from '../foundry/solids/foStudio.model';
import { foStage } from '../foundry/solids/foStage.model';
-
-import { ParticleStencil, foShape2D } from "./particle.model";
-import { ShapeStencil } from "./shapes.model";
-import { PersonDomain } from "./domain.model";
+import { ParticleStencil, foShape2D } from './particle.model';
+import { ShapeStencil } from './shapes.model';
+import { PersonDomain } from './domain.model';
import { foGlue2D } from '../foundry/shapes/foGlue2D';
import { filter } from 'rxjs/operators';
-import { SolidStencil } from "./solids.model";
-
-
- //using tween
- //https://greensock.com/forums/topic/12406-make-threejs-object-invisible/
+import { SolidStencil } from './solids.model';
- //https://www.npmjs.com/package/modular-three
+//using tween
+//https://greensock.com/forums/topic/12406-make-threejs-object-invisible/
+//https://www.npmjs.com/package/modular-three
@Component({
selector: 'foundry-drawing',
@@ -45,20 +50,16 @@ import { SolidStencil } from "./solids.model";
})
export class DrawingComponent implements OnInit, AfterViewInit {
label: string = 'Off';
- lifecycleEvent: Array