feat(api add): image

insertImage deleteImage getImageOption fix #270
dream-num · Dec 9, 2020 · 16131b2 · 16131b2
1 parent cbc81e9
commit 16131b2
Show file tree

Hide file tree

Showing 4 changed files with 337 additions and 6 deletions.
diff --git a/docs/zh/guide/api.md b/docs/zh/guide/api.md
@@ -2437,6 +2437,48 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ------------
 
+## 图片
+
+### insertImage(src, [setting])
+
+- **参数**：
+
+	- {String} [src]: 图片src
+	- {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {Number} [rowIndex]: 要插入图片的单元格行下标；默认为当前选区聚焦单元格行下标 || 0
+		+ {Number} [colIndex]: 要插入图片的单元格列下标；默认为当前选区聚焦单元格列下标 || 0
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+
+	在指定的工作表中指定单元格位置插入图片
+
+### deleteImage([setting])
+
+- **参数**：
+
+	- {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {String | Array} [idList]: 要删除图片的id集合，也可为字符串`"all"`，all为所有的字符串；默认为`"all"`
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+
+	删除指定工作表中的图片
+
+### getImageOption([setting])
+
+- **参数**：
+
+	- {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+
+	获取指定工作表的图片配置
+
 ## 工作表保护
 
 
@@ -2500,14 +2542,14 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ### changLang([lang])
 
-- **说明**：
-
-	传入目标语言，切换到对应的语言界面
-
 - **参数**：
 
 	+ {String} [lang]: 语言类型；暂支持`"zh"`、`"en"`、`"es"`；默认为`"zh"`；
 
+- **说明**：
+
+	传入目标语言，切换到对应的语言界面
+
 ### getRangeByTxt([txt])
 
 - **说明**：

diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js
@@ -52,8 +52,9 @@ const imageCtrl = {
     inserImg: function(src){
         let _this = this;
 
-        let rowIndex = Store.luckysheet_select_save[0].row_focus || 0;
-        let colIndex = Store.luckysheet_select_save[0].column_focus || 0;
+        let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
+        let rowIndex = last.row_focus || 0;
+        let colIndex = last.column_focus || 0;
         let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
         let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];
 

diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js
@@ -960,6 +960,7 @@ const sheetmanage = {
         luckysheetPostil.buildAllPs(Store.flowdata);
 
         //图片
+        imageCtrl.currentImgId = null;
         imageCtrl.images = file.images;
         imageCtrl.allImagesShow();
         imageCtrl.init();

diff --git a/src/global/api.js b/src/global/api.js
@@ -37,6 +37,7 @@ import { createFilterOptions } from '../controllers/filter';
 import controlHistory from '../controllers/controlHistory';
 import { zoomRefreshView, zoomNumberDomBind } from '../controllers/zoom';
 import dataVerificationCtrl from "../controllers/dataVerificationCtrl";
+import imageCtrl from '../controllers/imageCtrl';
 import dayjs from "dayjs";
 import {getRangetxt } from '../methods/get';
 const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
@@ -5865,6 +5866,292 @@ export function deleteDataVerification(options = {}) {
 }
 
 
+/**
+ * 在指定的工作表中指定单元格位置插入图片
+ * @param {String} src 图片src
+ * @param {Object} options 可选参数
+ * @param {Number} options.order 工作表下标；默认值为当前工作表下标
+ * @param {Number} options.rowIndex 要插入图片的单元格行下标；默认为0
+ * @param {Number} options.colIndex 要插入图片的单元格列下标；默认为0
+ * @param {Function} options.success 操作结束的回调函数
+ */
+export function insertImage(src, options = {}){
+    let {
+        order = getSheetIndex(Store.currentSheetIndex),
+        rowIndex,
+        colIndex,
+        success
+    } = {...options}
+
+    let file = Store.luckysheetfile[order];
+
+    if(file == null){
+        return tooltip.info("The order parameter is invalid.", "");
+    }
+
+    if(file.index == Store.currentSheetIndex){
+        let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
+
+        if(rowIndex == null){
+            rowIndex = last.row_focus || 0;
+        }
+
+        if(rowIndex < 0){
+            rowIndex = 0;
+        }
+
+        if(rowIndex > Store.visibledatarow.length){
+            rowIndex = Store.visibledatarow.length;
+        }
+
+        if(colIndex == null){
+            colIndex = last.column_focus || 0;
+        }
+
+        if(colIndex < 0){
+            colIndex = 0;
+        }
+
+        if(colIndex > Store.visibledatacolumn.length){
+            colIndex = Store.visibledatacolumn.length;
+        }
+
+        let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
+        let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];
+
+        let image = new Image();
+        image.onload = function(){
+            let width = image.width,
+                height = image.height;
+
+            let img = {
+                src: src,
+                left: left,
+                top: top,
+                originWidth: width,
+                originHeight: height
+            }
+
+            imageCtrl.addImgItem(img);
+
+            if (success && typeof success === 'function') {
+                success();
+            }
+        }
+        image.src = src;
+    }
+    else {
+        let images = file.images || {};
+        let config = file.config;
+        let zoomRatio = file.zoomRatio || 1;
+
+        let rowheight = file.row;
+        let visibledatarow = file.visibledatarow || [];
+        if(visibledatarow.length === 0){
+            let rh_height = 0;
+
+            for (let r = 0; r < rowheight; r++) {
+                let rowlen = Store.defaultrowlen;
+
+                if (config["rowlen"] != null && config["rowlen"][r] != null) {
+                    rowlen = config["rowlen"][r];
+                }
+
+                if (config["rowhidden"] != null && config["rowhidden"][r] != null) {
+                    visibledatarow.push(rh_height);
+                    continue;
+                }
+
+                rh_height += Math.round((rowlen + 1) * zoomRatio);
+
+                visibledatarow.push(rh_height); //行的临时长度分布
+            }
+        }
+
+        let colwidth = file.column;
+        let visibledatacolumn = file.visibledatacolumn || [];
+        if(visibledatacolumn.length === 0){
+            let ch_width = 0;
+
+            for (let c = 0; c < colwidth; c++) {
+                let firstcolumnlen = Store.defaultcollen;
+
+                if (config["columnlen"] != null && config["columnlen"][c] != null) {
+                    firstcolumnlen = config["columnlen"][c];
+                }
+
+                if(config["colhidden"] != null && config["colhidden"][c] != null){
+                    visibledatacolumn.push(ch_width);
+                    continue;
+                }
+
+                ch_width += Math.round((firstcolumnlen + 1)*zoomRatio);
+
+                visibledatacolumn.push(ch_width);//列的临时长度分布
+            }
+        }
+
+        if(rowIndex == null){
+            rowIndex = 0;
+        }
+
+        if(rowIndex < 0){
+            rowIndex = 0;
+        }
+
+        if(rowIndex > visibledatarow.length){
+            rowIndex = visibledatarow.length;
+        }
+
+        if(colIndex == null){
+            colIndex = 0;
+        }
+
+        if(colIndex < 0){
+            colIndex = 0;
+        }
+
+        if(colIndex > visibledatacolumn.length){
+            colIndex = visibledatacolumn.length;
+        }
+
+        let left = colIndex == 0 ? 0 : visibledatacolumn[colIndex - 1];
+        let top = rowIndex == 0 ? 0 : visibledatarow[rowIndex - 1];
+
+        let image = new Image();
+        image.onload = function(){
+            let img = {
+                src: src,
+                left: left,
+                top: top,
+                originWidth: image.width,
+                originHeight: image.height
+            }
+
+            let width, height;
+            let max = 400;
+
+            if(img.originHeight < img.originWidth){
+                height = Math.round(img.originHeight * (max / img.originWidth));
+                width = max;
+            }
+            else{
+                width = Math.round(img.originWidth * (max / img.originHeight));
+                height = max;
+            }
+
+            let imgItem = $.extend(true, {}, imageCtrl.imgItem);
+            imgItem.src = img.src;
+            imgItem.originWidth = img.originWidth;
+            imgItem.originHeight = img.originHeight;
+            imgItem.default.width = width;
+            imgItem.default.height = height;
+            imgItem.default.left = img.left;
+            imgItem.default.top = img.top;
+            imgItem.crop.width = width;
+            imgItem.crop.height = height;
+
+            let id = imageCtrl.generateRandomId();
+            images[id] = imgItem;
+
+            file.images = images;
+
+            if (success && typeof success === 'function') {
+                success();
+            }
+        }
+        image.src = src;
+    }
+}
+
+
+/**
+ * 删除指定工作表中的图片
+ * @param {Object} options 可选参数
+ * @param {Number} options.order 工作表下标；默认值为当前工作表下标
+ * @param {String | Array} options.idList 要删除图片的id集合，也可为字符串`"all"`，all为所有的字符串；默认为`"all"`
+ * @param {Function} options.success 操作结束的回调函数
+ */
+export function deleteImage(options = {}){
+    let {
+        order = getSheetIndex(Store.currentSheetIndex),
+        idList = 'all',
+        success
+    } = {...options}
+
+    let file = Store.luckysheetfile[order];
+
+    if(file == null){
+        return tooltip.info("The order parameter is invalid.", "");
+    }
+
+    let images = file.images;
+
+    if(images == null){
+        return tooltip.info("The worksheet has no pictures to delete.", "");
+    }
+
+    if(idList != 'all' && getObjType(idList) != 'array'){
+        return tooltip.info("The idList parameter is invalid.", "");
+    }
+
+    if(getObjType(idList) == 'array'){
+        idList.forEach(item => {
+            delete images[item];
+        })
+    }
+    else {
+        images = null;
+    }
+
+    file.images = images;
+
+    if(file.index == Store.currentSheetIndex){
+        if(imageCtrl.currentImgId != null && (idList == 'all' || idList.includes(imageCtrl.currentImgId))){
+            $("#luckysheet-modal-dialog-activeImage").hide();
+            $("#luckysheet-modal-dialog-cropping").hide();
+            $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+        }
+
+        imageCtrl.images = images;
+        imageCtrl.allImagesShow();
+        imageCtrl.init();
+    }
+
+    if (success && typeof success === 'function') {
+        success();
+    }
+}
+
+
+/**
+ * 获取指定工作表的图片配置
+ * @param {Object} options 可选参数
+ * @param {Number} options.order 工作表下标；默认值为当前工作表下标
+ * @param {Function} options.success 操作结束的回调函数
+ */
+export function getImageOption(options = {}){
+    let {
+        order = getSheetIndex(Store.currentSheetIndex),
+        success
+    } = {...options}
+
+    let file = Store.luckysheetfile[order];
+
+    if(file == null){
+        return tooltip.info("The order parameter is invalid.", "");
+    }
+
+    setTimeout(function(){
+        if (success && typeof success === 'function') {
+            success();
+        }
+    }, 1)
+
+    return file.images;
+}
+
+
 /**
  * data => celldata ，data二维数组数据转化成 {r, c, v}格式一维数组
  *