sqlite-wasm-viewer 1.0.10 → 1.1.1

package/dist/DbViewerWorker.js

@@ -60,7 +60,7 @@ var DbViewerWorker = /*#__PURE__*/function () {
         case 'readSchema':
           {
             var _path = message.data.path;
-            this.dbsByPath[_path] = new this.sqlite.oo1.OpfsDb(_path, 'c');
+            this.dbsByPath[_path] = new this.sqlite.oo1.OpfsDb(_path, 'w');
             var sql = "SELECT name, sql FROM sqlite_master WHERE type='table' ORDER BY name";
             var result = this.dbsByPath[_path].exec({
               sql: sql,
@@ -88,7 +88,6 @@ var DbViewerWorker = /*#__PURE__*/function () {
                 rawStatement.bind(parameters);
               }
               while (rawStatement.step()) {
-                // Kysely expects the results to be in the object mode
                 var row = rawStatement.get({});
                 resultRows.push(row);
               }

package/dist/DbWorker.js

@@ -3,5 +3,15 @@
 var _DbViewerWorker = require("./DbViewerWorker");
 var dbWorker = new _DbViewerWorker.DbViewerWorker();
 onmessage = function onmessage(message) {
-  dbWorker.post(message);
+  try {
+    dbWorker.post(message);
+  } catch (e) {
+    if (message.data.type === 'query') {
+      postMessage({
+        type: 'error',
+        sql: message.data.query.sql,
+        errorMsg: e.toString()
+      });
+    }
+  }
 };

package/dist/ListVirtualizer.js

@@ -84,6 +84,13 @@ var ListVirtualizer = /*#__PURE__*/function () {
       first = first < 0 ? 0 : first;
       this.renderChunk(first);
     }
+  }, {
+    key: "update",
+    value: function update() {
+      var first = Math.ceil(this.scrollTop / this.itemHeight - this.screenItemsLen);
+      first = first < 0 ? 0 : first;
+      this.renderChunk(first);
+    }
   }]);
   return ListVirtualizer;
 }();

package/dist/QueryRunner.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QueryRunner = void 0;
-var _viewerState = require("./viewerState");
+exports.queryRunner = exports.QueryRunner = void 0;
+var Bus = _interopRequireWildcard(require("./bus"));
+var _state = require("./state");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -12,41 +15,35 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var QueryRunner = /*#__PURE__*/function () {
-  function QueryRunner(db) {
+  function QueryRunner() {
+    var _this = this;
     _classCallCheck(this, QueryRunner);
-    this.db = db;
-    this.listeners = [];
+    Bus.listen('db-connector-ready', function (db) {
+      _this.db = db;
+      Bus.emit('query-runner-ready', true);
+    });
   }
   _createClass(QueryRunner, [{
     key: "runQuery",
     value: function runQuery(query, label) {
-      var currentDatabase = _viewerState.ViewerState.instance.selectedTable;
-      if (!currentDatabase) {
+      if (!this.db) {
+        return;
+      }
+      var currentTable = (0, _state.selectedTable)();
+      if (!currentTable) {
         return;
       }
       this.db.post({
         type: 'query',
         query: query,
-        databasePath: currentDatabase.databasePath,
+        databasePath: currentTable.databasePath,
         label: label
       });
-      this.listeners.forEach(function (listener) {
-        listener(query);
-      });
-    }
-  }, {
-    key: "addListener",
-    value: function addListener(listener) {
-      var _this = this;
-      if (this.listeners.indexOf(listener) !== -1) {
-        throw new Error('Listener is already added');
-      }
-      this.listeners.push(listener);
-      return function () {
-        _this.listeners.splice(_this.listeners.indexOf(listener), 1);
-      };
+      Bus.emit('query-run', query);
     }
   }]);
   return QueryRunner;
 }();
-exports.QueryRunner = QueryRunner;
+exports.QueryRunner = QueryRunner;
+var queryRunner = new QueryRunner();
+exports.queryRunner = queryRunner;

package/dist/bus.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emit = emit;
+exports.listen = listen;
+exports.remove = remove;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var _listeners = {};
+function listen(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    listeners = _listeners[type] = [];
+  }
+  listeners.push(listener);
+}
+function remove(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var idx = listeners.indexOf(listener);
+  if (idx >= 0) {
+    listeners.splice(idx, 1);
+  }
+}
+function emit(type, event) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var _iterator = _createForOfIteratorHelper(listeners),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var listener = _step.value;
+      listener(event);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}

package/dist/dbWorkerConnector.js

@@ -0,0 +1,63 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.connectToWorker = connectToWorker;
+var _dbScanner = require("./dbScanner");
+var Bus = _interopRequireWildcard(require("./bus"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function connectToWorker(config) {
+  var worker = new Worker(new URL('./DbWorker', import.meta.url), {
+    type: 'module'
+  });
+  var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
+  var dbs = {};
+  worker.onmessage = function (message) {
+    if (message.data.type === 'onReady') {
+      var db = {
+        post: function post(mess) {
+          worker.postMessage(mess);
+        },
+        on: function on(mess) {
+          var _worker$onmessage;
+          (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, mess);
+        }
+      };
+      Bus.emit('db-connector-ready', db);
+      collectDbFilesPromise.then(function (dbFiles) {
+        dbFiles.forEach(function (dbFile) {
+          var dbFilepath = dbFile;
+          var dbName = dbFile;
+          dbs[dbFilepath] = {
+            filename: dbName,
+            tables: []
+          };
+          worker.postMessage({
+            type: 'readSchema',
+            path: dbFile
+          });
+        });
+      });
+    } else if (message.data.type === 'onSchema') {
+      var tables = message.data.schema.map(function (tableSchema) {
+        return tableSchema[0];
+      });
+      dbs[message.data.dbName].tables = tables;
+      Bus.emit('db-found', dbs[message.data.dbName]);
+    } else if (message.data.type === 'onQuery') {
+      Bus.emit('query-results', message.data);
+    } else if (message.data.type === 'error') {
+      Bus.emit('query-run', {
+        sql: message.data.sql,
+        errorMsg: message.data.errorMsg,
+        parameters: []
+      });
+    }
+  };
+  worker.postMessage({
+    type: 'init'
+  });
+}

package/dist/index.js

@@ -8,21 +8,8 @@ exports.hideViewer = hideViewer;
 exports.setConfig = setConfig;
 exports.showViewer = showViewer;
 require("./styles.css");
-var _TableView = require("./views/TableView/TableView");
-var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
-var _QueryRunner = require("./QueryRunner");
-var _SqlLogView = require("./views/SqlLogView/SqlLogView");
-var _ExplorerView = require("./views/ExplorerView/ExplorerView");
-var _dbScanner = require("./dbScanner");
-var _EditCellView = require("./views/EditCellView/EditCellView");
-var _viewerState = require("./viewerState");
-var viewer = null;
-var dbListEl = null;
-var tableViewer = null;
-var middlePanel = null;
-var rightPanel = null;
-var explorerView = null;
-var queryRunner = null;
+var _viewer2 = require("./viewer");
+var _viewer;
 var defaultSqliteExtension = ['db', 'sqlite'];
 function defaultIsSqliteDatabase(filename) {
   return defaultSqliteExtension.some(function (ext) {
@@ -39,97 +26,15 @@ function setConfig(userConfig) {
   Object.freeze(config);
 }
 function showViewer() {
-  if (!viewer) {
-    viewer = document.createElement('div');
-    viewer.id = 'viewer';
-    (0, _viewerState.initState)(viewer);
-    var closeBtn = document.createElement('div');
-    closeBtn.id = 'close_btn';
-    closeBtn.innerText = 'Close';
-    closeBtn.onclick = function () {
+  if (!_viewer) {
+    _viewer = new _viewer2.Viewer(config, function () {
       hideViewer();
-    };
-    viewer.appendChild(closeBtn);
-    dbListEl = document.createElement('div');
-    dbListEl.id = 'db_list';
-    viewer.appendChild(dbListEl);
-
-    // Middle Panel
-    middlePanel = document.createElement('div');
-    middlePanel.id = 'middle_panel';
-    var tableViewEl = document.createElement('div');
-    tableViewEl.id = 'table_view';
-    middlePanel.appendChild(tableViewEl);
-    viewer.append(middlePanel);
-
-    // Right Panel
-    rightPanel = document.createElement('div');
-    rightPanel.id = 'right_panel';
-    var executeSqlView = new _ExecuteSQLView.ExecuteSQLView(rightPanel);
-    var editCellView = new _EditCellView.EditCellView(viewer, rightPanel);
-    viewer.append(rightPanel);
-    var worker = new Worker(new URL('./DbWorker', import.meta.url), {
-      type: 'module'
-    });
-    explorerView = new _ExplorerView.ExplorerView(dbListEl);
-    var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
-    var dbs = {};
-    worker.onmessage = function (message) {
-      if (message.data.type === 'onReady') {
-        collectDbFilesPromise.then(function (dbFiles) {
-          dbFiles.forEach(function (dbFile) {
-            var dbFilepath = dbFile;
-            var dbName = dbFile;
-            dbs[dbFilepath] = {
-              filename: dbName,
-              tables: []
-            };
-            worker.postMessage({
-              type: 'readSchema',
-              path: dbFile
-            });
-          });
-        });
-      } else if (message.data.type === 'onSchema') {
-        var _explorerView;
-        var tables = message.data.schema.map(function (tableSchema) {
-          return tableSchema[0];
-        });
-        dbs[message.data.dbName].tables = tables;
-        (_explorerView = explorerView) === null || _explorerView === void 0 ? void 0 : _explorerView.addDatabaseItem(dbs[message.data.dbName]);
-      } else if (message.data.type === 'onQuery') {
-        if (message.data.label === 'tableViewColumns') {
-          var _tableViewer;
-          (_tableViewer = tableViewer) === null || _tableViewer === void 0 ? void 0 : _tableViewer.setTableColumns(message.data.result.resultRows || []);
-        }
-        if (message.data.label === 'tableView') {
-          var _tableViewer2;
-          (_tableViewer2 = tableViewer) === null || _tableViewer2 === void 0 ? void 0 : _tableViewer2.setTableResults(message.data.result.resultRows || []);
-        }
-      }
-    };
-    var db = {
-      post: function post(message) {
-        worker.postMessage(message);
-      },
-      on: function on(message) {
-        var _worker$onmessage;
-        (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, message);
-      }
-    };
-    queryRunner = new _QueryRunner.QueryRunner(db);
-    (0, _SqlLogView.initSqlLogView)(rightPanel, queryRunner);
-    tableViewer = new _TableView.TableView(viewer, tableViewEl, queryRunner);
-    executeSqlView.setDb(queryRunner);
-    editCellView.setDb(queryRunner);
-    worker.postMessage({
-      type: 'init'
     });
   }
-  document.body.appendChild(viewer);
+  document.body.appendChild(_viewer.element);
 }
 function hideViewer() {
-  if (viewer) {
-    document.body.removeChild(viewer);
+  if (_viewer) {
+    document.body.removeChild(_viewer.element);
   }
 }

package/dist/state.js

@@ -0,0 +1,37 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDirty = isDirty;
+exports.selectCell = selectCell;
+exports.selectTable = selectTable;
+exports.selectedTable = selectedTable;
+exports.setDirty = setDirty;
+var Bus = _interopRequireWildcard(require("./bus"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _state = {
+  selectedCell: null,
+  selectedTable: null,
+  dirty: false
+};
+function selectedTable() {
+  return _state.selectedTable;
+}
+function isDirty() {
+  return _state.dirty;
+}
+function selectCell(cell) {
+  _state.selectedCell = cell;
+  Bus.emit('cell-selected', cell);
+}
+function selectTable(table) {
+  _state.selectedTable = table;
+  Bus.emit('table-selected', table);
+}
+function setDirty(dirty) {
+  _state.dirty = dirty;
+  Bus.emit('db-dirtied', dirty);
+}

package/dist/styles.css

@@ -8,7 +8,6 @@
     display: flex;
     padding: 10px;
     padding-top: 20px;
-    gap: 8px;
 }
 
 #viewer * {
@@ -18,6 +17,7 @@
 #viewer .viewHeader {
     max-height: 20px;
     flex-basis: 20px;
+    flex-shrink: 0;
     line-height: 1.1rem;
     padding: 8px;
     display: flex;
@@ -34,7 +34,10 @@
 }
 
 #viewer #db_list {
-    width: 200px;
+    width: 300px;
+    min-width: 180px;
+    max-width: 750px;
+    flex: 0 0 auto;
     padding: 5px;
     background-color: darkgray;
     display: flex;
@@ -56,9 +59,12 @@
 }
 
 #viewer #right_panel {
+    width: 300px;
+    min-width: 180px;
+    max-width: 500px;
+    flex: 0 0 auto;
     padding: 5px;
     background-color: darkgray;
-    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 5px;
@@ -67,3 +73,21 @@
 #viewer #right_panel > div {
     height: 33.33%;
 }
+
+#viewer .resizeDragHandler {
+    width: 8px;
+    flex-shrink: 0;
+    cursor: col-resize;
+}
+
+#viewer .resizeDragHandler:hover::after {
+    border: 2px solid gray;
+    border-radius: 2px;
+    content: '';
+    display: block;
+    height: 80%;
+    margin: 0 auto;
+    position: relative;
+    top: 10%;
+    width: 0;
+}

package/dist/utils/resizeHandler.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createResizeHandler = createResizeHandler;
+function createResizeHandler(leftEl, rightEl, resizeLeft, containerEl) {
+  var isDragging = false;
+  var initialWidth = 0;
+  var initialXPos = 0;
+  var lastWidth;
+  var controlledEl = resizeLeft ? leftEl : rightEl;
+  var storageWidthKey = "sqlite-wasm-viewer_".concat(controlledEl.id);
+  var resizeHandlerEl = document.createElement('div');
+  resizeHandlerEl.className = 'resizeDragHandler';
+  var storedWidthStr = localStorage.getItem(storageWidthKey);
+  if (storedWidthStr) {
+    controlledEl.style.width = "".concat(+storedWidthStr, "px");
+  }
+  resizeHandlerEl.addEventListener('dblclick', function () {
+    controlledEl.style.width = '';
+    localStorage.removeItem(storageWidthKey);
+  });
+  resizeHandlerEl.addEventListener('mousedown', function (event) {
+    isDragging = true;
+    containerEl.style.userSelect = 'none';
+    initialXPos = event.x;
+    initialWidth = controlledEl.offsetWidth;
+    lastWidth = undefined;
+  });
+  document.addEventListener('mousemove', function (event) {
+    if (isDragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      var newWidth = resizeLeft ? initialWidth - initialXPos + event.clientX : initialWidth + initialXPos - event.clientX;
+      lastWidth = Math.max(newWidth, 0);
+      controlledEl.style.width = "".concat(lastWidth, "px");
+    }
+  });
+  document.addEventListener('mouseup', function () {
+    isDragging = false;
+    containerEl.style.userSelect = 'auto';
+    if (lastWidth) {
+      localStorage.setItem(storageWidthKey, lastWidth.toString());
+    }
+  });
+  return resizeHandlerEl;
+}

package/dist/viewer.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Viewer = void 0;
+var _dbWorkerConnector = require("./dbWorkerConnector");
+var _resizeHandler = require("./utils/resizeHandler");
+var _EditCellView = require("./views/EditCellView/EditCellView");
+var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
+var _ExplorerView = require("./views/ExplorerView/ExplorerView");
+var _SqlLogView = require("./views/SqlLogView/SqlLogView");
+var _TableView = require("./views/TableView/TableView");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var Viewer = /*#__PURE__*/function () {
+  function Viewer(config, onClickClose) {
+    _classCallCheck(this, Viewer);
+    this.onClickClose = onClickClose;
+    this.createElements();
+    (0, _dbWorkerConnector.connectToWorker)(config);
+  }
+  _createClass(Viewer, [{
+    key: "createElements",
+    value: function createElements() {
+      var _this = this;
+      this._container = document.createElement('div');
+      this._container.id = 'viewer';
+      var closeBtn = document.createElement('div');
+      closeBtn.id = 'close_btn';
+      closeBtn.innerText = 'Close';
+      closeBtn.onclick = function () {
+        _this.onClickClose();
+      };
+      this._container.appendChild(closeBtn);
+
+      // Left Panel
+      var leftPanel = document.createElement('div');
+      leftPanel.id = 'db_list';
+      (0, _ExplorerView.createExplorerView)(leftPanel, this._container);
+      this._container.appendChild(leftPanel);
+
+      // Middle Panel
+      var middlePanel = document.createElement('div');
+      middlePanel.id = 'middle_panel';
+      var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(leftPanel, middlePanel, true, this._container);
+      this._container.appendChild(listResizeHandlerEl);
+      var tableViewEl = document.createElement('div');
+      tableViewEl.id = 'table_view';
+      middlePanel.appendChild(tableViewEl);
+      (0, _TableView.createTableView)(tableViewEl);
+      this._container.append(middlePanel);
+
+      // Right Panel
+      var rightPanel = document.createElement('div');
+      rightPanel.id = 'right_panel';
+      var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, this._container);
+      this._container.appendChild(rightPanelResizeHandlerEl);
+      (0, _EditCellView.createEditCellView)(rightPanel);
+      (0, _ExecuteSQLView.createSQLExecutorView)(rightPanel);
+      (0, _SqlLogView.createSqlLogView)(rightPanel);
+      this._container.append(rightPanel);
+    }
+  }, {
+    key: "element",
+    get: function get() {
+      return this._container;
+    }
+  }]);
+  return Viewer;
+}();
+exports.Viewer = Viewer;

package/dist/views/EditCellView/EditCellView.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditCellView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createEditCellView = createEditCellView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _QueryRunner = require("../../QueryRunner");
+var _state = require("../../state");
 require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -13,14 +18,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var EditCellView = /*#__PURE__*/function () {
-  function EditCellView(viewerElem, rootEl) {
+  function EditCellView(rootEl) {
     var _this = this;
     _classCallCheck(this, EditCellView);
-    this.viewerElem = viewerElem;
     this.rootEl = rootEl;
     this.buildDom();
-    viewerElem.addEventListener('cellSelected', function (event) {
-      var cell = event.detail;
+    Bus.listen('cell-selected', function (cell) {
       _this.currentCell = cell;
       _this.textArea.value = cell.value;
       _this.textArea.select();
@@ -48,27 +51,30 @@ var EditCellView = /*#__PURE__*/function () {
     key: "handleApplyEdit",
     value: function handleApplyEdit() {
       if (this.textArea.value) {
-        var _this$queryRunner2, _this$currentCell, _this$currentCell2, _this$currentCell3;
-        if (!_viewerState.ViewerState.instance.hasChanges) {
-          var _this$queryRunner;
-          (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        var _this$currentCell, _this$currentCell2, _this$currentCell3;
+        if (!(0, _state.isDirty)()) {
+          _QueryRunner.queryRunner.runQuery({
             sql: 'SAVEPOINT "RESTOREPOINT"',
             parameters: []
           });
         }
-        (_this$queryRunner2 = this.queryRunner) === null || _this$queryRunner2 === void 0 ? void 0 : _this$queryRunner2.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: "UPDATE ".concat((_this$currentCell = this.currentCell) === null || _this$currentCell === void 0 ? void 0 : _this$currentCell.tableName, " SET \"").concat((_this$currentCell2 = this.currentCell) === null || _this$currentCell2 === void 0 ? void 0 : _this$currentCell2.columnName, "\"=? WHERE \"_rowid_\"='").concat((_this$currentCell3 = this.currentCell) === null || _this$currentCell3 === void 0 ? void 0 : _this$currentCell3.cellRowId, "'"),
           parameters: [this.textArea.value]
         });
-        _viewerState.ViewerState.instance.setHasChanges(true);
+        if (this.currentCell) {
+          Bus.emit('cell-edited', {
+            cell: this.currentCell,
+            value: this.textArea.value
+          });
+        }
+        (0, _state.setDirty)(true);
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return EditCellView;
 }();
-exports.EditCellView = EditCellView;
+exports.EditCellView = EditCellView;
+function createEditCellView(rootEl) {
+  return new EditCellView(rootEl);
+}