|
|
@@ -3,16 +3,39 @@
|
|
|
* date 2018-04-13
|
|
|
* Description:
|
|
|
*/
|
|
|
+
|
|
|
+import lrz from 'lrz';
|
|
|
+
|
|
|
var Photo = function(cfg) {
|
|
|
|
|
|
- this.width = (cfg && cfg.width) || 150;
|
|
|
- this.height = (cfg && cfg.height) || 120;
|
|
|
+ this.width = (cfg && cfg.width) || 240;
|
|
|
+ this.height = (cfg && cfg.height) || 180;
|
|
|
this.top = (cfg && cfg.height) || 10;
|
|
|
this.left = (cfg && cfg.height) || 20;
|
|
|
this.url = (cfg && cfg.url);
|
|
|
this.vdom = null;
|
|
|
this.inputDom = (cfg && cfg.dom) || null;
|
|
|
|
|
|
+ this.ox = 0;
|
|
|
+ this.oy = 0;
|
|
|
+
|
|
|
+ // 拖拽和伸缩
|
|
|
+ this.drag = false;
|
|
|
+ this.smove = false;
|
|
|
+ this.nmove = false;
|
|
|
+ this.wmove = false;
|
|
|
+ this.emove = false;
|
|
|
+ this.nwmove = false;
|
|
|
+ this.swmove = false;
|
|
|
+ this.semove = false;
|
|
|
+
|
|
|
+ this.upload = {
|
|
|
+ status: 'ready',
|
|
|
+ errorMsg: null,
|
|
|
+ progressComputable: false,
|
|
|
+ complete: 0
|
|
|
+ };
|
|
|
+
|
|
|
this.config = {
|
|
|
// server: null,
|
|
|
// fieldName: 'image',
|
|
|
@@ -40,15 +63,251 @@ var Photo = function(cfg) {
|
|
|
|
|
|
};
|
|
|
|
|
|
+Photo.prototype.circleTpl = '<div class="line-n line resizable"><div class="circle"></div></div><div class="line-e line resizable"><div class="circle"></div></div><div class="line-s line resizable"><div class="circle"></div></div><div class="line-w line resizable"><div class="circle"></div></div><div class="circle-nw circle resizable"></div><div class="circle-ne circle resizable"></div><div class="circle-se circle resizable"></div><div class="circle-sw circle resizable"></div>';
|
|
|
+
|
|
|
Photo.prototype.renderToDom = function () {
|
|
|
this.vdom = $('<div class="outer-photo"></div>');
|
|
|
- this.vdom({ width: this.width, height: this.height ,top: this.top, left: this.left })
|
|
|
- this.renderPhotoDom();
|
|
|
+ this.vdom.css({ width: this.width, height: this.height ,top: this.top, left: this.left });
|
|
|
+ this.process();
|
|
|
};
|
|
|
|
|
|
-Photo.prototype.renderPhotoDom = function () {
|
|
|
- let image = $('<img class="question-photo" src='+ this.url +' />');
|
|
|
+Photo.prototype.insertBase64 = function (data) {
|
|
|
+ let image = $('<img class="question-photo" />');
|
|
|
+ let circleDom = $('<div class="eqc-select"></div>');
|
|
|
+ circleDom.append(this.circleTpl);
|
|
|
+ image.attr('src',data);
|
|
|
this.vdom.append(image);
|
|
|
+ this.vdom.append(circleDom);
|
|
|
+
|
|
|
+ this.bindDragEvent(this.vdom);
|
|
|
+ //以下是各个方向的
|
|
|
+ this.bindMoveSEvent(this.vdom);
|
|
|
+ this.bindMoveEEvent();
|
|
|
+ this.bindMoveNEvent(this.vdom);
|
|
|
+ this.bindMoveWEvent(this.vdom);
|
|
|
+
|
|
|
+ //东南西北的朝向
|
|
|
+ this.bindMoveNWEvent(this.vdom);
|
|
|
+ this.bindMoveSWEvent(this.vdom);
|
|
|
+ this.bindMoveSEEvent(this.vdom);
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+Photo.prototype.bindDragEvent = function (el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown' , function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ let $this = $(this);
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.oy = e.pageY;
|
|
|
+ _this.top = parseInt($this.css('top').replace('px', ''));
|
|
|
+ _this.left = parseInt($this.css('left').replace('px', ''));
|
|
|
+ $this.css('cursor','move');
|
|
|
+ _this.drag = true;
|
|
|
+ el.on('mousemove', function (e) {
|
|
|
+ if(_this.drag){
|
|
|
+ let x = e.pageX - _this.ox;
|
|
|
+ let y = e.pageY - _this.oy;
|
|
|
+ $(this).css({
|
|
|
+ left: _this.left + x,
|
|
|
+ top: _this.top + y,
|
|
|
+ opacity: .5
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).on('mouseup',function(e){
|
|
|
+ _this.drag = false;
|
|
|
+ el.off('mousemove');
|
|
|
+ $(this).css({'opacity':1,cursor:'default'});
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+// 朝东方向
|
|
|
+Photo.prototype.bindMoveEEvent = function () {
|
|
|
+ let _this = this;
|
|
|
+ this.vdom.on('mousedown','.line-e', function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.width = _this.vdom.width();
|
|
|
+ _this.emove = true;
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.emove){
|
|
|
+ let x = (e.pageX - parseInt(_this.ox));
|
|
|
+ _this.vdom.css({
|
|
|
+ width: parseInt(_this.width) + x,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.emove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//朝南方向拖拽
|
|
|
+Photo.prototype.bindMoveSEvent = function(el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.line-s', function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.oy = e.pageY;//原始x位置
|
|
|
+ _this.height = el.height();
|
|
|
+ _this.smove = true;
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.smove){
|
|
|
+ let y = (e.pageY - parseInt(_this.oy));
|
|
|
+ _this.vdom.css({
|
|
|
+ height: parseInt(_this.height) + y
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.smove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//朝北方向
|
|
|
+Photo.prototype.bindMoveNEvent = function(el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.line-n', function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.oy = e.pageY;//原始x位置
|
|
|
+ _this.height = el.height();
|
|
|
+ _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
|
|
|
+ _this.nmove = true;
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.nmove){
|
|
|
+ let y = (e.pageY - parseInt(_this.oy));
|
|
|
+ _this.vdom.css({
|
|
|
+ height: _this.height - y,
|
|
|
+ top: _this.top + y
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.nmove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//朝西方向
|
|
|
+Photo.prototype.bindMoveWEvent = function(el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.line-w', function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.width = el.width();
|
|
|
+ _this.wmove = true;
|
|
|
+ _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.wmove){
|
|
|
+ let x = (e.pageX - parseInt(_this.ox));
|
|
|
+ _this.vdom.css({
|
|
|
+ width: _this.width - x,
|
|
|
+ left: _this.left + x
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.wmove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 朝西北
|
|
|
+Photo.prototype.bindMoveNWEvent = function (el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.circle-nw',function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.oy = e.pageY;
|
|
|
+ _this.width = el.width();
|
|
|
+ _this.height = el.height();
|
|
|
+ _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
|
|
|
+ _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
|
|
|
+ _this.nwmove = true;
|
|
|
+
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.nwmove){
|
|
|
+ let x = e.pageX - _this.ox;
|
|
|
+ let y = e.pageY - _this.oy;
|
|
|
+ _this.vdom.css({
|
|
|
+ height: _this.height - y,
|
|
|
+ top: _this.top + y,
|
|
|
+ width: _this.width - x,
|
|
|
+ left: _this.left + x
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.nwmove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 朝西南
|
|
|
+Photo.prototype.bindMoveSWEvent = function (el) {
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.circle-sw',function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.oy = e.pageY;
|
|
|
+ _this.width = _this.vdom.width();
|
|
|
+ _this.height = _this.vdom.height();
|
|
|
+ _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
|
|
|
+ _this.swmove = true;
|
|
|
+
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.swmove){
|
|
|
+ let x = e.pageX - _this.ox;
|
|
|
+ let y = e.pageY - _this.oy;
|
|
|
+ _this.vdom.css({
|
|
|
+ height: _this.height + y,
|
|
|
+ width: _this.width - x,
|
|
|
+ left: _this.left + x
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.swmove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//朝东南
|
|
|
+Photo.prototype.bindMoveSEEvent = function (el){
|
|
|
+ let _this = this;
|
|
|
+ el.on('mousedown','.circle-se',function(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ _this.ox = e.pageX;//原始x位置
|
|
|
+ _this.oy = e.pageY;
|
|
|
+ _this.width = el.width();
|
|
|
+ _this.height = el.height();
|
|
|
+ _this.semove = true;
|
|
|
+
|
|
|
+ $(document).on('mousemove', function(e){
|
|
|
+ if(_this.semove){
|
|
|
+ let x = e.pageX - _this.ox;
|
|
|
+ let y = e.pageY - _this.oy;
|
|
|
+
|
|
|
+ _this.vdom.css({
|
|
|
+ height: _this.height + y,
|
|
|
+ width: _this.width + x,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on('mouseup', function(){
|
|
|
+ _this.semove = false;
|
|
|
+ $(document).off('mousemove');
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
Photo.prototype.process = function () {
|
|
|
@@ -73,9 +332,8 @@ Photo.prototype.process = function () {
|
|
|
}
|
|
|
|
|
|
const file = this.inputDom.files[0];
|
|
|
-
|
|
|
if (file.size > config.sizeLimit) {
|
|
|
- alter('上传的图片不能大于' + config.sizeLimit);
|
|
|
+ alert('上传的图片不能大于' + config.sizeLimit);
|
|
|
return
|
|
|
}
|
|
|
|
|
|
@@ -100,7 +358,7 @@ Photo.prototype.process = function () {
|
|
|
const reader = new FileReader();
|
|
|
reader.onload = (e) => {
|
|
|
_this.insertBase64(e.target.result)
|
|
|
- }
|
|
|
+ };
|
|
|
reader.readAsDataURL(file);
|
|
|
return
|
|
|
}
|
|
|
@@ -112,12 +370,12 @@ Photo.prototype.process = function () {
|
|
|
Photo.prototype.uploadToServer = function(file) {
|
|
|
const config = this.config;
|
|
|
|
|
|
- const formData = new FormData()
|
|
|
- formData.append(config.upload.fieldName || 'image', file)
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append(config.upload.fieldName || 'image', file);
|
|
|
|
|
|
if (typeof config.upload.params === 'object') {
|
|
|
Object.keys(config.upload.params).forEach((key) => {
|
|
|
- const value = config.upload.params[key]
|
|
|
+ const value = config.upload.params[key];
|
|
|
if (Array.isArray(value)) {
|
|
|
value.forEach((v) => {
|
|
|
formData.append(key, v)
|
|
|
@@ -128,27 +386,27 @@ Photo.prototype.uploadToServer = function(file) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- const xhr = new XMLHttpRequest()
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
|
|
|
xhr.onprogress = (e) => {
|
|
|
- this.upload.status = 'progress'
|
|
|
+ this.upload.status = 'progress';
|
|
|
if (e.lengthComputable) {
|
|
|
- this.upload.progressComputable = true
|
|
|
- const percentComplete = e.loaded / e.total
|
|
|
+ this.upload.progressComputable = true;
|
|
|
+ const percentComplete = e.loaded / e.total;
|
|
|
this.upload.complete = (percentComplete * 100).toFixed(2)
|
|
|
} else {
|
|
|
this.upload.progressComputable = false
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
xhr.onload = () => {
|
|
|
if (xhr.status >= 300) {
|
|
|
- this.setUploadError(`request error,code ${xhr.status}`)
|
|
|
+ this.setUploadError(`request error,code ${xhr.status}`);
|
|
|
return
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
- const url = config.uploadHandler(xhr.responseText)
|
|
|
+ const url = config.uploadHandler(xhr.responseText);
|
|
|
if (url) {
|
|
|
this.$parent.execCommand(Command.INSERT_IMAGE, url)
|
|
|
}
|
|
|
@@ -157,24 +415,29 @@ Photo.prototype.uploadToServer = function(file) {
|
|
|
} finally {
|
|
|
this.upload.status = 'ready'
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
xhr.onerror = () => {
|
|
|
// find network info in brower tools
|
|
|
this.setUploadError('request error')
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
xhr.onabort = () => {
|
|
|
this.upload.status = 'abort'
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
- xhr.open('POST', config.upload.url)
|
|
|
+ xhr.open('POST', config.upload.url);
|
|
|
if (typeof config.upload.headers === 'object') {
|
|
|
Object.keys(config.upload.headers).forEach((k) => {
|
|
|
xhr.setRequestHeader(k, config.upload.headers[k])
|
|
|
})
|
|
|
}
|
|
|
xhr.send(formData)
|
|
|
-}
|
|
|
+};
|
|
|
+
|
|
|
+Photo.prototype.setUploadError = function (msg) {
|
|
|
+ this.upload.status = 'error';
|
|
|
+ this.upload.errorMsg = msg;
|
|
|
+};
|
|
|
|
|
|
export default Photo;
|
