{"_id":"@andrewsantarin/extended-flexlayout-react","_rev":"4-8cdd11044fe05635c3297110a336804f","time":{"0.4.0-alpha.1":"2019-03-28T09:03:13.063Z","created":"2019-03-28T09:06:11.256Z","0.4.0-alpha.2":"2019-03-28T09:06:11.601Z","modified":"2022-04-04T14:01:53.451Z"},"name":"@andrewsantarin/extended-flexlayout-react","dist-tags":{"latest":"0.4.0-alpha.2"},"versions":{"0.4.0-alpha.2":{"name":"@andrewsantarin/extended-flexlayout-react","version":"0.4.0-alpha.2","description":"A multi-tab layout manager with extended functionality","main":"lib/index.js","types":"./declarations/index.d.ts","scripts":{"test":"jasmine","build":"npm run build:commonjs && npm run build:umd && npm run build:umd:min","build:commonjs":"tsc -p tsconfig2.json","build:umd":"webpack --config webpack_build.config.js","build:umd:min":"webpack -p --config webpack_build_min.config.js","doc":"typedoc --out typedoc --mode file --exclude \"**/examples/**/*.tsx\" --readme none ","start:dev":"webpack-dev-server","start":"npm run build && npm run start:dev"},"author":{"name":"Caplin Systems Ltd"},"repository":{"type":"git","url":"git+https://github.com/caplin/FlexLayout.git"},"license":"ISC","peerDependencies":{"react":"^16.4.2","react-dom":"^16.4.2","react-rnd":"^9.1.2"},"devDependencies":{"@types/jasmine":"^2.8.8","@types/react":"^16.4.9","@types/react-dom":"^16.0.7","awesome-typescript-loader":"^5.2.0","jasmine":"^3.2.0","react":"^16.4.2","react-dom":"^16.4.2","react-rnd":"^9.1.2","source-map-loader":"^0.2.3","typedoc":"^0.11.1","typescript":"^3.0.0","webpack":"^4.16.5","webpack-cli":"^3.1.0","webpack-dev-server":"^3.1.5"},"dependencies":{},"gitHead":"34a981d3ba01fd7248237daac76ba324ffd55e81","bugs":{"url":"https://github.com/caplin/FlexLayout/issues"},"homepage":"https://github.com/caplin/FlexLayout#readme","_id":"@andrewsantarin/extended-flexlayout-react@0.4.0-alpha.2","_nodeVersion":"10.7.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-e/ERjYe3nOjdyv8sQepI53uQXApLO/UEhu6wF5oPwtUfqB90fmcO2uPlrI1zpqNnFPcaAMgZx4zeMumBlhdNMA==","shasum":"e7c72b329d1e2eb36afc031ac3440da43abf8bff","tarball":"https://registry.npmjs.org/@andrewsantarin/extended-flexlayout-react/-/extended-flexlayout-react-0.4.0-alpha.2.tgz","fileCount":119,"unpackedSize":752893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnI6ECRA9TVsSAnZWagAAgnQP/RsJ+ztvyAj4oubL8OXq\nB5glD0TqjC/s83AMF2SHSwwKbBNvzkZr0DGKMIdwWAstOsSGP75O/CXeVa3a\nnmEX30XdSnzN1DoyLzADDc+hpBFZgwpblT/onNlyy5E2XGC/EkRausnekb4I\nIqmL20i6/Aup/js9S2BMq2DiMwGI/onZV/gjuzuaAz588Ex0XDqSp6XU3eK8\nWEU0QyR25GF16CAAR/p6rtsVIkxESQRwlh1tyWGgnIjc9MjbdOIaaV0D5T2e\n4PiXJHEuSS5GTjFtU2e8jLRKA87dFK0DfA6X63LY8mIWZO++PynjDBso3x8a\nt2twGcSc+sgMImhzMJD2xgjlZKD4y8U/E5KfoPj2SBzGYH+1Gk8BIZNbZbn3\n3SV29DbqUWp6fKgtLFRRpft6PyiZTFoW0qkUzawQ/RxxmkmRrnXcZUojDR0n\nDjwDinKbWx13EcHnTv2jQq/7yEhLp8cmJL0sbJE8ifnrdDoVU2uldDn5E5Lz\noA0X3ulqDFmj9kuOF/N7zzYm2wbiD7u/xbO+YxK1jBVc+wIA84JQW88vX1vz\nSejg8P2YZYokYTKUrmQxcS7oKK3eb2TeyWN0CAkzuLr8EkkWvFHglr+DUAdb\nM7A6Hud3XRf0RKXVpCloWi8Woi8sNSeLQD/5bSu6uiyjzcN/nbxZ8uwGzlVt\nVI7r\r\n=s8ie\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4ZfqBk1E0uPLlrZEBjs8CYM7V8k7scoAL6hTOOCvzWwIgSfJO21vb1ulPxb0nq1FXBrBnQQkvOO4WPFa5JTxR1O0="}]},"maintainers":[{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"}],"_npmUser":{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/extended-flexlayout-react_0.4.0-alpha.2_1553763971442_0.21171485473171114"},"_hasShrinkwrap":false}},"maintainers":[{"name":"andrewsantarin","email":"andrew.santarin@gmail.com"}],"description":"A multi-tab layout manager with extended functionality","homepage":"https://github.com/caplin/FlexLayout#readme","repository":{"type":"git","url":"git+https://github.com/caplin/FlexLayout.git"},"author":{"name":"Caplin Systems Ltd"},"bugs":{"url":"https://github.com/caplin/FlexLayout/issues"},"license":"ISC","readme":"# FlexLayout Extended\n\nThis fork extends the existing `flexlayout-react` library with additional features.\n\n------------\n## Notes from the Contributor\n\nHello, there. You might be wondering, \"What the fork? What's going on?\"\n\nTerrible joke, I know.\n\nTo put it simply: It's a version of `FlexLayout` (a.k.a. [`flexlayout-react`](https://www.npmjs.com/package/flexlayout-react) on NPM) which is still very much a work in progress. Currenly, I'm developing a feature which will support docking & undocking of tabs.\n\n![FlexLayout Demo Screenshot](https://i.imgur.com/Qs2ohCQ.png \"FlexLayout Demo Screenshot\")\nSee my Imgur upload (https://i.imgur.com/Qs2ohCQ.png) for a rough prototype idea of what this extension intends to do.\n\n### Premise and Objective\nIf you're in dire need of a React.js library that supports tabsets which can both be separated on the grid and float freely one the screen, then this extended library is most likely for you.\n\n### Where to start? / Installation / Usage\nFor the installation & usage, check the original docs below. I've made some additional details based on what I've contributed so far.\n\nThis fork contains additional features not included in the original. It is currently being pitched as a proof of concept at https://github.com/caplin/FlexLayout/issues/61. To use this specific fork in your projects, follow these commands:\n\n```sh\nnpm install react --save\nnpm install react-dom --save\nnpm install react-rnd --save # This dependency is needed for the free-floating tabs\nnpm install @andrewsantarin/extended-flexlayout-react --save\n```\n\nThen, follow the rest of the docs as usual.\n\nIf you want to see this library's tie-in examples, then do this:\n\n```sh\ngit clone https://github.com/andrewsantarin/FlexLayout.git\ncd FlexLayout\ngit checkout -b branch origin/wip/\nnpm install\nnpm start\n```\n\nReplace the `wip/` with any particular development branch I'm working on. If you want to see what's in store for this library, don't look at the `master` branch. Instead, refer to one of these three groups:\n\n- `develop` - merge of all `feature` commits\n- `feature` - polished up commits\n- `wip` - totally new stuff, very unstable\n\nOnce you run `npm start`, wait for the `webpack` bundler to finish, then open http://localhost:3000 on your local browser.\n\n------------\nNormal docs continue below!\n\n------------\n# FlexLayout\n\nFlexLayout is a layout manager that arranges React components in multiple tab sets, these can be resized and moved.\n\n![FlexLayout Demo Screenshot](/../screenshots/github_images/v0.20/demo1.png?raw=true \"FlexLayout Demo Screenshot\")\n\n[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.30/demo/index.html)\n\nTry it now using [JSFiddle](https://jsfiddle.net/9x6hecdw/1)\n\n\n\n[Screenshot of Caplin Liberator Explorer using FlexLayout](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.20/images/LiberatorExplorerV3_3.PNG)\n\nFlexLayout's only dependency is React.\n\nFeatures:\n* splitters\n* tabs\n* tab dragging and ordering\n* tabset dragging (move all the tabs in a tabset in one operation)\n* dock to tabset or edge of frame or (**NEW!**) free-floating space\n* maximize tabset (double click tabset header or use icon)\n* tab overflow (show menu when tabs overflow)\n* border tabsets\n* floating tabsets (**NEW!**)\n* submodels, allow layouts inside layouts\n* tab renaming (double click tab text to rename)\n* theming - light and dark\n* touch events - works on mobile devices (iPad, Android)\n* add tabs using drag, indirect drag, add to active tabset, add to tabset by id\n* preferred pixel size tabsets\n* tabset with headers\n* tab and tabset attributes: enableHeader, enableTabStrip, enableDock, enableDrop...\n* customizable tabs and tabset header rendering\n* `[esc]` key to cancel drag\n* typescript type declarations\n* supports overriding css class names via the classNameMapper prop, for use in css modules\n\n## Installation\n\nFlexLayout is in the npm repository. Simply install React and FlexLayout from npm:\n\n```\nnpm install react --save\nnpm install react-dom --save\nnpm install flexlayout-react --save\n```\n\nImport React and FlexLayout in your modules:\n\n```\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport FlexLayout from \"flexlayout-react\";\n```\n\nInclude the light or dark style in your html:\n\nLight\n\n```\n\n```\n\nDark:\n\n```\n\n```\n\n## Usage\n\nThe `` component renders the tabsets and splitters, it takes the following props:\n\n| Prop | Required/Optional | Description |\n| ------------- |:-------------:| -----|\n| model | required | the layout model |\n| factory | required | a factory function for creating React components |\n| onAction | optional | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, e.g.: asking the user to confirm a tab close) |\n| onRenderTab | optional | function called when rendering a tab, allows leading (icon) and content sections to be customized |\n| onRenderTabSet | optional | function called when rendering a tabset, allows header and buttons to be customized |\n| onModelChange | optional | function called when model has changed |\n| classNameMapper | optional | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|\n\nThe model is tree of Node objects that define the structure of the layout.\n\nThe factory is a function that takes a Node object and returns a React component that should be hosted by a tab in the layout.\n\nThe model can be created using the Model.fromJson(jsonObject) static method, and can be saved using the model.toJson() method.\n\n```javascript\nthis.state = {model: FlexLayout.Model.fromJson(json)};\n\nrender() {\n \n}\n```\n\n## Example Configuration\n\nConsider this typical use case and its implementation code below:\n\n- You want a main layout that has two groups of tabs, split evenly in the middle. \n- You also want another tab to float freely over the main layout, which can be moved around at the user's discretion.\n- You also want yet another set of panels which contain docked tabs on all four sides of your main layout.\n\n```javascript\nconst json = {\n global: {},\n layout: { // Required\n type: \"row\", // Also required.\n weight: 100, // Also required.\n children: [\n // Optional children elements.\n // If you'd rather not have any elements on this layer, leave the \"children\" array empty.\n {\n type: \"tabset\",\n weight: 50, // Not in pixels, but rather, a relative ratio between the children of the same parent.\n selected: 0,\n children: [\n {\n type: \"tab\",\n name: \"FX\",\n component: \"grid\",\n }\n ],\n },\n {\n type: \"tabset\",\n weight: 50, // Not in pixels, but rather, a relative ratio between the children of the same parent.\n selected: 0,\n children: [\n {\n \"type\": \"tab\",\n \"name\": \"FI\",\n \"component\": \"grid\",\n },\n ],\n },\n ],\n },\n floating: { // Required\n type: \"floating\", // Also required.\n children: [ \t // Also required.\n // Optional children elements.\n // If you'd rather not have any elements on this layer, leave the \"children\" array empty.\n // You may only nest tabsets up to 1 level from the floating element.\n {\n type: \"tabset\",\n // Use the following on the tabset instead of \"weight\".\n x: 125,\t\t\t // From the topmost pixel of the layout root element.\n y: 250,\t\t\t // From the leftmost pixel of the layout root element.\n width: 600,\t\t // Initial pixel width of the child element.\n height: 480,\t // Initial pixel height of the child element.\n // ------------ //\n selected: 0,\n children: [\n {\n type: \"tab\",\n name: \"FX\",\n component: \"grid\",\n },\n ],\n },\n ],\n },\n \"borders\": [ // Optional\n // You can specify up to 4 borders in total across 4 sides.\n // 1 border = 1 side\n {\n \"type\": \"border\",\n \"location\": \"top\",\n \"children\": [\n {\n \"type\": \"tab\",\n \"enableClose\": false,\n \"name\": \"Navigation\",\n \"component\": \"grid\"\n }\n ]\n },\n {\n \"type\": \"border\",\n \"location\": \"left\",\n \"children\": [\n {\n \"type\": \"tab\",\n \"enableClose\": false,\n \"name\": \"Views\",\n \"component\": \"grid\"\n }\n ]\n },\n {\n \"type\": \"border\",\n \"location\": \"right\",\n \"children\": [\n {\n \"type\": \"tab\",\n \"enableClose\": false,\n \"name\": \"Options\",\n \"component\": \"grid\"\n }\n ]\n },\n {\n \"type\": \"border\",\n \"location\": \"bottom\",\n \"children\": [\n {\n \"type\": \"tab\",\n \"enableClose\": false,\n \"name\": \"Activity Blotter\",\n \"component\": \"grid\"\n },\n {\n \"type\": \"tab\",\n \"enableClose\": false,\n \"name\": \"Execution Blotter\",\n \"component\": \"grid\"\n }\n ]\n }\n ]\n};\n```\n\n## Example Code\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport FlexLayout from \"flexlayout-react\";\n\n// Let's assume that the example configuration above is what we want.\nimport MAIN_LAYOUT_JSON from \"./main.layout.json\";\n\nclass Main extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n model: FlexLayout.Model.fromJson(MAIN_LAYOUT_JSON),\n };\n }\n\n factory = (node) => {\n const component = node.getComponent();\n if (component === \"button\") {\n return ;\n }\n }\n\n render() {\n return (\n \n )\n }\n}\n\nReactDOM.render(
, document.getElementById(\"container\"));\n```\n\nThe above code would render two tabsets horizontally each containing a single tab that hosts a button component. The tabs could be moved and resized by dragging and dropping. Additional grids could be added to the layout by sending actions to the model.\n\nIf you're looking for more advanced implementations to exert additional control over your layout, [see our examples](./src/examples).\n\nTry it now using [JSFiddle](https://jsfiddle.net/9x6hecdw/1) \n\n## Core Concept\n\nThe model revolves around 4 types of \"node\":\n\n* **row**\n\n Rows contain a list of tabsets and child rows. The top level row will render horizontally, while child \"rows\" will render in the opposite orientation to their parent. \n \n **Note:** Rows can't be nested in on `floating` and `border`.\n\n* **tabset**\n\n Tabsets contain a list of tabs and the index of the selected tab.\n\n* **tab**\n\n Tabs specify the name of the component that they should host (that will be loaded via the factory) and the text of the actual tab.\n\n* **border**\n\n Borders contain a list of tabs and the index of the selected tab; they can only be used in the border's top level element.\n\nThe main layout is defined with rows within rows that contain tabsets that themselves contain tabs.\n\nThe model json contains 4 top level elements:\n\n* `global`\n\n where global options are defined.\n\n* `layout`\n\n where the grid-separated `row -> tabset -> tabs` layout hierarchy is defined.\n\n* `floating`\n\n where the free-floating `tabset -> tabs` hierarchy is defined.\n\n* _(optional)_ `borders`\n\n where up to 4 borders are defined (i.e. the `\"top\"`, `\"bottom\"`, `\"left\"`, `\"right\"` sides), one border for each side.\n\nWeights on rows and tabsets specify the relative weight of these nodes within the parent row. The actual pixel values do not matter; their relative values will be calculated instead (i.e. two tabsets of weights `30`,`70` relative their parent element would render the same if they had weights of `3`,`7`).\n\nTo control where nodes can be dropped, you can add a callback function to the model:\n\n```javascript\nmodel.setOnAllowDrop(this.allowDrop);\n```\n\nExample:\n```javascript\nclass Main extends Component {\n allowDrop = (dragNode, dropInfo) => {\n let dropNode = dropInfo.node;\n\n // prevent non-border tabs dropping into borders\n if (dropNode.getType() == \"border\" && (dragNode.getParent() == null || dragNode.getParent().getType() != \"border\")) {\n return false;\n }\n\n // prevent border tabs dropping into main layout\n if (dropNode.getType() != \"border\" && (dragNode.getParent() != null && dragNode.getParent().getType() == \"border\")) {\n return false;\n }\n\n return true;\n }\n}\n```\n\nBy changing global or node attributes you can change the layout appearance and behavior.\n\nFor example, setting `tabSetEnableTabStrip` to `false` in the global options would change the layout into a multi-splitter (without\ntabs or drag and drop).\n\n```json\n{\n \"global\": {\n \"tabSetEnableTabStrip\": false\n }\n}\n```\n\n## Global Config attributes\n\nAttributes allowed in the `global` element\n\n| Attribute | Default | Description |\n| ------------- |:-------------:| -----|\n| splitterSize | `8` | |\n| enableEdgeDock | `true` | |\n| tabEnableClose | `true` | |\n| tabEnableDrag | `true` | |\n| tabEnableRename | `true` | |\n| tabClassName | `null` | |\n| tabIcon | `null` | |\n| tabEnableRenderOnDemand | `true` | |\n| tabDragSpeed | `0.3` | CSS transition speed of drag outlines (in seconds) |\n| tabSetEnableDeleteWhenEmpty | `true` | |\n| tabSetEnableDrop | `true` | |\n| tabSetEnableDrag | `true` | |\n| tabSetEnableDivide | `true` | |\n| tabSetEnableMaximize | `true` | |\n| tabSetClassNameTabStrip | `null` | |\n| tabSetClassNameHeader | `null` | |\n| tabSetEnableTabStrip | `true` | |\n| tabSetHeaderHeight | `20` | |\n| tabSetTabStripHeight | `20` | |\n| borderBarSize | `25` | |\n| borderEnableDrop | `true` | |\n| borderClassName | `null` | |\n\n## Row Attributes\n\nAttributes allowed in nodes of type `\"row\"`.\n\n| Attribute | Default | Description |\n| ------------- |:-------------:| -----|\n| type | `\"row\"` | |\n| weight | `100` | |\n| width | `null` | preferred pixel width |\n| height | `null` | preferred pixel height |\n| children | *required* | a list of row and tabset nodes |\n\n## Tab Attributes\n\nAttributes allowed in nodes of type `\"tab\"`.\n\nInherited defaults will take their value from the associated global attributes (see above).\n\n\n| Attribute | Default | Description |\n| ------------- |:-------------:| -----|\n| type | `\"tab\"` | |\n| name | *required* | |\n| component | *required* | |\n| config | `null` | a place to hold json config for the hosted component |\n| id | auto generated | |\n| enableClose | *inherited* | |\n| enableDrag | *inherited* | |\n| enableRename | *inherited* | |\n| className | *inherited* | |\n| icon | *inherited* | |\n| enableRenderOnDemand | *inherited* | |\n\nTab nodes have a `getExtraData()` method that initially returns an empty object. This is the place to \nadd extra data to a tab node that will not be saved.\n\n\n## TabSet Attributes\n\nAttributes allowed in nodes of type `\"tabset\"`.\n\nInherited defaults will take their value from the associated global attributes (see above).\n\n**Note**: tabsets can be dynamically created as tabs are moved and deleted when all their tabs are removed (unless `enableDeleteWhenEmpty` is `false`).\n\n| Attribute | Default | Description |\n| ------------- |:-------------:| -----|\n| type | `\"tabset\"` | |\n| weight | `100` | |\n| width | `null` | preferred pixel width |\n| height | `null` | preferred pixel height |\n| x | `null` | preferred pixel offset from the leftmost corner of the `` container, equivalent of CSS `left` |\n| y | `null` | preferred pixel offset from the topmost corner of the `` container, equivalent of CSS `top` |\n| name | `null` | named tabsets will show a header bar above the tabs |\n| selected | `0` | |\n| maximized | `false` | |\n| id | auto generated | |\n| children | *required* | a list of tab nodes |\n| enableDeleteWhenEmpty | *inherited* | |\n| enableDrop | *inherited* | |\n| enableDrag | *inherited* | |\n| enableDivide | *inherited* | |\n| enableMaximize | *inherited* | |\n| classNameTabStrip | *inherited* | |\n| classNameHeader | *inherited* | |\n| enableTabStrip | *inherited* | |\n| headerHeight | *inherited* | |\n| tabStripHeight | *inherited* | |\n\nTab set nodes will use certain positioning, size and relative split variables depending on where it has been nested: \n- `weight` when nested inside `layout`\n- `width`, `height`, `x`, `y` when nested inside `floating`\n\n## Border Attributes\n\nAttributes allowed in nodes of type `\"border\"`.\n\nInherited defaults will take their value from the associated global attributes (see above).\n\n\n| Attribute | Default | Description |\n| ------------- |:-------------:| -----|\n| type | `\"border\"` | |\n| size | `200` | size of the tab body when selected |\n| selected | `-1` | `-1` = unselected |\n| id | auto generated | `\"border_\"` + border name, e.g. `\"border_left\"` |\n| show | `true` | show/hide this border |\n| children | *required* | a list of tab nodes |\n| barSize | *inherited* | |\n| enableDrop | *inherited* | |\n| className | *inherited* | |\n\n\n## Model Actions\n\nAll changes to the model are applied through actions. You can intercept actions resulting from GUI changes before they are applied by implementing the `onAction` callback property of the `` component. You can also apply actions directly using the `Model.doAction()` method.\n\n# Example\n\n```javascript\nmodel.doAction(Actions.updateModelAttributes({\n splitterSize: 40,\n tabSetHeaderHeight: 40,\n tabSetTabStripHeight: 40\n}));\n```\n\nThe above example would increase the size of the splitters, tabset headers and tabs. This could be used to make adjusting the layout easier on a small device.\n\n| Action Creator | Description |\n| ------------- | -----|\n|\tActions.addNode(newNodeJson, toNodeId, location, index) | add a new tab node to the given tabset node |\n|\tActions.moveNode(fromNodeId, toNodeId, location, index) | move a tab node from its current location to the new node and location |\n|\tActions.deleteTab(tabNodeId) | delete the given tab |\n|\tActions.selectTab(tabNodeId) | select the given tab |\n|\tActions.setActiveTabset(tabsetNodeId) | set the tabset as the active tabset |\n|\tActions.adjustSplit(splitterNodeId, value) | adjust the size of the given splitter |\n|\tActions.maximizeToggle(tabsetNodeId) | toggles whether the given tabset node is maximized |\n|\tActions.updateModelAttributes(attributes) | updates the global attributes |\n|\tActions.updateNodeAttributes(nodeId, attributes) | updates the attributes of the given node |\n|\tActions.adjustBorderSplit(borderNodeId, pos) | updates the size of the given border node |\n\nExample:\n\n```javascript\nmodel.doAction(Actions.addNode(\n { // Your new tab.\n type: \"tab\",\n component: \"grid\",\n name: \"a grid\",\n id: \"5\"\n },\n \"1\",\n DropLocation.CENTER,\n 0\n));\n```\n\nThis code would add a new grid component to the center of tabset with id \"1\" and at the `0`'th tab position (use value `-1` to add to the end of the tabs).\n\n**Note:** You can get the `id` of a node using the method `node.getId()`. If an `id` wasn't assigned when the node was created, then one will be created for you of the form #\\ (e.g. #1, #2 ...).\n\n\n## Layout Component Methods to Create New Tabs\n\nMethods on the Layout Component for adding tabs. The tabs are specified by their layout configuration in json.\n\nExample:\n\n```javascript\nthis.refs.layout.addTabToTabSet(\n \"NAVIGATION\",\n { // Your new tab.\n type: \"tab\",\n component: \"grid\",\n name: \"a grid\"\n }\n);\n```\nThis would add a new grid component to the tabset with id \"NAVIGATION\".\n\n\n| Layout Method | Description |\n| ------------- | -----|\n| addTabToTabSet(tabsetId, json) | adds a new tab to the tabset with the given id |\n| addTabToActiveTabSet(json) | adds a new tab to the active tabset |\n| addTabWithDragAndDrop(dragText, json, onDrop) | adds a new tab by dragging a marker to the required location; the drag takes effect immediately |\n| addTabWithDragAndDropIndirect(dragText, json, onDrop) | adds a new tab by dragging a marker to the required location; the marker is shown and must be clicked on to start dragging |\n\n## Tab Node Events\n\nYou can handle events on nodes by adding a listener. This would typically be done in the class component's `constructor()` method.\n\nExample:\n```javascript\nclass Main extends Component {\n constructor(props) {\n super(props);\n let config = this.props.node.getConfig();\n\n // save state in flexlayout node tree\n this.props.node.setEventListener(\"save\", function (p) {\n config.subject = this.subject;\n }.bind(this));\n }\n}\n```\n\n| Event | parameters | Description |\n| ------------- |:-------------:| -----|\n| resize | | called when tab is resized during layout, called before it is rendered with the new size|\n| close | | called when a tab is closed |\n| visibility | | called when the visibility of a tab changes |\n| save | | called before a tabnode is serialized to json, use to save node config by adding data to the object returned by node.getConfig()|\n\n\n## Building the Project\n\nTo compile the project just run webpack in the top level directory, this will compile and bundle flexlayout and the examples into\nthe bundles dir. Once compiled the examples can be run by opening their index.html files.\n\nTo build the npm distribution run 'npm run build', this will create the artifacts in the dist dir.\n","readmeFilename":"README.md"}