@aptre/flex-layout 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -41,7 +41,7 @@ var Rect = class _Rect {
     this.height = height;
   }
   static fromElement(element) {
-    let { x, y, width, height } = element.getBoundingClientRect();
+    const { x, y, width, height } = element.getBoundingClientRect();
     return new _Rect(x, y, width, height);
   }
   clone() {
@@ -768,7 +768,7 @@ var AttributeDefinitions = class {
   }
   update(jsonObj, obj) {
     for (const attr of this.attributes) {
-      if (jsonObj.hasOwnProperty(attr.name)) {
+      if (attr.name in jsonObj) {
         const fromValue = jsonObj[attr.name];
         if (fromValue === void 0) {
           delete obj[attr.name];
@@ -801,7 +801,7 @@ var AttributeDefinitions = class {
         defaultValue = attr.defaultValue;
         type = attr.type;
       }
-      let defValue = JSON.stringify(defaultValue);
+      const defValue = JSON.stringify(defaultValue);
       const required = attr.required || attr.fixed ? "" : "?";
       if (c.fixed) {
         lines.push("	" + c.name + ": " + defValue + ";");
@@ -1193,15 +1193,6 @@ var SplitterNode = class _SplitterNode extends Node {
 
 // src/model/TabNode.ts
 var TabNode = class _TabNode extends Node {
-  /** @internal */
-  constructor(model, json, addToModel = true) {
-    super(model);
-    this._extra = {};
-    _TabNode._attributeDefinitions.fromJson(json, this._attributes);
-    if (addToModel === true) {
-      model._addNode(this);
-    }
-  }
   static {
     this.TYPE = "tab";
   }
@@ -1239,6 +1230,15 @@ var TabNode = class _TabNode extends Node {
     attributeDefinitions.addInherited("borderHeight", "tabBorderHeight").setType(Attribute.NUMBER);
     return attributeDefinitions;
   }
+  /** @internal */
+  constructor(model, json, addToModel = true) {
+    super(model);
+    this._extra = {};
+    _TabNode._attributeDefinitions.fromJson(json, this._attributes);
+    if (addToModel === true) {
+      model._addNode(this);
+    }
+  }
   getWindow() {
     return this._window;
   }
@@ -1374,18 +1374,217 @@ var TabNode = class _TabNode extends Node {
   }
 };
 
+// node_modules/layerr/dist/error.js
+function assertError(err) {
+  if (!isError(err)) {
+    throw new Error("Parameter was not an error");
+  }
+}
+function isError(err) {
+  return objectToString(err) === "[object Error]" || err instanceof Error;
+}
+function objectToString(obj) {
+  return Object.prototype.toString.call(obj);
+}
+
+// node_modules/layerr/dist/tools.js
+function parseArguments(args) {
+  let options, shortMessage = "";
+  if (args.length === 0) {
+    options = {};
+  } else if (isError(args[0])) {
+    options = {
+      cause: args[0]
+    };
+    shortMessage = args.slice(1).join(" ") || "";
+  } else if (args[0] && typeof args[0] === "object") {
+    options = Object.assign({}, args[0]);
+    shortMessage = args.slice(1).join(" ") || "";
+  } else if (typeof args[0] === "string") {
+    options = {};
+    shortMessage = shortMessage = args.join(" ") || "";
+  } else {
+    throw new Error("Invalid arguments passed to Layerr");
+  }
+  return {
+    options,
+    shortMessage
+  };
+}
+
+// node_modules/layerr/dist/layerr.js
+var Layerr = class _Layerr extends Error {
+  constructor(errorOptionsOrMessage, messageText) {
+    const args = [...arguments];
+    const { options, shortMessage } = parseArguments(args);
+    let message = shortMessage;
+    if (options.cause) {
+      message = `${message}: ${options.cause.message}`;
+    }
+    super(message);
+    this.message = message;
+    if (options.name && typeof options.name === "string") {
+      this.name = options.name;
+    } else {
+      this.name = "Layerr";
+    }
+    if (options.cause) {
+      Object.defineProperty(this, "_cause", { value: options.cause });
+    }
+    Object.defineProperty(this, "_info", { value: {} });
+    if (options.info && typeof options.info === "object") {
+      Object.assign(this._info, options.info);
+    }
+    if (Error.captureStackTrace) {
+      const ctor = options.constructorOpt || this.constructor;
+      Error.captureStackTrace(this, ctor);
+    }
+  }
+  static cause(err) {
+    assertError(err);
+    if (!err._cause)
+      return null;
+    return isError(err._cause) ? err._cause : null;
+  }
+  static fullStack(err) {
+    assertError(err);
+    const cause = _Layerr.cause(err);
+    if (cause) {
+      return `${err.stack}
+caused by: ${_Layerr.fullStack(cause)}`;
+    }
+    return err.stack;
+  }
+  static info(err) {
+    assertError(err);
+    const output = {};
+    const cause = _Layerr.cause(err);
+    if (cause) {
+      Object.assign(output, _Layerr.info(cause));
+    }
+    if (err._info) {
+      Object.assign(output, err._info);
+    }
+    return output;
+  }
+  cause() {
+    return _Layerr.cause(this);
+  }
+  toString() {
+    let output = this.name || this.constructor.name || this.constructor.prototype.name;
+    if (this.message) {
+      output = `${output}: ${this.message}`;
+    }
+    return output;
+  }
+};
+
+// node_modules/ulidx/dist/browser/index.js
+var ENCODING = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+var ENCODING_LEN = 32;
+var TIME_MAX = 281474976710655;
+var TIME_LEN = 10;
+var RANDOM_LEN = 16;
+var ERROR_INFO = Object.freeze({
+  source: "ulid"
+});
+function detectPRNG(root) {
+  const rootLookup = root || detectRoot();
+  const globalCrypto = rootLookup && (rootLookup.crypto || rootLookup.msCrypto) || null;
+  if (typeof globalCrypto?.getRandomValues === "function") {
+    return () => {
+      const buffer = new Uint8Array(1);
+      globalCrypto.getRandomValues(buffer);
+      return buffer[0] / 255;
+    };
+  } else if (typeof globalCrypto?.randomBytes === "function") {
+    return () => globalCrypto.randomBytes(1).readUInt8() / 255;
+  } else
+    ;
+  throw new Layerr({
+    info: {
+      code: "PRNG_DETECT",
+      ...ERROR_INFO
+    }
+  }, "Failed to find a reliable PRNG");
+}
+function detectRoot() {
+  if (inWebWorker())
+    return self;
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof global !== "undefined") {
+    return global;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return null;
+}
+function encodeRandom(len, prng) {
+  let str = "";
+  for (; len > 0; len--) {
+    str = randomChar(prng) + str;
+  }
+  return str;
+}
+function encodeTime(now, len) {
+  if (isNaN(now)) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_NAN",
+        ...ERROR_INFO
+      }
+    }, `Time must be a number: ${now}`);
+  } else if (now > TIME_MAX) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_SIZE_EXCEED",
+        ...ERROR_INFO
+      }
+    }, `Cannot encode a time larger than ${TIME_MAX}: ${now}`);
+  } else if (now < 0) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_NEG",
+        ...ERROR_INFO
+      }
+    }, `Time must be positive: ${now}`);
+  } else if (Number.isInteger(now) === false) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_TYPE",
+        ...ERROR_INFO
+      }
+    }, `Time must be an integer: ${now}`);
+  }
+  let mod, str = "";
+  for (let currentLen = len; currentLen > 0; currentLen--) {
+    mod = now % ENCODING_LEN;
+    str = ENCODING.charAt(mod) + str;
+    now = (now - mod) / ENCODING_LEN;
+  }
+  return str;
+}
+function inWebWorker() {
+  return typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
+}
+function randomChar(prng) {
+  let rand = Math.floor(prng() * ENCODING_LEN);
+  if (rand === ENCODING_LEN) {
+    rand = ENCODING_LEN - 1;
+  }
+  return ENCODING.charAt(rand);
+}
+function ulid(seedTime, prng) {
+  const currentPRNG = prng || detectPRNG();
+  const seed = isNaN(seedTime) ? Date.now() : seedTime;
+  return encodeTime(seed, TIME_LEN) + encodeRandom(RANDOM_LEN, currentPRNG);
+}
+
 // src/model/RowNode.ts
 var RowNode = class _RowNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    this._dirty = true;
-    this._drawChildren = [];
-    this._minHeight = 0;
-    this._minWidth = 0;
-    _RowNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
-  }
   static {
     this.TYPE = "row";
   }
@@ -1419,6 +1618,16 @@ var RowNode = class _RowNode extends Node {
     attributeDefinitions.add("height", void 0).setType(Attribute.NUMBER);
     return attributeDefinitions;
   }
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    this._dirty = true;
+    this._drawChildren = [];
+    this._minHeight = 0;
+    this._minWidth = 0;
+    _RowNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+  }
   getWeight() {
     return this._attributes.weight;
   }
@@ -1838,14 +2047,6 @@ var RowNode = class _RowNode extends Node {
 
 // src/model/TabSetNode.ts
 var TabSetNode = class _TabSetNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    _TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
-    this._calculatedTabBarHeight = 0;
-    this._calculatedHeaderBarHeight = 0;
-  }
   static {
     this.TYPE = "tabset";
   }
@@ -1904,6 +2105,14 @@ var TabSetNode = class _TabSetNode extends Node {
     attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN);
     return attributeDefinitions;
   }
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    _TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+    this._calculatedTabBarHeight = 0;
+    this._calculatedHeaderBarHeight = 0;
+  }
   getName() {
     return this._getAttr("name");
   }
@@ -2301,7 +2510,7 @@ function adjustSelectedIndex(parent, removedIndex) {
   }
 }
 function randomUUID() {
-  return ("10000000-1000-4000-8000" + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+  return ulid();
 }
 
 // src/model/BorderNode.ts
@@ -2743,7 +2952,7 @@ function getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle) {
       leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
     }
   }
-  let buttons = [];
+  const buttons = [];
   const renderState = { leading: leadingContent, content: titleContent, name, buttons };
   layout.customizeTab(node, renderState);
   node._setRenderedName(renderState.name);
@@ -2925,9 +3134,9 @@ var TabButtonStamp = (props) => {
   const { layout, node, iconFactory, titleFactory } = props;
   const selfRef = React3.useRef(null);
   const cm = layout.getClassName;
-  let classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
+  const classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
   const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
-  let content = renderState.content ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node._getNameForOverflowMenu();
+  const content = renderState.content ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node._getNameForOverflowMenu();
   const leading = renderState.leading ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
   return /* @__PURE__ */ React3.createElement("div", { ref: selfRef, className: classNames, title: node.getHelpText() }, leading, content);
 };
@@ -3068,7 +3277,7 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
       tabsTruncated.current = false;
     }
     const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
-    let lastChild = node.getChildren()[node.getChildren().length - 1];
+    const lastChild = node.getChildren()[node.getChildren().length - 1];
     const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());
     if (firstRender.current === true || lastHiddenCount.current === 0 && hiddenTabs.length !== 0 || nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
     nodeRect.height !== lastRect.current.height) {
@@ -3183,8 +3392,8 @@ var BorderTabSet = (props) => {
   let style2 = border.getTabHeaderRect().styleWithPosition({});
   const tabs = [];
   const layoutTab = (i) => {
-    let isSelected = border.getSelected() === i;
-    let child = border.getChildren()[i];
+    const isSelected = border.getSelected() === i;
+    const child = border.getChildren()[i];
     tabs.push(
       /* @__PURE__ */ React6.createElement(
         BorderButton,
@@ -3213,7 +3422,7 @@ var BorderTabSet = (props) => {
     borderClasses += " " + border.getClassName();
   }
   let buttons = [];
-  let stickyButtons = [];
+  const stickyButtons = [];
   const renderState = { headerContent: void 0, buttons, stickyButtons, headerButtons: [], overflowPosition: void 0 };
   layout.customizeTabSet(border, renderState);
   buttons = renderState.buttons;
@@ -3412,7 +3621,7 @@ var Splitter = (props) => {
     return rtn;
   };
   const cm = layout.getClassName;
-  let r = node.getRect();
+  const r = node.getRect();
   const style2 = r.styleWithPosition({
     cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
   });
@@ -3428,7 +3637,7 @@ var Splitter = (props) => {
   if (extra === 0) {
     return /* @__PURE__ */ React7.createElement("div", { style: style2, "data-layout-path": path, className, onTouchStart: onMouseDown, onMouseDown });
   } else {
-    let r2 = r.clone();
+    const r2 = r.clone();
     r2.x = 0;
     r2.y = 0;
     if (node.getOrientation() === Orientation.VERT) {
@@ -3609,7 +3818,7 @@ var TabButton = (props) => {
   const cm = layout.getClassName;
   const parentNode = node.getParent();
   const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
-  let baseClassName = isStretch ? "flexlayout__tab_button_stretch" /* FLEXLAYOUT__TAB_BUTTON_STRETCH */ : "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
+  const baseClassName = isStretch ? "flexlayout__tab_button_stretch" /* FLEXLAYOUT__TAB_BUTTON_STRETCH */ : "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
   let classNames = cm(baseClassName);
   classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
   if (!isStretch) {
@@ -3779,7 +3988,7 @@ var TabSet = (props) => {
   if (node.isEnableTabStrip()) {
     for (let i = 0; i < node.getChildren().length; i++) {
       const child = node.getChildren()[i];
-      let isSelected = node.getSelected() === i;
+      const isSelected = node.getSelected() === i;
       tabs.push(/* @__PURE__ */ React11.createElement(TabButton, { layout, node: child, path: path + "/tb" + i, key: child.getId(), selected: isSelected, iconFactory, titleFactory, icons }));
       if (i < node.getChildren().length - 1) {
         tabs.push(/* @__PURE__ */ React11.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }));
@@ -3922,7 +4131,6 @@ var TabSet = (props) => {
     buttons
   );
   let header;
-  let tabStrip;
   let tabStripClasses = cm("flexlayout__tabset_tabbar_outer" /* FLEXLAYOUT__TABSET_TABBAR_OUTER */);
   if (node.getClassNameTabStrip() !== void 0) {
     tabStripClasses += " " + node.getClassNameTabStrip();
@@ -3982,7 +4190,7 @@ var TabSet = (props) => {
     );
   }
   const tabStripStyle = { height: node.getTabStripHeight() + "px" };
-  tabStrip = /* @__PURE__ */ React11.createElement(
+  const tabStrip = /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: tabStripClasses,
@@ -4005,7 +4213,7 @@ var TabSet = (props) => {
     toolbar
   );
   style2 = layout.styleFont(style2);
-  var placeHolder = void 0;
+  let placeHolder = void 0;
   if (node.getChildren().length === 0) {
     const placeHolderCallback = layout.getTabSetPlaceHolderCallback();
     if (placeHolderCallback) {
@@ -4013,7 +4221,7 @@ var TabSet = (props) => {
     }
   }
   const center = /* @__PURE__ */ React11.createElement("div", { className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */) }, placeHolder);
-  var content;
+  let content;
   if (node.getTabLocation() === "top") {
     content = /* @__PURE__ */ React11.createElement(React11.Fragment, null, header, tabStrip, center);
   } else {
@@ -4474,7 +4682,7 @@ var Layout = class extends React16.Component {
           this.dragDiv.style.visibility = "visible";
         }
       }
-      let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
+      const dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
       if (dropInfo) {
         if (this.props.onTabDrag) {
           this.handleCustomTabDrag(dropInfo, pos, event);
@@ -4770,10 +4978,10 @@ var Layout = class extends React16.Component {
         let tabCount = 0;
         for (const child of drawChildren) {
           if (child instanceof SplitterNode) {
-            let path = borderPath + "/s";
+            const path = borderPath + "/s";
             splitterComponents.push(/* @__PURE__ */ React16.createElement(Splitter, { key: child.getId(), layout: this, node: child, path }));
           } else if (child instanceof TabNode) {
-            let path = borderPath + "/t" + tabCount++;
+            const path = borderPath + "/t" + tabCount++;
             if (this.supportsPopout && child.isFloating()) {
               const rect = this._getScreenRect(child);
               const tabBorderWidth = child._getAttr("borderWidth");
@@ -5565,12 +5773,12 @@ var Model = class _Model {
    * @returns {IJsonModel} json object that represents this model
    */
   toJson() {
-    const global = {};
-    _Model._attributeDefinitions.toJson(global, this._attributes);
+    const global2 = {};
+    _Model._attributeDefinitions.toJson(global2, this._attributes);
     this.visitNodes((node) => {
       node._fireEvent("save", void 0);
     });
-    return { global, borders: this._borders._toJson(), layout: this._root.toJson() };
+    return { global: global2, borders: this._borders._toJson(), layout: this._root.toJson() };
   }
   getSplitterSize() {
     let splitterSize = this._attributes.splitterSize;

package/dist/model/Utils.d.ts

@@ -1 +1 @@
-export declare function randomUUID(): any;
+export declare function randomUUID(): string;

package/package.json

@@ -2,7 +2,7 @@
     "name": "@aptre/flex-layout",
     "author": "Caplin Systems Ltd",
     "description": "A multi-tab docking layout manager",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "license": "ISC",
     "repository": {
         "type": "git",
@@ -72,16 +72,19 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },
-    "eslintConfig": {
-        "extends": "react-app"
+    "dependencies": {
+        "ulidx": "^2.2.1"
     },
-    "dependencies": {},
     "devDependencies": {
         "@types/node": "^20.8.7",
         "@types/prismjs": "^1.26.0",
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.0.1",
+        "@typescript-eslint/eslint-plugin": "^6.15.0",
+        "@typescript-eslint/parser": "^6.15.0",
         "esbuild": "^0.19.5",
+        "eslint": "^8.56.0",
+        "eslint-plugin-react": "^7.33.2",
         "prettier": "^3.0.0",
         "prismjs": "^1.28.0",
         "react": "^18.0.0",

package/tsconfig.json

@@ -4,6 +4,7 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "ES6",
+        "moduleResolution": "node",
         "target": "ES6",
         "stripInternal": true,
         "alwaysStrict": true,