From 16131b2776cd278bb7bddae674c206aa739f3a46 Mon Sep 17 00:00:00 2001 From: wpxp123456 <2677556700@qq.com> Date: Wed, 9 Dec 2020 16:29:04 +0800 Subject: [PATCH] feat(api add): image insertImage deleteImage getImageOption fix #270 --- docs/zh/guide/api.md | 50 +++++- src/controllers/imageCtrl.js | 5 +- src/controllers/sheetmanage.js | 1 + src/global/api.js | 287 +++++++++++++++++++++++++++++++++ 4 files changed, 337 insertions(+), 6 deletions(-) diff --git a/docs/zh/guide/api.md b/docs/zh/guide/api.md index d34e8a3..f5f11ee 100644 --- 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 index 4d64a9d..64de45b 100644 --- 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 index 923f422..0f6c11b 100644 --- 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 index eba052c..01b0965 100644 --- 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}格式一维数组 *