1731 lines
80 KiB
Plaintext
1731 lines
80 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="print_multi_new.aspx.cs" Inherits="admin_print_print_multi_new" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<link href="~/js/bootstrap5/bootstrap.min.css" rel="stylesheet" />
|
|
<%--<link href="~/js/fontawesome6/css/all.css" rel="stylesheet" />--%>
|
|
<link href="~/js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
<link href="~/js/vuetify_ez.css" rel="stylesheet" />
|
|
<link href="~/js/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
|
|
|
|
<link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
|
|
<link href="~/admin/item/css/floating.css" rel="stylesheet" />
|
|
<%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="customMenu" style="top: 20px; right: 10mm; width: 20vw; height: 90vh; position: fixed; background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<input type="radio" name="setup" id="indivualSetup" style="width: 30px; height: 30px;" checked="checked" />個別設定
|
|
<input type="radio" name="setup" id="allSetup" style="width: 30px; height: 30px;" />全域設定
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('X')" />
|
|
<label class="small" for="textX">X軸位置</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('Y')" />
|
|
<label class="small" for="textY">Y軸位置</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('fontSize')" />
|
|
<label class="small" for="fontSize">字體大小</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('width')" />
|
|
<label class="small" for="textWidth">物件寬度</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('height')" />
|
|
<label class="small" for="textHeight">物件高度</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="contentHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('textHeight')" />
|
|
<label class="small" for="contentHeight">文字高度</label>
|
|
</div>
|
|
</div>
|
|
<%-- <div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textBreakCount" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
|
|
<label class="small" for="textBreakCount">文字斷行(依字數)</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" id="textBreakWord" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
|
|
<label class="small" for="textBreakWord">文字斷行(依文字)</label>
|
|
</div>
|
|
</div>--%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="btn btn-primary no-print" id="printBtn" onclick="Printer.print()">列印</span>
|
|
<select id="paperSizeSel" onchange="Printer.render()">
|
|
<!-- onchange="Printer.render()"-->
|
|
<option value="">紙張尺寸</option>
|
|
</select>
|
|
<div class="d-flex full-home no-print" style="height: auto; width: 100%;">
|
|
<div id="printArea" class="printArea" style="width: auto; height: auto">
|
|
|
|
<%-- <div class="tablet-paper">
|
|
</div>--%>
|
|
<%-- </div>--%>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<form id="form1" runat="server">
|
|
</form>
|
|
<div class="position-fixed top-50 start-50 p-3" style="z-index: 10001">
|
|
<div id="liveToast" class="toast hide " role="alert" aria-live="assertive"
|
|
data-bs-delay="3000" aria-atomic="true"
|
|
style="color: white; background-color: dimgray; opacity: 1; font-size: 24px;">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">提示訊息</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body" id="toast_body">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/jquery-4.0.0.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/vue.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/vuetify.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/axios.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/moment.min.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/js/sweetalert2/sweetalert2.all.min.js") %>"></script>
|
|
<script src="<%=ResolveUrl("~/admin/Templates/TBS5ADM001/js/Script.js")%>"></script>
|
|
<script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
|
|
<script>
|
|
// 建立 MutationObserver 實例，並傳入 callback 函式
|
|
|
|
const Printer = {
|
|
selected: null,
|
|
http_host: "",
|
|
pageStyle: "",
|
|
pSize: "",
|
|
allStyle: [],
|
|
allSize: [],
|
|
allStyleDetails: [],
|
|
printData: [],
|
|
tabletElement: [],
|
|
observer: null,
|
|
isInit: true,
|
|
toast: null,
|
|
mode:"",
|
|
bg: [
|
|
{ name: "超薦1", path: "../../../admin/print/html/tablet-1_new.svg" },
|
|
{ name: "超薦2", path: "../../../admin/print/html/tablet-1B_new.svg" },
|
|
{ name: "消災1", path: "../../../admin/print/html/tablet-2.svg" },
|
|
{ name: "消災2", path: "../../../admin/print/html/tablet-2B.svg" },
|
|
{ name: "消災3", path: "../../admin/print/html/tablet-2C.svg" },
|
|
{ name: "消災4", path: "../../admin/print/html/tablet-2D.svg" }
|
|
],
|
|
async init() {
|
|
this.toast = new bootstrap.Toast($('#liveToast'));
|
|
let HTTP_HOST = "<%=UrlHost()%>";
|
|
this.http_host = HTTP_HOST;
|
|
|
|
//
|
|
Promise.all([
|
|
this.getActItem(),
|
|
this.getPaperSize(),
|
|
]).then(() => {
|
|
Promise.all([
|
|
this.getTabletElement(),
|
|
this.getTabletStyles(),
|
|
this.getAllStyleDetails(),
|
|
this.getData(),
|
|
|
|
]).then(() => {
|
|
this.render();
|
|
})
|
|
})
|
|
},
|
|
async getActItem() {
|
|
axios
|
|
.post('/api/tablet/GetActItem', { itemNum: localStorage.getItem("item") })
|
|
.then(response => {
|
|
if (response.data.result == "Y" && response.data.data) {
|
|
this.pSize = response.data.data.printSize;
|
|
$("#paperSizeSel").val(this.pSize);
|
|
} else {
|
|
$("#paperSizeSel").val("0001");
|
|
}
|
|
}
|
|
);
|
|
},
|
|
async getAllStyleDetails() {
|
|
await axios
|
|
.post(this.http_host + 'api/tablet/GetStyleDetailData', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
if (data.result == "Y") {
|
|
let details = data.data;
|
|
this.allStyleDetails = details;
|
|
}
|
|
}
|
|
}
|
|
);
|
|
},
|
|
async getPaperSize() {
|
|
let self = this
|
|
await axios
|
|
.post(this.http_host + 'api/tablet/GetPaperSize', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
this.allSize = data.data;
|
|
if (this.allSize) {
|
|
this.allSize.forEach(x => {
|
|
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
)
|
|
},
|
|
async getTabletElement() {
|
|
await axios
|
|
.post(this.http_host + 'api/tablet/GetTabletElement', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
this.tabletElement = data.data;
|
|
}
|
|
});
|
|
},
|
|
async getTabletStyles() {
|
|
await axios
|
|
.post(this.http_host + 'api/tablet/GetStyleData', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
this.allStyle = data.data;
|
|
}
|
|
});
|
|
},
|
|
async getData() {
|
|
let list = localStorage.getItem("list")
|
|
|
|
let param = [];
|
|
let data = JSON.parse(list)
|
|
data.forEach(x => {
|
|
param.push({ order_no: x.order_no, num: x.num });
|
|
});
|
|
await axios
|
|
.post(this.http_host + 'api/orderdetail/GetDetailToPrint', { param: param })
|
|
.then(response => {
|
|
|
|
if (response.status == 200) {
|
|
this.printData = response.data;
|
|
this.printData.sort(function (a,b) {
|
|
if (a.print_id < b.print_id) {
|
|
return -1
|
|
} else if (a.print_id > b.print_id) {
|
|
return 1
|
|
}
|
|
return 0
|
|
});
|
|
}
|
|
});
|
|
},
|
|
render() {
|
|
$("#printArea").empty();
|
|
let self = this;
|
|
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
|
|
let nowPageWidth = 0;
|
|
let tabletpaper;
|
|
//列印紙張的尺寸
|
|
if ($("#paperSizeSel").val() == "") {
|
|
if (this.pSize && this.pSize != undefined) {
|
|
$("#paperSizeSel").val(this.pSize);
|
|
} else {
|
|
$("#paperSizeSel").val("0001");
|
|
}
|
|
}
|
|
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
|
|
let wrap = $("<div class='row-wrapper'></div>")
|
|
let mode = "origin"
|
|
this.printData.forEach(x => {
|
|
let style = self.allStyle.find(y => y.styleID == x.style);
|
|
//用來印內容的尺寸
|
|
let size = self.allSize.find(y => y.paperID == style.paperSize);
|
|
//包含空白用來折的尺寸
|
|
let printSize = self.allSize.find(y => y.paperID == style.printSize);
|
|
|
|
let xCount = 1;
|
|
let yCount = 1;
|
|
mode = style.printMode
|
|
|
|
let total = 1;
|
|
if (style.printMode === "combine") {
|
|
//用長根寬算出一張紙可以印幾張
|
|
xCount=parseFloat(Number(pageSize.width)) / parseFloat(Number(size.width));
|
|
yCount=parseFloat(Number(pageSize.height)) / parseFloat(Number(size.height));
|
|
total=Math.floor(xCount) * Math.floor(yCount);
|
|
}
|
|
if (nowPageWidth >= total) {
|
|
$(wrap).append(tabletpaper);
|
|
if (style.printMode !== "combine") {
|
|
$(canvas).append(wrap);
|
|
$("#printArea").append(canvas);
|
|
wrap = $("<div class='row-wrapper'></div>")
|
|
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
|
|
}
|
|
nowPageWidth = 0;
|
|
}
|
|
nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
|
|
tabletpaper = $(` <div class="tablet-paper" >
|
|
</div>`)
|
|
let img = self.bg.find(y => y.name == style.backendImg);
|
|
|
|
let tablet = {}
|
|
try {
|
|
tablet = JSON.parse(x.f_num_tablet);
|
|
} catch (e) {
|
|
console.log(x.order_no,x.num,x.print_id,e);
|
|
return
|
|
}
|
|
|
|
let mid_items = tablet.mid_items;
|
|
let left_items = tablet.left_items;
|
|
let mid_left = tablet.mid_left;
|
|
let mid_right = tablet.mid_right;
|
|
let addr_items = tablet.addr_items;
|
|
|
|
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
|
|
let mid = [];
|
|
mid_items.forEach(y => {
|
|
mid.push(y.fam_name);
|
|
});
|
|
let left = []
|
|
if (left_items) {
|
|
left_items.forEach(y => {
|
|
left.push(y.fam_name);
|
|
});
|
|
}
|
|
let lefttitle = [];
|
|
if (mid_left) {
|
|
mid_left.forEach(y => {
|
|
lefttitle.push(y.fam_name);
|
|
});
|
|
}
|
|
let righttitle = [];
|
|
if (mid_right) {
|
|
mid_right.forEach(y => {
|
|
righttitle.push(y.fam_name);
|
|
});
|
|
}
|
|
let address = addr_items;
|
|
|
|
let ancestorFontSize = 16;
|
|
details.forEach(d => {
|
|
if (d.isActive != "hidden") {
|
|
let newFontSize =d.fontSize //self.scaleFontSize(mid, d.fontSize, d.width);
|
|
|
|
let html = "";
|
|
let alive = "";
|
|
let yang = "";
|
|
let bi = "";
|
|
if (d.elementID === 'title1') {
|
|
let h = Number(d.height);
|
|
let w = Number(d.width);
|
|
let th = Number(d.textHeight) || h;
|
|
let v_gap = Number(d.textSpan) || 0;
|
|
let h_gap = 5;
|
|
let shrinkLimit = 6;
|
|
|
|
if (h < 500) {
|
|
shrinkLimit = 8;
|
|
} else if (h < 300) {
|
|
shrinkLimit = 12;
|
|
}
|
|
|
|
let long_s = Number(d.fontSize);
|
|
let short_s = Number(d.fontSize);
|
|
|
|
if (h < 500 && mid.length == 1 && mid[0].includes("暨無始劫以來累世冤親債主")) {
|
|
mid = mid[0].split("暨");
|
|
mid[0] = mid[0] + "暨";
|
|
}
|
|
const init_fontSize = Number(d.fontSize) > 40 ? 40 : Number(d.fontSize);
|
|
//const init_size_px = init_fontSize * 1.333;
|
|
// 1. 初始判定與特例條件計算
|
|
let items = mid.map(name => {
|
|
let l = name.length;
|
|
//應該用初始最大值而不是40
|
|
let isShort = (l * init_fontSize) <= (th + (v_gap / 2));
|
|
return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
|
|
});
|
|
|
|
let maxShortLen = Math.max(...items.filter(x => x.isShort).map(x => x.l), 1);
|
|
|
|
let allShort = items.every(x => x.isShort);
|
|
console.log("全短名:",items,allShort);
|
|
|
|
// 🚀 動態防呆：不寫死字數！用「實際字體大小」計算是否放得進半高。
|
|
// 這樣 13 個字會自動出局，而 3 個字的小牌位絕對能穩穩過關。
|
|
let fitsInHalf = items.every(x => (x.l * short_s * 1.333) <= (h / 2));
|
|
|
|
let isSpecial1 = allShort && fitsInHalf && items.length === 1;
|
|
let isSpecial2 = allShort && fitsInHalf && items.length === 2;
|
|
let isSpecial4 = allShort && fitsInHalf && (items.length === 4 || items.length===6||items.length===8);
|
|
let isSpecial = isSpecial1 || isSpecial2 || isSpecial4;
|
|
|
|
let sizes = [];
|
|
let shrink_turn = 'long';
|
|
|
|
// 2. 模擬排版與字體縮放運算
|
|
while (true) {
|
|
let totalWidth = 0;
|
|
let current_col_h = 0;
|
|
let current_col_w = 0;
|
|
let cols_width = [];
|
|
let any_wrapped = false;
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
let item = items[i];
|
|
let s = item.isShort ? short_s : long_s;
|
|
item.size = s;
|
|
let size_px = s * 1.333;
|
|
|
|
if (item.isShort) {
|
|
let item_h = Math.max(th, maxShortLen * size_px);
|
|
|
|
// 壓縮高度釋放空間 (支援反向放大字體)
|
|
if (isSpecial) {
|
|
if (isSpecial1 || isSpecial2) item_h = h / 2;
|
|
if (isSpecial4) item_h = (h / 2) - (v_gap )-2;
|
|
} else {
|
|
let natural_h = maxShortLen * size_px;
|
|
if (item_h > natural_h * 1.5) {
|
|
item_h = natural_h * 1.5;
|
|
}
|
|
}
|
|
|
|
if (current_col_h === 0) {
|
|
current_col_h = item_h;
|
|
current_col_w = size_px;
|
|
} else if ((current_col_h + v_gap + item_h) <= h) {
|
|
current_col_h += (v_gap + item_h);
|
|
if (size_px > current_col_w) current_col_w = size_px;
|
|
} else {
|
|
cols_width.push(current_col_w);
|
|
current_col_h = item_h;
|
|
current_col_w = size_px;
|
|
}
|
|
} else {
|
|
if (current_col_h > 0) {
|
|
cols_width.push(current_col_w);
|
|
current_col_h = 0;
|
|
current_col_w = 0;
|
|
}
|
|
|
|
let item_w = size_px;
|
|
|
|
if ((item.l * size_px) > (h - 10)) {
|
|
item.isMulti = true;
|
|
any_wrapped = true;
|
|
|
|
let chars_per_col = Math.floor((h - 10) / size_px);
|
|
if (chars_per_col < 1) chars_per_col = 1;
|
|
let item_cols = Math.ceil(item.l / chars_per_col);
|
|
item_w = item_cols * (size_px * 1.1);
|
|
} else {
|
|
item.isMulti = false;
|
|
}
|
|
|
|
cols_width.push(item_w);
|
|
}
|
|
}
|
|
|
|
if (current_col_h > 0) cols_width.push(current_col_w);
|
|
|
|
totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
|
|
|
|
if (totalWidth <= w && (!any_wrapped || long_s === shrinkLimit)) {
|
|
sizes = items.map(x => {
|
|
let final_s = x.size;
|
|
if (x.isShort) {
|
|
//let max_s_for_th = Math.floor(th / (maxShortLen * 1.333));
|
|
//if (final_s > max_s_for_th) {
|
|
// final_s = max_s_for_th;
|
|
//}
|
|
// 🚀 關鍵修正：依照是否為特例，賦予實際可用的高度上限，解除原先 th 造成的字體壓抑
|
|
let available_h = th;
|
|
if (isSpecial) {
|
|
if (isSpecial1 || isSpecial2) available_h = h / 2;
|
|
if (isSpecial4) available_h = (h / 2) - v_gap - 2;
|
|
}
|
|
let max_s_for_th = Math.floor(available_h / (maxShortLen * 1.333));
|
|
|
|
if (final_s > max_s_for_th) {
|
|
final_s = max_s_for_th;
|
|
}
|
|
}
|
|
return { name: x.name, size: final_s, isMulti: x.isMulti, isShort: x.isShort };
|
|
});
|
|
break;
|
|
}
|
|
|
|
let hasLong = items.some(x => !x.isShort);
|
|
let hasShort = items.some(x => x.isShort);
|
|
|
|
if (hasLong && hasShort) {
|
|
if (shrink_turn === 'long') {
|
|
if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
|
|
else if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
|
|
else break;
|
|
} else {
|
|
if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
|
|
else if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
|
|
else break;
|
|
}
|
|
} else if (hasLong) {
|
|
if (long_s > shrinkLimit) long_s--;
|
|
else break;
|
|
} else {
|
|
if (short_s > shrinkLimit) short_s--;
|
|
else break;
|
|
}
|
|
}
|
|
|
|
if (sizes.length === 0) {
|
|
sizes = mid.map(name => {
|
|
return { name: name, size: shrinkLimit, isMulti: false, isShort: true };
|
|
});
|
|
}
|
|
|
|
// 3. 建立外層 Flexbox 容器
|
|
let flexDir = isSpecial2 ? "column" : "row";
|
|
let flexJustify = isSpecial ? "center" : "flex-start";
|
|
let flexAlign = "center";
|
|
//if (isSpecial4) {
|
|
// v_gap=Number(h)/4
|
|
//}
|
|
|
|
let $namelist = $(`<div class='nameList'></div>`).css({
|
|
"writing-mode": "vertical-rl",
|
|
display: "flex",
|
|
"flex-direction": flexDir,
|
|
"flex-wrap": "wrap",
|
|
"align-content": "center",
|
|
"align-items": flexAlign,
|
|
"justify-content": flexJustify,
|
|
margin: "auto",
|
|
width: `${w}px`,
|
|
height: `${h}px`,
|
|
border: "0px solid transparent",
|
|
padding: "1px",
|
|
"column-gap": `${v_gap}px`,
|
|
"font-family": d.fontFamily
|
|
});
|
|
// 4. 渲染單一名稱
|
|
sizes.forEach(item => {
|
|
let size_px = item.size * 1.333;
|
|
|
|
// 🚀 關鍵修正：統一使用 maxShortLen 算出標準高度，保證所有短名字的「格子」一模一樣大！
|
|
let natural_max_h = maxShortLen * size_px;
|
|
let boxH_num = item.isShort ? Math.max(th, natural_max_h) : h;
|
|
|
|
if (isSpecial) {
|
|
if (isSpecial1 || isSpecial2) boxH_num = h / 2;
|
|
if (isSpecial4) boxH_num = (h / 2) - (v_gap ) - 2;
|
|
} else if (item.isShort) {
|
|
// 壓縮高度釋放空間時，同樣以統一的標準高度來判定
|
|
if (boxH_num > natural_max_h * 1.5) {
|
|
boxH_num = natural_max_h * 1.5;
|
|
}
|
|
}
|
|
|
|
let minH = `${boxH_num}px`;
|
|
let alignStyle = item.isMulti || (!item.isMulti && !item.isShort) ? "start" : "justify";
|
|
|
|
let spanDisplay = "block";
|
|
let spanJustifyContent = "flex-start";
|
|
|
|
// 🚀 新增：只針對單一短名賦予 1/4 的 margin-top
|
|
let spanMarginTop = "0px";
|
|
if (isSpecial1 || isSpecial2) {
|
|
spanMarginTop = `-${h / 4}px`;
|
|
}
|
|
|
|
if (isSpecial1 || isSpecial2 || isSpecial4) {
|
|
alignStyle = "justify";
|
|
spanJustifyContent = "space-between";
|
|
}
|
|
|
|
// 這裡依然保留各自的真實字數，只用來計算「字距」，不影響格子大小
|
|
let nameLen = item.name.length;
|
|
let contentH = nameLen * size_px;
|
|
let emptySpace = boxH_num - contentH;
|
|
let gapsCount = nameLen > 1 ? (nameLen - 1) : 1;
|
|
let avgGap = emptySpace / gapsCount;
|
|
|
|
// 防過度拉扯 (排除特例，保護單名/雙名的正常分散)
|
|
if (!isSpecial && alignStyle === "justify" && avgGap > (size_px * 1.5)) {
|
|
alignStyle = "justify";
|
|
spanDisplay = "block";
|
|
spanJustifyContent = "start";
|
|
}
|
|
|
|
let $span = $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
|
|
"display": spanDisplay,
|
|
"justify-content": spanJustifyContent,
|
|
"align-items": "center",
|
|
"min-height": minH,
|
|
"max-height": `${h}px`,
|
|
"width": "auto",
|
|
"line-height": "1.1",
|
|
"text-align": alignStyle,
|
|
"text-align-last": alignStyle,
|
|
"margin-left": "5px",
|
|
"margin-top": spanMarginTop, // 🚀 套用動態外距
|
|
"text-justify": "inter-character",
|
|
"word-break": "break-all"
|
|
});
|
|
|
|
$namelist.append($span);
|
|
});
|
|
|
|
html = $namelist;
|
|
} else if (d.elementID === "alive") {
|
|
|
|
html = self.renderLiveList(left, d);
|
|
} else if (d.elementID === "titletriangle") {
|
|
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
|
|
html = self.renderRoster(mid, d)
|
|
} else if (d.elementID === "combined") {
|
|
ancestorFontSize = d.fontSize;
|
|
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
|
|
const parts = mid.join("\n").split('\n');
|
|
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
|
|
<span class="main-name" >${parts[0] || ''}</span>
|
|
<span class="sub-text">${parts[1] || ''}</span>
|
|
</div>`;
|
|
} else if (d.elementID === "address") {
|
|
newFontSize = self.scaleFontSize(address, d.fontSize, d.height);
|
|
html = self.renderNormal(address, d)
|
|
} else if (d.elementID === "lefttitle") {
|
|
newFontSize = self.scaleFontSize(lefttitle, d.fontSize, d.height);
|
|
html = self.renderNormal(lefttitle, d)
|
|
}
|
|
else if (d.elementID === "righttitle") {
|
|
newFontSize = self.scaleFontSize(righttitle, d.fontSize, d.height);
|
|
html = self.renderNormal(righttitle, d)
|
|
}
|
|
if (newFontSize < 10) {
|
|
newFontSize = 10;
|
|
}
|
|
let content = $(`<div class="tablet-element vertical-text "></div>`)
|
|
.css({
|
|
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
|
|
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
|
|
"align-items": "center"
|
|
|
|
})
|
|
.html(html);
|
|
tabletpaper.append(content);
|
|
html = "";
|
|
alive = "";
|
|
yang = "";
|
|
bi = "";
|
|
}
|
|
|
|
})
|
|
let content = $(`<div class="tablet-element print_id "></div>`)
|
|
.css({
|
|
position: "absolute", right: "0mm", top: "-1mm", fontSize: '12px',
|
|
"z-index": 9999,
|
|
"align-items": "center"
|
|
|
|
})
|
|
.html(x.print_id);
|
|
tabletpaper.append(content);
|
|
let xFloor = Math.floor(xCount);
|
|
|
|
let totalPrWidth = printSize.width
|
|
|
|
|
|
if (xFloor > 1) {
|
|
totalPrWidth = Number(size.width) * Number(xFloor)+3
|
|
}
|
|
self.pageStyle = `<style id="pageStyle">
|
|
{
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
.vertical-text {
|
|
writing-mode: vertical-rl !important;
|
|
-webkit-writing-mode: vertical-rl !important;
|
|
text-orientation: mixed !important;
|
|
}
|
|
body{
|
|
overflow: visible !important;
|
|
}
|
|
|
|
@media print{
|
|
:host {
|
|
width:auto !important;
|
|
height:auto !important;
|
|
}
|
|
@page {
|
|
size:${pageSize.width}mm ${pageSize.height}mm !important;
|
|
margin:0;
|
|
}
|
|
html, body, form, .full-home, #printArea, .canvas-area {
|
|
height: auto !important;
|
|
width: auto !important;
|
|
overflow: visible !important; /*必須為 visible */
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
display: block !important;
|
|
}
|
|
.no-print, #customMenu {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.canvas-area{
|
|
display: block !important;//${xFloor > 1 ? 'block' : 'flex'}
|
|
font-size:0;
|
|
grid-template-columns: repeat(${xFloor},1fr);
|
|
flex-direction: row !important;
|
|
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;
|
|
align-items:center !important;
|
|
}
|
|
.row-wrapper{
|
|
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
|
|
margin: 20px 20px 0 20px; /* 關鍵：左右邊界一致置中 */
|
|
font-size: 0;
|
|
}
|
|
.tablet-paper {
|
|
position: relative !important;
|
|
display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
|
|
break-inline:avoid;
|
|
page-break-inline:avoid;
|
|
break-after: page !important;
|
|
page-break-after: always !important;
|
|
margin:2mm 1px 0 1px;
|
|
border: none !important;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tablet-element {
|
|
position: absolute !important;
|
|
white-space: normal;
|
|
color: black !important; /* 確保文字是黑色的 */
|
|
}
|
|
|
|
}
|
|
|
|
/* 名單金字塔佈局容器 */
|
|
.roster-container {
|
|
width: 100%; height: 100%;
|
|
writing-mode: vertical-rl; /* 直書 */
|
|
display: flex;
|
|
flex-direction: row; /* 上下分層 (Top / Bottom) */
|
|
align-items: center; /* 左右置中對齊 */
|
|
justify-content: center;
|
|
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
|
|
}
|
|
|
|
.roster-row {
|
|
display: flex;
|
|
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
|
|
justify-content: center;
|
|
gap: 8px; /* 名字之間的間距 */
|
|
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
|
|
}
|
|
|
|
.name-group {
|
|
display: flex;
|
|
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* gap 由 HTML 動態綁定 */
|
|
}
|
|
|
|
.roster-name {
|
|
text-orientation: upright;
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
font-family: DFKai-sb;
|
|
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
|
|
width: fit-content;
|
|
}
|
|
|
|
/* 【修復底圖沒出現】強制印出背景設定 */
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
.ancestor-wrapper {
|
|
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
|
|
writing-mode: horizontal-tb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* 水平置中 */
|
|
justify-content: felx-start;
|
|
width: fit-content;
|
|
}
|
|
|
|
.main-name {
|
|
line-height: 1.2;
|
|
/* 保持大字 */
|
|
}
|
|
|
|
.sub-text {
|
|
line-height: 1.2;
|
|
margin-top: 4px; /* 與上方林張的間距 */
|
|
white-space: normal; /* 避免自動換行 */
|
|
writing-mode:vertical-rl
|
|
}
|
|
|
|
.canvas-area{
|
|
width: ${pageSize.width}mm;
|
|
height: ${pageSize.height}mm;
|
|
font-size:0;
|
|
break-after: page;
|
|
page-break-after: always;
|
|
display:${xFloor > 1 ? 'block' : 'flex'} !important;
|
|
grid-template-columns: repeat(${xFloor},1fr);
|
|
|
|
}
|
|
.row-wrapper{
|
|
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
|
|
margin: 20px 20px 0 20px; /* 關鍵：左右邊界一致置中 */
|
|
font-size: 0;
|
|
}
|
|
.tablet-paper{
|
|
background-color: white;
|
|
display: inline-block;
|
|
width: ${size.width}mm !important;
|
|
height: ${size.height}mm !important;
|
|
position: relative;
|
|
margin: 2mm 1px 0 1px;
|
|
background-image: url(${img.path});
|
|
background-size: 100% 100%;
|
|
break-inline:avoid;
|
|
page-break-inline:avoid;
|
|
}
|
|
.tablet-element {
|
|
cursor: move;
|
|
padding: 4px;
|
|
color: black !important; /* 強制墨水為黑色 */
|
|
border: 1px solid transparent;
|
|
transition: writing-mode 0.3s, transform 0.2s;
|
|
}
|
|
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
|
.tablet-paper:last-child { page-break-after: auto; }
|
|
|
|
.tablet-element span{
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
`
|
|
$("#pageStyle").remove();
|
|
$("head").append(self.pageStyle);
|
|
|
|
$(wrap).append(tabletpaper);
|
|
if (style.printMode !== "combine") {
|
|
$(canvas).append(wrap);
|
|
$("#printArea").append(canvas);
|
|
// wrap = $("<div class='row-wrapper'></div>")
|
|
}
|
|
//$(canvas).append(wrap);
|
|
//$(canvas).append(tabletpaper);
|
|
//$(canvas).css("width", printSize.width + "mm");
|
|
//$(canvas).css("height", printSize.height + "mm");
|
|
//$(canvas).css("justify-content", "center");
|
|
//$("#printArea").append(canvas);
|
|
});
|
|
if (mode === "combine") {
|
|
$(canvas).append(wrap);
|
|
$("#printArea").append(canvas);
|
|
}
|
|
|
|
$(".tablet-element").on("contextmenu", function (e) {
|
|
e.preventDefault();
|
|
self.selected = $(this);
|
|
let fontSize = $(this).css("font-size");
|
|
let fontFamily = $(this).css("font-family");
|
|
|
|
let textWidth;//= $(this).css("width");//find("span").first().css("width");
|
|
let textHeight; //= $(this).css("height");
|
|
if ($(this).find(".nameList").first().hasClass("nameList")) {
|
|
textWidth = $(this).find(".nameList").first().css("width");
|
|
textHeight = $(this).find(".nameList").first().css("height");
|
|
} else if ($(this).find(".liveList").first().hasClass("liveList")) {
|
|
textWidth = $(this).find(".liveList").first().css("width");
|
|
textHeight = $(this).find(".liveList").first().css("height");
|
|
} else if ($(this).find(".rosterList").first().hasClass("rosterList")) {
|
|
textWidth = $(this).find(".rosterList").first().css("width");
|
|
textHeight = $(this).find(".rosterList").first().css("height");
|
|
} else if ($(this).find(".ancestor-wrapper").first().hasClass("ancestor-wrapper")) {
|
|
textWidth = $(this).find(".ancestor-wrapper").first().css("width");
|
|
textHeight = $(this).find(".ancestor-wrapper").first().css("height");
|
|
}
|
|
|
|
let left = $(this).css("left");
|
|
let top = $(this).css("top");
|
|
|
|
left = left.replace("px", "");
|
|
top = top.replace("px", "");
|
|
$("#textX").val(self.fix2(left * 0.265));
|
|
$("#textY").val(self.fix2(top * 0.265));
|
|
$("#fontSize").val(fontSize);
|
|
$("#textWidth").val(textWidth);
|
|
$("#textHeight").val(textHeight);
|
|
$("#textX").prop("readonly", false);
|
|
$("#textY").prop("readonly", false);
|
|
$("#fontSize").prop("readonly", false);
|
|
$("#textWidth").prop("readonly", false);
|
|
$("#textHeight").prop("readonly", false);
|
|
$("#textBreakCount").prop("readonly", true);
|
|
$("#textBreakWord").prop("readonly", true);
|
|
});
|
|
|
|
$(".tablet-element span").on("click", function (e) {
|
|
e.preventDefault();
|
|
self.selected = $(this);
|
|
let fontSize = $(this).css("font-size");
|
|
let fontFamily = $(this).css("font-family");
|
|
let textWidth = $(this).css("max-width");
|
|
let textHeight = $(this).css("min-height");
|
|
if ($(this).hasClass("liveSpan") || $(this).hasClass("nameSpan") || $(this).hasClass("rosterSpan")) {
|
|
textWidth = $(this).css("width");
|
|
textHeight = $(this).css("height");
|
|
fontSize = $(this).css("font-size");
|
|
} else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
|
|
textWidth = "";
|
|
textHeight = "";
|
|
}
|
|
|
|
let left = $(this).css("left");
|
|
let top = $(this).css("top");
|
|
left = left.replace("px", "");
|
|
top = top.replace("px", "");
|
|
$("#textX").val("");
|
|
$("#textY").val("");
|
|
$("#fontSize").val("");
|
|
$("#textWidth").val(textWidth);
|
|
$("#textHeight").val(textHeight);
|
|
let parentElement = this.parentElement;
|
|
if ($(parentElement).hasClass("nameList") || $(parentElement).hasClass("liveList") ||
|
|
$(parentElement).hasClass("rosterList")) {
|
|
$("#textX").prop("readonly", true);
|
|
$("#textY").prop("readonly", true);
|
|
$("#fontSize").prop("readonly", true);
|
|
} else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
|
|
$("#textX").prop("readonly", true);
|
|
$("#textY").prop("readonly", true);
|
|
$("#fontSize").prop("readonly", true);
|
|
$("#textWidth").prop("readonly", true);
|
|
$("#textHeight").prop("readonly", true);
|
|
} else if ($(parentElement).hasClass("print_id") ){
|
|
$("#textX").prop("readonly", false);
|
|
$("#textY").prop("readonly", false);
|
|
$("#fontSize").prop("readonly", false);
|
|
$("#textWidth").prop("readonly", false);
|
|
$("#textHeight").prop("readonly", false);
|
|
$("#textBreakCount").prop("readonly", true);
|
|
$("#textBreakWord").prop("readonly", true);
|
|
}
|
|
|
|
});
|
|
|
|
$(".tablet-element .rosterspan").on("click", function (e) {
|
|
$("#toast_body").html("此格式不提供單項物件修改");
|
|
self.toast.show();
|
|
});
|
|
|
|
|
|
|
|
},
|
|
fix2(val) {
|
|
return Number.parseFloat(val).toFixed(2);
|
|
},
|
|
countFontSize(name, el, fontSize, rows) {
|
|
if (Number(name.length) * 2 * Number(fontSize) > el.height) {
|
|
fontSize = Number(fontSize) - 2;
|
|
rows = rows + 1;
|
|
let rowWidth = Math.floor(Number(el.width) / rows);
|
|
fontSize = Math.floor(rowWidth / 2);
|
|
|
|
// 取得遞迴後最終適合的字體大小
|
|
let finalSize = this.countFontSize(name, el, fontSize, rows);
|
|
|
|
// 若遞迴底層回傳 0 (代表沒再超過高度)，則回傳當下計算出的 fontSize
|
|
return finalSize === 0 ? fontSize : finalSize;
|
|
}
|
|
return 0; // 若原本就沒超過高度，回傳 0 表示不需要縮放
|
|
},
|
|
calcIndividualFontSize(name, el, maxW) {
|
|
let s = Number(el.style ? el.style.fontSize : (el.fontSize ? el.fontSize : 18));
|
|
let maxH = Number(el.textHeight); // 限制在單一名字預設的區塊高度內
|
|
let l = Number(name.length);
|
|
|
|
while (s >= 12) {
|
|
let s_px = s * 1.333; // 將 pt 轉換為 px
|
|
|
|
|
|
// 如果單行高度夠放，直接回傳當下大小 (不會過度縮小)
|
|
//if (l * s_px <= maxH) {
|
|
// return s;
|
|
//}
|
|
|
|
// 單行放不下，模擬多行折疊後的總寬度
|
|
let charsPerCol = Math.floor(maxH / s_px);
|
|
if (charsPerCol < 1) charsPerCol = 1;
|
|
|
|
let cols = Math.ceil(l / charsPerCol);
|
|
let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1); // 1.1 為緊密行高
|
|
|
|
// 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
|
|
if (neededWidth <= maxW && (cols > 1 || l * s_px <= maxH)) {
|
|
return s;
|
|
}
|
|
s -= 1; // 否則繼續縮小 1pt
|
|
}
|
|
return 12; // 極限最小字體
|
|
},
|
|
renderLiveList(names, el) {
|
|
let h = parseFloat(el.height);
|
|
let w = parseFloat(el.width);
|
|
let th = parseFloat(el.textHeight) || h;
|
|
|
|
let v_gap = parseFloat(el.textSpan) || 0;
|
|
let h_gap = 5;
|
|
let shrinkLimit = 4;
|
|
if (Number(el.height) < 300) {
|
|
shrinkLimit = 8;
|
|
} else if (Number(el.height) < 500) {
|
|
shrinkLimit = 6;
|
|
}
|
|
let s = parseFloat(el.fontSize);
|
|
if (names.length == 2) {
|
|
h = th + v_gap;
|
|
}
|
|
|
|
// 🚀 新增：取得這批名單的最大字數，確保所有格子高度統一
|
|
let maxLen = Math.max(...names.map(x => x.length), 1);
|
|
|
|
while (s >= shrinkLimit) {
|
|
let size_px = s * 1.333;
|
|
let current_col_h = 0;
|
|
let current_col_w = 0;
|
|
let cols_width = [];
|
|
let any_wrapped = false;
|
|
|
|
for (let i = 0; i < names.length; i++) {
|
|
let l = names[i].length;
|
|
|
|
// 🚀 修正：排版預測時，統一使用最大字數來計算所需高度
|
|
let natural_max_h = maxLen * size_px;
|
|
let item_h = Math.max(th, natural_max_h);
|
|
|
|
if (item_h > natural_max_h * 1.5) {
|
|
item_h = natural_max_h * 1.5;
|
|
}
|
|
|
|
if (item_h > (h - 5)) {
|
|
any_wrapped = true;
|
|
if (current_col_h > 0) {
|
|
cols_width.push(current_col_w);
|
|
current_col_h = 0;
|
|
current_col_w = 0;
|
|
}
|
|
let chars_per_col = Math.floor((h - 5) / size_px);
|
|
if (chars_per_col < 1) chars_per_col = 1;
|
|
let item_cols = Math.ceil(l / chars_per_col);
|
|
cols_width.push(item_cols * (size_px * 1.1));
|
|
} else {
|
|
if (current_col_h === 0) {
|
|
current_col_h = item_h;
|
|
current_col_w = size_px;
|
|
} else if (current_col_h + v_gap + item_h <= h) {
|
|
current_col_h += v_gap + item_h;
|
|
if (size_px > current_col_w) current_col_w = size_px;
|
|
} else {
|
|
cols_width.push(current_col_w);
|
|
current_col_h = item_h;
|
|
current_col_w = size_px;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (current_col_h > 0) cols_width.push(current_col_w);
|
|
|
|
let totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
|
|
|
|
if (totalWidth <= w && (!any_wrapped || s === shrinkLimit)) {
|
|
break;
|
|
}
|
|
|
|
s -= 1;
|
|
}
|
|
|
|
if (s < shrinkLimit) s = shrinkLimit;
|
|
|
|
let $namelist = $(`<div class='liveList'></div>`).css({
|
|
"writing-mode": "vertical-rl",
|
|
"display": "flex",
|
|
"flex-flow": "wrap",
|
|
"align-content": "center",
|
|
"align-items": "center",
|
|
"margin": "auto",
|
|
"width": `${w}px`,
|
|
"height": `${h}px`,
|
|
"border": "0px solid transparent",
|
|
"padding": "0px",
|
|
"font-family": el.fontFamily,
|
|
"column-gap": `${v_gap}px`
|
|
});
|
|
|
|
let self = this;
|
|
names.forEach(name => {
|
|
// 🚀 將 maxLen 傳遞給渲染函式
|
|
$namelist.append(self.renderLiveSpan(name, el, s, maxLen));
|
|
});
|
|
return $namelist;
|
|
},
|
|
|
|
// 🚀 接收 maxLen 參數
|
|
renderLiveSpan(name, el, fontSize, maxLen = 1) {
|
|
let h = parseFloat(el.height);
|
|
let th = parseFloat(el.textHeight) || h;
|
|
let size_px = fontSize * 1.333;
|
|
let l = name.length;
|
|
|
|
let natural_max_h = maxLen * size_px;
|
|
let boxH_num = Math.max(th, natural_max_h);
|
|
|
|
if (boxH_num > natural_max_h * 1.5) {
|
|
boxH_num = natural_max_h * 1.5;
|
|
}
|
|
|
|
let minH = `${boxH_num}px`;
|
|
let alignStyle = "justify";
|
|
let spanDisplay = "block";
|
|
let spanJustifyContent = "flex-start";
|
|
|
|
let contentH = l * size_px;
|
|
let emptySpace = boxH_num - contentH;
|
|
let gapsCount = l > 1 ? (l - 1) : 1;
|
|
let avgGap = emptySpace / gapsCount;
|
|
|
|
// 🚀 關鍵修正：當陽上名字字距過大觸發防過度拉扯時，改為「靠上對齊 (start)」而不是置中 (center)
|
|
if (alignStyle === "justify" && avgGap > (size_px * 1.5)) {
|
|
alignStyle = "justify"; // 改為靠上，讓字首切齊
|
|
spanDisplay = "block";
|
|
spanJustifyContent = "space-between"; // Flex 靠上
|
|
}
|
|
|
|
return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
|
|
"display": spanDisplay,
|
|
"justify-content": spanJustifyContent,
|
|
"align-items": "center",
|
|
"min-height": minH,
|
|
"max-height": `${h}px`,
|
|
"width": "auto",
|
|
"text-align": alignStyle,
|
|
"text-align-last": alignStyle,
|
|
"margin-left": "0px",
|
|
"margin-top": "0px",
|
|
"text-justify": "inter-character",
|
|
"word-break": "break-all",
|
|
"white-space": "pre-line"
|
|
});
|
|
},
|
|
//renderLiveList(names, el) {
|
|
// let h = parseFloat(el.height);
|
|
// let w = parseFloat(el.width);
|
|
// let th = parseFloat(el.textHeight) || h;
|
|
// let h_gap = parseFloat(el.textSpan) || 0; // 陽上的 textSpan 通常作為水平欄距 (column-gap)
|
|
// let v_gap = 0; // 陽上通常不需要垂直間距
|
|
|
|
// let s = parseFloat(el.fontSize);
|
|
|
|
// // 🌟 預測排版與縮小迴圈：同時嚴格檢查「高度」與「寬度」
|
|
// while (s >= 6) {
|
|
// let size_px = s * 1.333;
|
|
// let cols = 0;
|
|
// let current_col_h = 0;
|
|
// let out_of_height = false; // 監測是否捅破天花板
|
|
|
|
// for (let i = 0; i < names.length; i++) {
|
|
// let name = names[i];
|
|
// let l = name.length;
|
|
|
|
// // 實際佔用高度：最少為 th，字多則以實際字數乘上字級
|
|
// let item_h = Math.max(th, l * size_px);
|
|
|
|
// // 1. 如果單一名字的長度直接超過總高度 h，判定失敗，強制縮小！
|
|
// if (item_h > h) {
|
|
// out_of_height = true;
|
|
// break;
|
|
// }
|
|
|
|
// // 2. 模擬 Flexbox 垂直堆疊
|
|
// if (current_col_h === 0) {
|
|
// current_col_h = item_h;
|
|
// cols++;
|
|
// } else if (current_col_h + v_gap + item_h <= h) {
|
|
// current_col_h += v_gap + item_h; // 高度夠，疊在同一行
|
|
// } else {
|
|
// cols++; // 高度不夠，換下一行
|
|
// current_col_h = item_h;
|
|
// }
|
|
// }
|
|
|
|
// // 如果發現高度爆表，扣減字體並重新測試
|
|
// if (out_of_height) {
|
|
// s -= 1;
|
|
// continue;
|
|
// }
|
|
|
|
// // 3. 檢查總寬度是否爆框
|
|
// let totalWidth = cols * size_px + (cols > 1 ? (cols - 1) * h_gap : 0);
|
|
// if (totalWidth <= w) {
|
|
// break; // 長寬都完美過關，結束縮小！
|
|
// }
|
|
|
|
// s -= 1;
|
|
// }
|
|
|
|
// if (s < 6) s = 6; // 最低底限保底
|
|
|
|
// let $namelist = $(`<div class='liveList'></div>`).css({
|
|
// "writing-mode": "vertical-rl",
|
|
// "display": "flex",
|
|
// "flex-flow": "wrap",
|
|
// "align-content": "center",
|
|
// "align-items": "center",
|
|
// "margin": "auto",
|
|
// "width": `${w}px`,
|
|
// "height": `${h}px`,
|
|
// "border": "0px solid transparent",
|
|
// "padding": "0px",
|
|
// "font-family": el.fontFamily,
|
|
// "column-gap": `${h_gap}px`
|
|
// });
|
|
|
|
// let self = this;
|
|
// names.forEach(name => {
|
|
// $namelist.append(self.renderLiveSpan(name, el, s));
|
|
// });
|
|
// return $namelist;
|
|
//},
|
|
|
|
//renderLiveSpan(name, el, fontSize) {
|
|
// let h = parseFloat(el.height);
|
|
// let th = parseFloat(el.textHeight) || h;
|
|
|
|
// return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
|
|
// "display": "block",
|
|
// "min-height": `${th}px`, // 統一給予基礎高度
|
|
// "max-height": `${h}px`,
|
|
// "width": "auto",
|
|
// "text-align": "justify",
|
|
// "text-align-last": "justify",
|
|
// "text-justify": "inter-character",
|
|
// "word-break": "break-all",
|
|
// "white-space": "pre-line"
|
|
// });
|
|
//},
|
|
|
|
//renderLiveList(names, el) {
|
|
|
|
// let h = Number(el.height);
|
|
// let w = Number(el.width);
|
|
// let th = Number(el.textHeight) || h;
|
|
|
|
// // 1. 單純計算總共有幾行 (列)
|
|
// let namesPerCol = Math.floor(h / th);
|
|
// if (namesPerCol < 1) namesPerCol = 1;
|
|
|
|
// let cols = Math.ceil(names.length / namesPerCol); // 總行數
|
|
|
|
// // 2. 根據行數，縮小字體直到總寬度放得下
|
|
// let s = Number(el.fontSize);
|
|
// while (s >= 4) {
|
|
// let s_px = s * (4 / 3); // pt 轉 px
|
|
// let lh = 1.1; // 行高
|
|
// let gap = 0; // 對應 span 的 margin-left
|
|
|
|
// // 總寬度 = 總行數 * (單行像素寬度 + 間距)
|
|
// let totalWidth = cols * (s_px * lh + gap);
|
|
|
|
// // 放得下就停止縮小
|
|
// if (totalWidth <= w) {
|
|
// break;
|
|
// }
|
|
// s -= 1;
|
|
// }
|
|
|
|
// if (s < 4) s = 4;
|
|
|
|
// // 3. 建立外層 Flexbox 容器
|
|
// let $namelist = $(`<div class='liveList'></div>`).css({
|
|
// "writing-mode": "vertical-rl",
|
|
// display: "flex",
|
|
// "flex-direction": "row",
|
|
// "flex-wrap": "wrap",
|
|
// "align-content": "center",
|
|
// "align-items": "center",
|
|
// margin: "auto",
|
|
// width: `${w}px`,
|
|
// height: `${h}px`,
|
|
// border: "0px solid #ccc",
|
|
// padding: "0px",
|
|
// "font-family": el.fontFamily,
|
|
// "column-gap": `${el.textSpan}px`,
|
|
// });
|
|
|
|
// let self = this;
|
|
// names.forEach(name => {
|
|
// $namelist.append(self.renderLiveSpan(name, el, s));
|
|
// });
|
|
// return $namelist;
|
|
//},
|
|
//renderLiveSpan(name, el, fontSize) {
|
|
// let th = Number(el.textHeight) || Number(el.height);
|
|
|
|
// return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
|
|
// display: "block",
|
|
// "min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
|
|
// "max-height": `${el.height}px`,
|
|
// width: "auto",//`${fontSize*1.33}`,
|
|
// "text-align": "justify", // 統一分散對齊
|
|
// "text-align-last": "justify",
|
|
// "text-justify": "inter-character",
|
|
// "word-break": "break-all",
|
|
// "white-space": "pre-line"
|
|
// });
|
|
//},
|
|
// 品字佈局邏輯：一上二下
|
|
renderRoster(names, el) {
|
|
if (!names.length) return '';
|
|
const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
|
|
const top = names.slice(0, mid);
|
|
const bot = names.slice(mid);
|
|
const size = this.autoScale(names, el.fontSize);
|
|
|
|
let h = $(`<div class="rosterList"></div>`).css(
|
|
{
|
|
width: el.width, height: el.height,
|
|
"writing-mode": "vertical-rl", /* 直書 */
|
|
display: "flex",
|
|
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
|
|
"align-items": "center", /* 左右置中對齊 */
|
|
"justify-content": "start",
|
|
gap: "20px",
|
|
});
|
|
h.append(this.renderNameGroups(top, el));
|
|
if (bot.length) h.append(this.renderNameGroups(bot, el));
|
|
return h
|
|
},
|
|
renderNameGroups(items, el) {
|
|
let g = $(`<div class="rosterspan"></div>`).css({
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"justify-content": "center",
|
|
"height": el.textHeight,
|
|
"white-space": "pre-line"
|
|
})
|
|
items.forEach(x => {
|
|
g.append($(`<div class="" style="letter-spacing: 10px;text-align: justify; text-align-last: justify;">${x}</div>`))
|
|
})
|
|
return g;
|
|
},
|
|
renderNormal(mid, d) {
|
|
let self = this;
|
|
let txt = $(`<div class='${d.elementID}'>${mid==undefined?"":mid}</div>`).css({
|
|
"z-index": 9999, visibility: d.visibility,
|
|
width: d.width, height: d.height
|
|
});
|
|
return txt;
|
|
},
|
|
autoScale(names, base) {
|
|
const max = Math.max(...names.map(n => n.length), 0);
|
|
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
|
|
},
|
|
getTextInfo(text, font) {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
context.font = font;
|
|
const metrics = context.measureText(text);
|
|
return metrics
|
|
},
|
|
getTextWidth(text, font) {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
context.font = font;
|
|
const metrics = context.measureText(text);
|
|
|
|
return metrics;
|
|
},
|
|
getTextSize(txt, fontsize) {
|
|
let span = document.createElement("span");
|
|
span.style.visibility = "hidden";
|
|
span.style.position = "absolute";
|
|
span.style.fontSize = fontsize + "px";
|
|
span.style.fontFamily = "";
|
|
span.innerText = txt;
|
|
document.body.appendChild(span);
|
|
let result = {
|
|
width: span.offsetWidth,
|
|
height: span.offsetHeight
|
|
}
|
|
document.body.removeChild(span);
|
|
return result;
|
|
},
|
|
scaleFontSize(txtContent, fontSize, elementWidth) {
|
|
|
|
let font = this.getTextSize("講", parseInt(fontSize));
|
|
//自動判斷縮小字型的規則,要同時縮小間距
|
|
if (Math.ceil(txtContent.length * fontSize * (4 / 3) * 1.1) > Number(elementWidth)) {
|
|
let newfontSize = Number(fontSize) - 1;
|
|
if (newfontSize <= 10) {
|
|
return newfontSize;
|
|
}
|
|
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
|
|
}
|
|
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
|
|
//if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
|
|
// let newfontSize = parseInt(fontSize) - 1;
|
|
// if (newfontSize <= 10) {
|
|
// return newfontSize;
|
|
// }
|
|
// return this.scaleFontSize(txtContent, newfontSize, elementWidth);
|
|
//}
|
|
return fontSize;
|
|
},
|
|
breakWord(txtContent, style, dStyle) {
|
|
//自動判斷斷字
|
|
//1. by 特定字 2.by長度
|
|
|
|
},
|
|
async changeSetup(config) {
|
|
|
|
let classList = ["liveList", "nameList", "address", "ancestor-wrapper", "lefttitle", "righttitle", "rosterList", "print_id"]
|
|
switch (config) {
|
|
case "X":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
$(this.selected).css("left", $("#textX").val() + "mm");
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
classList.forEach(w => {
|
|
|
|
if ($(this.selected.children()).first().hasClass(w)) {
|
|
$(`.${w}`).parent().each((index, y) => {
|
|
$(y).css("left", $("#textX").val() + "mm")
|
|
})
|
|
} else if ($(this.selected.hasClass(w))) {
|
|
$(`.${w}`).each((index, y) => {
|
|
$(y).css("left", $("#textX").val() + "mm")
|
|
})
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
case "Y":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
$(this.selected).css("top", $("#textY").val() + "mm");
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
classList.forEach(w => {
|
|
if ($(this.selected.children()).first().hasClass(w)) {
|
|
$(`.${w}`).parent().each((index, y) => {
|
|
$(y).css("top", $("#textY").val() + "mm")
|
|
})
|
|
} else if ($(this.selected.hasClass(w))) {
|
|
$(`.${w}`).each((index, y) => {
|
|
$(y).css("top", $("#textY").val() + "mm")
|
|
})
|
|
}
|
|
});
|
|
|
|
}
|
|
break;
|
|
case "fontSize":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
if (this.selected.find(".nameList").length >= 1) {
|
|
this.selected.find(".nameList").children().css("font-size", $("#fontSize").val())
|
|
} else {
|
|
$(this.selected).css("font-size", $("#fontSize").val())
|
|
}
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
if (this.selected.find(".liveList").length >= 1 || this.selected.find(".nameList").length >= 1 ||
|
|
this.selected.find(".rosterList").length >= 1) {
|
|
classList.forEach(w => {
|
|
if ($(this.selected.children()).first().hasClass(w)) {
|
|
$(`.${w}`).parent().each((index, y) => {
|
|
$(y).css("font-size", $("#fontSize").val())
|
|
})
|
|
}
|
|
});
|
|
} //else if (this.selected.hasClass("nameSpan")) {
|
|
else if (this.selected.find(".nameList").length >= 1) {
|
|
//$(".nameSpan").css("font-size", $("#fontSize").val())
|
|
document.querySelectorAll(".nameList > span").forEach(el => {
|
|
el.style.fontSize = $("#fontSize").val();
|
|
});
|
|
|
|
} else if (this.selected.hasClass("liveSpan")) {
|
|
$(".liveSpan").css("font-size", $("#fontSize").val())
|
|
} else if (this.selected.hasClass("rosterSpan")) {
|
|
$(".rosterSpan").css("font-size", $("#fontSize").val())
|
|
} else {
|
|
$("#toast_body").html("字體大小不可在全域中修改");
|
|
this.toast.show();
|
|
}
|
|
}
|
|
break;
|
|
case "width":
|
|
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
if (this.selected.find(".nameList").length >= 1) {
|
|
$(this.selected.find(".nameList").first()).css("width", $("#textWidth").val())
|
|
} else if (this.selected.find(".liveList").length >= 1) {
|
|
this.selected.find(".liveList").first().css("width", $("#textWidth").val())
|
|
} else if (this.selected.find(".rosterList").length >= 1) {
|
|
this.selected.find(".rosterList").first().css("width", $("#textWidth").val())
|
|
} else if (this.selected.hasClass("nameSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".nameSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("width", $("#textWidth").val());
|
|
});
|
|
} else if (this.selected.hasClass("liveSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".liveSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("width", $("#textWidth").val());
|
|
});
|
|
} else if (this.selected.hasClass("rosterSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".rosterSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("width", $("#textWidth").val());
|
|
});
|
|
}
|
|
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
if (this.selected.find(".liveList").length >= 1 || this.selected.find(".nameList").length >= 1 ||
|
|
this.selected.find(".rosterList").length >= 1) {
|
|
classList.forEach(w => {
|
|
if ($(this.selected.children()).first().hasClass(w)) {
|
|
$(`.${w}`).parent().each((index, y) => {
|
|
$(y).css("width", $("#textWidth").val())
|
|
})
|
|
}
|
|
});
|
|
} else if (this.selected.hasClass("nameSpan")) {
|
|
$(".nameSpan").css("width", $("#textWidth").val());
|
|
|
|
} else if (this.selected.hasClass("liveSpan")) {
|
|
$(".liveSpan").css("width", $("#textWidth").val());
|
|
} else if (this.selected.hasClass("rosterSpan")) {
|
|
$(".rosterSpan").css("width", $("#textWidth").val());
|
|
} else {
|
|
$("#toast_body").html("寬度不可在全域中修改");
|
|
this.toast.show();
|
|
}
|
|
}
|
|
break;
|
|
case "height":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
if (this.selected.find(".nameList").length >= 1) {
|
|
$(this.selected.find(".nameList").first()).css("height", $("#textHeight").val())
|
|
} else if (this.selected.find(".liveList").length >= 1) {
|
|
this.selected.find(".liveList").first().css("height", $("#textHeight").val())
|
|
} else if (this.selected.find(".rosterList").length >= 1) {
|
|
this.selected.find(".rosterList").first().css("height", $("#textHeight").val())
|
|
} else if (this.selected.hasClass("nameSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".nameSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("height", $("#textHeight").val());
|
|
});
|
|
} else if (this.selected.hasClass("liveSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".liveSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("min-height", $("#textHeight").val());
|
|
$(x).css("height", $("#textHeight").val());
|
|
});
|
|
} else if (this.selected.hasClass("rosterSpan")) {
|
|
let spans = $(this.selected.parent().first()).find(".rosterSpan");
|
|
spans.each(function (index, x) {
|
|
$(x).css("height", $("#textHeight").val());
|
|
});
|
|
}
|
|
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
if (this.selected.find(".liveList").length >= 1 || this.selected.find(".nameList").length >= 1 ||
|
|
this.selected.find(".rosterList").length >= 1) {
|
|
classList.forEach(w => {
|
|
if ($(this.selected.children()).first().hasClass(w)) {
|
|
$(`.${w}`).parent().each((index, y) => {
|
|
$(y).css("height", $("#textHeight").val())
|
|
})
|
|
}
|
|
});
|
|
} else if (this.selected.hasClass("nameSpan")) {
|
|
$(".nameSpan").css("min-height", $("#textHeight").val());
|
|
|
|
} else if (this.selected.hasClass("liveSpan")) {
|
|
$(".liveSpan").css("height", $("#textHeight").val());
|
|
} else if (this.selected.hasClass("rosterSpan")) {
|
|
$(".rosterSpan").css("min-height", $("#textHeight").val());
|
|
} else {
|
|
$("#toast_body").html("高度不可在全域中修改");
|
|
this.toast.show();
|
|
}
|
|
}
|
|
break;
|
|
case "textHeight":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
if (this.selected.find(".liveList").length >= 1) {
|
|
this.selected.find(".liveList").children().css("minHeight", $("#contentHeight").val() + 'px')
|
|
} else if (this.selected.find(".nameList").length >= 1) {
|
|
this.selected.find(".nameList").children().css("minHeight", $("#contentHeight").val() + 'px')
|
|
}
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
if (this.selected.find(".liveList").length >= 1) {
|
|
document.querySelectorAll(".liveList > span").forEach(el => {
|
|
el.style.minHeight = $("#contentHeight").val() + 'px';
|
|
})
|
|
} else if (this.selected.find(".nameList").length >= 1) {
|
|
document.querySelectorAll(".nameList > span").forEach(el => {
|
|
el.style.minHeight = $("#contentHeight").val() + 'px';
|
|
})
|
|
}
|
|
}
|
|
break;
|
|
case "breakCount":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
|
|
}
|
|
break;
|
|
case "breakWord":
|
|
if ($("#indivualSetup").prop("checked")) {
|
|
|
|
} else if ($("#allSetup").prop("checked")) {
|
|
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
async changeLocation() {
|
|
$(this.selected).css("left", $("#textX").val() + "mm");
|
|
$(this.selected).css("top", $("#textY").val() + "mm");
|
|
},
|
|
async changeSize() {
|
|
$(this.selected).css("font-size", $("#fontSize").val())
|
|
},
|
|
async changeWidth() {
|
|
let nameList = $(this.selected).find(".nameList").first();
|
|
|
|
if (nameList) {
|
|
let spans = $(nameList).find("span");
|
|
if (spans) {
|
|
spans.each(function (index, x) {
|
|
$(x).css("width", $("#textWidth").val())
|
|
});
|
|
|
|
}
|
|
}
|
|
let liveList = $(this.selected).find(".liveList").first();
|
|
if (liveList) {
|
|
let spans = $(liveList).find("span");
|
|
if (spans) {
|
|
spans.each(function (index, x) {
|
|
$(x).css("width", $("#textWidth").val())
|
|
});
|
|
|
|
}
|
|
}
|
|
},
|
|
print() {
|
|
let w = window.open('', '_blank');
|
|
if (!w) {
|
|
alert("請允許瀏覽器開啟彈出式視窗！");
|
|
return;
|
|
}
|
|
|
|
// 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
|
|
let hostUrl = typeof this.http_host !== 'undefined' ? this.http_host : (window.location.protocol + "//" + window.location.host);
|
|
if (!hostUrl.endsWith('/')) hostUrl += '/';
|
|
|
|
// 2. 抓出畫布完整的 HTML
|
|
let canvasHtml = $("#printArea").html();
|
|
|
|
// 3. 【關鍵修復】把所有的 "../../" 替換成完整的網址，解決底圖破圖問題！
|
|
canvasHtml = canvasHtml.replace(/\.\.\/\.\.\//g, hostUrl);
|
|
|
|
// 4. 組合列印視窗的 HTML
|
|
let htmlContent = `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>預覽列印 - 牌位設計</title>
|
|
<meta charset="utf-8">
|
|
${this.pageStyle}
|
|
|
|
|
|
</head>
|
|
<body>
|
|
${canvasHtml}
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
w.document.write(htmlContent);
|
|
w.document.close();
|
|
|
|
// 5. 將等待時間稍微拉長至 1.2 秒，確保大張的 SVG 底圖與外部字體(如標楷體)下載完畢
|
|
setTimeout(() => {
|
|
w.focus();
|
|
w.print();
|
|
}, 1200);
|
|
},
|
|
}
|
|
$(document).ready(function (e) {
|
|
if (localStorage.getItem("mode") && localStorage.getItem("mode") == "preview") {
|
|
//this.mode = "preview"
|
|
$("#printBtn").attr("style", "display:none")
|
|
$("#customMenu").attr("style","display:none")
|
|
}
|
|
});
|
|
$(() => Printer.init());
|
|
</script>
|
|
|
|
|
|
</html>
|