gridjs-spreadsheet 25.3.0 → 25.5.0

package/example/src/main/resources/application.properties

@@ -2,16 +2,12 @@ spring.application.name=gridjsdemo
 spring.servlet.multipart.enabled=true
 spring.servlet.multipart.max-file-size=10MB
 spring.servlet.multipart.max-request-size=10MB
-#for local test
 #testconfig.ListDir=D:\\codebase\\customerissue\\wb\\tempfromdownload\\
-#testconfig.FileName=excelColumnWordBreak.xlsm
-#testconfig.CachePath=F:\\storage\\gridjs_temp
-#testconfig.UploadPath=F:\\storage\\upload
-#testconfig.AsposeLicensePath=F:\\aspose.lic
-#for docker linux
+#for linux
 testconfig.ListDir=/app/wb
-testconfig.FileName=controls.xlsx
+testconfig.FileName=chart.xlsx
 testconfig.CachePath=/app/grid_cache
 testconfig.UploadPath=/app/upload
 testconfig.AsposeLicensePath=/app/license
+ 
 

package/example/src/main/resources/templates/fileFromUpload.html

@@ -5,24 +5,23 @@
     <meta name="viewport" content="width=device-width" />
     <title>gridjs-web-demo</title>
 
-<style>
-::-webkit-scrollbar, ::-webkit-scrollbar-button {
-	width: 8px;
-	height: 8px;
-}
-
-::-webkit-scrollbar-track {
-	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-	border-radius: 10px;
-	background-color: #FFF;
-}
+    <style>
+        ::-webkit-scrollbar, ::-webkit-scrollbar-button {
+            width: 8px;
+            height: 8px;
+        }
 
-::-webkit-scrollbar-thumb {
-	border-radius: 10px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-	background-color: #AAA;
-}
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+            border-radius: 10px;
+            background-color: #FFF;
+        }
 
+        ::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+            background-color: #AAA;
+        }
 html, body {
 	margin: 0;
 	padding: 0;
@@ -43,8 +42,8 @@ html, body {
 	height: 100%;
 	object-fit: contain; /* 对于图像或视频很有用 */
 }
-</style>
-<!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
+    </style>
+    <!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
     <link rel="stylesheet" href="/xspread/bootstrap.min.22.5.5.2.css?v=20220315" />
     <script src="/xspread/jquery-2.1.1.js"></script>
     <link rel="stylesheet" href="/xspread/jquery-ui.min.css" />
@@ -165,7 +164,7 @@ html, body {
             const imageuploadurl1 = "/GridJs2/AddImage";
             const imageuploadurl2 = "/GridJs2/AddImageByURL";
             const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
-            const lazyLoadingUrl = "/GridJs2/LazyLoading";
+            const lazyLoadingUrl = "/GridJs2/LazyLoadingStreamJson";
             xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
                 console.log(cdata);
                 console.log(xs.validate());

package/example/src/main/resources/templates/index.html

@@ -52,7 +52,7 @@ html, body {
     <!--    <script src="vconsole.min.js"></script> -->
     <!--for local reference-->
     <!--
-  <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
+     <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
      <script src="/xspread/xspreadsheet.js?v=20230525"></script>
      -->
 
@@ -165,7 +165,7 @@ html, body {
             const imageuploadurl1 = "/GridJs2/AddImage";
             const imageuploadurl2 = "/GridJs2/AddImageByURL";
             const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
-            const lazyLoadingUrl = "/GridJs2/LazyLoading";
+            const lazyLoadingUrl = "/GridJs2/LazyLoadingStreamJson";
             xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
                 console.log(cdata);
                 console.log(xs.validate());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "25.3.0",
+  "version": "25.5.0",
   "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/readme.md

@@ -163,14 +163,42 @@ const s = new Spreadsheet("#gridjs-demo")
 
 ## Bind events
 ```javascript
-//single selection
+// single selection
 xs.on('cell-selected', (cell, ri, ci) => {});
-//range selection
+// range selection
 xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
-//shape/image selection
+// shape/image selection
 xs.on('object-selected', (obj) => {  console.log('obj id:', obj.id, ', type: ', obj.type); })
 // edited on cell
 xs.on('cell-edited', (text, ri, ci) => {});
+// cells updated
+xs.on('cells-updated', (name, cells) => {
+    console.log('cells updated for sheet name:', name);
+    cells.forEach((acell, index, array) => {
+        console.log('acell got updated:', acell);
+    })
+})
+// cells deleted
+xs.on('cells-deleted', (range) => {
+    console.log('cells deleted :', range);
+})
+// rows deleted
+xs.on('rows-deleted', (ri, n) => {
+    console.log('rows-deleted :', ri, ",size", n);
+})
+// columns deleted
+xs.on('columns-deleted', (ci, n) => {
+    console.log('columns-deleted :', ci, ",size", n);
+})
+// rows inserted
+xs.on('rows-inserted', (ri, n) => {
+    console.log('rows-inserted :', ri, ",size", n);
+})
+// columns inserted
+xs.on('columns-inserted', (ci, n) => {
+    console.log('columns-inserted :', ci, ",size", n);
+})
+
 ```
 
 ## update cell-text
@@ -196,6 +224,7 @@ xs.cellStyle(ri, ci);
   - Paint format
   - Clear format
   - Format
+  - Number Format
   - Font/Font size/ bold/italic/Underline/Strike
   - Highlight
   - Shape/Image resize/rotate/position ajustment
@@ -226,6 +255,7 @@ xs.cellStyle(ri, ci);
   - Insert/Delete form controls
   - Insert/Delete common shapes for autoshape
   - Support display two colors gradient in fill effects 
+  - Mobile compatibility
 
 
 ## Github-Demos
@@ -283,12 +313,31 @@ v25.1:
 
 - support copy/paste from MS-Excel
 
+v25.2: 
+
+- support copy/paste from MS-Excel
+- enhancement for automatic operations for user’s convenience, such as extending blank row/column, page scrolling, …
+
+v25.3: 
+
+- support more shotcut keys 
+- support pasting the content copied from excel to multiple target areas
+
+v25.4: 
+
+- support show statistics information in the lower right corner when cells are selected
+
+v25.5: 
+
+- add support for Polish menus.
+- support APIs for insert/delete rows/columns
+
 ## License
 
 MIT
 
 ## Support
 
-You can ask any question or request features using the [Forum](https://forum.aspose.com/c/cells).
+You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).
 
 [Product Page](https://products.aspose.com/cells) | [Product Documentation](https://docs.aspose.com/cells/net/aspose-cells-gridjs/) | [Blog](https://blog.aspose.com/category/cells/) |[API Reference](https://reference.aspose.com/cells/net/aspose.cells.gridjs/) | [Source Code Samples](https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs) | [Free Support](https://forum.aspose.com/c/cells)  

package/xspreadsheet.css

@@ -145,14 +145,14 @@ body {
   height: 60px;
   margin: 10px;
   background-repeat: no-repeat;
-  background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
+  background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
 }
 .x-spreadsheet-banner-icon-s {
   width: 30px;
   height: 30px;
   margin: 5px;
   background-repeat: no-repeat;
-  background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
+  background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
 }
 .x-spreadsheet-banner-filename {
   width: max-content;
@@ -656,6 +656,8 @@ body {
 .x-spreadsheet-bottombar {
   position: relative;
   border-top: 1px solid #e0e2e4;
+  display: flex;
+  justify-content: space-between;
 }
 .x-spreadsheet-bottombar .x-spreadsheet-menu > li {
   line-height: 40px;
@@ -665,6 +667,24 @@ body {
   vertical-align: middle;
   border-right: 1px solid #e8eaed;
 }
+.x-spreadsheet-bottombar .x-spreadsheet-stats {
+  border-left: 1px solid #e0e2e4;
+  padding: 0 10px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  color: #666;
+  font-size: 12px;
+  overflow: hidden;
+}
+.x-spreadsheet-bottombar .x-spreadsheet-stat-item {
+  margin-right: 12px;
+  white-space: nowrap;
+}
+.x-spreadsheet-bottombar [class^="x-spreadsheet-stat-value-"] {
+  font-weight: bold;
+  color: #333;
+}
 .x-spreadsheet-menu {
   list-style: none;
   margin: 0;
@@ -1274,7 +1294,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(2922578eabb1a88d1974da56c65189ba.svg);
+  background-image: url(a3b683289420fd8ec937908397907279.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -1835,6 +1855,34 @@ input[type=number]::-webkit-outer-spin-button {
   border-top: none;
   flex: 1;
 }
+.x-spreadsheet-selector-dropdown-button {
+  position: absolute;
+  width: 24px;
+  height: 18px;
+  background-color: rgba(224, 224, 224, 0.32);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s;
+  z-index: 1000;
+}
+.x-spreadsheet-hover-highlight {
+  background-color: rgba(75, 137, 255, 0.1);
+  position: absolute;
+}
+.x-spreadsheet-selector-dropdown-button:hover {
+  background-color: #d5d5d5;
+}
+.x-spreadsheet-selector-dropdown-button::after {
+  content: '';
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid #777;
+}
 .x-spreadsheet-bar-label {
   flex: 0 0 auto;
   display: inline-block;