@wildebeest/boxlayout - npm Package Compare versions

Comparing version 0.4.8 to 0.4.9

dist/block/BlockBlueprint.d.ts

 import { Block } from "./Block";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 export declare class BlockBlueprint implements Block {
     protected config: Array<any>;
-    constructor(config: Array<any>);
+    protected emitter: Emitter;
+    constructor(emitter: Emitter, config: Array<any>);
     bind(element: HTMLElement): void;
     getPositions(): Array<AbsolutePosition>;
 }

dist/block/BlockBlueprint.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var PixelsBinding_1 = require("../binding/PixelsBinding");
+var CallbackBinding_1 = require("../binding/CallbackBinding");
 var BlockBlueprint = (function () {
-    function BlockBlueprint(config) {
+    function BlockBlueprint(emitter, config) {
+        var _this = this;
+        this.emitter = emitter;
         this.config = config;
+        for (var i = 0; i < config.length; i++) {
+            this.config[i].position.bind(new CallbackBinding_1.CallbackBinding(function () {
+                _this.emitter.emit('change', {
+                    positions: _this.getPositions()
+                });
+            }));
+        }
     }
@@ -8,0 +18,0 @@ BlockBlueprint.prototype.bind = function (element) {

dist/block/HorizontalBlock.d.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 export declare class HorizontalBlock implements Block {
     protected blueprint: BlockBlueprint;
-    constructor(left: AbsolutePosition, right: AbsolutePosition, top: AbsolutePosition);
+    constructor(emitter: Emitter, left: AbsolutePosition, right: AbsolutePosition, top: AbsolutePosition);
     bind(element: HTMLElement): void;
     getPositions(): Array<AbsolutePosition>;
 }

dist/block/HorizontalBlock.js

@@ -5,4 +5,4 @@ "use strict";
 var HorizontalBlock = (function () {
-    function HorizontalBlock(left, right, top) {
-        this.blueprint = new BlockBlueprint_1.BlockBlueprint([
+    function HorizontalBlock(emitter, left, right, top) {
+        this.blueprint = new BlockBlueprint_1.BlockBlueprint(emitter, [
             {
@@ -9,0 +9,0 @@ elementProperty: 'style.left',

dist/block/RectangleBlock.d.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 export declare class RecktangleBlock implements Block {
     protected blueprint: BlockBlueprint;
-    constructor(top: AbsolutePosition, right: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition);
+    constructor(emitter: Emitter, top: AbsolutePosition, right: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition);
     bind(element: HTMLElement): void;
     getPositions(): Array<AbsolutePosition>;
 }

dist/block/RectangleBlock.js

@@ -5,4 +5,4 @@ "use strict";
 var RecktangleBlock = (function () {
-    function RecktangleBlock(top, right, bottom, left) {
-        this.blueprint = new BlockBlueprint_1.BlockBlueprint([
+    function RecktangleBlock(emitter, top, right, bottom, left) {
+        this.blueprint = new BlockBlueprint_1.BlockBlueprint(emitter, [
             {
@@ -22,2 +22,3 @@ elementProperty: 'style.top',
         ]);
+        this.blueprint;
     }
@@ -24,0 +25,0 @@ RecktangleBlock.prototype.bind = function (element) {

dist/block/VerticalBlock.d.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 export declare class VerticalBlock implements Block {
     protected blueprint: BlockBlueprint;
-    constructor(top: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition);
+    constructor(emitter: Emitter, top: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition);
     bind(element: HTMLElement): void;
     getPositions(): Array<AbsolutePosition>;
 }

dist/block/VerticalBlock.js

@@ -5,4 +5,4 @@ "use strict";
 var VerticalBlock = (function () {
-    function VerticalBlock(top, bottom, left) {
-        this.blueprint = new BlockBlueprint_1.BlockBlueprint([
+    function VerticalBlock(emitter, top, bottom, left) {
+        this.blueprint = new BlockBlueprint_1.BlockBlueprint(emitter, [
             {
@@ -9,0 +9,0 @@ elementProperty: 'style.top',

dist/BoxLayout.d.ts

@@ -14,3 +14,3 @@ import { EmitterService, Emitter, ViewportService, DomService } from "@wildebeest/common";
     protected positions: any;
-    protected blueprints: any;
+    protected blocks: any;
     protected emitterService: EmitterService;
@@ -26,4 +26,4 @@ protected emitter: Emitter;
     getPositions(): any;
-    protected createDragableDevider(blueprint: BlockBlueprint, builder: ComponentBuilder): Component;
-    setBlock(element: any, blockName: string): void;
+    protected createDragableDevider(block: BlockBlueprint, builder: ComponentBuilder): Component;
+    bindElement(element: any, blockName: string): Block;
     getBlock(blockName: string): Block;
@@ -30,0 +30,0 @@ getEmitter(): Emitter;

dist/BoxLayout.js

@@ -29,3 +29,3 @@ "use strict";
         this.positions = {};
-        this.blueprints = {};
+        this.blocks = {};
         this.config = {};
@@ -51,11 +51,11 @@ this.builers = {};
         };
-        this.blueprints = {
-            top: new RectangleBlock_1.RecktangleBlock(this.positions.screenTop, this.positions.screenRight, new InverseValue_1.InverseValue(this.positions.top), this.positions.screenLeft),
-            left: new RectangleBlock_1.RecktangleBlock(this.positions.top, new InverseValue_1.InverseValue(this.positions.left), this.positions.screenBottom, this.positions.screenLeft),
-            center: new RectangleBlock_1.RecktangleBlock(this.positions.top, this.positions.right, this.positions.bottom, this.positions.left),
-            right: new RectangleBlock_1.RecktangleBlock(this.positions.top, this.positions.screenRight, this.positions.bottom, new InverseValue_1.InverseValue(this.positions.right)),
-            bottom: new RectangleBlock_1.RecktangleBlock(new InverseValue_1.InverseValue(this.positions.bottom), this.positions.screenRight, this.positions.screenBottom, this.positions.left),
-            deviderLeft: new VerticalBlock_1.VerticalBlock(this.positions.top, this.positions.screenBottom, this.positions.left),
-            deviderRight: new VerticalBlock_1.VerticalBlock(this.positions.top, this.positions.bottom, new InverseValue_1.InverseValue(this.positions.right)),
-            deviderBottom: new HorizontalBlock_1.HorizontalBlock(this.positions.left, this.positions.screenRight, new InverseValue_1.InverseValue(this.positions.bottom))
+        this.blocks = {
+            top: new RectangleBlock_1.RecktangleBlock(this.emitterService.createEmitter(), this.positions.screenTop, this.positions.screenRight, new InverseValue_1.InverseValue(this.positions.top), this.positions.screenLeft),
+            left: new RectangleBlock_1.RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, new InverseValue_1.InverseValue(this.positions.left), this.positions.screenBottom, this.positions.screenLeft),
+            center: new RectangleBlock_1.RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.right, this.positions.bottom, this.positions.left),
+            right: new RectangleBlock_1.RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.screenRight, this.positions.bottom, new InverseValue_1.InverseValue(this.positions.right)),
+            bottom: new RectangleBlock_1.RecktangleBlock(this.emitterService.createEmitter(), new InverseValue_1.InverseValue(this.positions.bottom), this.positions.screenRight, this.positions.screenBottom, this.positions.left),
+            deviderLeft: new VerticalBlock_1.VerticalBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.screenBottom, this.positions.left),
+            deviderRight: new VerticalBlock_1.VerticalBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.bottom, new InverseValue_1.InverseValue(this.positions.right)),
+            deviderBottom: new HorizontalBlock_1.HorizontalBlock(this.emitterService.createEmitter(), this.positions.left, this.positions.screenRight, new InverseValue_1.InverseValue(this.positions.bottom))
         };
@@ -72,9 +72,9 @@ }
         if (config.deviders && config.deviders.dragable) {
-            this.createDragableDevider(this.blueprints.deviderLeft, this.builers.vertical).getEmitter().on('wbDrag', function (event) {
+            this.createDragableDevider(this.blocks.deviderLeft, this.builers.vertical).getEmitter().on('wbDrag', function (event) {
                 _this.positions.left.moveBy(event.horizontal);
             });
-            this.createDragableDevider(this.blueprints.deviderRight, this.builers.vertical).getEmitter().on('wbDrag', function (event) {
+            this.createDragableDevider(this.blocks.deviderRight, this.builers.vertical).getEmitter().on('wbDrag', function (event) {
                 _this.positions.right.moveBy(-event.horizontal);
             });
-            this.createDragableDevider(this.blueprints.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', function (event) {
+            this.createDragableDevider(this.blocks.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', function (event) {
                 _this.positions.bottom.moveBy(-event.vertical);
@@ -87,13 +87,14 @@ });
     };
-    BoxLayout.prototype.createDragableDevider = function (blueprint, builder) {
+    BoxLayout.prototype.createDragableDevider = function (block, builder) {
         var deviderElement = builder.build({});
         this.domService.insert([deviderElement.getElement()], this.element);
-        blueprint.bind(deviderElement.getElement());
+        block.bind(deviderElement.getElement());
         return deviderElement;
     };
-    BoxLayout.prototype.setBlock = function (element, blockName) {
-        this.blueprints[blockName].bind(element);
+    BoxLayout.prototype.bindElement = function (element, blockName) {
+        this.blocks[blockName].bind(element);
+        return this.getBlock(blockName);
     };
     BoxLayout.prototype.getBlock = function (blockName) {
-        return this.blueprints[blockName];
+        return this.blocks[blockName];
     };
@@ -100,0 +101,0 @@ BoxLayout.prototype.getEmitter = function () {

package.json

 {
   "name": "@wildebeest/boxlayout",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Box Layout module for creating fullscreen admin enviroments",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/block/BlockBlueprint.ts

@@ -5,2 +5,4 @@ import { Binding } from "../binding/Binding";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
+import { CallbackBinding } from "../binding/CallbackBinding";
 
@@ -10,6 +12,16 @@ export class BlockBlueprint implements Block
     protected config: Array<any>;
+    protected emitter: Emitter;
 
-    constructor(config: Array<any>)
+    constructor(emitter: Emitter, config: Array<any>)
     {
+        this.emitter = emitter;
         this.config = config;
+
+        for (let i = 0; i < config.length; i++) {
+            this.config[i].position.bind(new CallbackBinding(() => {
+                this.emitter.emit('change', {
+                    positions: this.getPositions()
+                });
+            }))
+        }
     }
@@ -16,0 +28,0 @@

src/block/HorizontalBlock.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 
@@ -9,5 +10,5 @@ export class HorizontalBlock implements Block
 
-    constructor(left: AbsolutePosition, right: AbsolutePosition, top: AbsolutePosition)
+    constructor(emitter: Emitter, left: AbsolutePosition, right: AbsolutePosition, top: AbsolutePosition)
     {
-        this.blueprint = new BlockBlueprint([
+        this.blueprint = new BlockBlueprint(emitter, [
             {
@@ -14,0 +15,0 @@ elementProperty: 'style.left',

src/block/RectangleBlock.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 
@@ -9,5 +10,5 @@ export class RecktangleBlock implements Block
 
-    constructor(top: AbsolutePosition, right: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition)
+    constructor(emitter: Emitter, top: AbsolutePosition, right: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition)
     {
-        this.blueprint = new BlockBlueprint([
+        this.blueprint = new BlockBlueprint(emitter, [
             {
@@ -27,2 +28,4 @@ elementProperty: 'style.top',
         ]);
+
+        this.blueprint
     }
@@ -29,0 +32,0 @@

src/block/VerticalBlock.ts

 import { Block } from "./Block";
 import { BlockBlueprint } from "./BlockBlueprint";
 import { AbsolutePosition } from "../position/AbsolutePosition";
+import { Emitter } from "@wildebeest/common";
 
@@ -9,5 +10,5 @@ export class VerticalBlock implements Block
 
-    constructor(top: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition)
+    constructor(emitter: Emitter, top: AbsolutePosition, bottom: AbsolutePosition, left: AbsolutePosition)
     {
-        this.blueprint = new BlockBlueprint([
+        this.blueprint = new BlockBlueprint(emitter, [
             {
@@ -14,0 +15,0 @@ elementProperty: 'style.top',

src/BoxLayout.ts

@@ -26,3 +26,3 @@ import { injectable, inject } from "inversify";
     protected positions: any = {};
-    protected blueprints: any = {};
+    protected blocks: any = {};
     protected emitterService: EmitterService;
@@ -58,11 +58,11 @@ protected emitter: Emitter;
 
-        this.blueprints = {
-            top: new RecktangleBlock(this.positions.screenTop, this.positions.screenRight, new InverseValue(this.positions.top), this.positions.screenLeft),
-            left: new RecktangleBlock(this.positions.top, new InverseValue(this.positions.left), this.positions.screenBottom, this.positions.screenLeft),
-            center: new RecktangleBlock(this.positions.top, this.positions.right, this.positions.bottom, this.positions.left),
-            right: new RecktangleBlock(this.positions.top, this.positions.screenRight, this.positions.bottom, new InverseValue(this.positions.right)),
-            bottom: new RecktangleBlock(new InverseValue(this.positions.bottom), this.positions.screenRight, this.positions.screenBottom, this.positions.left),
-            deviderLeft: new VerticalBlock(this.positions.top, this.positions.screenBottom, this.positions.left),
-            deviderRight: new VerticalBlock(this.positions.top, this.positions.bottom, new InverseValue(this.positions.right)),
-            deviderBottom: new HorizontalBlock(this.positions.left, this.positions.screenRight, new InverseValue(this.positions.bottom))
+        this.blocks = {
+            top: new RecktangleBlock(this.emitterService.createEmitter(), this.positions.screenTop, this.positions.screenRight, new InverseValue(this.positions.top), this.positions.screenLeft),
+            left: new RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, new InverseValue(this.positions.left), this.positions.screenBottom, this.positions.screenLeft),
+            center: new RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.right, this.positions.bottom, this.positions.left),
+            right: new RecktangleBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.screenRight, this.positions.bottom, new InverseValue(this.positions.right)),
+            bottom: new RecktangleBlock(this.emitterService.createEmitter(), new InverseValue(this.positions.bottom), this.positions.screenRight, this.positions.screenBottom, this.positions.left),
+            deviderLeft: new VerticalBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.screenBottom, this.positions.left),
+            deviderRight: new VerticalBlock(this.emitterService.createEmitter(), this.positions.top, this.positions.bottom, new InverseValue(this.positions.right)),
+            deviderBottom: new HorizontalBlock(this.emitterService.createEmitter(), this.positions.left, this.positions.screenRight, new InverseValue(this.positions.bottom))
         }
@@ -82,9 +82,9 @@ }
         if (config.deviders && config.deviders.dragable) {
-            this.createDragableDevider(this.blueprints.deviderLeft, this.builers.vertical).getEmitter().on('wbDrag', (event: any) => {
+            this.createDragableDevider(this.blocks.deviderLeft, this.builers.vertical).getEmitter().on('wbDrag', (event: any) => {
                 this.positions.left.moveBy(event.horizontal);
             });
-            this.createDragableDevider(this.blueprints.deviderRight, this.builers.vertical).getEmitter().on('wbDrag', (event: any) => {
+            this.createDragableDevider(this.blocks.deviderRight, this.builers.vertical).getEmitter().on('wbDrag', (event: any) => {
                 this.positions.right.moveBy(-event.horizontal);
             });
-            this.createDragableDevider(this.blueprints.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', (event: any) => {
+            this.createDragableDevider(this.blocks.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', (event: any) => {
                 this.positions.bottom.moveBy(-event.vertical);
@@ -102,13 +102,14 @@ });
 
-    protected createDragableDevider(blueprint: BlockBlueprint, builder: ComponentBuilder): Component
+    protected createDragableDevider(block: BlockBlueprint, builder: ComponentBuilder): Component
     {
         let deviderElement: Component = builder.build({});
         this.domService.insert([deviderElement.getElement()], this.element);
-        blueprint.bind(deviderElement.getElement());
+        block.bind(deviderElement.getElement());
         return deviderElement;
     }
 
-    public setBlock(element: any, blockName: string): void
+    public bindElement(element: any, blockName: string): Block
     {
-        this.blueprints[blockName].bind(element);
+        this.blocks[blockName].bind(element);
+        return this.getBlock(blockName);
     }
@@ -118,3 +119,3 @@
     {
-        return this.blueprints[blockName];
+        return this.blocks[blockName];
     }
@@ -121,0 +122,0 @@

tests/BoxLayout.test.ts

@@ -21,7 +21,7 @@ import 'ts-jest';
     });
-    boxLayout.setBlock(element.querySelector('.top'), BoxLayout.BLOCK_TOP);
-    boxLayout.setBlock(element.querySelector('.left'), BoxLayout.BLOCK_LEFT);
-    boxLayout.setBlock(element.querySelector('.center'), BoxLayout.BLOCK_CENTER);
-    boxLayout.setBlock(element.querySelector('.right'), BoxLayout.BLOCK_RIGHT);
-    boxLayout.setBlock(element.querySelector('.bottom'), BoxLayout.BLOCK_BOTTOM);
+    boxLayout.bindElement(element.querySelector('.top'), BoxLayout.BLOCK_TOP);
+    boxLayout.bindElement(element.querySelector('.left'), BoxLayout.BLOCK_LEFT);
+    boxLayout.bindElement(element.querySelector('.center'), BoxLayout.BLOCK_CENTER);
+    boxLayout.bindElement(element.querySelector('.right'), BoxLayout.BLOCK_RIGHT);
+    boxLayout.bindElement(element.querySelector('.bottom'), BoxLayout.BLOCK_BOTTOM);
 
@@ -28,0 +28,0 @@ viewportService.getEmitter().emit('change', {

No alert changes

Improved metrics

Total package byte prevSize

121119

increased by2.43%

Lines of code

2145

increased by1.56%

No dependency changes