增加一個新的報名牌位編輯功能

web/admin/activity/item_reg.aspx

@@ -685,21 +685,11 @@
                              <div class="col-sm-4">
                                  <select ID="ddlPageSize" runat="server" onchange="VueApp.changeSel('ddlPageSize')"></select>
                                  <asp:HiddenField ID="hidPageSize" runat="server" />
-                               <%--  <select id="pageSize" onchange="VueApp.selectChange('pageSize')">
-                                     <option value="">請選擇</option>
-                                 </select>
-                                   <asp:HiddenField ID="pageSizeSel" runat="server" Value="" />--%>
-                                 <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
                              </div>    
                               <label class="col-sm-2 col-form-label">預設列印尺寸</label>
                             <div class="col-sm-4">
                                 <select ID="ddlPrintSize" runat="server"  onchange="VueApp.changeSel('ddlPrintSize')"></select>
                                  <asp:HiddenField ID="hidPrintSize" runat="server" />
-                               <%--  <select id="printSize" onchange="VueApp.selectChange('printSize')">
-                                       <option value="">請選擇</option>
-                                 </select>
-                                  <asp:HiddenField ID="printSizeSel" runat="server" Value="" />--%>
-                            <%--    <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
                             </div>    
                         </div>
                           <div class="row mb-1 label-sm-right">
@@ -707,15 +697,10 @@
                           <div class="col-sm-4">
                               <select ID="ddlDefaultStyle" runat="server"  onchange="VueApp.changeSel('ddlDefaultStyle')"></select>
                                <asp:HiddenField ID="hidDefaultStyle" runat="server" />
-                             <%-- <select id="defaultStyle" onchange="VueApp.selectChange('defaultStyle')">
-                                  <option value="">請選擇</option>
-                              </select>
-                                <asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />--%>
-                              <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
                           </div>    
                  
                          </div>    
-                     </div>
+                  
                         <asp:UpdatePanel ID="UpdatePanel1" runat="server" class="row mb-1 label-sm-right">
                             <ContentTemplate>
                                 <label class="col-sm-2 col-form-label"></label>

web/admin/activity/reg.aspx

@@ -590,7 +590,79 @@
                                   this.data_table.selected.push(this.data_table.editFilesItem[i])
                           }
                       }
-                  }, multiPrint() {
+                  },
+                  multiPrintNew() {
+                      var params = {
+                          item: this.thisItemSelected.val,
+                          file: this.thisFilesSelected.val,
+                          //list: this.data_table.selected.map(x => x.num)
+                      };
+
+                      var list = [];
+                      //list = this.data_table.selected.map(x => x.num);
+
+                      list = this.data_table.selected
+                          .sort((a, b) => (a.print_id == null ? "" : a.print_id).localeCompare(b.print_id == null ? "" : b.print_id))
+                          .map(x => x.num);
+
+                      //console.log("what:",list);
+
+                      if (list.length > 0) {
+                          // 記錄已列印
+                          let _url = HTTP_HOST + 'api/order/printMultiFileLog';
+                          axios.post(_url, list, { params: params })
+                              .then(response => {
+                                  for (let i = 0; i < this.data_table.selected.length; i++) {
+                                      for (let j = 0; i < this.data_table.editFilesItem.length; j++) {
+                                          if (this.data_table.selected[i].num == this.data_table.editFilesItem[j].num) {
+                                              this.data_table.editFilesItem[j].isPrinted = true;
+                                              break;
+                                          }
+                                      }
+                                  }
+                              })
+                              .catch(error => {
+                                  console.log(error)
+
+                              })
+                          // 送出列印
+                          _url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
+                          var form = document.createElement("form");
+                          form.method = "POST";
+                          form.action = _url;
+                          form.target = "_blank"; // Open the result in a new tab
+
+                          // Helper function to add hidden fields
+                          const addHiddenField = (name, value) => {
+                              const hiddenField = document.createElement("input");
+                              hiddenField.type = "hidden";
+                              hiddenField.name = name;
+                              hiddenField.value = value;
+                              form.appendChild(hiddenField);
+                          };
+
+                          // Add form fields
+                          console.log(this.thisItemSelected.val, this.thisFilesSelected.val, JSON.stringify(list));
+                          addHiddenField("item", this.thisItemSelected.val);
+                          addHiddenField("file", this.thisFilesSelected.val);
+                          addHiddenField("list", JSON.stringify(list));
+                          addHiddenField("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`);
+                          //console.log("底家:",this.data_table.selected);
+                          localStorage.setItem("item", this.thisItemSelected.val);
+                          localStorage.setItem("list", JSON.stringify(this.data_table.selected));
+
+                         
+
+                          document.body.appendChild(form); // Not entirely sure if this is necessary
+                          form.submit();
+                          document.body.removeChild(form);
+                      }
+                      else {
+                          this.snackbar.text = "未選擇列印項目";
+                          this.snackbar.show = true
+                      }
+                  },
+                  multiPrint() {
                       var params = {
                           item: this.thisItemSelected.val,
                           file: this.thisFilesSelected.val,
@@ -625,7 +697,7 @@
 
                                 })
                             // 送出列印
-                            _url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
+                            _url = HTTP_HOST + 'admin/print/print_multi.aspx';
                             var form = document.createElement("form");
                             form.method = "POST";
                             form.action = _url;
@@ -1205,6 +1277,12 @@
                                   @click="multiPrint">
                                   列印<v-icon dark>mdi-turn-right</v-icon>
                               </v-btn>
+                              <v-btn
+                                color="primary"
+                                class="ml-2 white--text"                             
+                                @click="multiPrintNew">
+                                列印(New)<v-icon dark>mdi-turn-right</v-icon>
+                            </v-btn>
                           </div>
                        </v-toolbar>
                        </template>    

web/admin/item/TabletDesigner.aspx

@@ -345,15 +345,15 @@
                 }
 
 
-                 .ancestor-wrapper {
+                // .ancestor-wrapper {
-                    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+                //    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-                    writing-mode: horizontal-tb;
+                //    writing-mode: horizontal-tb;
-                    display: flex;
+                //    display: flex;
-                    flex-direction: column;
+                //    flex-direction: column;
-                    align-items: center; /* 水平置中 */
+                //    align-items: center; /* 水平置中 */
-                    justify-content: center;
+                //    justify-content: flex-start;
-                    width: fit-content;
+                //    width: fit-content;
-                }
+                //}
 
                 .main-name {
                     line-height: 1.2;
@@ -690,7 +690,7 @@
                 // 2. 正名合併置中
                 else if (el.type === 'combined-center') {
                     const parts = el.text.split('\n');
-                    html = `<div class="ancestor-wrapper" >
+                    html = `<div class="ancestor-wrapper" style="width:${el.width}px !important;height:${el.height}px !important;" >
                                 <span class="main-name" >${parts[0] || ''}</span>
                                 <span class="sub-text">${parts[1] || ''}</span>
                             </div>`;
@@ -878,8 +878,8 @@
                 else if (key === '2offset') el.twoOffset = parseFloat(val);
                 else if (key === '3offset') el.threeOffset = parseFloat(val);
                 else if (key === '4offset') el.fourOffset = parseFloat(val);
+                else if (key === 'height') el.height = parseFloat(val);
                 else el[key] = val;
-                console.log("activeId:",this.activeId)
                 if (el.type == "roster") {
                     const names = el.text.split('\n').filter(s => s.trim());
 
@@ -887,13 +887,18 @@
                         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");
+
                     const parts = el.text.split('\n');
-                    html = `<div class="ancestor-wrapper" >
+                    html = `<div class="ancestor-wrapper" style='width:${el.width}px !important;height:${el.height}px !important' >
                                 <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.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
+                        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(html);
                 } else if (this.activeId === "title1") {
                     let names = el.text.split('\n').filter(s => s.trim());

web/admin/item/css/tablet-design.css

@@ -232,7 +232,7 @@
     display: flex;
     flex-direction: column;
     align-items: center; /* 水平置中 */
-    justify-content: center;
+    justify-content: flex-start;
     width: fit-content;
 }
 

web/admin/order/reg.aspx

@@ -464,6 +464,11 @@
                         initialized: false,
                         currentItem: {}
                     },
+                    tablet_edit_new: {
+                        show: false,
+                        initialized: false,
+                        currentItem: {}
+                    },
                     //收款註記
                     cash_dialog: {
                         show: false,
@@ -547,6 +552,7 @@
                         
                         // 關閉編輯對話框
                         this.tablet_edit.show = false;
+                        thiw.tablet_edit_new.show = false;
                         
                         // 顯示成功訊息
                         this.snackbar.text = '牌位資料已更新';
@@ -561,6 +567,13 @@
                         this.tablet_edit.initialized = true;
                     };
                 }
+
+                const iframe1 = document.querySelector('iframe#tablet_edit_new_iframe');
+                if (iframe1) {
+                    iframe1.onload = () => {
+                        this.tablet_edit_new.initialized = true;
+                    };
+                }
             },
             watch: {
                 options: {
@@ -577,6 +590,14 @@
                         }
                     }
                 },
+                'tablet_edit_new.show': {
+                    handler(newVal) {
+                        if (!newVal && this._savedEditedItem) {
+                            this.editedItem = $.extend(true, {}, this._savedEditedItem);
+                            this._savedEditedItem = null;
+                        }
+                    }
+                },
                 optionsDetail: {
                     handler() {
                         this.initialize();
@@ -819,6 +840,32 @@
                     this.editedItem = $.extend(true, {}, item);
                     this.file_dialog.show = true;
                 },
+                async editTabletNew(item) {
+                    this.editedIndex = this.desserts.indexOf(item);
+                    this.editedItem = $.extend(true, {}, item);
+
+                    try {
+                        // 如果是新項目，先保存
+                        if (this.editedItem.num <= 0 || this.editedItem.num === null || this.editedItem.num === undefined) {
+                            this.editedItem.qty = 1;
+                            const savedItem = await this.save(false);
+                            if (savedItem) {
+                                this.$set(this.desserts, this.editedIndex, savedItem);
+                                this.editedItem = $.extend(true, {}, savedItem);
+                            }
+                        }
+                        // 先發送消息
+                        await this.sendMessageToIframeNew();
+                        // 保存當前的 editedItem 數據
+                        const currentData = $.extend(true, {}, this.editedItem);
+                        // 顯示對話框
+                        this.tablet_edit_new.show = true;
+                        // 立即恢復數據
+                        this.editedItem = $.extend(true, {}, currentData);
+                    } catch (error) {
+                        console.error('Error in editTablet:', error);
+                    }
+                },
                 async editTablet(item) {
                     this.editedIndex = this.desserts.indexOf(item);
                     this.editedItem = $.extend(true, {}, item);
@@ -845,6 +892,52 @@
                         console.error('Error in editTablet:', error);
                     }
                 },
+                async sendMessageToIframeNew() {
+                    const iframe = document.querySelector('iframe#tablet_edit_new_iframe');
+
+                    // 在這裡深度複製 editedItem，確保數據不會被修改
+                    const itemToSend = $.extend(true, {}, this.editedItem);
+
+                    if (iframe) {
+                        try {
+                            // 準備要發送的數據
+                            let familyMembers = [];
+
+                            try {
+                                // 嘗試獲取家族成員數據
+                                const response = await axios.get(HTTP_HOST + 'api/familymembers/follower/' + this.follower_id);
+                                familyMembers = response.data;
+                            } catch (error) {
+                                console.warn('error:', error);
+                            }
+
+                            // 準備發送的數據
+                            const itemInfo = {
+                                source: 'order.btn.click',
+                                tabletItem: {
+                                    ...itemToSend,
+                                    title: this.titleword() // 確保標題被包含
+                                },
+                                familyMembers: familyMembers
+                            };
+
+                            iframe.contentWindow.postMessage(itemInfo, '*');
+
+                            // 發送後確認數據完整性
+
+                            // 如果數據被清除，立即恢復
+                            if (!this.editedItem.num && itemToSend.num) {
+                                this.$nextTick(() => {
+                                    this.editedItem = $.extend(true, {}, itemToSend);
+                                });
+                            }
+                        } catch (error) {
+                            console.error('Error in sendMessageToIframe:', error);
+                        }
+                    } else {
+                        console.error('iframe not found');
+                    }
+                },
                 async sendMessageToIframe() {
                     const iframe = document.querySelector('iframe#tablet_edit_iframe');
                     
@@ -2002,6 +2095,9 @@
                                   <v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
                                     mdi-file-document-edit-outline
                                   </v-icon>     
+                                  <v-icon title="編輯牌位New" color="blue" class="mr-2" @click="editTabletNew(item);">
+                                    mdi-file-document-edit-outline
+                                  </v-icon>     
                                   <v-icon title="列印" color="blue" class="mr-2" @click="printItem(item);" v-if="canPrint || lists.length==0" >
                                     mdi-printer
                                   </v-icon>
@@ -2569,6 +2665,17 @@
                
             </v-card>
         </v-dialog>
+        <v-dialog v-model="tablet_edit_new.show" min-width="100vw" min-height="100vh" persistent eager :class="{'d-none': !tablet_edit_new.initialized}">
+            <v-card>
+                <v-card-title class="justify-space-between grey lighten-2">
+                    <span class="fs-6 text text-dark">編輯牌位 : {{editedItem.actitem_num_selected.text}} - {{editedItem.print_id}}</span>
+                    <v-btn icon @click="tablet_edit_new.show=false"><v-icon>mdi-close</v-icon></v-btn>
+                </v-card-title>
+                <v-card-text>
+                    <iframe id="tablet_edit_new_iframe" src="../print/tablet_edit/editorNewOne.html" style="width: 100%; height: 100%;min-height:100vh;min-width:100vw" frameborder="0"></iframe>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
         <v-dialog v-model="tablet_edit.show" max-width="1000px" persistent eager :class="{'d-none': !tablet_edit.initialized}">
             <v-card>
                 <v-card-title class="justify-space-between grey lighten-2">

web/admin/print/print_multi_new.aspx

@@ -260,7 +260,6 @@
             let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
 
             this.printData.forEach(x => {
-                console.log("x:", x)
                 let style = self.allStyle.find(y => y.styleID == x.style);
                 //用來印內容的尺寸
                 let size = self.allSize.find(y => y.paperID == style.paperSize);
@@ -271,7 +270,6 @@
                 let xCount = parseFloat(pageSize.width) / parseFloat(printSize.width);
                 let yCount = parseFloat(pageSize.height) / parseFloat(printSize.height);
                 let total = Math.floor(xCount) * Math.floor(yCount);
-                console.log(xCount, yCount, total);
                 //if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
                 if (nowPageWidth >= total) {
                     //$(canvas).css("width", printSize.width + "mm");
@@ -305,7 +303,6 @@
                 let left_items = tablet.left_items;
 
                 let details = this.allStyleDetails.filter(y => y.styleID == x.style);
-                console.log("details:", details);
                 let mid = [];
                 mid_items.forEach(y => {
                     mid.push(y.fam_name);
@@ -316,7 +313,7 @@
                         left.push(y.fam_name);
                     });
                 }
-
+                let ancestorFontSize = 16;
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
                         let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
@@ -347,7 +344,6 @@
                             mid.forEach(z => {
                                 let info = self.getTextInfo(z, newFontSize);
                                 let spanWidth = mid.length > 1 ? newFontSize : d.width
-                                console.log("spanWidth:", spanWidth);
                                 let height = d.textHeight;
                                 if (info.width >= d.textHeight) {
                                     height = d.height;
@@ -363,6 +359,7 @@
                                     "margin-bottom": "20px",
                                     "margin-left": "5px",
                                     "text-justify": "inter-character",
+                                    "white-space": "pre-line",
                                     //"justify-content":"center"
                                 });
                                 $namelist.append($span);
@@ -375,6 +372,13 @@
                             newFontSize = d.fontSize;
                         } else if (d.elementID === "titletriangle") {
                             html = self.renderRoster(mid, d)
+                        } else if (d.elementID === "combined") {
+                            ancestorFontSize = d.fontSize;
+                            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>`;
                         }
                         if (newFontSize < 10) {
                             newFontSize = 10;
@@ -520,7 +524,7 @@
                     display: flex;
                     flex-direction: column;
                     align-items: center; /* 水平置中 */
-                    justify-content: center;
+                    justify-content: felx-start;
                     width: fit-content;
                 }
 
@@ -530,7 +534,7 @@
                 }
 
                 .sub-text {
-                    font-size: 0.6em; /* 縮小字體 */
+                    font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
                     line-height: 1.2;
                     margin-top: 4px; /* 與上方林張的間距 */
                     white-space: normal; /* 避免自動換行 */
@@ -613,16 +617,18 @@
 
                 let textWidth;//= $(this).css("width");//find("span").first().css("width");
                 let textHeight; //= $(this).css("height");
-
+                if ($(this).find(".nameList").first().hasClass("nameList")) {
-                if ($(this).find(".nameList").first()) {
                     textWidth = $(this).find(".nameList").first().css("width");
                     textHeight = $(this).find(".nameList").first().css("height");
-                } else if ($(this).find(".liveList").first()) {
+                } 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()) {
+                } 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");
@@ -638,6 +644,10 @@
                 $("#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) {
@@ -647,6 +657,13 @@
                 let fontFamily = $(this).css("font-family");
                 let textWidth = $(this).css("max-width");
                 let textHeight = $(this).css("min-height");
+                if ($(this).hasClass("liveSpan")) {
+                    textWidth = $(this).css("width");
+                } 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", "");
@@ -661,6 +678,16 @@
                     $("#textX").prop("readonly", true);
                     $("#textY").prop("readonly", true);
                     $("#fontSize").prop("readonly", true);
+                    $("#textBreakCount").prop("readonly", false);
+                    $("#textBreakWord").prop("readonly", false);
+                } else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
+                    $("#textX").prop("readonly", true);
+                    $("#textY").prop("readonly", true);
+                    $("#fontSize").prop("readonly", true);
+                    $("#textBreakCount").prop("readonly", true);
+                    $("#textBreakWord").prop("readonly", true);
+                    $("#textWidth").prop("readonly", true);
+                    $("#textHeight").prop("readonly", true);
                 }
 
             });
@@ -704,6 +731,7 @@
                 "text-align-last": "justify",
                 "margin-bottom": "10px",
                 "text-justify": "inter-character",
+                "white-space": "pre-line"
             });
         },
         // 品字佈局邏輯：一上二下
@@ -734,6 +762,7 @@
                 "flex-direction": "column",
                 "justify-content": "center",
                 "height": el.textHeight,
+                "white-space": "pre-line"
             })
             items.forEach(x => {
                 g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
@@ -782,7 +811,6 @@
             //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
             if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
                 let newfontSize = parseInt(fontSize) - 1;
-                console.log("newfontSize:", newfontSize);
                 if (newfontSize <= 8) {
                     return newfontSize;
                 }
@@ -836,7 +864,7 @@
                         } else if (this.selected.hasClass("liveSpan")) {
                             let spans = $(this.selected.parent().first()).find(".liveSpan");
                             spans.each(function (index, x)  {
-                                $(x).css("max-width", $("#textWidth").val());
+                                $(x).css("width", $("#textWidth").val());
                             });
                         } else if (this.selected.hasClass("rosterSpan")) {
                             let spans = $(this.selected.parent().first()).find(".rosterSpan");
@@ -860,13 +888,13 @@
                         } else if (this.selected.hasClass("nameSpan")) {
                             let spans = $(this.selected.parent().first()).find(".nameSpan");
                             spans.each(function (index, x)  {
-                                console.log($(x))
                                 $(x).css("min-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");

web/admin/print/tablet_edit/editorNewOne.html

@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="../../../js/bootstrap5/bootstrap.min.css" />
+    <link href="../../item/jquery-ui/jquery-ui.min.css" />
+    <link href="../../../js/vuetify.css" rel="stylesheet" />
+    <link href="../../../js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
+    <script src="../../../js/vue.min.js"></script>
+    <script src="../../../js/vuetify.min.js"></script>
+    <script src="../../../js/axios.min.js"></script>
+    <script src="../../../js/bootstrap5/js/bootstrap.bundle.min.js"></script>
+    <script src="../../../js/jquery-4.0.0.min.js"></script>
+    <script src="../../item/jquery-ui/jquery-ui.min.js"></script>
+    <style>
+        .div_border{
+            border:1px solid black;
+        }
+        .work_space{
+            min-height:90vh;
+            min-width:90vw;
+        }
+    </style>
+</head>
+<body>
+    <div class="d-flex full-home no-print" style="height: 100%;width:100%;">
+        <div id="designArea" class="designArea" style="width: auto; height: auto">
+            <div class="row mt-2">
+                <div class="col-3">版型設定:
+                    <select id="styleSel" onchange="designer.changeStyle()">
+                        <option value="">請選擇版型</option>
+                    </select>
+                </div>
+            </div>
+            <div class="row work_space">
+                <div class="col-8 div_border printArea"></div>
+                <div class="col-4 div_border"></div>
+            </div>
+
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        const designer = {
+            code: {
+                style: []
+            },
+            selected: {
+                style: ""
+            },
+            actitem: "",
+            pageSize: "",
+            defaultStyle: "",
+            isAllSelected: false,
+            dialog: false,
+            addDialog: false,        // 新增項目對話框
+            addDialogType: '',       // 'Y' 或 'N'
+            newItemText: '',         // 新增項目的文字
+            noSpace: true,           // 不加空格 checkbox（預設勾選）
+            deleteDialog: false,     // 確認刪除對話框
+            deleteIndex: -1,         // 要刪除的 index
+            deleteType: '',          // 'Y' 或 'N'
+            deleteMemberName: '',    // 要刪除的名稱（顯示用）
+            phrases: [],             // 常用片語
+            familyMembers: [], // 親友名單
+            tabletItem: {}, // 傳入的資料(信眾/牌位資訊)
+            item: {},
+            family_deceased_Y_selected: [], // 超渡/超薦/超冤名單
+            family_deceased_N_selected: [],  // 消災/陽上名單
+            allStyle: [],
+            allStyleDetails: [],
+            allSize: [],
+            tabletElement: [],
+            http_host: "",
+            printData: [],
+            selectedElement: {},
+            selectStyle: {},
+            properTitle: [],//正名
+            leftProperTitle: [],//左正名
+            rightProperTitle: [],//右正名
+            address: "",//地址
+            alive:[],//陽上
+            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" }
+            ],
+            async init() {
+                // 載入常用片語
+                fetch('phrases.json')
+                    .then(res => res.json())
+                    .then(data => { this.phrases = data; })
+                    .catch(err => console.error('載入 phrases.json 失敗:', err));
+
+                //// 監聽來自父頁面的消息
+                //window.addEventListener('message', (event) => {
+                //    this.isAllSelected = false;
+                //    //console.log('editor.html - received message event');
+                //    //console.log('editor.html - event origin:', event.origin);
+                //    //console.log('editor.html - parent origin:', window.parent.location.origin);
+
+                //    if (event.origin === window.parent.location.origin) {
+                //        //console.log('editor.html - origin check passed');
+                //        //console.log('editor.html - received data:', event.data);
+                //        const receivedData = event.data;
+                //        this.family_deceased_Y_selected = [];
+                //        this.family_deceased_N_selected = [];
+
+                //        if (receivedData.tabletItem) {
+                //            //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
+                //            this.tabletItem = receivedData.tabletItem;
+                //            if (receivedData.familyMembers) {
+                //                this.familyMembers = receivedData.familyMembers; // 更新 familyMembers
+                //                //console.log("app mounted, window message: ", this.familyMembers, receivedData);
+                //            }
+                //            if (receivedData.tabletItem) {
+                //                this.tabletItem = receivedData.tabletItem;
+                //            }
+                //            //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
+                //            console.log("receivedData::", receivedData);
+                //            if (receivedData.tabletItem.style) {
+                //                this.selected.style = receivedData.tabletItem.style;
+                //            } else {
+                //                this.selected.style = "";
+                //            }
+                //            console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
+                //            this.actitem = receivedData.tabletItem.actitem_num_selected.val;
+                //            //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
+                //            // 處理 f_num_tablet 資料
+                //            if (this.tabletItem.f_num_tablet) {
+                //                try {
+                //                    const data = JSON.parse(this.tabletItem.f_num_tablet);
+
+                //                    if (this.item_type === 'B') {
+                //                        // B類型：超渡、超薦等
+                //                        this.family_deceased_Y_selected = data.mid_items || [];
+                //                        this.family_deceased_N_selected = data.left_items || [];
+
+                //                        this.family_deceased_Y_selected.forEach(item => {
+                //                            if (item.IsShuWen === undefined) {
+                //                                //Vue.set(item, 'IsShuWen', false);
+                //                            }
+                //                        });
+                //                        if (this.family_deceased_Y_selected.length > 0) {
+                //                            this.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
+                //                        } else {
+                //                            this.isAllSelected = false;
+                //                        }
+
+                //                    } else {
+                //                        // A類型：消災、陽上等
+                //                        this.family_deceased_Y_selected = [];
+                //                        this.family_deceased_N_selected = data.mid_items || [];
+
+                //                        this.family_deceased_N_selected.forEach(item => {
+                //                            if (item.IsShuWen === undefined) {
+                //                                //Vue.set(item, 'IsShuWen', false);
+                //                            }
+                //                        });
+                //                        if (this.family_deceased_Y_selected.length > 0) {
+                //                            this.isAllSelected = this.family_deceased_N_selected.every(member => member.IsShuWen === true);
+
+                //                        } else {
+                //                            this.isAllSelected = false;
+                //                        }
+                //                        //console.log(this.family_deceased_N_selected)
+                //                    }
+                //                } catch (e) {
+                //                    console.error('解析牌位資料時發生錯誤:', e);
+                //                }
+                //            }
+
+                //        }
+                //    }
+                //});
+                //let HTTP_HOST = "<%=UrlHost()%>";
+                //this.http_host = HTTP_HOST;
+
+
+            },
+            async getActItem() {
+                axios
+                    .post('/api/tablet/GetActItem', { itemNum: this.actitem })
+                    .then(response => {
+                        
+                        if (response.data.result == "Y" && response.data.data) {
+                            this.pageSize = response.data.data.pageSize;
+                            this.defaultStyle = response.data.data.defaultStyle;
+                            this.selected.style = response.data.data.defaultStyle;
+                            $("#styleSel").val(this.defaultStyle);
+                         
+                            //this.getStyle();
+                        }
+                    }
+                    );
+
+            },
+            async getAllStyleDetails() {
+                await axios
+                    .post( '/api/tablet/GetStyleDetailData', {})
+                    .then(response => {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                let details = data.data;
+                                this.allStyleDetails = details;
+                                //console.log(data.data);
+                            }
+                        }
+                    }
+                    );
+            },
+            async getPaperSize() {
+                let self = this
+                await axios
+                    .post('/api/tablet/GetPaperSize', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            this.allSize = data.data;
+                            //console.log(this.allSize);
+                            //if (this.allSize) {
+                            //    this.allSize.forEach(x => {
+                            //        $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
+                            //    })
+                   
+                            //}
+                        }
+                        //$("#paperSizeSel").val("0003");
+                    }
+                    )
+            },
+            async getTabletElement() {
+                await axios
+                    .post('/api/tablet/GetTabletElement', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            this.tabletElement = data.data;
+                        }
+                    });
+            },
+            async getTabletStyles() {
+                await axios
+                    .post('/api/tablet/GetStyleData', {})
+                    .then(response => {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.data) {
+                                data.data.forEach(x => {
+                                    if (x.styleID !== "00001") {
+                                        this.allStyle.push(x);
+                                        $("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
+                                    }
+                                })
+                            }
+                        }
+                    });
+            },
+            async getData() {
+                console.log("getData:", this.tabletItem)
+                this.printData.length = 0;
+                this.properTitle.length = 0
+                this.alive.length = 0;
+                //let list = localStorage.getItem("list")
+                let param = [];
+                let self = this;
+                param.push({ order_no: this.tabletItem.order_no, num: this.tabletItem.num })
+                await axios
+                    .post('/api/orderdetail/GetDetailToPrint', { param: param })
+                    .then(response => {
+
+                        if (response.status == 200) {
+                            self.printData = response.data;
+                            self.printData.forEach(x => {
+                                self.selectStyle = x;
+                                let tablet = JSON.parse(x.f_num_tablet);
+
+                                let mid_items = tablet.mid_items;
+                                let left_items = tablet.left_items;
+                                //let mid = [];
+                                mid_items.forEach(y => {
+                                    self.properTitle.push(y.fam_name);
+                                });
+                                //let left = []
+                                if (left_items) {
+                                    left_items.forEach(y => {
+                                        self.alive.push(y.fam_name);
+                                    });
+                                }
+                            });
+                            this.render();
+                        }
+                    });
+            },
+            async 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;
+                //列印紙張的尺寸
+               
+                console.log("printData:", this.printData);
+                let mid = [];
+                Object.assign(mid, self.properTitle);
+                let left = []
+                Object.assign(left, self.alive);
+                //this.printData.forEach(x => {
+                let x = self.selectStyle;
+                    let style = self.allStyle.find(y => y.styleID == x.style);
+                    //用來印內容的尺寸
+                    let size = self.allSize.find(y => y.paperID == style.paperSize);
+                    let pageSize = self.allSize.find(y => y.paperID == style.printSize);
+                    //包含空白用來折的尺寸
+                    let printSize = self.allSize.find(y => y.paperID == style.printSize);
+
+                    tabletpaper = $(` <div class="tablet-paper"></div>`)
+                    let img = self.bg.find(y => y.name == style.backendImg);
+                    let details = this.allStyleDetails.filter(y => y.styleID == x.style);
+                    console.log("details:", details);
+                    let ancestorFontSize = 16;
+                    details.forEach(d => {
+                        if (d.isActive != "hidden") {
+                            let element = self.tabletElement.find(y => y.elementID == d.elementID);
+                            //let newFontSize = self.scaleFontSize(d.sampleContent, d.fontSize, d.width);
+                            let newFontSize = 16;
+                            let html = "";
+                            let alive = "";
+                            let yang = "";
+                            let bi = "";
+
+                            if (d.elementID === 'title1') {
+                                let $namelist = $(`<div class='nameList'></div>`).css({
+                                    "writing-mode": "vertical rl",
+                                    display: "flex",
+                                    "flex-direction": "row",
+                                    "flex-wrap": "wrap",
+                                    margin: "auto",
+                                    width: `${d.width}px`,
+                                    height: `${d.height}px`,
+                                    border: "0px solid #ccc",
+                                    padding: "1px",
+                                    "font-family": style.fontFamily,
+                                    "letter-spacing": "0.1em",
+                                    "column-gap": "1px",
+                                    "row-gap": "1px",
+                                    "align-items": "center",
+                                    "justify-content": "space-between",
+                                });
+
+                                mid.forEach(z => {
+                                    let info = self.getTextInfo(z, newFontSize);
+                                    let spanWidth = mid.length > 1 ? newFontSize : d.width
+                                    let height = d.textHeight;
+                                    if (info.width >= d.textHeight) {
+                                        height = d.height;
+                                    }
+                                    let $span = $(`<span class="nameSpan">${z}</span>`).css({
+                                        display: "block",
+                                        "min-height": `${height}px`,
+                                        "max-height": `${d.height}px`,
+                                        "max-width": `${spanWidth}px`,
+                                        //width: `${newFontSize}px`,
+                                        "text-align": "justify",
+                                        "text-align-last": "justify",
+                                        "margin-bottom": "20px",
+                                        "margin-left": "5px",
+                                        "text-justify": "inter-character",
+                                        "white-space": "pre-line",
+                                        //"justify-content":"center"
+                                    });
+                                    $namelist.append($span);
+                                });
+
+                                html = $namelist;
+                            } else if (d.elementID === "alive") {
+                                html = self.renderLiveList(left, d);
+
+                                newFontSize = d.fontSize;
+                            } else if (d.elementID === "titletriangle") {
+                                html = self.renderRoster(mid, d)
+                            } else if (d.elementID === "combined") {
+                                ancestorFontSize = d.fontSize;
+                                newFontSize = d.fontSize;
+                                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>`;
+                            }
+                            if (newFontSize < 10) {
+                                newFontSize = 10;
+                            }
+                            let content = $(`<div class="tablet-element vertical-text ">${element.sampleContent}</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 = "";
+
+
+                        }
+                    });
+                    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:flex !important;
+                                       
+                                        flex-direction: row !important;
+                                        justify-content:center !important;
+                                        align-items:center !important;
+                                     
+                                    }
+
+                                    .tablet-paper {
+                                        position: relative !important;
+                                        display: block !important;
+                                        break-inline:avoid;
+                                        page-break-inline:avoid;
+                                        break-after: page !important;
+                                        page-break-after: always !important;
+                                        margin: 0 !important;
+                                        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: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+                                    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;
+                                    /*font-weight: bold;*/
+                                    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 {
+                                    font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
+                                    line-height: 1.2;
+                                    margin-top: 4px; /* 與上方林張的間距 */
+                                    white-space: normal; /* 避免自動換行 */
+                                    writing-mode:vertical-rl
+                                }
+
+                                .canvas-area{
+                                    width: ${pageSize.width}mm;
+                                    height: ${pageSize.height}mm;
+                                    break-after: page;
+                                    page-break-after: always;
+                                    display:flex !important;
+                                    justify-content:center;
+                                  
+                                }
+               
+                                .tablet-paper{
+                                    background-color: white;
+                                    display: inline-block;
+                                    width: ${size.width}mm !important;
+                                    height: ${size.height}mm !important;
+                                    position: relative;
+                                    margin-bottom: 0;
+                                    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);
+                    $(canvas).append(tabletpaper);
+                    $(".printArea").append(canvas);
+                //});
+
+                $(".tablet-element").on("click", function (e) {
+                    e.preventDefault();
+                    self.selectedElement = $(this);
+                    let element = $(this).children().first();
+                    if (element.hasClass("liveList")) {//陽上
+                        //抓往生的人出來
+                        //self.familyMembers;
+                    } else if (element.hasClass("address")) {//地址
+
+                    } else {//其他都是正名
+                        //抓未往生的人出來
+
+                    }
+                    //console.log(this);
+                });
+            },
+            //async getFamily() {
+            //    let param = {};
+            //    await axios
+            //        .post('/api/familymembers/follower', { param: param })
+            //        .then(response => { });
+
+            //},
+            changeStyle() {
+
+            },
+            fix2(val) {
+                return Number.parseFloat(val).toFixed(2);
+            },
+            renderLiveList(names, el) {
+                let $namelist = $(`<div class='liveList'></div>`).css({
+                    "writing-mode": "vertical rl",
+                    display: "flex",
+                    "flex-direction": "row",
+                    "flex-wrap": "wrap",
+                    margin: "auto",
+                    width: `${el.width}px`,
+                    height: `${el.height}px`,
+                    border: "0px solid #ccc",
+                    padding: "1px",
+                    "font-family": el.fontFamily,
+                    "letter-spacing": "0.1em",
+                    "column-gap": "1px",
+                    "row-gap": "1px",
+                    "align-items": "center",
+                });
+                let self = this;
+                names.forEach(n => {
+                    $namelist.append(self.renderLiveSpan(n, el))
+                })
+                return $namelist;
+            },
+            renderLiveSpan(name, el) {
+                return $(`<span class="liveSpan">${name}</span>`).css({
+                    display: "block",
+                    "min-height": `${el.textHeight}px`,
+                    "max-height": `${el.height}px`,
+                    width: `${el.textWidth}px`,
+                    height: `${el.textHeight}px`,
+                    "text-align": "justify",
+                    "text-align-last": "justify",
+                    "margin-bottom": "10px",
+                    "text-justify": "inter-character",
+                    "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="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
+                })
+                return g;
+            },
+            async 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;
+            },
+            scaleFontSize(txtContent, fontSize, elementWidth) {
+
+                let font = this.getTextSize("講", parseInt(fontSize));
+                //自動判斷縮小字型的規則,要同時縮小間距
+
+                //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
+                if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
+                    let newfontSize = parseInt(fontSize) - 1;
+                    if (newfontSize <= 8) {
+                        return newfontSize;
+                    }
+                    //console.log("newfontSize:",newfontSize)
+                    return this.scaleFontSize(txtContent, newfontSize, elementWidth);
+                }
+                return fontSize;
+            },
+            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;
+            },
+        }
+
+        $(() => $(window).on("message", function (event) {
+            let e = event.originalEvent;
+            if (e.origin === window.parent.location.origin) {
+                //console.log('editor.html - origin check passed');
+                //console.log('editor.html - received data:', event.data);
+                const receivedData = e.data;
+                designer.family_deceased_Y_selected = [];
+                designer.family_deceased_N_selected = [];
+
+                if (receivedData.tabletItem) {
+                    //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
+                    designer.tabletItem = receivedData.tabletItem;
+                    if (receivedData.familyMembers) {
+                        designer.familyMembers = receivedData.familyMembers; // 更新 familyMembers
+                        //console.log("app mounted, window message: ", this.familyMembers, receivedData);
+                    }
+                    if (receivedData.tabletItem) {
+                        designer.tabletItem = receivedData.tabletItem;
+                    }
+                    //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
+                    console.log("receivedData::", receivedData);
+                    if (receivedData.tabletItem.style) {
+                        designer.selected.style = receivedData.tabletItem.style;
+                    } else {
+                        designer.selected.style = "";
+                    }
+                    console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
+                    designer.actitem = receivedData.tabletItem.actitem_num_selected.val;
+                    //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
+                    // 處理 f_num_tablet 資料
+                    if (designer.tabletItem.f_num_tablet) {
+                        try {
+                            const data = JSON.parse(designer.tabletItem.f_num_tablet);
+
+                            if (designer.item_type === 'B') {
+                                // B類型：超渡、超薦等
+                                designer.family_deceased_Y_selected = data.mid_items || [];
+                                designer.family_deceased_N_selected = data.left_items || [];
+
+                                designer.family_deceased_Y_selected.forEach(item => {
+                                    if (item.IsShuWen === undefined) {
+                                        //Vue.set(item, 'IsShuWen', false);
+                                    }
+                                });
+                                if (designer.family_deceased_Y_selected.length > 0) {
+                                    designer.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
+                                } else {
+                                    designer.isAllSelected = false;
+                                }
+
+                            } else {
+                                // A類型：消災、陽上等
+                                designer.family_deceased_Y_selected = [];
+                                designer.family_deceased_N_selected = data.mid_items || [];
+
+                                designer.family_deceased_N_selected.forEach(item => {
+                                    if (item.IsShuWen === undefined) {
+                                        //Vue.set(item, 'IsShuWen', false);
+                                    }
+                                });
+                                if (designer.family_deceased_Y_selected.length > 0) {
+                                    designer.isAllSelected = designer.family_deceased_N_selected.every(member => member.IsShuWen === true);
+
+                                } else {
+                                    designer.isAllSelected = false;
+                                }
+                                //console.log(this.family_deceased_N_selected)
+                            }
+                        } catch (e) {
+                            console.error('解析牌位資料時發生錯誤:', e);
+                        }
+                    }
+
+                    designer.getActItem();
+                    designer.getData();
+                }
+            }
+            console.log(e.origin, window.parent.location.origin)
+        })
+        )
+
+        $(() => designer.init().then(() => designer.getTabletElement().
+                then(() => designer.getPaperSize().
+                    then(() => designer.getTabletStyles().
+                        then(designer.getAllStyleDetails())))));
+    </script>
+</body>
+
+</html>