gridjs-spreadsheet 26.5.2 → 26.6.0

package/example/pom.xml

@@ -17,7 +17,7 @@
 	</repositories>
 	<groupId>com.aspose.gridjs</groupId>
 	<artifactId>gridjsdemo</artifactId>
-	<version>26.5</version>
+	<version>26.6</version>
 	<name>gridjsdemo</name>
 	<description>GridJs Demo project for Spring Boot</description>
 	<properties>

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

@@ -72,10 +72,7 @@ html, body {
 
     <script>
       
-        function vtrace() {
-            let stack = (new Error()).stack
-            console.log(stack);
-        }
+ 
 
        
         
@@ -165,7 +162,8 @@ html, body {
             const imageuploadurl2 = "/GridJs2/AddImageByURL";
             const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
             const lazyLoadingUrl = "/GridJs2/LazyLoadingStreamJson";
-            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
+			const activeSheetName = jsondata.actname;
+            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets,activeSheetName).change((cdata) => {
                 console.log(cdata);
                 console.log(xs.validate());
             }
@@ -218,80 +216,21 @@ html, body {
             xs.setLazyLoadingUrl(lazyLoadingUrl);
             xs.setOpenFileUrl("/gridjsdemo/list");
 
-            let activeSheetName = jsondata.actname;
-
-            if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
-                xs.setActiveSheetByName(activeSheetName).setActiveCell(jsondata.actrow, jsondata.actcol);
 
+            if (xs.getActiveSheetName() == activeSheetName) {
+                xs.setActiveCell(jsondata.actrow, jsondata.actcol);
             } else {
-                //some times if the active sheet is invisible or chartworksheet ,just use the first worksheet
-                activeSheetName = xs.bottombar.dataNames[0];
-                xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
+ 			// some times if the activeSheetName sheet is invisible or chartworksheet ,just use the first visible worksheet as active sheet
+             // set A1 as default active cell
+             xs.setActiveCell(0, 0);
             }
 
 
         }
 
-        function ColorReverse(OldColorValue) {
-            var OldColorValue = '0x' + OldColorValue.replace(/#/g, "");
-            var str = '000000' + (0xFFFFFF - OldColorValue).toString(16);
-            return '#' + str.substring(str.length - 6, str.length);
-        }
-        function save() {
-            if (!xs.buffer.isFinish()) {
-                alert('updating is inprogress,please try later');
-                return;
-            }
-            let datas = xs.datas;
-            delete datas.history;
-            delete datas.search;
-            delete datas.images;
-            delete datas.shapes;
-
-            var jsondata = {
-                sheetname: xs.sheet.data.name,
-                actrow: xs.sheet.data.selector.ri,
-                actcol: xs.sheet.data.selector.ci,
-                datas: xs.getUpdateDatas(),
-            };
-
-            const data = {
-                p: JSON.stringify(jsondata),
-                uid: uniqueid,
-            };
 
 
-            $.ajax({
-                url: local + '/GridJs2/Download',
-                type: 'post',
-
-                data: data,
-                success: function (datar, stutas, xhr) {
-                    console.log(datar);
-                    if (datar.startsWith('{')) {
-                        var ret = JSON.parse(datar);
-                        if (ret.err) {
-                            alert(ret.err);
-                        }
-                    } else {
-                        // window.location = local + '/GridJs2/Download2/' + datar;
-                        window.location = datar;
-                    }
-                },
-            });
-
-
-        }
-
     </script>
 
-    <div style="display: none;z-index: 999;">
-        <div title='text highlight' id="textselectform">
-            <div>
-                <textarea id='textselect' name='textselect' rows='4' cols='50'>
-          </textarea>
-            </div>
-        </div>'
-    </div>
 </body>
 </html>

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

@@ -73,10 +73,7 @@ html, body {
 
     <script>
       
-        function vtrace() {
-            let stack = (new Error()).stack
-            console.log(stack);
-        }
+ 
 
        
         
@@ -166,7 +163,8 @@ html, body {
             const imageuploadurl2 = "/GridJs2/AddImageByURL";
             const imagecopyurl = "/GridJs2/CopyImage";        // x.spreadsheet.locale('zh-cn');
             const lazyLoadingUrl = "/GridJs2/LazyLoadingStreamJson";
-            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets).change((cdata) => {
+			const activeSheetName = jsondata.actname;
+            xs = x_spreadsheet('#gridjs-demo-uid', option).loadData(sheets,activeSheetName).change((cdata) => {
                 console.log(cdata);
                 console.log(xs.validate());
             }
@@ -219,80 +217,21 @@ html, body {
             xs.setLazyLoadingUrl(lazyLoadingUrl);
             xs.setOpenFileUrl("/gridjsdemo/list");
 
-            let activeSheetName = jsondata.actname;
-
-            if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
-                xs.setActiveSheetByName(activeSheetName).setActiveCell(jsondata.actrow, jsondata.actcol);
 
-            } else {
-                //some times if the active sheet is invisible or chartworksheet ,just use the first worksheet
-                activeSheetName = xs.bottombar.dataNames[0];
-                xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
-            }
+            if (xs.getActiveSheetName() == activeSheetName) {
+                xs.setActiveCell(jsondata.actrow, jsondata.actcol);
+         	} else {
+ 			// some times if the activeSheetName sheet is invisible or chartworksheet ,just use the first visible worksheet as active sheet
+             // set A1 as default active cell
+             xs.setActiveCell(0, 0);
+         	}
 
 
         }
 
-        function ColorReverse(OldColorValue) {
-            var OldColorValue = '0x' + OldColorValue.replace(/#/g, "");
-            var str = '000000' + (0xFFFFFF - OldColorValue).toString(16);
-            return '#' + str.substring(str.length - 6, str.length);
-        }
-        function save() {
-            if (!xs.buffer.isFinish()) {
-                alert('updating is inprogress,please try later');
-                return;
-            }
-            let datas = xs.datas;
-            delete datas.history;
-            delete datas.search;
-            delete datas.images;
-            delete datas.shapes;
-
-            var jsondata = {
-                sheetname: xs.sheet.data.name,
-                actrow: xs.sheet.data.selector.ri,
-                actcol: xs.sheet.data.selector.ci,
-                datas: xs.getUpdateDatas(),
-            };
-
-            const data = {
-                p: JSON.stringify(jsondata),
-                uid: uniqueid,
-            };
-
-
-            $.ajax({
-                url: local + '/GridJs2/Download',
-                type: 'post',
-
-                data: data,
-                success: function (datar, stutas, xhr) {
-                    console.log(datar);
-                    if (datar.startsWith('{')) {
-                        var ret = JSON.parse(datar);
-                        if (ret.err) {
-                            alert(ret.err);
-                        }
-                    } else {
-                        // window.location = local + '/GridJs2/Download2/' + datar;
-                        window.location = datar;
-                    }
-                },
-            });
-
-
-        }
+      
 
     </script>
-
-    <div style="display: none;z-index: 999;">
-        <div title='text highlight' id="textselectform">
-            <div>
-                <textarea id='textselect' name='textselect' rows='4' cols='50'>
-          </textarea>
-            </div>
-        </div>'
-    </div>
+ 
 </body>
 </html>

package/index.d.ts

@@ -75,7 +75,6 @@ declare module 'gridjs-spreadsheet' {
   export type REDACTION_DELETED = 'redaction-deleted';
   export type REDACTION_UPDATED = 'redaction-updated';
   export type REDACTION_REASON_INSERTED = 'redactionReason-inserted';
-  export type REDACTION_REASON_CLEARED = 'redactionReason-cleared';
   export type REDACTION_TRANSPARENCY_TOGGLED = 'redactionTransparency-toggled';
   export type CUSTOM_BUTTON = 'custom-button';
   export type UPDATE_SERVER_ERROR = 'updateServerError';
@@ -245,10 +244,6 @@ declare module 'gridjs-spreadsheet' {
       envt: REDACTION_REASON_INSERTED,
       callback: (reason: string) => void
     ): void;
-    (
-      envt: REDACTION_REASON_CLEARED,
-      callback: () => void
-    ): void;
     (
       envt: REDACTION_TRANSPARENCY_TOGGLED,
       callback: (isTransparent: boolean) => void
@@ -376,6 +371,12 @@ declare module 'gridjs-spreadsheet' {
      * remove current sheet
      */
     deleteSheet(): void;
+    /**
+     * move sheet to a new tab index
+     * @param fromIndex current sheet index
+     * @param toIndex target sheet index
+     */
+    moveSheet(fromIndex: number, toIndex: number): this;
 
     /**
      * insert a redaction shape on a target shape/image
@@ -424,8 +425,28 @@ declare module 'gridjs-spreadsheet' {
     /**
      * load data
      * @param json
+     * @param activeSheetName optional sheet name to activate after loading
+     */
+    loadData(json: Record<string, any>, activeSheetName?: string): this;
+    /**
+     * set active sheet by index
+     * @param id sheet index
+     * @param isReActive force re-activate even if already active
+     */
+    setActiveSheet(id: number, isReActive?: boolean): this;
+    /**
+     * set active sheet by name
+     * @param sheetname sheet name
+     * @param isReActive force re-activate even if already active
+     */
+    setActiveSheetByName(sheetname: string, isReActive?: boolean): this;
+    /**
+     * set active cell
+     * @param rowIndex row index
+     * @param colIndex column index
+     * @param scrollToCell whether to scroll the active cell into view, defaults to true
      */
-    loadData(json: Record<string, any>): void;
+    setActiveCell(rowIndex: number, colIndex: number, scrollToCell?: boolean): this;
     /**
      * get data
      */

package/package.json

@@ -1,47 +1,45 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "26.5.2",
+  "version": "26.6.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",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [
-    "XLS",
-    "XLSX",
-    "XLSB",
-    "CSV",
-    "to",
-    "convert",
-    "PDF",
-    "JPG",
-    "PNG",
-    "HTML",
-    "ODS",
-    "Numbers",
-    "XLSM",
-    "Spreadsheet",
-    "Markdown",
-    "XPS",
-    "DOCX",
-    "PPTX",
-    "MHTML",
-    "SVG",
-    "CHM",
-    "JSON",
-    "SQL",
-    "XML",
-    "Online excel",
-    "spread-sheets",
-    "javascript spreadsheet",
-    "javascript excel",
-    "excel io",
-    "sheets",
-    "sheet",
-    "javascript",
-    "excel"
-  ],
+ "keywords": [
+  "excel",
+  "spreadsheet",
+  "web-excel",
+  "online-excel",
+  "excel-viewer",
+  "excel-editor",
+  "javascript-excel",
+  "javascript-spreadsheet",
+  "excel-component",
+  "spreadsheet-ui",
+  "react-spreadsheet",
+  "vue-excel",
+  "typescript",
+  "xlsx",
+  "xls",
+  "csv",
+  "ods",
+  "numbers",
+  "xlsm",
+  "xlsb",
+  "excel-io",
+  "redact",
+  "redaction",
+  "data-redaction",
+  "collaborative-editing",
+  "excel-api",
+  "data-table",
+  "datagrid",
+  "convert-pdf",
+  "convert-html",
+  "sheets"
+],
   "author": "Aspose Cells Team",
   "dependencies": {
     "jquery": "~ 3.6.0",

package/readme.md

@@ -1,6 +1,10 @@
-# gridjs-spreadsheet
+# gridjs-spreadsheet | Lightweight Online Excel Editor & Web Spreadsheet API
  
-> 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
+> **GridJs-Spreadsheet** is a high-performance, lightweight JavaScript library for building online Excel editors and web-based spreadsheet applications. It provides seamless Excel viewing, editing, and cross-platform deployment with an easy-to-use API.
+
+##  Why Choose GridJs-Spreadsheet?
+
+Whether you are building a collaborative document platform, an internal data management tool, or an Excel viewer for your web app, GridJs-Spreadsheet offers a comprehensive solution.
 
 - [API](#api)
 - [Preview](#preview)
@@ -220,42 +224,42 @@ xs.cellStyle(ri, ci);
 
 ## Features
 
-  - Localization/Multiple language UI
-  - Paint format
-  - Clear format
-  - Format
-  - Number Format
-  - Font/Font size/ bold/italic/Underline/Strike
-  - Highlight
-  - Shape/Image resize/rotate/position ajustment
-  - Text color/Align/wrapping
-  - Fill color
-  - RichText
-  - Borders
-  - Merge cells
-  - Freeze cell
-  - Copy, Cut, Paste
-  - Autofill
-  - Insert/Delete row, column
-  - Filter row, column
-  - Zoom in/out 
-  - Sort 
-  - Search 
-  - Formula
-  - Resize row-height, col-width
-  - Switch/add/delete sheets
-  - Condition Format
-  - Comment
-  - Add/delete Links
-  - Print
-  - Data validations
-  - Insert picture from web page
-  - Display chart/shapes
-  - Display form controls /activeX controls 
-  - Insert/Delete form controls
-  - Insert/Delete common shapes for autoshape
-  - Support display two colors gradient in fill effects 
-  - Mobile compatibility
+###  Rich Editing & Formatting
+- Font/Font size/ bold/italic/Underline/Strike
+- Text color/Align/wrapping
+- Fill color / Highlight
+- Number Format / RichText
+- Borders / Condition Format
+- Paint format / Clear format
+
+###  Data Management & Analysis
+- Formula support
+- Filter / Sort row and column
+- Data validations
+- Copy, Cut, Paste / Autofill
+- Merge cells / Freeze cell
+- Insert/Delete row, column
+- Resize row-height, col-width
+- Zoom in/out
+- Search
+
+### ️ Visuals & Objects
+- Display chart/shapes
+- Display condition icons
+- Shape/Image resize/rotate/position adjustment
+- Insert/Delete/Copy common shapes for autoshape
+- Insert/Delete/Copy Image
+- Display form controls / ActiveX controls
+- Insert/Delete form controls
+- Support display two colors gradient in fill effects
+
+### ️ Security & Advanced Tools
+- Redact sensitive data 
+- Add/delete Comment
+- Add/delete Links
+- Print
+- Localization/Multiple language UI
+- Mobile compatibility
 
 
 ## Github-Demos
@@ -412,6 +416,14 @@ v26.5.2:
 - Improve filter display
 - Improve print
 
+v26.5.3: 
+
+- Improve scroll in zoom
+
+v26.6: 
+
+- Improve redaction feature
+
 ## License
 
 MIT

package/xspreadsheet.css

@@ -708,6 +708,11 @@ body {
 .x-spreadsheet-contextmenu .x-spreadsheet-item {
   width: unset;
 }
+.x-spreadsheet-contextmenu .x-spreadsheet-item.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: default;
+}
 .x-spreadsheet-item.state,
 .x-spreadsheet-header.state {
   padding-left: 35px !important;
@@ -948,6 +953,16 @@ body {
   background-color: #fff;
   color: #3c763d !important;
 }
+.x-spreadsheet-menu > li.x-spreadsheet-dragging {
+  opacity: 0.65;
+  cursor: grabbing;
+}
+.x-spreadsheet-menu > li.x-spreadsheet-drag-target-before {
+  box-shadow: inset 3px 0 0 #3c763d;
+}
+.x-spreadsheet-menu > li.x-spreadsheet-drag-target-after {
+  box-shadow: inset -3px 0 0 #3c763d;
+}
 .x-spreadsheet-menu > li .x-spreadsheet-icon {
   margin: 0 6px;
 }