Making class wider when editing code, AutoGrid cards width fixes

Author: nikitaeverywhere

package.json

@@ -2,7 +2,7 @@
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
   "packageName": "VisualEditor",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [

source/client/js/classEditor/class/index.js

@@ -19,6 +19,8 @@ export function getClassElement (data) {
         }`),
         header = block(`div`, `header`);
 
+    data[`__visualClassElement`] = card;
+    
     if (type === "class") // float priority
         head.appendChild(controls);
     head.appendChild(headIcon);

source/client/js/classEditor/class/member.js

@@ -6,6 +6,7 @@ import { getKeywordView } from "./keyword";
 import MANIFEST from "./MANIFEST";
 import { MEMBER_SECTIONS, getMemberSection } from "./memberSection";
 import { getCodeCaptionView } from "./code";
+import { updateGridElement } from "./../index";
 
 /**
  * Creates and returns interactive class block property editor.
@@ -85,6 +86,9 @@ function enableMember ({
             ? [classData["Name"]]
             : [classData["Name"], classBlockName, classBlockPropName];
 
+    if (typeof classData[`__visualCodeBlocksOpened`] === "undefined")
+        classData[`__visualCodeBlocksOpened`] = 0;
+
     headerElement.addEventListener(`click`, () => {
         if (!container) {
 
@@ -187,6 +191,13 @@ function enableMember ({
         }
         headerElement.classList.toggle("opened");
 
+        if (classBlockName === "Methods") {
+            classData[`__visualCodeBlocksOpened`] += opened ? 1 : -1;
+            updateGridElement(classData[`__visualClassElement`], {
+                width: classData[`__visualCodeBlocksOpened`] > 0 ? 2 : 1
+            });
+        }
+
         updateGrid();
     });
 

source/client/js/classEditor/index.js

@@ -22,10 +22,14 @@ let grid = onInit(() => grid = new AutoGrid(document.querySelector("#classBuilde
  * Function which updates current grid.
  */
 export function updateGrid () {
-    window.autoGrid = grid;
     grid.updateGrid();
 }
 
+export function updateGridElement (element, data = {}) {
+    if (element instanceof HTMLElement)
+        grid.updateChild(element, data);
+}
+
 /**
  * Behaviors for elements on page.
  * @type {HTMLElement}