sqlite-wasm-viewer 1.0.10 → 1.0.13

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,

package/dist/index.js

@@ -16,6 +16,7 @@ var _ExplorerView = require("./views/ExplorerView/ExplorerView");
 var _dbScanner = require("./dbScanner");
 var _EditCellView = require("./views/EditCellView/EditCellView");
 var _viewerState = require("./viewerState");
+var _resizeHandler = require("./utils/resizeHandler");
 var viewer = null;
 var dbListEl = null;
 var tableViewer = null;
@@ -50,6 +51,8 @@ function showViewer() {
       hideViewer();
     };
     viewer.appendChild(closeBtn);
+
+    // Left Panel
     dbListEl = document.createElement('div');
     dbListEl.id = 'db_list';
     viewer.appendChild(dbListEl);
@@ -57,6 +60,8 @@ function showViewer() {
     // Middle Panel
     middlePanel = document.createElement('div');
     middlePanel.id = 'middle_panel';
+    var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(dbListEl, middlePanel, true, viewer);
+    viewer.appendChild(listResizeHandlerEl);
     var tableViewEl = document.createElement('div');
     tableViewEl.id = 'table_view';
     middlePanel.appendChild(tableViewEl);
@@ -67,11 +72,13 @@ function showViewer() {
     rightPanel.id = 'right_panel';
     var executeSqlView = new _ExecuteSQLView.ExecuteSQLView(rightPanel);
     var editCellView = new _EditCellView.EditCellView(viewer, rightPanel);
+    var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, viewer);
+    viewer.appendChild(rightPanelResizeHandlerEl);
     viewer.append(rightPanel);
     var worker = new Worker(new URL('./DbWorker', import.meta.url), {
       type: 'module'
     });
-    explorerView = new _ExplorerView.ExplorerView(dbListEl);
+    explorerView = new _ExplorerView.ExplorerView(dbListEl, viewer);
     var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
     var dbs = {};
     worker.onmessage = function (message) {

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/views/ExplorerView/ExplorerView.js

@@ -15,12 +15,15 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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 EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
 var ExplorerView = /*#__PURE__*/function () {
-  function ExplorerView(rootEl) {
+  function ExplorerView(rootEl, viewEl) {
     var _localStorage$getItem;
     _classCallCheck(this, ExplorerView);
     _defineProperty(this, "expandedItems", {});
     _defineProperty(this, "selectedItem", null);
+    _defineProperty(this, "showFullItemLabelTimeout", 0);
     this.dbs = [];
+    this.scheduleShowFullItemLabel = this.scheduleShowFullItemLabel.bind(this);
+    this.hideFullItemLabel = this.hideFullItemLabel.bind(this);
     var dbListHeader = document.createElement('div');
     dbListHeader.className = 'viewHeader';
     dbListHeader.innerText = 'Database List';
@@ -29,6 +32,10 @@ var ExplorerView = /*#__PURE__*/function () {
     this.containerEl.id = 'explorer_tree';
     rootEl.appendChild(this.containerEl);
     this.expandedItems = JSON.parse((_localStorage$getItem = localStorage.getItem(EXPANDED_EXPLORER_ITEMS_KEY)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
+    this.fullItemLabelEl = document.createElement('div');
+    this.fullItemLabelEl.id = 'full_label';
+    this.fullItemLabelEl.style.display = 'none';
+    viewEl.appendChild(this.fullItemLabelEl);
   }
   _createClass(ExplorerView, [{
     key: "addDatabaseItem",
@@ -57,8 +64,11 @@ var ExplorerView = /*#__PURE__*/function () {
       var _this2 = this;
       var dbRoot = document.createDocumentFragment();
       var dbItem = document.createElement('div');
-      dbItem.innerText = db.filename;
-      dbItem.className = 'db';
+      this.setupCommonItemDom(dbItem);
+      this.setupLabelDom(dbItem, db.filename);
+      dbItem.classList.add('db');
+      dbItem.addEventListener('mouseenter', this.scheduleShowFullItemLabel);
+      dbItem.addEventListener('mouseleave', this.hideFullItemLabel);
       var tablesContainer = document.createElement('div');
       var isExpanded = !(this.expandedItems[db.filename] === false);
       this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
@@ -76,15 +86,13 @@ var ExplorerView = /*#__PURE__*/function () {
       var _this3 = this;
       var expandArrow = document.createElement('div');
       expandArrow.className = 'expand';
-      expandArrow.innerText = '>';
+      expandArrow.innerHTML = '▸';
       expandArrow.style.cursor = 'pointer';
       if (isExpanded) {
         expandArrow.classList.add('expanded');
       }
       expandArrow.onclick = function () {
         _this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
-
-        // eslint-disable-next-line no-param-reassign
         tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
         expandArrow.classList.toggle('expanded');
         localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
@@ -98,7 +106,8 @@ var ExplorerView = /*#__PURE__*/function () {
         _this$selectedItem,
         _this$selectedItem2;
       var tableItem = document.createElement('div');
-      tableItem.className = 'table';
+      this.setupCommonItemDom(tableItem);
+      tableItem.classList.add('table');
       tableItem.onclick = function () {
         _this4.selectTable(tableItem, db);
       };
@@ -106,9 +115,7 @@ var ExplorerView = /*#__PURE__*/function () {
         this.selectedItem.tableElem = tableItem;
         tableItem.classList.add('selected');
       }
-      var tableItemInner = document.createElement('div');
-      tableItemInner.innerText = tableName;
-      tableItem.appendChild(tableItemInner);
+      this.setupLabelDom(tableItem, tableName);
       tablesContainer.appendChild(tableItem);
     }
   }, {
@@ -131,6 +138,55 @@ var ExplorerView = /*#__PURE__*/function () {
         });
       }
     }
+  }, {
+    key: "setupCommonItemDom",
+    value: function setupCommonItemDom(item) {
+      item.classList.add('item');
+      item.addEventListener('mouseenter', this.scheduleShowFullItemLabel);
+      item.addEventListener('mouseleave', this.hideFullItemLabel);
+    }
+  }, {
+    key: "setupLabelDom",
+    value: function setupLabelDom(item, text) {
+      var label = document.createElement('div');
+      label.className = 'label';
+      label.innerText = text;
+      item.appendChild(label);
+    }
+  }, {
+    key: "scheduleShowFullItemLabel",
+    value: function scheduleShowFullItemLabel(event) {
+      var _this5 = this;
+      var item = event.target;
+      var label = item.querySelector('.label');
+      if (label && label.offsetWidth < label.scrollWidth) {
+        clearTimeout(this.showFullItemLabelTimeout);
+        this.showFullItemLabelTimeout = window.setTimeout(function () {
+          _this5.showFullItemLabel(item);
+        }, 300);
+      }
+    }
+  }, {
+    key: "hideFullItemLabel",
+    value: function hideFullItemLabel() {
+      clearTimeout(this.showFullItemLabelTimeout);
+      this.fullItemLabelEl.style.display = 'none';
+    }
+  }, {
+    key: "showFullItemLabel",
+    value: function showFullItemLabel(item) {
+      var _item$getBoundingClie = item.getBoundingClientRect(),
+        left = _item$getBoundingClie.left,
+        top = _item$getBoundingClie.top;
+      this.fullItemLabelEl.style.display = 'block';
+      this.fullItemLabelEl.style.left = "".concat(left - 1, "px");
+      this.fullItemLabelEl.style.top = "".concat(top - 1, "px");
+      this.fullItemLabelEl.style.backgroundColor = window.getComputedStyle(item).backgroundColor;
+      var labelNode = item.querySelector('.label').childNodes[0];
+      if (labelNode.nodeType === Node.TEXT_NODE) {
+        this.fullItemLabelEl.innerText = labelNode.textContent || '';
+      }
+    }
   }]);
   return ExplorerView;
 }();

package/dist/views/ExplorerView/styles.css

@@ -1,21 +1,36 @@
 #explorer_tree {
     padding: 8px;
     padding-left: 20px;
-    overflow-x: clip;
     overflow-y: auto;
     scrollbar-gutter: stable;
 }
 
+#explorer_tree .item {
+    height: 20px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: darkgray;
+}
+
+#explorer_tree .item > .label {
+    padding: 2px 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 #explorer_tree > .db {
     position: relative;
-    text-overflow: ellipsis;
-    overflow-y: clip;
 }
 
 #explorer_tree .expand {
     position: absolute;
-    top: 0;
-    left: -15px;
+    top: 1px;
+    left: -20px;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: all .1s ease-in;
 }
 
@@ -25,15 +40,19 @@
 
 #explorer_tree .table {
     margin-left: 20px;
-    height: 20px;
     cursor: pointer;
 }
 
-#explorer_tree .table > div {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-}
-
 #explorer_tree .table.selected {
     background-color: rgb(128, 128, 128);
+}
+
+#viewer #full_label {
+    position: absolute;
+    pointer-events: none;
+    z-index: 99999;
+    border: 1px solid gray;
+    background-color: darkgray;
+    padding: 2px 4px;
+    border-radius: 2px;
 }

package/dist/views/TableView/TableView.js

@@ -123,6 +123,12 @@ var TableView = /*#__PURE__*/function () {
       };
       revertBtn.setAttribute('disabled', '');
       this.viewHeader.appendChild(revertBtn);
+      var dropTableBtn = document.createElement('button');
+      dropTableBtn.innerText = 'Delete table';
+      dropTableBtn.onclick = function () {
+        _this2.deleteTable();
+      };
+      this.viewHeader.appendChild(dropTableBtn);
       this.rootElement.appendChild(this.viewHeader);
       this.container = document.createElement('div');
       this.container.id = 'table_container';
@@ -158,23 +164,24 @@ var TableView = /*#__PURE__*/function () {
         columnHeader.innerHTML = column;
         var filterFieldCell = document.createElement('th');
         filterFieldCell.className = 'columnFilterCell';
-        var filterField = document.createElement('input');
+        var filterInput = document.createElement('input');
         if (_this3.model.fitlers[column]) {
-          filterField.value = _this3.model.fitlers[column];
+          filterInput.value = _this3.model.fitlers[column];
         }
-        filterField.onkeydown = function (event) {
+        filterInput.onkeydown = function (event) {
           if (event.key === 'Escape') {
-            filterField.value = '';
+            filterInput.value = '';
             _this3.model.fitlers[column] = '';
             _this3.scheduleUpdate();
           }
         };
-        filterField.oninput = function () {
-          _this3.model.fitlers[column] = filterField.value;
+        filterInput.oninput = function () {
+          _this3.model.fitlers[column] = filterInput.value;
           _this3.scheduleUpdate();
         };
-        filterField.placeholder = 'Filter';
-        filterFieldCell.appendChild(filterField);
+        filterInput.onmouseover = function () {};
+        filterInput.placeholder = 'Filter';
+        filterFieldCell.appendChild(filterInput);
         _this3.headerRow.appendChild(columnHeader);
         columnHeader.appendChild(filterFieldCell);
       });
@@ -238,6 +245,26 @@ var TableView = /*#__PURE__*/function () {
       this.requestRows(true);
       _viewerState.ViewerState.instance.setHasChanges(false);
     }
+  }, {
+    key: "deleteTable",
+    value: function deleteTable() {
+      if (!_viewerState.ViewerState.instance.selectedTable) {
+        return;
+      }
+      if (!_viewerState.ViewerState.instance.hasChanges) {
+        var _this$queryRunner;
+        (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+          sql: 'SAVEPOINT "RESTOREPOINT"',
+          parameters: []
+        });
+      }
+      var sql = "DROP TABLE \"".concat(_viewerState.ViewerState.instance.selectedTable.tableName, "\";");
+      this.queryRunner.runQuery({
+        sql: sql,
+        parameters: []
+      });
+      _viewerState.ViewerState.instance.setHasChanges(true);
+    }
   }, {
     key: "scheduleUpdate",
     value: function scheduleUpdate() {

package/dist/views/TableView/styles.css

@@ -54,6 +54,10 @@
     padding-top: 5px;
 }
 
+#table_container .columnFilterCell input {
+    width: calc(100% - 8px);
+}
+
 #table_container td, #table_container .columnHeaderCell {
     border: 1px solid lightgray;
 }
@@ -66,14 +70,12 @@
 #table_container td div {
     height: 40px;
     box-sizing: border-box;
-    display: -webkit-box;
     padding: 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    line-height: 1.2em;
+    font-size: 15px;
+    line-height: 1.1em;
 }
 
 #table_container .nullValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
   "main": "dist/index.js",
   "scripts": {
@@ -52,4 +52,4 @@
   "peerDependencies": {
     "@sqlite.org/sqlite-wasm": "^3.x.x"
   }
-}
+}