@wildebeest/boxlayout - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/BoxLayout.d.ts

 import { EmitterService, Emitter, ViewportService, DomService } from "@wildebeest/common";
-import { EmptyLayout } from "./EmptyLayout";
-import { LayoutDevider } from "./LayoutDevider";
-import { DeviderElementBuilder } from "./DeviderElementBuilder";
-import { BindageService } from "./BindageService";
+import { HorizontalDeviderBuilder } from "./HorizontalDeviderBuilder";
+import { BlockBlueprint } from "./block/BlockBlueprint";
+import { ComponentBuilder, Component } from "@wildebeest/component";
+import { VerticalDeviderBuilder } from "./VerticalDeviderBuilder";
 export declare class BoxLayout {
-    protected layout: EmptyLayout;
+    protected positions: any;
+    protected blueprints: any;
     protected emitterService: EmitterService;
     protected emitter: Emitter;
     protected viewportService: ViewportService;
-    protected bindageService: BindageService;
-    protected deviderBuilderFactory: (name: string) => DeviderElementBuilder;
     protected domService: DomService;
     protected config: any;
-    protected blockBindings: any;
-    protected deviderBindings: any;
-    constructor(emitterService: EmitterService, viewportService: ViewportService, bindageService: BindageService, deviderBuilderFactory: (name: string) => DeviderElementBuilder, domService: DomService);
-    initialize(element: any, config: any): void;
+    protected builers: any;
+    protected element: HTMLElement;
+    constructor(emitterService: EmitterService, viewportService: ViewportService, horizontalBuilder: HorizontalDeviderBuilder, verticalBuilder: VerticalDeviderBuilder, domService: DomService);
+    initialize(element: HTMLElement, config: any): void;
     getPositions(): any;
-    protected addVerticalDeviderDrag(deviderName: string): any;
-    protected addHorizontalDeviderDrag(deviderName: string): any;
-    getDevider(name: string): LayoutDevider;
+    protected createDragableDevider(blueprint: BlockBlueprint, builder: ComponentBuilder): Component;
     setBlock(element: any, blockName: string): void;
     getEmitter(): Emitter;
-    recalc(): void;
 }

dist/BoxLayout.js

@@ -17,97 +17,75 @@ "use strict";
 var common_1 = require("@wildebeest/common");
-var EmptyLayout_1 = require("./EmptyLayout");
-var LayoutDevider_1 = require("./LayoutDevider");
-var InverseLayoutDevider_1 = require("./InverseLayoutDevider");
-var BindageService_1 = require("./BindageService");
+var HorizontalDeviderBuilder_1 = require("./HorizontalDeviderBuilder");
+var SceenVerticalPositionValue_1 = require("./position/SceenVerticalPositionValue");
+var ScreenHorizontalPositionValue_1 = require("./position/ScreenHorizontalPositionValue");
+var RectangleBlock_1 = require("./block/RectangleBlock");
+var VerticalBlock_1 = require("./block/VerticalBlock");
+var HorizontalBlock_1 = require("./block/HorizontalBlock");
+var VerticalDeviderBuilder_1 = require("./VerticalDeviderBuilder");
 var BoxLayout = (function () {
-    function BoxLayout(emitterService, viewportService, bindageService, deviderBuilderFactory, domService) {
+    function BoxLayout(emitterService, viewportService, horizontalBuilder, verticalBuilder, domService) {
+        this.positions = {};
+        this.blueprints = {};
         this.config = {};
-        this.blockBindings = {
-            'top': ['screen-top', 'screen-right', 'top', 'screen-left'],
-            'left': ['top', 'left', 'screen-bottom', 'screen-left'],
-            'center': ['top', 'right', 'bottom', 'left'],
-            'right': ['top', 'screen-right', 'bottom', 'right'],
-            'bottom': ['bottom', 'screen-right', 'screen-bottom', 'left']
-        };
-        this.deviderBindings = {
-            'top': ['screen-top', 'screen-right', 'top', 'screen-left'],
-            'left': ['top', 'left', 'screen-bottom'],
-            'right': ['top', 'right', 'bottom'],
-            'bottom': ['left', 'bottom', 'screen-right']
-        };
+        this.builers = {};
         this.emitterService = emitterService;
         this.emitter = this.emitterService.createEmitter();
-        this.layout = new EmptyLayout_1.EmptyLayout(this.emitter);
         this.viewportService = viewportService;
-        this.bindageService = bindageService;
-        this.deviderBuilderFactory = deviderBuilderFactory;
         this.domService = domService;
+        this.builers = {
+            vertical: verticalBuilder,
+            horizontal: horizontalBuilder
+        };
+        this.positions = {
+            screenTop: new SceenVerticalPositionValue_1.ScreenVerticalPositionValue(0, viewportService),
+            screenRight: new ScreenHorizontalPositionValue_1.ScreenHorizontalPositionValue(0, viewportService),
+            screenBottom: new SceenVerticalPositionValue_1.ScreenVerticalPositionValue(0, viewportService),
+            screenLeft: new ScreenHorizontalPositionValue_1.ScreenHorizontalPositionValue(0, viewportService),
+            top: new SceenVerticalPositionValue_1.ScreenVerticalPositionValue(0, viewportService),
+            right: new ScreenHorizontalPositionValue_1.ScreenHorizontalPositionValue(0, viewportService),
+            bottom: new SceenVerticalPositionValue_1.ScreenVerticalPositionValue(0, viewportService),
+            left: new ScreenHorizontalPositionValue_1.ScreenHorizontalPositionValue(0, viewportService)
+        };
+        this.blueprints = {
+            top: new RectangleBlock_1.RecktangleBlock(this.positions.screenTop, this.positions.screenRight, this.positions.top, this.positions.screenLeft),
+            left: new RectangleBlock_1.RecktangleBlock(this.positions.top, this.positions.left, this.positions.screenBottom, this.positions.screenLeft),
+            center: new RectangleBlock_1.RecktangleBlock(this.positions.top, this.positions.right, this.positions.bototm, this.positions.left),
+            right: new RectangleBlock_1.RecktangleBlock(this.positions.top, this.positions.screenRight, this.positions.bottom, this.positions.right),
+            bottom: new RectangleBlock_1.RecktangleBlock(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, this.positions.right),
+            deviderBottom: new HorizontalBlock_1.HorizontalBlock(this.positions.left, this.positions.screenRight, this.positions.bottom)
+        };
     }
     BoxLayout.prototype.initialize = function (element, config) {
         var _this = this;
+        this.element = element;
         this.config = config;
-        this.layout.initialize(element);
-        var windowWidth = this.viewportService.getWidth();
-        var windowHeight = this.viewportService.getHeight();
-        this.layout.addDevider('screen-top', new LayoutDevider_1.LayoutDevider(this.emitterService.createEmitter(), 0));
-        this.layout.addDevider('screen-left', new LayoutDevider_1.LayoutDevider(this.emitterService.createEmitter(), 0));
-        this.layout.addDevider('screen-right', new InverseLayoutDevider_1.InverseLayoutDevider(this.emitterService.createEmitter(), 0, windowWidth));
-        this.layout.addDevider('screen-bottom', new InverseLayoutDevider_1.InverseLayoutDevider(this.emitterService.createEmitter(), 0, windowHeight));
-        this.layout.addDevider('top', new LayoutDevider_1.LayoutDevider(this.emitterService.createEmitter(), this.config.top || 0));
-        this.layout.addDevider('left', new LayoutDevider_1.LayoutDevider(this.emitterService.createEmitter(), this.config.left || 0));
-        this.layout.addDevider('right', new InverseLayoutDevider_1.InverseLayoutDevider(this.emitterService.createEmitter(), this.config.right || 0, windowWidth));
-        this.layout.addDevider('bottom', new InverseLayoutDevider_1.InverseLayoutDevider(this.emitterService.createEmitter(), this.config.bottom || 0, windowHeight));
-        if (config.deviders.drag) {
-            this.addVerticalDeviderDrag('left');
-            this.addVerticalDeviderDrag('right');
-            this.addHorizontalDeviderDrag('bottom');
+        this.positions.top.setValue(this.config.top || 0);
+        this.positions.right.setValue(this.config.right || 0);
+        this.positions.bototm.setValue(this.config.bottom || 0);
+        this.positions.left.setValue(this.config.left || 0);
+        if (config.deviders.dragable) {
+            this.createDragableDevider(this.blueprints.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.positions.right.moveBy(event.horizontal);
+            });
+            this.createDragableDevider(this.blueprints.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', function (event) {
+                _this.positions.bottom.moveBy(event.vertical);
+            });
         }
-        "";
-        this.viewportService.getEmitter().on('change', function (event) {
-            _this.layout.getDevider('right').setRelativeTo(event.width);
-            _this.layout.getDevider('bottom').setRelativeTo(event.height);
-            _this.layout.getDevider('screen-right').setRelativeTo(event.width);
-            _this.layout.getDevider('screen-bottom').setRelativeTo(event.height);
-            _this.recalc();
-        });
     };
     BoxLayout.prototype.getPositions = function () {
-        return {
-            top: this.getDevider('top').getPosition(),
-            right: this.getDevider('right').getPosition(),
-            bottom: this.getDevider('bottom').getPosition(),
-            left: this.getDevider('left').getPosition(),
-        };
+        return this.positions;
     };
-    BoxLayout.prototype.addVerticalDeviderDrag = function (deviderName) {
-        var builder = this.deviderBuilderFactory('vertical');
-        var devider = this.layout.getDevider(deviderName);
-        var deviderElement = builder.build({
-            'devider': devider
-        });
-        deviderElement.getEmitter().on('wbDrag', function (event) {
-            devider.changePositionBy(event.horizontal);
-        });
-        this.domService.insert(deviderElement.getElement(), this.layout.getElement());
-        this.bindageService.bindVertical(this.layout, deviderElement.getElement(), this.deviderBindings[deviderName]);
+    BoxLayout.prototype.createDragableDevider = function (blueprint, builder) {
+        var deviderElement = builder.build({});
+        this.domService.insert(deviderElement.getElement(), this.element);
+        blueprint.bind(deviderElement.getElement());
         return deviderElement;
     };
-    BoxLayout.prototype.addHorizontalDeviderDrag = function (deviderName) {
-        var builder = this.deviderBuilderFactory('horizontal');
-        var devider = this.layout.getDevider(deviderName);
-        var deviderElement = builder.build({
-            'devider': devider
-        });
-        deviderElement.getEmitter().on('wbDrag', function (event) {
-            devider.changePositionBy(event.vertical);
-        });
-        this.domService.insert(deviderElement.getElement(), this.layout.getElement());
-        this.bindageService.bindHorizontal(this.layout, deviderElement.getElement(), this.deviderBindings[deviderName]);
-        return deviderElement;
-    };
-    BoxLayout.prototype.getDevider = function (name) {
-        return this.layout.getDevider(name);
-    };
     BoxLayout.prototype.setBlock = function (element, blockName) {
-        this.bindageService.bindBlock(this.layout, element, this.blockBindings[blockName]);
+        this.blueprints[blockName].bind(element);
     };
@@ -117,13 +95,6 @@ BoxLayout.prototype.getEmitter = function () {
     };
-    BoxLayout.prototype.recalc = function () {
-        var deviders = this.layout.getDeviders();
-        for (var key in deviders) {
-            deviders[key].detectChange();
-        }
-        this.emitter.emit('wbRecalc', {});
-    };
     BoxLayout = __decorate([
         inversify_1.injectable(),
-        __param(0, inversify_1.inject(common_1.EmitterService)), __param(1, inversify_1.inject(common_1.ViewportService)), __param(3, inversify_1.inject('Factory<DeviderElementBuilder>')), __param(4, inversify_1.inject(common_1.DomService)),
-        __metadata("design:paramtypes", [common_1.EmitterService, common_1.ViewportService, BindageService_1.BindageService, Function, common_1.DomService])
+        __param(0, inversify_1.inject(common_1.EmitterService)), __param(1, inversify_1.inject(common_1.ViewportService)), __param(2, inversify_1.inject(HorizontalDeviderBuilder_1.HorizontalDeviderBuilder)), __param(3, inversify_1.inject(VerticalDeviderBuilder_1.VerticalDeviderBuilder)), __param(4, inversify_1.inject(common_1.DomService)),
+        __metadata("design:paramtypes", [common_1.EmitterService, common_1.ViewportService, HorizontalDeviderBuilder_1.HorizontalDeviderBuilder, VerticalDeviderBuilder_1.VerticalDeviderBuilder, common_1.DomService])
     ], BoxLayout);
@@ -130,0 +101,0 @@ return BoxLayout;

dist/BoxLayoutModule.js

@@ -7,9 +7,5 @@ "use strict";
 var BoxLayout_1 = require("./BoxLayout");
-var LeftBindage_1 = require("./LeftBindage");
-var RightBindage_1 = require("./RightBindage");
-var TopBindage_1 = require("./TopBindage");
-var BottomBIndage_1 = require("./BottomBIndage");
-var DeviderElementBuilder_1 = require("./DeviderElementBuilder");
-var BindageService_1 = require("./BindageService");
+var HorizontalDeviderBuilder_1 = require("./HorizontalDeviderBuilder");
 var component_1 = require("@wildebeest/component");
+var VerticalDeviderBuilder_1 = require("./VerticalDeviderBuilder");
 var BoxLayoutModule = (function () {
@@ -23,24 +19,6 @@ function BoxLayoutModule() {
         container.bind(BoxLayout_1.BoxLayout).toSelf();
-        container.bind(BindageService_1.BindageService).toSelf().inSingletonScope();
-        container.bind('ElementBindage').to(LeftBindage_1.LeftBindage).whenTargetNamed('left');
-        container.bind('ElementBindage').to(RightBindage_1.RightBindage).whenTargetNamed('right');
-        container.bind('ElementBindage').to(TopBindage_1.TopBindage).whenTargetNamed('top');
-        container.bind('ElementBindage').to(BottomBIndage_1.BottomBindage).whenTargetNamed('bottom');
-        container.bind('Factory<ElementBindage>').toFactory(function (context) {
-            return function (name) {
-                return context.container.getNamed('ElementBindage', name);
-            };
-        });
-        container.bind('Factory<DeviderElementBuilder>').toFactory(function (context) {
-            var templates = {
-                'vertical': '<div class="box-layout__devider box-layout__devider--vertical"></div>',
-                'horizontal': '<div class="box-layout__devider box-layout__devider--horizontal"></div>'
-            };
-            return function (name) {
-                var builder = context.container.getNamed('ComponentBuilder', 'devider');
-                builder.setTemplate(templates[name]);
-                return builder;
-            };
-        });
-        container.bind('ComponentBuilder').to(DeviderElementBuilder_1.DeviderElementBuilder).inSingletonScope().whenTargetNamed('devider');
+        container.bind(VerticalDeviderBuilder_1.VerticalDeviderBuilder).toSelf().inSingletonScope();
+        container.bind(HorizontalDeviderBuilder_1.HorizontalDeviderBuilder).toSelf().inSingletonScope();
+        container.bind('ComponentBuilder').to(VerticalDeviderBuilder_1.VerticalDeviderBuilder).inSingletonScope().whenTargetNamed('vertical-devider');
+        container.bind('ComponentBuilder').to(HorizontalDeviderBuilder_1.HorizontalDeviderBuilder).inSingletonScope().whenTargetNamed('horizontal-devider');
     };
@@ -47,0 +25,0 @@ BoxLayoutModule.prototype.boot = function (container) { };

dist/DeviderElement.d.ts

@@ -1,10 +0,8 @@
-import { Devider } from "./Devider";
 import { Emitter } from "@wildebeest/common";
 export declare class DeviderElement {
-    protected devider: Devider;
     protected element: any;
     protected emitter: Emitter;
-    constructor(element: any, devider: Devider, emitter: Emitter);
+    constructor(element: any, emitter: Emitter);
     getEmitter(): Emitter;
     getElement(): any;
 }

dist/DeviderElement.js

@@ -5,5 +5,4 @@ "use strict";
 var DeviderElement = (function () {
-    function DeviderElement(element, devider, emitter) {
+    function DeviderElement(element, emitter) {
         this.element = element;
-        this.devider = devider;
         this.emitter = emitter;
@@ -10,0 +9,0 @@ new drag_1.DragableComponent(this.element, this.emitter);

dist/index.d.ts

 export { BoxLayoutModule } from './BoxLayoutModule';
 export { BoxLayout } from './BoxLayout';
-export { LayoutDevider } from './LayoutDevider';
-export { InverseLayoutDevider } from './InverseLayoutDevider';
-export { LeftBindage } from './LeftBindage';
-export { RightBindage } from './RightBindage';
-export { BindageService } from './BindageService';
+export { AbsolutePosition } from './position/AbsolutePosition';
+export { PositionValue } from './position/PositionValue';
+export { ScreenVerticalPositionValue } from './position/SceenVerticalPositionValue';
+export { ScreenHorizontalPositionValue } from './position/ScreenHorizontalPositionValue';
+export { Binding } from './binding/Binding';
+export { OneWayBinding } from './binding/OneWayBinding';
+export { Block } from './block/Block';
+export { BlockBlueprint } from './block/BlockBlueprint';
+export { HorizontalBlock } from './block/HorizontalBlock';
+export { RecktangleBlock } from './block/RectangleBlock';
+export { VerticalBlock } from './block/VerticalBlock';
+export { HorizontalDeviderBuilder } from './HorizontalDeviderBuilder';
+export { VerticalDeviderBuilder } from './VerticalDeviderBuilder';

dist/index.js

@@ -7,12 +7,22 @@ "use strict";
 exports.BoxLayout = BoxLayout_1.BoxLayout;
-var LayoutDevider_1 = require("./LayoutDevider");
-exports.LayoutDevider = LayoutDevider_1.LayoutDevider;
-var InverseLayoutDevider_1 = require("./InverseLayoutDevider");
-exports.InverseLayoutDevider = InverseLayoutDevider_1.InverseLayoutDevider;
-var LeftBindage_1 = require("./LeftBindage");
-exports.LeftBindage = LeftBindage_1.LeftBindage;
-var RightBindage_1 = require("./RightBindage");
-exports.RightBindage = RightBindage_1.RightBindage;
-var BindageService_1 = require("./BindageService");
-exports.BindageService = BindageService_1.BindageService;
+var PositionValue_1 = require("./position/PositionValue");
+exports.PositionValue = PositionValue_1.PositionValue;
+var SceenVerticalPositionValue_1 = require("./position/SceenVerticalPositionValue");
+exports.ScreenVerticalPositionValue = SceenVerticalPositionValue_1.ScreenVerticalPositionValue;
+var ScreenHorizontalPositionValue_1 = require("./position/ScreenHorizontalPositionValue");
+exports.ScreenHorizontalPositionValue = ScreenHorizontalPositionValue_1.ScreenHorizontalPositionValue;
+var OneWayBinding_1 = require("./binding/OneWayBinding");
+exports.OneWayBinding = OneWayBinding_1.OneWayBinding;
+var BlockBlueprint_1 = require("./block/BlockBlueprint");
+exports.BlockBlueprint = BlockBlueprint_1.BlockBlueprint;
+var HorizontalBlock_1 = require("./block/HorizontalBlock");
+exports.HorizontalBlock = HorizontalBlock_1.HorizontalBlock;
+var RectangleBlock_1 = require("./block/RectangleBlock");
+exports.RecktangleBlock = RectangleBlock_1.RecktangleBlock;
+var VerticalBlock_1 = require("./block/VerticalBlock");
+exports.VerticalBlock = VerticalBlock_1.VerticalBlock;
+var HorizontalDeviderBuilder_1 = require("./HorizontalDeviderBuilder");
+exports.HorizontalDeviderBuilder = HorizontalDeviderBuilder_1.HorizontalDeviderBuilder;
+var VerticalDeviderBuilder_1 = require("./VerticalDeviderBuilder");
+exports.VerticalDeviderBuilder = VerticalDeviderBuilder_1.VerticalDeviderBuilder;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@wildebeest/boxlayout",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Box Layout module for creating fullscreen admin enviroments",
@@ -10,3 +10,6 @@ "main": "dist/index.js",
     "test": "jest",
-    "deploy": "npm run test && npm run build && git add -A && git commit -m 'deploy' && git push origin master"
+    "deploy": "npm run test && npm run build && git add -A && git commit -m 'deploy' && git push origin master",
+    "patch": "npm run deploy && npm version patch && npm publish",
+    "minor": "npm run deploy && npm version minor && npm publish",
+    "major": "npm run deploy && npm version major && npm publish"
   },
@@ -13,0 +16,0 @@ "repository": {

src/BoxLayout.ts

 import { injectable, inject } from "inversify";
 import { EmitterService, Emitter, ViewportService, DomService } from "@wildebeest/common";
-import { EmptyLayout } from "./EmptyLayout";
-import { LayoutDevider } from "./LayoutDevider";
-import { InverseLayoutDevider } from "./InverseLayoutDevider";
-import { DeviderElementBuilder } from "./DeviderElementBuilder";
-import { BindageService } from "./BindageService";
-import { ComponentBuilder } from "@wildebeest/component";
+import { HorizontalDeviderBuilder } from "./HorizontalDeviderBuilder";
+import { ScreenVerticalPositionValue } from "./position/SceenVerticalPositionValue";
+import { ScreenHorizontalPositionValue } from "./position/ScreenHorizontalPositionValue";
+import { RecktangleBlock } from "./block/RectangleBlock";
+import { VerticalBlock } from "./block/VerticalBlock";
+import { HorizontalBlock } from "./block/HorizontalBlock";
+import { BlockBlueprint } from "./block/BlockBlueprint";
+import { ComponentBuilder, Component } from "@wildebeest/component";
+import { VerticalDeviderBuilder } from "./VerticalDeviderBuilder";
 
@@ -13,66 +16,69 @@ @injectable()
 {
-    protected layout: EmptyLayout;
+    protected positions: any = {};
+    protected blueprints: any = {};
     protected emitterService: EmitterService;
     protected emitter: Emitter;
     protected viewportService: ViewportService;
-    protected bindageService: BindageService;
-    protected deviderBuilderFactory: (name: string) => DeviderElementBuilder;
     protected domService: DomService;
     protected config: any = {};
-    protected blockBindings: any = {
-        'top': ['screen-top', 'screen-right', 'top', 'screen-left'],
-        'left': ['top', 'left', 'screen-bottom', 'screen-left'],
-        'center': ['top', 'right', 'bottom', 'left'],
-        'right': ['top', 'screen-right', 'bottom', 'right'],
-        'bottom': ['bottom', 'screen-right', 'screen-bottom', 'left']
-    };
-    protected deviderBindings: any = {
-        'top': ['screen-top', 'screen-right', 'top', 'screen-left'],
-        'left': ['top', 'left', 'screen-bottom'],
-        'right': ['top', 'right', 'bottom'],
-        'bottom': ['left', 'bottom', 'screen-right']
-    };
+    protected builers: any = {};
+    protected element: HTMLElement;
 
-    constructor(@inject(EmitterService) emitterService: EmitterService, @inject(ViewportService) viewportService: ViewportService, bindageService: BindageService, @inject('Factory<DeviderElementBuilder>') deviderBuilderFactory: (name: string) => DeviderElementBuilder, @inject(DomService) domService: DomService)
+    constructor(@inject(EmitterService) emitterService: EmitterService, @inject(ViewportService) viewportService: ViewportService, @inject(HorizontalDeviderBuilder) horizontalBuilder: HorizontalDeviderBuilder, @inject(VerticalDeviderBuilder) verticalBuilder: VerticalDeviderBuilder, @inject(DomService) domService: DomService)
     {
         this.emitterService = emitterService;
         this.emitter = this.emitterService.createEmitter();
-        this.layout = new EmptyLayout(this.emitter);
         this.viewportService = viewportService;
-        this.bindageService = bindageService;
-        this.deviderBuilderFactory = deviderBuilderFactory;
         this.domService = domService;
+        this.builers = {
+            vertical: verticalBuilder,
+            horizontal: horizontalBuilder
+        };
+
+        this.positions = {
+            screenTop: new ScreenVerticalPositionValue(0, viewportService),
+            screenRight: new ScreenHorizontalPositionValue(0, viewportService),
+            screenBottom: new ScreenVerticalPositionValue(0, viewportService),
+            screenLeft: new ScreenHorizontalPositionValue(0, viewportService),
+            top: new ScreenVerticalPositionValue(0, viewportService),
+            right: new ScreenHorizontalPositionValue(0, viewportService),
+            bottom: new ScreenVerticalPositionValue(0, viewportService),
+            left: new ScreenHorizontalPositionValue(0, viewportService)
+        };
+
+        this.blueprints = {
+            top: new RecktangleBlock(this.positions.screenTop, this.positions.screenRight, this.positions.top, this.positions.screenLeft),
+            left: new RecktangleBlock(this.positions.top, this.positions.left, this.positions.screenBottom, this.positions.screenLeft),
+            center: new RecktangleBlock(this.positions.top, this.positions.right, this.positions.bototm, this.positions.left),
+            right: new RecktangleBlock(this.positions.top, this.positions.screenRight, this.positions.bottom, this.positions.right),
+            bottom: new RecktangleBlock(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, this.positions.right),
+            deviderBottom: new HorizontalBlock(this.positions.left, this.positions.screenRight, this.positions.bottom)
+        }
     }
 
-    public initialize(element: any, config: any): void
+    public initialize(element: HTMLElement, config: any): void
     {
+        this.element = element;
         this.config = config;
-        this.layout.initialize(element);
 
-        let windowWidth = this.viewportService.getWidth();
-        let windowHeight = this.viewportService.getHeight();
-        
-        this.layout.addDevider('screen-top', new LayoutDevider(this.emitterService.createEmitter(), 0));
-        this.layout.addDevider('screen-left', new LayoutDevider(this.emitterService.createEmitter(), 0));
-        this.layout.addDevider('screen-right', new InverseLayoutDevider(this.emitterService.createEmitter(), 0, windowWidth));
-        this.layout.addDevider('screen-bottom', new InverseLayoutDevider(this.emitterService.createEmitter(), 0, windowHeight));
+        this.positions.top.setValue(this.config.top || 0);
+        this.positions.right.setValue(this.config.right || 0);
+        this.positions.bototm.setValue(this.config.bottom || 0);
+        this.positions.left.setValue(this.config.left || 0);
 
-        this.layout.addDevider('top', new LayoutDevider(this.emitterService.createEmitter(), this.config.top || 0));
-        this.layout.addDevider('left', new LayoutDevider(this.emitterService.createEmitter(), this.config.left || 0));
-        this.layout.addDevider('right', new InverseLayoutDevider(this.emitterService.createEmitter(), this.config.right || 0, windowWidth));
-        this.layout.addDevider('bottom', new InverseLayoutDevider(this.emitterService.createEmitter(), this.config.bottom || 0, windowHeight));
+        if (config.deviders.dragable) {
+            this.createDragableDevider(this.blueprints.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.positions.right.moveBy(event.horizontal);
+            });
+            this.createDragableDevider(this.blueprints.deviderBottom, this.builers.horizontal).getEmitter().on('wbDrag', (event: any) => {
+                this.positions.bottom.moveBy(event.vertical);
+            });
+        }
 
-        if (config.deviders.drag) {
-            this.addVerticalDeviderDrag('left');
-            this.addVerticalDeviderDrag('right');    
-            this.addHorizontalDeviderDrag('bottom');
-        }
-``
-        this.viewportService.getEmitter().on('change', (event: any) => {
-            this.layout.getDevider<InverseLayoutDevider>('right').setRelativeTo(event.width)
-            this.layout.getDevider<InverseLayoutDevider>('bottom').setRelativeTo(event.height)
-            this.layout.getDevider<InverseLayoutDevider>('screen-right').setRelativeTo(event.width);
-            this.layout.getDevider<InverseLayoutDevider>('screen-bottom').setRelativeTo(event.height);
-            this.recalc();
-        });
+        // this.getEmitter().on('wbResize', this.onResize.bind(this));
     }
@@ -82,50 +88,23 @@
     {
-        return {
-            top: this.getDevider('top').getPosition(),
-            right: this.getDevider('right').getPosition(),
-            bottom: this.getDevider('bottom').getPosition(),
-            left: this.getDevider('left').getPosition(),
-        };
+        return this.positions;
     }
 
-    protected addVerticalDeviderDrag(deviderName: string): any
+    protected createDragableDevider(blueprint: BlockBlueprint, builder: ComponentBuilder): Component
     {
-        let builder: ComponentBuilder = this.deviderBuilderFactory('vertical');
-        let devider: LayoutDevider = this.layout.getDevider(deviderName);
-        let deviderElement: any = builder.build({
-            'devider': devider
-        });
-        deviderElement.getEmitter().on('wbDrag', (event: any) => {
-            devider.changePositionBy(event.horizontal);
-        });
-        this.domService.insert(deviderElement.getElement(), this.layout.getElement());
-        this.bindageService.bindVertical(this.layout, deviderElement.getElement(), this.deviderBindings[deviderName]);
+        let deviderElement: Component = builder.build({});
+        this.domService.insert(deviderElement.getElement(), this.element);
+        blueprint.bind(deviderElement.getElement());
         return deviderElement;
     }
 
-    protected addHorizontalDeviderDrag(deviderName: string): any
+    public setBlock(element: any, blockName: string): void
     {
-        let builder: ComponentBuilder = this.deviderBuilderFactory('horizontal');
-        let devider: LayoutDevider = this.layout.getDevider(deviderName);
-        let deviderElement: any = builder.build({
-            'devider': devider
-        });
-        deviderElement.getEmitter().on('wbDrag', (event: any) => {
-            devider.changePositionBy(event.vertical);
-        });
-        this.domService.insert(deviderElement.getElement(), this.layout.getElement());
-        this.bindageService.bindHorizontal(this.layout, deviderElement.getElement(), this.deviderBindings[deviderName]);
-        return deviderElement;
+        this.blueprints[blockName].bind(element);
     }
 
-    public getDevider(name: string): LayoutDevider
-    {
-        return this.layout.getDevider(name);
-    }
+    // public onResize(event: any): void
+    // {
+        
+    // }
 
-    public setBlock(element: any, blockName: string): void
-    {
-        this.bindageService.bindBlock(this.layout, element, this.blockBindings[blockName]);
-    }
-
     public getEmitter(): Emitter
@@ -136,10 +115,10 @@ {
 
-    public recalc(): void
-    {
-        let deviders: Array<LayoutDevider> = this.layout.getDeviders();
-        for (let key in deviders) {
-            deviders[key].detectChange();
-        }
-        this.emitter.emit('wbRecalc', {});
-    }
+    // public recalc(): void
+    // {
+    //     let deviders: Array<LayoutDevider> = this.layout.getDeviders();
+    //     for (let key in deviders) {
+    //         deviders[key].detectChange();
+    //     }
+    //     this.emitter.emit('wbRecalc', {});
+    // }
 }

src/BoxLayoutModule.ts

@@ -5,12 +5,7 @@ import { Module } from "@wildebeest/js-modules";
 import { DragModule } from "@wildebeest/drag";
-import { Container, interfaces } from "inversify";
+import { Container } from "inversify";
 import { BoxLayout } from "./BoxLayout";
-import { LeftBindage } from "./LeftBindage";
-import { RightBindage } from "./RightBindage";
-import { ElementBindage } from "./ElementBindage";
-import { TopBindage } from "./TopBindage";
-import { BottomBindage } from "./BottomBIndage";
-import { DeviderElementBuilder } from "./DeviderElementBuilder";
-import { BindageService } from "./BindageService";
-import { ComponentModule, ComponentBuilder } from "@wildebeest/component";
+import { HorizontalDeviderBuilder } from "./HorizontalDeviderBuilder";
+import { ComponentModule } from "@wildebeest/component";
+import { VerticalDeviderBuilder } from "./VerticalDeviderBuilder";
 
@@ -27,26 +22,6 @@ export class BoxLayoutModule implements Module
         container.bind<BoxLayout>(BoxLayout).toSelf();
-        container.bind<BindageService>(BindageService).toSelf().inSingletonScope();
-        container.bind<LeftBindage>('ElementBindage').to(LeftBindage).whenTargetNamed('left');
-        container.bind<RightBindage>('ElementBindage').to(RightBindage).whenTargetNamed('right');
-        container.bind<TopBindage>('ElementBindage').to(TopBindage).whenTargetNamed('top');
-        container.bind<BottomBindage>('ElementBindage').to(BottomBindage).whenTargetNamed('bottom');
-
-        container.bind<interfaces.Factory<ElementBindage>>('Factory<ElementBindage>').toFactory<ElementBindage>((context: interfaces.Context) => {
-            return (name: string) => {
-                return context.container.getNamed('ElementBindage', name);
-            };
-        });
-
-        container.bind<interfaces.Factory<DeviderElementBuilder>>('Factory<DeviderElementBuilder>').toFactory<DeviderElementBuilder>((context: interfaces.Context) => {
-            let templates: any = {
-                'vertical': '<div class="box-layout__devider box-layout__devider--vertical"></div>',
-                'horizontal': '<div class="box-layout__devider box-layout__devider--horizontal"></div>'
-            };
-            return (name: string) => {
-                let builder: any = context.container.getNamed('ComponentBuilder', 'devider');
-                builder.setTemplate(templates[name]);
-                return builder;
-            };
-        });
-        container.bind<ComponentBuilder>('ComponentBuilder').to(DeviderElementBuilder).inSingletonScope().whenTargetNamed('devider');
+        container.bind<VerticalDeviderBuilder>(VerticalDeviderBuilder).toSelf().inSingletonScope();
+        container.bind<HorizontalDeviderBuilder>(HorizontalDeviderBuilder).toSelf().inSingletonScope();
+        container.bind<VerticalDeviderBuilder>('ComponentBuilder').to(VerticalDeviderBuilder).inSingletonScope().whenTargetNamed('vertical-devider');
+        container.bind<HorizontalDeviderBuilder>('ComponentBuilder').to(HorizontalDeviderBuilder).inSingletonScope().whenTargetNamed('horizontal-devider');
     }
@@ -53,0 +28,0 @@

src/DeviderElement.ts

@@ -1,2 +0,1 @@
-import { Devider } from "./Devider";
 import { DragableComponent } from "@wildebeest/drag";
@@ -7,10 +6,8 @@ import { Emitter } from "@wildebeest/common";
 {
-    protected devider: Devider;
     protected element: any;
     protected emitter: Emitter
 
-    constructor(element: any, devider: Devider, emitter: Emitter)
+    constructor(element: any, emitter: Emitter)
     {
         this.element = element;
-        this.devider = devider;
         this.emitter = emitter;
@@ -17,0 +14,0 @@

src/index.ts

 export { BoxLayoutModule } from './BoxLayoutModule';
 export { BoxLayout } from './BoxLayout';
-export { LayoutDevider } from './LayoutDevider';
-export { InverseLayoutDevider } from './InverseLayoutDevider';
-export { LeftBindage } from './LeftBindage';
-export { RightBindage } from './RightBindage';
-export { BindageService } from './BindageService';
+export { AbsolutePosition } from './position/AbsolutePosition';
+export { PositionValue } from './position/PositionValue';
+export { ScreenVerticalPositionValue } from './position/SceenVerticalPositionValue';
+export { ScreenHorizontalPositionValue } from './position/ScreenHorizontalPositionValue';
+export { Binding } from './binding/Binding';
+export { OneWayBinding } from './binding/OneWayBinding';
+export { Block } from './block/Block';
+export { BlockBlueprint } from './block/BlockBlueprint';
+export { HorizontalBlock } from './block/HorizontalBlock';
+export { RecktangleBlock } from './block/RectangleBlock';
+export { VerticalBlock } from './block/VerticalBlock';
+export { HorizontalDeviderBuilder } from './HorizontalDeviderBuilder';
+export { VerticalDeviderBuilder } from './VerticalDeviderBuilder';

tests/BoxLayoutModule.test.ts

 import 'ts-jest';
 import { Application } from '@wildebeest/js-modules';
 import { BoxLayoutModule } from '../src/BoxLayoutModule';
-import { BindageService } from '../src/BindageService';
 import { BoxLayout } from '../src/BoxLayout';
-import { LeftBindage } from '../src/LeftBindage';
-import { RightBindage } from '../src/RightBindage';
-import { TopBindage } from '../src/TopBindage';
-import { BottomBindage } from '../src/BottomBIndage';
-import { DeviderElementBuilder } from '../src/DeviderElementBuilder';
+import { VerticalDeviderBuilder } from '../src/VerticalDeviderBuilder';
+import { HorizontalDeviderBuilder } from '../src/HorizontalDeviderBuilder';
 
@@ -16,20 +12,6 @@ let app: Application = new Application();
 test("register services", () => {
-    expect(app.getContainer().get(BindageService)).toBeInstanceOf(BindageService);
     expect(app.getContainer().get(BoxLayout)).toBeInstanceOf(BoxLayout);
 
-    expect(app.getContainer().getNamed('ElementBindage', 'left')).toBeInstanceOf(LeftBindage);
-    expect(app.getContainer().getNamed('ElementBindage', 'right')).toBeInstanceOf(RightBindage);
-    expect(app.getContainer().getNamed('ElementBindage', 'top')).toBeInstanceOf(TopBindage);
-    expect(app.getContainer().getNamed('ElementBindage', 'bottom')).toBeInstanceOf(BottomBindage);
-
-    let factory: any = app.getContainer().get('Factory<ElementBindage>');
-    expect(factory('left')).toBeInstanceOf(LeftBindage);
-    expect(factory('right')).toBeInstanceOf(RightBindage);
-    expect(factory('top')).toBeInstanceOf(TopBindage);
-    expect(factory('bottom')).toBeInstanceOf(BottomBindage);
-
-    factory = app.getContainer().get('Factory<DeviderElementBuilder>');
-    expect(factory('vertical')).toBeInstanceOf(DeviderElementBuilder);
-    expect(factory('horizontal')).toBeInstanceOf(DeviderElementBuilder);
-    expect(app.getContainer().getNamed('ComponentBuilder', 'devider')).toBeInstanceOf(DeviderElementBuilder);
+    expect(app.getContainer().getNamed('ComponentBuilder', 'vertical-devider')).toBeInstanceOf(VerticalDeviderBuilder);
+    expect(app.getContainer().getNamed('ComponentBuilder', 'horizontal-devider')).toBeInstanceOf(HorizontalDeviderBuilder);
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99072

increased by32.84%

Number of package files

110

increased by66.67%

Lines of code

1711

increased by33.26%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes