mj-context-menu - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

js/css_util.js

@@ -146,3 +146,3 @@ "use strict";
         MENU_STYLES[makeClass_('SELECTIONBOX')] = '{' +
-            '  padding: 0em; max-height:30em; max-width: none;' +
+            '  padding: 0em; max-height:20em; max-width: none;' +
             '  background-color:#FFFFFF;' +
@@ -149,0 +149,0 @@ '}',

js/selection_box.d.ts

@@ -26,8 +26,15 @@ import { ContextMenu } from './context_menu.js';
 }
+export declare const enum SelectionGrid {
+    SQUARE = "square",
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 export declare class SelectionBox extends Info {
     style: SelectionOrder;
+    grid: SelectionGrid;
     private _selections;
     private prefix;
+    private _balanced;
     static chunkSize: number;
-    static fromJson(factory: ParserFactory, { title: title, signature: signature, selections: selections, order: order }: {
+    static fromJson(factory: ParserFactory, { title: title, signature: signature, selections: selections, order: order, grid: grid }: {
         title: string;
@@ -37,4 +44,5 @@ signature: string;
         order?: SelectionOrder;
+        grid?: SelectionGrid;
     }, ctxt: ContextMenu): SelectionBox;
-    constructor(title: string, signature: string, style?: SelectionOrder);
+    constructor(title: string, signature: string, style?: SelectionOrder, grid?: SelectionGrid);
     attachMenu(menu: ContextMenu): void;
@@ -46,2 +54,5 @@ get selections(): SelectionMenu[];
     protected display(): void;
+    private getChunkSize;
+    private balanceColumn;
+    private combineColumn;
     left(event: KeyboardEvent): void;
@@ -48,0 +59,0 @@ right(event: KeyboardEvent): void;

js/selection_box.js

@@ -73,13 +73,18 @@ "use strict";
     __extends(SelectionBox, _super);
-    function SelectionBox(title, signature, style) {
+    function SelectionBox(title, signature, style, grid) {
         if (style === void 0) { style = "none"; }
+        if (grid === void 0) { grid = "vertical"; }
         var _this = _super.call(this, title, null, signature) || this;
         _this.style = style;
+        _this.grid = grid;
         _this._selections = [];
         _this.prefix = 'ctxt-selection';
+        _this._balanced = true;
         return _this;
     }
     SelectionBox.fromJson = function (factory, _a, ctxt) {
-        var title = _a.title, signature = _a.signature, selections = _a.selections, order = _a.order;
-        var sb = new this(title, signature, order);
+        var title = _a.title, signature = _a.signature, selections = _a.selections, order = _a.order, grid = _a.grid;
+        console.log(grid);
+        console.log(order);
+        var sb = new this(title, signature, order, grid);
         sb.attachMenu(ctxt);
@@ -120,7 +125,8 @@ var sels = selections.map(function (x) { return factory.get('selectionMenu')(factory, x, sb); });
         });
-        var width = rects.reduce(function (x, y) { return x + y.width; }, 0);
+        var column = rects.map(function (x) { return x.width; });
+        var width = column.reduce(function (x, y) { return x + y; }, 0);
         var height = rects.reduce(function (x, y) { return Math.max(x, y.height); }, 0);
         div.classList.add(html_classes_js_1.HtmlClasses['SELECTIONDIVIDER']);
         div.setAttribute('style', 'height: ' + height + 'px;');
-        return [div, width, height];
+        return [div, width, height, column];
     };
@@ -135,15 +141,59 @@ SelectionBox.prototype.display = function () {
         var maxWidth = 0;
+        var balancedColumn = [];
+        var chunks = this.getChunkSize(this.selections.length);
         var _loop_1 = function (i) {
-            var sels = this_1.selections.slice(i, i + SelectionBox.chunkSize);
-            var _a = __read(this_1.rowDiv(sels), 3), div = _a[0], width = _a[1], height = _a[2];
+            var sels = this_1.selections.slice(i, i + chunks);
+            var _a = __read(this_1.rowDiv(sels), 4), div = _a[0], width = _a[1], height = _a[2], column = _a[3];
             outerDivs.push(div);
             maxWidth = Math.max(maxWidth, width);
             sels.forEach(function (sel) { return sel.html.style.height = height + 'px'; });
+            balancedColumn = this_1.combineColumn(balancedColumn, column);
         };
         var this_1 = this;
-        for (var i = 0; i < this.selections.length; i += SelectionBox.chunkSize) {
+        for (var i = 0; i < this.selections.length; i += chunks) {
             _loop_1(i);
         }
+        if (this._balanced) {
+            this.balanceColumn(outerDivs, balancedColumn);
+            maxWidth = balancedColumn.reduce(function (x, y) { return x + y; }, 20);
+        }
         outerDivs.forEach(function (div) { return div.style.width = maxWidth + 'px'; });
     };
+    SelectionBox.prototype.getChunkSize = function (size) {
+        switch (this.grid) {
+            case "square":
+                return Math.floor(Math.sqrt(size));
+            case "horizontal":
+                return size / SelectionBox.chunkSize;
+            case "vertical":
+            default:
+                return SelectionBox.chunkSize;
+        }
+    };
+    SelectionBox.prototype.balanceColumn = function (divs, column) {
+        divs.forEach(function (div) {
+            var children = Array.from(div.children);
+            for (var i = 0, child = void 0; child = children[i]; i++) {
+                child.style.width = column[i] + 'px';
+            }
+        });
+    };
+    SelectionBox.prototype.combineColumn = function (col1, col2) {
+        var result = [];
+        var i = 0;
+        while (col1[i] || col2[i]) {
+            if (!col1[i]) {
+                result = result.concat(col2.slice(i));
+                break;
+            }
+            if (!col2[i]) {
+                result = result.concat(col1.slice(i));
+                break;
+            }
+            result.push(Math.max(col1[i], col2[i]));
+            i++;
+        }
+        ;
+        return result;
+    };
     SelectionBox.prototype.left = function (event) {
@@ -150,0 +200,0 @@ var _this = this;

package.json

 {
   "name": "mj-context-menu",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "A generic context menu",
@@ -5,0 +5,0 @@ "main": "dist/ContextMenu.js",

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

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

573202

increased by1.82%

Lines of code

7004

increased by1.73%

No dependency changes