排版功能

web/admin/item/TabletDesigner.aspx

@@ -3,7 +3,7 @@
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
-<%--    <style type="text/css">
+    <%--    <style type="text/css">
         @import "css/styles.css";
         @import "css/tablet-design.css";
         @import "css/floating.css";
@@ -15,33 +15,93 @@
     <div class="d-flex overflow-hidden">
         <div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
             <h6 class="border-bottom pb-2">設計工具箱</h6>
+            <div class="input-group mb-3">
+              <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
+                  data-bs-toggle="dropdown" aria-expanded="false">版型</button>
+              <ul class="dropdown-menu">
+                <li><span class="dropdown-item">選擇版型</span></li>
+              </ul>
+              <input type="text" id="styleName" class="form-control" aria-label="版型名稱">
+            </div>
+                <%--<div class="row">
+                    <div class="col-6">
+                         <select class="form-select" id="styleID" aria-label="版型名稱">
+                             <option selected>選擇版型</option>
+                         </select>
+                    </div>
+                     <div class="col-6">
+                         <div class="form-floating mb-3">
+                            <input type="text" id="styleName" class="form-control form-control-sm mb-2"/>
+                            <label for="styleName" style="color:black">版型名稱</label>
+                        </div>
+                     </div>
+                </div>--%>
+
+             <%--<div class="form-floating mb-3">
+                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changeStyle()" id="styleName">
+                     <option value="">請選擇</option>
+                 </select>
+                 <label for="styleName" style="color:black">版型名稱</label>
+             </div>--%>
             <div class="form-floating mb-3">
                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
                     <option value="">請選擇</option>
                 </select>
-                <label for="paperSize">尺寸</label>
+                <label for="paperSize" style="color:black">尺寸</label>
             </div>
             <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
                 <span></span>
             </div>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
+            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('lefttitle')">左正名</span>
+            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('righttitle')">右正名</span>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
-            <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('combined')">正名合併置中</span>
+            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('combined')">雙姓合併置中</span>
-            <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
+            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
-            <div>
+            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
-                <span class="btn btn-sm btn-outline-secondary" onclick="Designer.clickBackend()">
+            <div class="form-floating mb-3">
-                    <i class="bi bi-upload me-1"></i> 上傳自訂底圖 (PNG/JPG)
+             <%--   <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
-                </span>
+                    <i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
-                <input id="backendInp" type="file" accept="image/png, image/jpeg" style="display: none"
+                </span>--%>
-                       >
+                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changeBg()" id="backendInp">
+                     <option value="">請選擇</option>
+                 </select>
+                 <label for="backendInp" style="color:black">選用底圖</label>
+              <%--  <input id="backendInp" type="file" accept="image/png, image/jpeg,image/svg+xml" style="display: none">--%>
             </div>
 
             <hr>
-             
+             <div class="form-floating mb-3">
+                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintSize()" id="printSize">
+                     <option value="">請選擇</option>
+                 </select>
+                 <label for="printSize" style="color:black">列印尺寸</label>
              </div>
+            <div class="form-floating mb-3">
+                <select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode">
+                    <option value="">請選擇</option>
+                    <option value="combine">合併</option>  
+                    <option value="origin">原尺寸</option>
+                </select>
+                <label for="printMode" style="color:black">列印模式</label>
+            </div>
+            <div class="form-floating mb-3">
+                <input type="number" id="perpage" class="form-control form-control-sm mb-2">
+                <label class="small" for="perpage" style="color:black;">每頁列印筆數</label>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
+                </div>
+                <div class="col-6">
+                  <%--  <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="">存檔</span>--%>
+                </div>
+            </div>
+        </div>
+
         <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
-         <div class="tablet-paper" >
+            <div class="tablet-paper">
                 <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
             </div>
         </div>
@@ -54,36 +114,58 @@
                 <input type="number" id="inp-size" class="form-control form-control-sm mb-2">
                 <label class="small" for="inp-size">字體大小 (pt)</label>
             </div>
+
+            <div class="row ">
+                <div class="col-6">
                     <div class="form-floating mb-3">
                         <input type="number" id="2offset" class="form-control form-control-sm mb-2">
                         <label class="small" for="2offset">二行偏移量</label>
                     </div>
+                </div>
+                <div class="col-6">
                     <div class="form-floating mb-3">
                         <input type="number" id="3offset" class="form-control form-control-sm mb-2">
                         <label class="small" for="3offset">三行偏移量</label>
                     </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-6">
                     <div class="form-floating mb-3">
                         <input type="number" id="4offset" class="form-control form-control-sm mb-2">
                         <label class="small" for="4offset">四行偏移量</label>
                     </div>
+                </div>
+                <div class="col-6">
                     <div class="form-floating mb-3">
+                        <input type="number" id="breakLen" class="form-control form-control-sm mb-2">
+                        <label class="small" for="breakLen">斷行字數</label>
+                    </div>
+                </div>
+            </div>
+
             <div class="row">
                 <div class="col-6">
+                    <div class="form-floating mb-3">
                         <input type="number" id="xPosition" class="form-control form-control-sm mb-2">
                         <label class="small" for="xPosition">X</label>
                     </div>
+                </div>
                 <div class="col-6">
+                    <div class="form-floating mb-3">
                         <input type="number" id="yPosition" class="form-control form-control-sm mb-2">
                         <label class="small" for="yPosition">Y</label>
                     </div>
                 </div>
             </div>
+
         </div>
     </div>
 
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
-<%--      <script src="../../js/jquery-4.0.0.min.js"></script>
+    <%--      <script src="../../js/jquery-4.0.0.min.js"></script>
     <script src="jquery-ui/jquery-ui.js"></script>--%>
     <script>
         const Designer = {
@@ -92,10 +174,16 @@
             paper: { width: 100, height: 272 },
             rosterLimit: 8,
             allSize: [
-                { name: "A3", width: 297, height: 420, selected :""},
+                { name: "A3", width: 297, height: 420, selected: "" },
-                { name: "A4", width: 210, height: 297, selected :""},
+                { name: "A4", width: 210, height: 297, selected: "" },
-                { name: "B4", width: 257, height: 364, selected :""},
+                { name: "B4", width: 257, height: 364, selected: "" },
-                { name: "red", width: 100, height: 272,selected:"selected" },
+                { name: "red", width: 100, height: 272, selected: "selected" },
+            ],
+            bg: [
+                { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
+                { name: "黃2", path: "../../admin/print/html/tablet-1B.svg" },
+                { name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
+                { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
             ],
             orientation: "portrait",
             init() {
@@ -105,7 +193,11 @@
                 this.bindBackend();
                 this.allSize.forEach(x => {
                     $("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
+                    $("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>");
                 })
+                this.bg.forEach(x => {
+                    $("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
+                });
                 $("#paperOrientation").html("<span>直向</span>")
             },
             changeOrientation() {
@@ -113,8 +205,8 @@
                 console.log(this.orientation);
                 $("#paperOrientation").empty();
                 let ori = this.orientation == "portrait" ? "直向" : "橫向";
-                console.log(this.orientation,ori)
+                console.log(this.orientation, ori)
-                $("#paperOrientation").html("<span>" +ori  + "</span>");
+                $("#paperOrientation").html("<span>" + ori + "</span>");
                 let paperSize = $("#paperSize").val()
 
 
@@ -123,19 +215,29 @@
                 this.paper.width = this.orientation == "portrait" ? size.width : size.height;
                 this.paper.height = this.orientation == "portrait" ? size.height : size.width;
                 $(".tablet-paper").css({
-                    "background-color": "red",
+                    "background-color": "white",
                     width: this.paper.width + "mm",
                     height: this.paper.height + "mm",
                 });
             },
+            changeStyle() {//切換版型
+
+            },
+            changeBg() {
+                let path = this.bg.find(el => el.name == $("#backendInp").val())
+                $(".tablet-paper").css({ 'background-image': 'url(' + path.path + ')', 'background-size': '100% 100%' })
+            },
             changePaper() {
                 let paperSize = $("#paperSize").val()
                 let size = this.allSize.find(x => x.name == paperSize)
                 $(".tablet-paper").css({
-                    "background-color": "red",
+                    "background-color": "white",
                     width: size.width + "mm",
                     height: size.height + "mm",
                 });
+            },
+            changePrintMode() {
+
             },
             bindEvents() {
                 // 文字變更連動渲染
@@ -168,7 +270,7 @@
                 //for (let p = 0; p < pages; p++) {
                 //    const $paper = $('<div class="tablet-paper"></div>')
                 //        .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
-                let $paper = $(".tablet-paper").css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
+                let $paper = $(".tablet-paper").css({ "background-color": "white", width: this.paper.width + 'mm', height: this.paper.height + 'mm', position: "absolute" });
                 //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
                 const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
                 this.elements.forEach(el => {
@@ -203,7 +305,7 @@
 
                 return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
                     .css({
-                        left: el.x, top: el.y, fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                        position: "absolute", left: this.getPosInMm(el.x) + "mm", top: this.getPosInMm(el.y) + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                     })
                     .html(html);
             },
@@ -226,7 +328,9 @@
                 const max = Math.max(...names.map(n => n.length), 0);
                 return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
             },
-
+            getPosInMm(px) {
+                return parseFloat((px * 25.4 / 96).toFixed(2));
+            },
             // 拖動後同步所有頁面的位置
             makeDraggable() {
                 const self = this;
@@ -237,9 +341,12 @@
                     stop(e, ui) {
                         const id = $(this).attr('id');
                         const el = self.elements.find(x => x.id === id);
-                        el.x = ui.position.left;
+                        el.x = self.getPosInMm(ui.position.left);
-                        el.y = ui.position.top;
+                        el.y = self.getPosInMm(ui.position.top);
-                        $(`.tablet-element[id="${id}"]`).css({ left: el.x, top: el.y });
+
+                        console.log(id, el)
+                        //console.log(id,ui.position.left, ui.position.top,ui.offset.left,ui.offset.top);
+                        $(`.tablet-element[id="${id}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
                     }
                 });
             },
@@ -252,23 +359,47 @@
                 $('#inp-size').val(el.style.fontSize);
                 $('#xPosition').val(el.x);
                 $("#yPosition").val(el.y);
+                $('#TwoOffset').val(el.TwoOffset);
+                $("#ThreeOffset").val(el.ThreeOffset);
+                $("#FourOffset").val(el.FourOffset);
+
                 //this.render();
             },
 
             updateActive(key, val) {
                 const el = this.elements.find(x => x.id === this.activeId);
+                console.log(this.activeId, el)
                 if (key === 'fontSize') el.style.fontSize = parseFloat(val);
                 else el[key] = val;
+                if (el.type == "roster") {
+                    const names = el.text.split('\n').filter(s => s.trim());
+                    $(`.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
+                    }).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
+                } else if (el.type == "combined-center") {
+                    const parts = el.text.split('\n');
+                    html = `<div class="ancestor-wrapper" >
+                                <span class="main-name" >${parts[0] || ''}</span>
+                                <span class="sub-text">${parts[1] || ''}</span>
+                            </div>`;
+                    $(`.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
+                    }).html(html);
+                } else {
+                    $(`.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
+                    }).text(el.text);
+                }
                 //this.render();
             },
             displayItem(id) {
                 console.log(id);
                 let el = this.elements.find(x => x.id === id);
-                console.log("before:",el);
+                console.log("before:", el);
-                el.style.visibility = el.style.visibility == "hidden" ? "" : "hidden";
+                el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
-                console.log("after:", el);
+                console.log("after:", el, el.x, el.y);
                 $("#" + id).css({
-                    left: el.x, top: el.y, 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: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                 })
             },
 
@@ -330,12 +461,32 @@
                             console.log(base64Image)
                             // 3. 設定到底圖
                             //this.service.setBackground(svgDataUri);
-                            $(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')','background-size':'100% 100%' })
+                            $(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')', 'background-size': '100% 100%' })
                         };
 
                         reader.readAsDataURL(file);
                     }
                 })
+            },
+            saveStyle() {
+                let master = {
+                    styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
+                    backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
+                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val()
+                }
+                let detail = [
+                   
+                ];
+
+                this.elements.forEach((el) => {
+                    detail.push({
+                        elementID: el.id, startX: el.x, startY: el.y, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
+                        breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset,
+                        isActive: el.style.visibility
+                    });
+                });
+
+                console.log(master,detail);
             }
         };
 

web/admin/item/TabletDesigner.aspx.cs

@@ -19,6 +19,10 @@ public class TabletElement
     public double? height { get; set; }
     public ElementStyle style { get; set; }
     public string hidden { get; set; }
+    public double? twoOffset { get; set; }
+    public double? threeOffset { get; set; }
+    public double? fourOffset { get; set; }
+    public int? breakLen { get; set; }
 }
 
 public class ElementStyle
@@ -52,20 +56,34 @@ public partial class admin_item_TabletDesigner :MyWeb.config
                     style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" }
                 },
                 new TabletElement {
-                    id = "title1", type = "ancestor", text = "氏歷代祖先", x = 130, y = 80,
+                    id = "title1", type = "ancestor", text = "牌位正名", x = 130, y = 80,
                     style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
                 },
                 new TabletElement {
-                    id = "titletriangle", type = "roster", text = "張一\n李二\n陳三", x = 130, y = 80,
+                    id = "lefttitle", type = "ancestor", text = "左正名", x = 10, y = 80,
-                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="hidden"  }
+                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
+                },
+                new TabletElement {
+                    id = "righttitle", type = "ancestor", text = "右正名", x = 50, y = 80,
+                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
+                },
+                new TabletElement {
+                    id = "titletriangle", type = "roster", text = "張一\n李二\n陳三\n吳四\n劉五\n趙六\n林七\n徐八", x = 10, y = 80,
+                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility=""  }
                 },
                 new TabletElement
                 {
-                    id="combined",type="combined-center",text="林張吳\n氏歷代祖先", x = 130, y = 80,
+                    id="tricombined",type="combined-center",text="林張吳\n氏歷代祖先", x = 10, y = 80,
-                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="hidden" }
+                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
-                }, new TabletElement
+                },
+                new TabletElement
                 {
-                    id="alive",type="alive",text="劉大哥", x = 60, y = 200,
+                    id="combined",type="combined-center",text="李王\n氏歷代祖先", x = 10, y = 80,
+                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
+                },
+                new TabletElement
+                {
+                    id="alive",type="alive",text="陽上名字", x = 60, y = 200,
                     style = new ElementStyle { fontSize = 18, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
                 }
             },