|
|
@@ -583,23 +583,152 @@ export default {
|
|
|
this.$store.state.answerpattern = type == 'En' ? 'letter' : 'number'
|
|
|
sessionStorage.setItem('currentAnsOption', this.$store.state.currentAnsOption)
|
|
|
},
|
|
|
- pasteTargetMode() {
|
|
|
+ async pasteTargetMode() {
|
|
|
if (this.currentCheckToPasteItem.length > 0) {
|
|
|
- this.$Message.loading(this.$t("board['物件轉換中請稍候']"))
|
|
|
+ // this.$Message.loading(this.$t("board['物件轉換中請稍候']"))
|
|
|
this.isPasteImg = true
|
|
|
|
|
|
- setTimeout(() => {
|
|
|
- this.currentCheckToPasteItem.forEach(item => {
|
|
|
- this.pasteTarget(this.currentWorkNum() + '_collatework' + item.seat)
|
|
|
- })
|
|
|
- this.isPasteImg = false
|
|
|
- this.setAllWorkCheckedToPasteFalse()
|
|
|
- this.currentCheckToPasteItem = []
|
|
|
- }, 1000)
|
|
|
+ await this.currentCheckToPasteItem.forEach(item => {
|
|
|
+ this.pasteTargetByKonvaObj(item)
|
|
|
+ })
|
|
|
+ this.isPasteImg = false
|
|
|
+ this.setAllWorkCheckedToPasteFalse()
|
|
|
+ this.currentCheckToPasteItem = []
|
|
|
} else {
|
|
|
this.$Message.warning(this.$t("board['請先勾選']"))
|
|
|
}
|
|
|
},
|
|
|
+ pasteTargetByKonvaObj(item) {
|
|
|
+ let stage = this.$store.state.stage
|
|
|
+ let layer = this.$store.state.layer
|
|
|
+ this.$store.state.textColor = 'black'
|
|
|
+ let text = item.seat + '\t\t\t' + item.name
|
|
|
+
|
|
|
+ let that = this
|
|
|
+
|
|
|
+ Konva.Image.fromURL(item.url, function(image) {
|
|
|
+ // image is Konva.Image instance
|
|
|
+ image.setAttrs({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: 300,
|
|
|
+ height: 300,
|
|
|
+ src: item.url,
|
|
|
+ stroke: 'gray',
|
|
|
+ strokeWidth: 1,
|
|
|
+ draggable: false,
|
|
|
+ listenning: false,
|
|
|
+ name: 'pastImgContent'
|
|
|
+ })
|
|
|
+ var circle = new Konva.Circle({
|
|
|
+ radius: 16,
|
|
|
+ x: 32,
|
|
|
+ y: -25,
|
|
|
+ fill: '#ffb929',
|
|
|
+ draggable: false,
|
|
|
+ listening: false,
|
|
|
+ name: 'pastImgContent'
|
|
|
+ })
|
|
|
+ var rect = new Konva.Rect({
|
|
|
+ radius: 20,
|
|
|
+ cornerRadius: 5,
|
|
|
+ width: 180,
|
|
|
+ height: 40,
|
|
|
+ x: 0,
|
|
|
+ y: -45,
|
|
|
+ fill: '#d8d8d8',
|
|
|
+ draggable: false,
|
|
|
+ listening: false,
|
|
|
+ name: 'pastImgContent'
|
|
|
+ })
|
|
|
+
|
|
|
+ var group = new Konva.Group({
|
|
|
+ x: 200 + Math.floor(Math.random() * 200),
|
|
|
+ y: 200 + Math.floor(Math.random() * 200),
|
|
|
+ text: text
|
|
|
+ })
|
|
|
+
|
|
|
+ group.add(image)
|
|
|
+ group.add(rect)
|
|
|
+ group.add(circle)
|
|
|
+
|
|
|
+ group.add(
|
|
|
+ new Konva.Text({
|
|
|
+ x: 15,
|
|
|
+ y: -45,
|
|
|
+ text: text,
|
|
|
+ fontSize: 18,
|
|
|
+ fill: 'black',
|
|
|
+ fontStyle:'bold',
|
|
|
+ padding: 10,
|
|
|
+ lineHeight: 1.5,
|
|
|
+ wrap: 'none',
|
|
|
+ ellipsis: true,
|
|
|
+ width: 180,
|
|
|
+ height: 'auto',
|
|
|
+ verticalAlign: 'Top',
|
|
|
+ scaleX: 1,
|
|
|
+ scaleY: 1,
|
|
|
+ draggable: false,
|
|
|
+ listenning: false,
|
|
|
+ name: 'pastImgContent'
|
|
|
+ })
|
|
|
+ )
|
|
|
+ group.on('mouseover', function() {
|
|
|
+ document.body.style.cursor = 'pointer'
|
|
|
+ })
|
|
|
+ group.on('mouseout', function() {
|
|
|
+ document.body.style.cursor = 'default'
|
|
|
+ })
|
|
|
+
|
|
|
+ layer.add(group)
|
|
|
+
|
|
|
+ // stage.find('Transformer').destroy()
|
|
|
+ let tr = new Konva.Transformer({
|
|
|
+ // boundBoxFunc: function (oldBoundBox, newBoundBox) {
|
|
|
+ // // "boundBox" is an object with
|
|
|
+ // // x, y, width, height and rotation properties
|
|
|
+ // // transformer tool will try to fit nodes into that box
|
|
|
+
|
|
|
+ // // the logic is simple, if new width is too big
|
|
|
+ // // we will return previous state
|
|
|
+ // if (Math.abs(newBoundBox.width) > 600) {
|
|
|
+ // return oldBoundBox;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return newBoundBox;
|
|
|
+ // },
|
|
|
+ anchorStroke: '#00a6ff',
|
|
|
+ anchorFill: '#fff',
|
|
|
+ anchorSize: 12,
|
|
|
+ anchorCornerRadius: 5,
|
|
|
+ anchorStrokeWidth: 2,
|
|
|
+ borderStroke: '#6ac9fc',
|
|
|
+ borderStrokeWidth: 2,
|
|
|
+ borderDash: [3, 3],
|
|
|
+ padding: 10,
|
|
|
+ name: 'default'
|
|
|
+ })
|
|
|
+ stage.find('Transformer').forEach(function(ele, i) {
|
|
|
+ if (ele.attrs.name == 'default') {
|
|
|
+ ele.destroy()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ layer.add(tr)
|
|
|
+ tr.nodes([group])
|
|
|
+
|
|
|
+ that.$parent.mode = 'check'
|
|
|
+ that.$store.state.mode = 'check'
|
|
|
+ that.$store.state.checkvalue = 'checkbtn'
|
|
|
+
|
|
|
+ layer.batchDraw()
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$store.state.textColor = 'red'
|
|
|
+ this.currentSelectedTextItems = []
|
|
|
+ // console.log(stage)
|
|
|
+ },
|
|
|
+
|
|
|
pasteTarget(id) {
|
|
|
let that = this
|
|
|
|
|
|
@@ -1181,9 +1310,8 @@ export default {
|
|
|
let reShape = stageInfo[slide + '']
|
|
|
let that = this
|
|
|
console.log(reShape, '目前的序列化資料')
|
|
|
-
|
|
|
+
|
|
|
if (reShape) {
|
|
|
-
|
|
|
for (let i = 0; i < reShape.children.length; i++) {
|
|
|
let type = reShape.children[i].className
|
|
|
let attr = reShape.children[i].attrs
|
|
|
@@ -1265,16 +1393,16 @@ export default {
|
|
|
let lastLine = new Konva.Line(attr)
|
|
|
this.layer.add(lastLine)
|
|
|
this.layer.batchDraw()
|
|
|
- }
|
|
|
- else if (type == undefined&&reShape.children[i].children||type == 'Group') { //群組第一次存舞台Konva可能給無類別
|
|
|
-
|
|
|
- let group=new Konva.Group(attr)
|
|
|
+ } else if ((type == undefined && reShape.children[i].children) || type == 'Group') {
|
|
|
+ //群組第一次存舞台Konva可能給無類別
|
|
|
+
|
|
|
+ let group = new Konva.Group(attr)
|
|
|
reShape.children[i].children.forEach(item => {
|
|
|
if (item.className == 'Circle') {
|
|
|
let circle = new Konva.Circle(item.attrs)
|
|
|
group.add(circle)
|
|
|
}
|
|
|
- if (item.className == 'Rect') {
|
|
|
+ if (item.className == 'Rect') {
|
|
|
let rect = new Konva.Rect(item.attrs)
|
|
|
group.add(rect)
|
|
|
}
|
|
|
@@ -1282,11 +1410,17 @@ export default {
|
|
|
let text = new Konva.Text(item.attrs)
|
|
|
group.add(text)
|
|
|
}
|
|
|
+ if (item.className == 'Image') {
|
|
|
+ Konva.Image.fromURL(item.attrs.src, function(image) {
|
|
|
+ image.setAttrs(item.attrs)
|
|
|
+ group.add(image)
|
|
|
+ that.layer.batchDraw()
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
this.layer.add(group)
|
|
|
this.layer.batchDraw()
|
|
|
- }
|
|
|
- else if (type == 'Label') {
|
|
|
+ } else if (type == 'Label') {
|
|
|
let label = new Konva.Label(attr)
|
|
|
|
|
|
reShape.children[i].children.forEach(item => {
|
|
|
@@ -1775,7 +1909,7 @@ export default {
|
|
|
} else {
|
|
|
console.log(target, '拖动的元素')
|
|
|
|
|
|
- if (target.className != 'text' && target.attrs.name != 'pastTextContent') {
|
|
|
+ if (target.className != 'text' && target.attrs.name != 'pastTextContent'&&target.attrs.name != 'pastImgContent') {
|
|
|
target.draggable(true)
|
|
|
//介于是否拖动
|
|
|
} else if (target.attrs.name != 'pastTextContent') {
|
|
|
@@ -1832,10 +1966,16 @@ export default {
|
|
|
ele.destroy()
|
|
|
}
|
|
|
})
|
|
|
- if (target.attrs.name !== 'boardPdfBg' && target.attrs.name !== 'pastTextContent') {
|
|
|
+ if (target.attrs.name !== 'boardPdfBg' && target.attrs.name !== 'pastTextContent' && target.attrs.name !== 'pastImgContent') {
|
|
|
layer.add(tr)
|
|
|
tr.nodes([this])
|
|
|
layer.draw()
|
|
|
+ } else if (target.attrs.name == 'pastImgContent') {
|
|
|
+ target.draggable(false)
|
|
|
+ target.parent.draggable(true)
|
|
|
+ layer.add(tr)
|
|
|
+ tr.nodes([this.parent])
|
|
|
+ layer.draw()
|
|
|
} else if (target.attrs.name == 'pastTextContent' && target.className != 'text') {
|
|
|
target.draggable(false)
|
|
|
target.parent.draggable(true)
|
|
|
@@ -1847,7 +1987,7 @@ export default {
|
|
|
layer.draw()
|
|
|
target.draggable(false)
|
|
|
}
|
|
|
- if (this.parent) {
|
|
|
+ if (this.parent && target.attrs.name == 'pastTextContent') {
|
|
|
this.parent.on('transform', function(e) {
|
|
|
let tempText = e.target.children[1]
|
|
|
|
|
|
@@ -5231,6 +5371,19 @@ export default {
|
|
|
// this.renderText();
|
|
|
},
|
|
|
mounted() {
|
|
|
+ var _lsTotal = 0,
|
|
|
+ _xLen,
|
|
|
+ _x
|
|
|
+ for (_x in localStorage) {
|
|
|
+ if (!localStorage.hasOwnProperty(_x)) {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ _xLen = (localStorage[_x].length + _x.length) * 2
|
|
|
+ _lsTotal += _xLen
|
|
|
+ console.log(_x.substr(0, 50) + ' = ' + (_xLen / 1024).toFixed(2) + ' KB')
|
|
|
+ }
|
|
|
+ console.log('Total = ' + (_lsTotal / 1024).toFixed(2) + ' KB')
|
|
|
+
|
|
|
var editor = new E('#editor')
|
|
|
//editor.customConfig.onchange = (html) => {
|
|
|
// this.editorContent = html
|
