Home Reference Source

cables_dev/cables_ui/src/ui/components/tabs/tab_spreadsheet.js

  1. import { Port, utils } from "cables";
  2. import { ele, Events, Logger } from "cables-shared-client";
  3. import TabPanel from "../../elements/tabpanel/tabpanel.js";
  4. import Tab from "../../elements/tabpanel/tab.js";
  5. import { gui } from "../../gui.js";
  6. import { editorSession } from "../../elements/tabpanel/editor_session.js";
  7. import undo from "../../utils/undo.js";
  9. /**
  10.  * @typedef SpreadSheetOptions
  11.  * @property {string} [title]
  12.  * @property {number} [numColumns]
  13.  * @property {function} [onchange]
  14.  * @property {string[]} [colNames]
  15.  * @property {[string[]]} [cells]
  16.  */
  17. export default class SpreadSheetTab extends Events
  18. {
  19.     static TABSESSION_NAME = "spreadsheet";
  21.     #log = new Logger("SpreadSheetTab");
  22.     #cellMate = null;
  23.     #port = null;
  24.     #options = null;
  25.     #tab = null;
  27.     /** @type {TabPanel} */
  28.     #tabs = null;
  29.     #currentId;
  31.     /**
  32.      * @param {TabPanel} tabs
  33.      * @param {Port} port
  34.      * @param {SpreadSheetOptions} [options]
  35.      */
  36.     constructor(tabs, port, options)
  37.     {
  38.         super();
  39.         if (!port)
  40.         {
  41.             console.log("spreadsheettab missing args");
  42.             return;
  43.         }
  45.         this.#tabs = tabs;
  46.         this.#currentId = port.op.id + "_" + port.name;
  48.         options = options || {};
  50.         if (options.colNames && !options.numColumns)options.numColumns = options.colNames.length;
  52.         this.#port = port;
  53.         this.#options = options;
  55.         this.#tab = new Tab(options.title || port.op.getTitle(), {
  56.             "icon": "spreadsheet",
  57.             "infotext": "tab_spreadsheet",
  58.             "padding": true,
  59.             "singleton": false });
  61.         this.#tabs.addTab(this.#tab, true);
  63.         this.#tab.on("close", () =>
  64.         {
  65.             editorSession.remove(SpreadSheetTab.TABSESSION_NAME, this.#currentId);
  66.             this.#cellMate.dispose();
  67.         });
  69.         this.#tab.on(Tab.EVENT_RESIZE, () =>
  70.         {
  71.             this.#cellMate.resize();
  72.         });
  74.         this.#tab.on(Tab.EVENT_ACTIVATE, () =>
  75.         {
  76.             this.#cellMate.resize();
  77.         });
  79.         this.#tab.addButton("export csv", () =>
  80.         {
  81.             this.#cellMate.download("cables.csv", this.#cellMate.toCsv());
  82.         });
  83.         this.#tab.addButton("delete line", () =>
  84.         {
  85.             this.#cellMate.deleteCurrentLine();
  86.         });
  87.         this.#tab.addButton("insert line", () =>
  88.         {
  89.             this.#cellMate.insertLineAtCursor();
  90.         });
  92.         editorSession.rememberOpenEditor(SpreadSheetTab.TABSESSION_NAME, this.#currentId, {
  93.             "portname": port.name,
  94.             "opid": port.op.id,
  95.         }, true);
  96.         this.show();
  97.         gui.maintabPanel.show(true);
  98.     }
  100.     show()
  101.     {
  103.         let html = "<div></div>";
  104.         this.#tab.html(html);
  106.         this.#cellMate = new CellMate(this.#tab.contentEle,
  107.             {
  108.                 "undo": undo,
  109.                 "onChange": this.onChange.bind(this)
  110.             });
  111.         this.#cellMate.fromObj(this.#port.get());
  112.     }
  114.     onChange()
  115.     {
  116.         console.log(this.#cellMate.toObj());
  117.         this.#port.setRef(this.#cellMate.toObj());
  118.     }
  119. }
  121. editorSession.addListener(SpreadSheetTab.TABSESSION_NAME, (id, data) =>
  122. {
  123.     const op = gui.corePatch().getOpById(data.opid);
  124.     if (!op) return console.log("no spread op found..");
  125.     new SpreadSheetTab(gui.mainTabs, op.getPortByName(data.portname));
  126. });