調整
This commit is contained in:
@@ -511,11 +511,11 @@
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
//console.log(response)
|
||||
//if (response.result=="Y") {
|
||||
if (response.status == "200") {
|
||||
let data = response.data;
|
||||
console.log("data:",data)
|
||||
//console.log("data:",data)
|
||||
if (data.result == "Y") {
|
||||
data.data.forEach(x => {
|
||||
self.tabletElements.push(x);
|
||||
@@ -826,9 +826,18 @@
|
||||
|
||||
createEl(el, slice) {
|
||||
let html = '';
|
||||
let fontSize = el.style.fontSize;
|
||||
// 1. 智慧名單渲染
|
||||
if (el.type === 'roster') {
|
||||
html = this.renderRoster(slice, el);
|
||||
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
let fontSize = Math.floor(rowWidth / 2);
|
||||
if (fontSize > el.style.fontSize) {
|
||||
fontSize = el.style.fontSize;
|
||||
rowWidth = fontSize * 2;
|
||||
}
|
||||
html = this.renderRoster(slice, el, rowWidth);
|
||||
}
|
||||
// 2. 正名合併置中
|
||||
else if (el.type === 'combined-center') {
|
||||
@@ -843,11 +852,27 @@
|
||||
html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
|
||||
}
|
||||
else if (el.id === 'title1') {
|
||||
html = this.renderNameList(slice, el);
|
||||
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
fontSize = Math.floor(rowWidth / 2);
|
||||
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
|
||||
if (fontSize > el.style.fontSize) {
|
||||
fontSize = el.style.fontSize;
|
||||
rowWidth = fontSize * 2;
|
||||
}
|
||||
html = this.renderNameList(slice, el, rowWidth);
|
||||
}
|
||||
else if (el.id === 'alive') {
|
||||
console.log("createEl:",slice,el)
|
||||
html = this.renderLiveList(slice, el);
|
||||
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
fontSize = Math.floor(rowWidth / 2);
|
||||
if (fontSize > el.style.fontSize) {
|
||||
fontSize = el.style.fontSize;
|
||||
rowWidth = fontSize * 2;
|
||||
}
|
||||
html = this.renderLiveList(slice, el, rowWidth);
|
||||
}
|
||||
else {
|
||||
html = el.text;
|
||||
@@ -855,12 +880,12 @@
|
||||
|
||||
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
|
||||
.css({
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
//position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
|
||||
})
|
||||
.html(html);
|
||||
},
|
||||
renderNameList(names, el) {
|
||||
renderNameList(names, el,rowWidth) {
|
||||
let $namelist = $(`<div class='nameList'></div>`).css({
|
||||
"writing-mode": "vertical rl",
|
||||
display: "flex",
|
||||
@@ -880,16 +905,16 @@
|
||||
//"row-gap": "1px",
|
||||
let self = this;
|
||||
names.forEach(n => {
|
||||
$namelist.append(self.renderNameSpan(n, el))
|
||||
$namelist.append(self.renderNameSpan(n, el,rowWidth))
|
||||
})
|
||||
return $namelist;
|
||||
},
|
||||
renderNameSpan(name, el) {
|
||||
renderNameSpan(name, el,rowWidth) {
|
||||
return $(`<span>${name}</span>`).css({
|
||||
display: "block",
|
||||
"min-height": `${el.textHeight}px`,
|
||||
"max-height": `${el.height}px`,
|
||||
width: `${el.textWidth}px`,
|
||||
width: `${rowWidth}px`,
|
||||
"text-align": "justify",
|
||||
"text-align-last": "justify",
|
||||
|
||||
@@ -897,8 +922,8 @@
|
||||
"text-justify": "inter-character",
|
||||
});// "margin-bottom": `${el.textSpan}px`,
|
||||
},
|
||||
renderLiveList(names, el) {
|
||||
console.log("renderLiveList:",names);
|
||||
renderLiveList(names, el,rowWidth) {
|
||||
//console.log("renderLiveList:",names);
|
||||
//$("#imp-text").updateActive("text",names)
|
||||
let $namelist = $(`<div class='liveList'></div>`).css({
|
||||
"writing-mode": "vertical rl",
|
||||
@@ -919,18 +944,17 @@
|
||||
//"row-gap": "1px",
|
||||
let self = this;
|
||||
names.forEach(n => {
|
||||
$namelist.append(self.renderLiveSpan(n, el))
|
||||
$namelist.append(self.renderLiveSpan(n, el,rowWidth))
|
||||
})
|
||||
return $namelist;
|
||||
},
|
||||
renderLiveSpan(name, el) {
|
||||
console.log("renderLiveSpan:", name, el
|
||||
);
|
||||
renderLiveSpan(name, el, rowWidth) {
|
||||
//console.log("renderLiveSpan:", name, el );
|
||||
return $(`<span>${name}</span>`).css({
|
||||
display: "block",
|
||||
"min-height": `${el.textHeight}px`,
|
||||
"max-height": `${el.height}px`,
|
||||
width: `${el.textWidth}px`,
|
||||
width: `${rowWidth}px`,
|
||||
"text-align": "justify",
|
||||
"text-align-last": "justify",
|
||||
|
||||
@@ -1000,9 +1024,9 @@
|
||||
},
|
||||
|
||||
select(id) {
|
||||
console.log("QQ:",id);
|
||||
//console.log("QQ:",id);
|
||||
this.activeId = id;
|
||||
console.log("QQ:",this.elements);
|
||||
//console.log("QQ:",this.elements);
|
||||
const el = this.elements.find(x => x.id === id);
|
||||
const el1 = this.elements.find(x => x.id === "titletriangle");
|
||||
$('#attr-box').removeClass('d-none');
|
||||
@@ -1024,7 +1048,7 @@
|
||||
},
|
||||
|
||||
updateActive(key, val) {
|
||||
console.log("updateActive:",key, val)
|
||||
//console.log("updateActive:",key, val)
|
||||
const el = this.elements.find(x => x.id === this.activeId);
|
||||
|
||||
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
|
||||
@@ -1042,7 +1066,7 @@
|
||||
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
|
||||
}).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
|
||||
} else if (el.type == "combined-center") {
|
||||
console.log("combined-center");
|
||||
//console.log("combined-center");
|
||||
|
||||
const parts = el.text.split('\n');
|
||||
html = `<div class="ancestor-wrapper" style='width:${el.width}px !important;height:${el.height}px !important' >
|
||||
@@ -1058,16 +1082,33 @@
|
||||
} else if (this.activeId === "title1") {
|
||||
let names = el.text.split('\n').filter(s => s.trim());
|
||||
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
|
||||
html = this.renderNameList(slice, el);
|
||||
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
let fontSize = Math.floor(rowWidth / 2);
|
||||
if (fontSize > el.style.fontSize) {
|
||||
fontSize = el.style.fontSize;
|
||||
rowWidth = fontSize * 2;
|
||||
}
|
||||
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
|
||||
html = this.renderNameList(slice, el, rowWidth);//el.style.fontSize
|
||||
$(`.tablet-element[id="${this.activeId}"]`).css({
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
}).html(html);
|
||||
} else if (this.activeId === "alive") {
|
||||
let names = el.text.split('\n').filter(s => s.trim());
|
||||
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
|
||||
html = this.renderLiveList(slice, el);
|
||||
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
let fontSize = Math.floor(rowWidth / 2);
|
||||
if (fontSize > el.style.fontSize) {
|
||||
fontSize = el.style.fontSize;
|
||||
rowWidth = fontSize * 2;
|
||||
}
|
||||
html = this.renderLiveList(slice, el, rowWidth);
|
||||
$(`.tablet-element[id="${this.activeId}"]`).css({
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||
}).html(html);
|
||||
} else if (this.activeId==="righttitle") {
|
||||
$(`.tablet-element[id="${this.activeId}"]`).css({
|
||||
@@ -1095,11 +1136,11 @@
|
||||
//this.render();
|
||||
},
|
||||
displayItem(id) {
|
||||
console.log("displayItem:", this.elements, id);
|
||||
//console.log("displayItem:", this.elements, id);
|
||||
let el = this.elements.find(x => x.id === id);
|
||||
el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
|
||||
//要判斷如果所在位置超出範圍,要拉回來放
|
||||
console.log("displayItem:", this.paper, el)
|
||||
//console.log("displayItem:", this.paper, el)
|
||||
if (el.x > this.paper.width) {
|
||||
el.x = this.paper.width/2
|
||||
}
|
||||
@@ -1197,7 +1238,7 @@
|
||||
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: 8,
|
||||
detail: detail
|
||||
}
|
||||
console.log(master);
|
||||
//console.log(master);
|
||||
let path = "SavDegignerData";
|
||||
if (this.styleID != null && this.styleID != "") {
|
||||
path = "UpdateDegignerData"
|
||||
|
||||
Reference in New Issue
Block a user