From 4232dfc7832846013e623d13f6157ee1e371bda3 Mon Sep 17 00:00:00 2001
From: wpxp123456 <2677556700@qq.com>
Date: Fri, 28 Aug 2020 17:45:37 +0800
Subject: [PATCH] feat(image insert): image insert
image insert
---
src/controllers/constant.js | 55 ++++++
src/controllers/handler.js | 169 +++++++++++++++++-
src/controllers/imageCtrl.js | 283 ++++++++++++++++++++++++++++++
src/css/luckysheet-core.css | 218 +++++++++++++++++++++++
src/expendPlugins/chart/plugin.js | 8 +-
5 files changed, 728 insertions(+), 5 deletions(-)
create mode 100644 src/controllers/imageCtrl.js
diff --git a/src/controllers/constant.js b/src/controllers/constant.js
index 3731014a1..12739a513 100644
--- a/src/controllers/constant.js
+++ b/src/controllers/constant.js
@@ -127,6 +127,57 @@ const gridHTML = function(){
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 插入图片
+
`;
}
diff --git a/src/controllers/handler.js b/src/controllers/handler.js
index f3182ede9..559070e2e 100644
--- a/src/controllers/handler.js
+++ b/src/controllers/handler.js
@@ -4,6 +4,7 @@ import luckysheetFreezen from './freezen';
import pivotTable from './pivotTable';
import luckysheetDropCell from './dropCell';
import luckysheetPostil from './postil';
+import imageCtrl from './imageCtrl';
import menuButton from './menuButton';
import conditionformat from './conditionformat';
import alternateformat from './alternateformat';
@@ -1922,6 +1923,119 @@ export default function luckysheetHandler() {
// resize chart
Store.resizeChart(Store.chartparam.luckysheetCurrentChart)
}
+ //image move
+ else if (imageCtrl.move) {
+ let mouse = mouseposition(event.pageX, event.pageY);
+ let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
+ let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();
+
+ let myh = $("#luckysheet-modal-dialog-activeImage").outerHeight(),
+ myw = $("#luckysheet-modal-dialog-activeImage").outerWidth();
+
+ let top = y - imageCtrl.moveXY[1],
+ left = x - imageCtrl.moveXY[0];
+
+ if (top < 0) {
+ top = 0;
+ }
+
+ if (top + myh + 42 + 6 > imageCtrl.currentWinH) {
+ top = imageCtrl.currentWinH - myh - 42 - 6;
+ }
+
+ if (left < 0) {
+ left = 0;
+ }
+
+ if (left + myw + 22 + 36 > imageCtrl.currentWinW) {
+ left = imageCtrl.currentWinW - myw - 22 - 36;
+ }
+
+ $("#luckysheet-modal-dialog-activeImage").css({ "left": left, "top": top });
+ }
+ //image resize
+ else if (!!imageCtrl.resize) {
+ let mouse = mouseposition(event.pageX, event.pageY);
+ let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
+ let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();
+
+ if (x < 0 || y < 0) {
+ return false;
+ }
+
+ let resizeXY = imageCtrl.resizeXY;
+
+ let topchange = y - resizeXY[1],
+ leftchange = x - resizeXY[0];
+
+ let top = resizeXY[5],
+ height = resizeXY[3],
+ left = resizeXY[4],
+ width = resizeXY[2];
+
+ let resize = imageCtrl.resize;
+
+ if (resize == "lm" || resize == "lt" || resize == "lb") {
+ left = x;
+ width = resizeXY[2] - leftchange;
+
+ if (left > resizeXY[2] + resizeXY[4] - 60) {
+ left = resizeXY[2] + resizeXY[4] - 60;
+ width = resizeXY[2] - (resizeXY[2] + resizeXY[4] - 60 - resizeXY[0]);
+ }
+ else if (left <= 0) {
+ left = 0;
+ width = resizeXY[2] + resizeXY[0];
+ }
+ }
+
+ if (resize == "rm" || resize == "rt" || resize == "rb") {
+ width = resizeXY[2] + leftchange;
+
+ if (width < 60) {
+ width = 60;
+ }
+ else if (width >= imageCtrl.currentWinW - resizeXY[4] - 22 - 36) {
+ width = imageCtrl.currentWinW - resizeXY[4] - 22 - 36;
+ }
+ }
+
+ if (resize == "mt" || resize == "lt" || resize == "rt") {
+ top = y;
+ height = resizeXY[3] - topchange;
+
+ if (top > resizeXY[3] + resizeXY[5] - 60) {
+ top = resizeXY[3] + resizeXY[5] - 60;
+ height = resizeXY[3] - (resizeXY[3] + resizeXY[5] - 60 - resizeXY[1]);
+ }
+ else if (top <= 0) {
+ top = 0;
+ height = resizeXY[3] + resizeXY[1];
+ }
+ }
+
+ if (resize == "mb" || resize == "lb" || resize == "rb") {
+ height = resizeXY[3] + topchange;
+
+ if (height < 60) {
+ height = 60;
+ }
+ else if (height >= imageCtrl.currentWinH - resizeXY[5] - 42 - 6) {
+ height = imageCtrl.currentWinH - resizeXY[5] - 42 - 6;
+ }
+ }
+
+ $("#luckysheet-modal-dialog-activeImage").css({
+ "width": width,
+ "height": height,
+ "left": left,
+ "top": top
+ });
+ $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
+ "background-size": width + "px " + height + "px",
+ "background-position": "0px 0px"
+ })
+ }
else if (luckysheetPostil.move) {
let mouse = mouseposition(event.pageX, event.pageY);
let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
@@ -2029,7 +2143,8 @@ export default function luckysheetHandler() {
}
else if (!!formula.rangeMove) {
formula.rangeMoveDraging(event, formula.rangeMovexy, formula.rangeMoveObj.data("range"), formula.rangeMoveObj, Store.sheetBarHeight, Store.statisticBarHeight);
- } else if (!!Store.chart_selection.rangeResize) {
+ }
+ else if (!!Store.chart_selection.rangeResize) {
Store.chart_selection.rangeResizeDraging(event, Store.sheetBarHeight, Store.statisticBarHeight);
}
else if (!!Store.chart_selection.rangeMove) {
@@ -2208,6 +2323,16 @@ export default function luckysheetHandler() {
formula.rangeResizeDragged(event, formula.rangeResizeObj, formula.rangeResize, formula.rangeResizexy, formula.rangeResizeWinW, formula.rangeResizeWinH);
}
+ //image move
+ if (imageCtrl.move) {
+ imageCtrl.moveImgItem();
+ }
+
+ //image resize
+ if (imageCtrl.resize) {
+ imageCtrl.resizeImgItem();
+ }
+
//批注框 移动
if (luckysheetPostil.move) {
luckysheetPostil.move = false;
@@ -3414,6 +3539,48 @@ export default function luckysheetHandler() {
splitColumn.init();
});
+ //菜单栏 插入图片按钮
+ $("#luckysheet-insertImg-btn-title").click(function () {
+ $("#luckysheet-imgUpload").click();
+ });
+ $("#luckysheet-imgUpload").click(function (e) {
+ e.stopPropagation();
+ });
+ $("#luckysheet-imgUpload").on("change", function(e){
+ let file = e.currentTarget.files[0];
+ let render = new FileReader();
+ render.readAsDataURL(file);
+
+ render.onload = function(event){
+ let src = event.target.result;
+
+ let rowIndex = Store.luckysheet_select_save[0].row_focus;
+ let colIndex = Store.luckysheet_select_save[0].column_focus;
+ 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);
+ $("#luckysheet-imgUpload").val("");
+ }
+ image.src = src;
+ }
+ });
+
+
+
//冻结行列
$("#luckysheet-freezen-btn-horizontal").click(function () {
if ($.trim($(this).text()) == locale().freezen.freezenCancel) {
diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js
new file mode 100644
index 000000000..c4fe94ab9
--- /dev/null
+++ b/src/controllers/imageCtrl.js
@@ -0,0 +1,283 @@
+import {
+ rowLocation,
+ colLocation,
+ mouseposition
+} from '../global/location';
+import { setluckysheet_scroll_status } from '../methods/set';
+
+const imageCtrl = {
+ imgItem: {
+ src: '', //图片url
+ originWidth: null, //图片原始宽度
+ originHeight: null, //图片原始高度
+ default: {
+ width: null, //图片 宽度
+ height: null, //图片 高度
+ left: null, //图片离表格左边的 位置
+ top: null, //图片离表格顶部的 位置
+ },
+ crop: {
+ width: null, //图片裁剪后 宽度
+ height: null, //图片裁剪后 高度
+ offsetLeft: 0, //图片裁剪后离未裁剪时 左边的位移
+ offsetTop: 0, //图片裁剪后离未裁剪时 顶部的位移
+ }
+ },
+ images: null,
+ currentImgId: null,
+ currentWinW: null,
+ currentWinH: null,
+ resize: null,
+ resizeXY: null,
+ move: false,
+ moveXY: null,
+ generateRandomId: function(prefix) {
+ if(prefix == null){
+ prefix = "img";
+ }
+
+ let userAgent = window.navigator.userAgent.replace(/[^a-zA-Z0-9]/g, "").split("");
+
+ let mid = "";
+
+ for(let i = 0; i < 12; i++){
+ mid += userAgent[Math.round(Math.random() * (userAgent.length - 1))];
+ }
+
+ let time = new Date().getTime();
+
+ return prefix + "_" + mid + "_" + time;
+ },
+ modelHtml: function(id, imgItem) {
+ let src = imgItem.src;
+
+ let width = imgItem.default.width,
+ height = imgItem.default.height,
+ left = imgItem.default.left,
+ top = imgItem.default.top;
+
+ return `
+
+
+
+