diff --git a/web/App_Code/DataAccess/StyleDataAccess.cs b/web/App_Code/DataAccess/StyleDataAccess.cs
index 72d664a..b5764cc 100644
--- a/web/App_Code/DataAccess/StyleDataAccess.cs
+++ b/web/App_Code/DataAccess/StyleDataAccess.cs
@@ -24,6 +24,72 @@ public class StyleDataAccess
         //
     }
 
+    public object[] AddTabletPaper(TabletPaperSize tps)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+                sb.Append("insert into TabletPaperSize (PaperID,PaperName,Width,Height,CUser,CDate,CTime,UUser,UDate,UTime )");
+                sb.Append("values (@PaperID,@PaperName,@Width,@Height,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime )");
+                sp.Add(new SqlParameter("@PaperID",tps.PaperID));
+                sp.Add(new SqlParameter("@PaperName", tps.PaperName));
+                sp.Add(new SqlParameter("@Width", tps.Width));
+                sp.Add(new SqlParameter("@Height", tps.Height));
+                sp.Add(new SqlParameter("@CUser", tps.CUser));
+                sp.Add(new SqlParameter("@CDate", tps.CDate));
+                sp.Add(new SqlParameter("@CTime", tps.CTime));
+                sp.Add(new SqlParameter("@UUser", tps.UUser));
+                sp.Add(new SqlParameter("@UDate", tps.UDate));
+                sp.Add(new SqlParameter("@UTime", tps.UTime));
+                context.Database.ExecuteSqlCommand(sb.ToString(),sp);
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("AddTabletPaper:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+        return obj;
+    }
+    public object[] GetTabletPaper(string paperID, string name)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+
+                sb.Append("select * from TabletPaperSize where 1=1 ");
+                if (!string.IsNullOrEmpty(paperID))
+                {
+                    sb.Append("and PaperID=@PaperID ");
+                    sp.Add(new SqlParameter("@PaperID", paperID));
+                }
+                if (!string.IsNullOrEmpty(name))
+                {
+                    sb.Append("and Name=@Name ");
+                    sp.Add(new SqlParameter("@Name", name));
+                }
+                var data = context.Database.SqlQuery<TabletPaperSize>(sb.ToString(), sp.ToArray()).ToList();
+                obj[2] = data;
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("GetTabletElement:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+
+        return obj;
+    }
+
+
     public object[] GetTabletElement(string elementID ,string name)
     {
         try
@@ -31,20 +97,20 @@ public class StyleDataAccess
             using (var context = new ezEntities())
             {
                 StringBuilder sb = new StringBuilder();
-                SqlParameter[] sp = new SqlParameter[] { };
+                var sp = new List<SqlParameter>();
 
                 sb.Append("select * from TabletElement where 1=1 ");
                 if (!string.IsNullOrEmpty(elementID))
                 {
                     sb.Append("and ElementID=@ElementID ");
-                    sp.Append(new SqlParameter("ElementID", elementID));
+                    sp.Add(new SqlParameter("@ElementID", elementID));
                 }
                 if (!string.IsNullOrEmpty(name))
                 {
                     sb.Append("and Name=@Name ");
-                    sp.Append(new SqlParameter("Name", name));
+                    sp.Add(new SqlParameter("@Name", name));
                 }
-                var data = context.Database.SqlQuery<TabletElement>(sb.ToString(), sp).ToList();
+                var data = context.Database.SqlQuery<TabletElement>(sb.ToString(), sp.ToArray()).ToList();
                 obj[2] = data;
             }
         }
@@ -65,20 +131,20 @@ public class StyleDataAccess
             using (var context = new ezEntities())
             {
                 StringBuilder sb = new StringBuilder();
-                SqlParameter[] sp = new SqlParameter[] { };
+                var sp = new List<SqlParameter>();
 
                 sb.Append("select * from TabletStyleDetail where 1=1 ");
                 if (!string.IsNullOrEmpty(styleID))
                 {
                     sb.Append("and StyleID=@StyleID ");
-                    sp.Append(new SqlParameter("StyleID", styleID));
+                    sp.Add(new SqlParameter("@StyleID", styleID));
                 }
                 if (!string.IsNullOrEmpty(elementID))
                 {
                     sb.Append("and ElementID=@ElementID ");
-                    sp.Append(new SqlParameter("ElementID", elementID));
+                    sp.Add(new SqlParameter("@ElementID", elementID));
                 }
-                var data = context.Database.SqlQuery<TabletStyleDetail>(sb.ToString(), sp).ToList();
+                var data = context.Database.SqlQuery<TabletStyleDetail>(sb.ToString(), sp.ToArray()).ToList();
                 obj[2] = data;
             }
         }
@@ -98,20 +164,20 @@ public class StyleDataAccess
             using (var context = new ezEntities())
             {
                 StringBuilder sb = new StringBuilder();
-                SqlParameter[] sp = new SqlParameter[] { };
+                var sp = new List<SqlParameter>();
 
                 sb.Append("select * from TabletStyle where 1=1 ");
                 if (!string.IsNullOrEmpty(id))
                 {
                     sb.Append("and StyleID=@StyleID ");
-                    sp.Append(new SqlParameter( "StyleID",id));
+                    sp.Add(new SqlParameter( "@StyleID",id));
                 }
                 if (!string.IsNullOrEmpty(name))
                 {
                     sb.Append("and Name=@Name ");
-                    sp.Append(new SqlParameter("Name", name));
+                    sp.Add(new SqlParameter("@Name", name));
                 }
-               var data= context.Database.SqlQuery<TabletStyle>(sb.ToString(), sp).ToList();
+               var data= context.Database.SqlQuery<TabletStyle>(sb.ToString(), sp.ToArray()).ToList();
                 obj[2]= data;
             }
         }
@@ -225,7 +291,7 @@ public class StyleDataAccess
                 new SqlParameter("@UTime",""),
             };
 
-                sb.Append("update TableStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,");
+                sb.Append("update TabletStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,");
                 sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,");
                 sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
                 sb.Append("where StyleID=@StyleID ");
@@ -234,7 +300,7 @@ public class StyleDataAccess
 
                 sb.Clear();
                 sb.Append("update TabletStyleDetail set Descr=@Descr,StartX=@StartX,StartY=@StartY,FontSize=@FontSize,BreakLen=@BreakLen,");
-                sb.Append("FontFamily=@FontFamily,TwoOffset=@TwoOffset,ThreeOffset=@ThreeOffset,FourOffsert=@FourOffset,IsActive=@IsActive,");
+                sb.Append("FontFamily=@FontFamily,TwoOffset=@TwoOffset,ThreeOffset=@ThreeOffset,FourOffset=@FourOffset,IsActive=@IsActive,");
                 sb.Append("Width=@Width,Height=@Height,TextWidth=@TextWidth,TextHeight=@TextHeight,UUser=@UUser,UDate=@UDate,UTime=@UTime ");
                 sb.Append("where StyleID=@StyleID and ElementID=@ElementID ");
                 //sb.Append("insert into TabletStyleDetail(StyleID,Name,Descr,ElementID,StartX,StartY,FontSize,BreakLen,FontFamily,TwoOffset,");
diff --git a/web/App_Code/Entity/Style.cs b/web/App_Code/Entity/Style.cs
index bce4a46..f7afe2a 100644
--- a/web/App_Code/Entity/Style.cs
+++ b/web/App_Code/Entity/Style.cs
@@ -73,4 +73,19 @@ public class TabletElement
     public string UUser { get; set; }
     public string UDate { get; set; }
     public string UTime { get; set; }
+}
+
+public class TabletPaperSize
+{
+    public TabletPaperSize() { }
+    public string PaperID { get; set; }
+    public string PaperName { get; set; }
+    public string Width { get; set; }
+    public string Height { get; set; }
+    public string CUser { get; set; }
+    public string CDate { get; set; }
+    public string CTime { get; set; }
+    public string UUser { get; set; }
+    public string UDate { get; set; }
+    public string UTime { get; set; }
 }
\ No newline at end of file
diff --git a/web/App_Code/api/designerController.cs b/web/App_Code/api/designerController.cs
index 905455f..ea78082 100644
--- a/web/App_Code/api/designerController.cs
+++ b/web/App_Code/api/designerController.cs
@@ -12,7 +12,7 @@ using System.Web.Http;
 /// <summary>
 /// designerController 的摘要描述
 /// </summary>
-public class designerController:ApiController
+public class designerController : ApiController
 {
     public designerController()
     {
@@ -67,8 +67,8 @@ public class designerController:ApiController
     {
         LogUtility log = new LogUtility();
 
-        object[] obj=new StyleDataAccess().GetStyle("","");
-        if (obj[0].ToString()=="Y")
+        object[] obj = new StyleDataAccess().GetStyle("", "");
+        if (obj[0].ToString() == "Y")
         {
             return Ok(new { result = "Y", data = obj[2] });
         }
@@ -84,13 +84,13 @@ public class designerController:ApiController
     [Route("api/tablet/SavDegignerData")]
     public IHttpActionResult SavDegignerData([FromBody] dynamic data)
     {
-        LogUtility log=new LogUtility();
+        LogUtility log = new LogUtility();
         var json = data;
         //json.detail.Children<JObject>()
         log.writeLogPath((string)json.styleName);
-        TabletStyle ts=new TabletStyle();
-        List<TabletStyleDetail> list=new List<TabletStyleDetail>();
-        ts.StyleID = (json == null || json.styleID == null) ? "" : (string) json.styleID;
+        TabletStyle ts = new TabletStyle();
+        List<TabletStyleDetail> list = new List<TabletStyleDetail>();
+        ts.StyleID = (json == null || json.styleID == null) ? "" : (string)json.styleID;
         string mode = "edit";
         if (string.IsNullOrEmpty(ts.StyleID))
         {
@@ -108,8 +108,8 @@ public class designerController:ApiController
         foreach (var item in json.detail.Children<JObject>())
         {
             TabletStyleDetail tsd = new TabletStyleDetail();
-            tsd.StyleID=ts.StyleID;
-            tsd.Name=item.name==null?"":(string)item.name;
+            tsd.StyleID = ts.StyleID;
+            tsd.Name = item.name == null ? "" : (string)item.name;
             tsd.Descr = item.descr == null ? "" : (string)item.descr;
             tsd.ElementID = item.elementID == null ? "" : (string)item.elementID;
             tsd.StartX = item.startX == null ? "" : (string)item.startX;
@@ -126,8 +126,111 @@ public class designerController:ApiController
         }
         if (mode == "add")
         {
-          object[] obj=  new StyleDataAccess().AddStyle(ts,list);
+            object[] obj = new StyleDataAccess().AddStyle(ts, list);
         }
         return Ok();
     }
- }
\ No newline at end of file
+
+
+
+    [HttpPost]
+    [Route("api/tablet/UpdateDegignerData")]
+    public IHttpActionResult UpdateDegignerData([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        //json.detail.Children<JObject>()
+        log.writeLogPath((string)json.styleName);
+        TabletStyle ts = new TabletStyle();
+        List<TabletStyleDetail> list = new List<TabletStyleDetail>();
+        ts.StyleID = (json == null || json.styleID == null) ? "" : (string)json.styleID;
+        string mode = "edit";
+        if (string.IsNullOrEmpty(ts.StyleID))
+        {
+            ts.StyleID = DateTime.Now.ToString("yyyyMMddHHmmss");
+            mode = "add";
+        }
+        ts.Name = (json == null || json.styleName == null) ? "" : (string)json.styleName;
+        ts.Descr = (json == null || json.descr == null) ? "" : (string)json.descr;
+        ts.PaperSize = (json == null || json.paperSize == null) ? "" : (string)json.paperSize;
+        ts.BackendImg = (json == null || json.backendImg == null) ? "" : (string)json.backendImg;
+        ts.PrintSize = (json == null || json.printSize == null) ? "" : (string)json.printSize;
+        ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
+        ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
+        ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode;
+        foreach (var item in json.detail.Children<JObject>())
+        {
+            TabletStyleDetail tsd = new TabletStyleDetail();
+            tsd.StyleID = ts.StyleID;
+            tsd.Name = item.name == null ? "" : (string)item.name;
+            tsd.Descr = item.descr == null ? "" : (string)item.descr;
+            tsd.ElementID = item.elementID == null ? "" : (string)item.elementID;
+            tsd.StartX = item.startX == null ? "" : (string)item.startX;
+            tsd.StartY = item.startY == null ? "" : (string)item.startY;
+            tsd.FontSize = item.fontSize == null ? "" : (string)item.fontSize;
+            tsd.FontFamily = item.fontFamily == null ? "" : (string)item.fontFamily;
+            tsd.BreakLen = item.breakLen == null ? "" : (string)item.breakLen;
+            tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.TwoOffset = item.twoOffset == null ? "" : (string)item.twoOffset;
+            tsd.ThreeOffset = item.threeOffset == null ? "" : (string)item.threeOffset;
+            tsd.FourOffset = item.fourOffset == null ? "" : (string)item.fourOffset;
+            tsd.IsActive = item.isActive == null ? "" : (string)item.isActive;
+            tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.Height = item.height == null ? "" : (string)item.height;
+            tsd.TextWidth = item.textWidth == null ? "" : (string)item.textWidth;
+            tsd.TextHeight = item.textHeight == null ? "" : (string)item.textHeight;
+            list.Add(tsd);
+        }
+
+        object[] obj = new StyleDataAccess().UpdateStyle(ts, list);
+
+        return Ok();
+    }
+
+
+    [HttpPost]
+    [Route("api/tablet/GetPaperSize")]
+    public IHttpActionResult GetPaperSize([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+
+        object[] obj = new StyleDataAccess().GetTabletPaper("", "");
+        if (obj[0].ToString() == "Y")
+        {
+            return Ok(new { result = "Y", data = obj[2] });
+        }
+        else
+        {
+            return Ok(new { result = "N", message = obj[1] });
+            //throw new HttpResponseException(HttpStatusCode.NotFound);
+        }
+        //return Ok(data);
+    }
+
+
+    [HttpPost]
+    [Route("api/tablet/SavePaperSize")]
+    public IHttpActionResult SavePaperSize([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        //json.detail.Children<JObject>()
+        log.writeLogPath((string)json.styleName);
+        TabletPaperSize tps = new TabletPaperSize();
+        tps.PaperID = (json == null || json.PaperID == null) ? "" : (string)json.PaperID;
+        if (string.IsNullOrEmpty(tps.PaperID))
+        {
+            tps.PaperID = DateTime.Now.ToString("yyyyMMddHHmmss");
+        }
+        tps.PaperName = (json == null || json.PaperName == null) ? "" : (string)json.PaperName;
+        tps.Width = (json == null || json.Width == null) ? "" : (string)json.Width;
+        tps.Height = (json == null || json.Height == null) ? "" : (string)json.Height;
+
+
+
+        object[] obj = new StyleDataAccess().AddTabletPaper(tps);
+
+        return Ok();
+    }
+
+}
\ No newline at end of file
diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx
index 936b155..4289a8a 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -8,7 +8,6 @@
         @import "css/tablet-design.css";
         @import "css/floating.css";
     </style>--%>
-    
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -17,19 +16,41 @@
         <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 style-menu">
-                <li><span class="dropdown-item">選擇版型</span></li>
-              </ul>
-              <input type="text" id="styleName" class="form-control" aria-label="版型名稱">
+                <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    版型</button>
+                <ul class="dropdown-menu style-menu">
+                    <li><span class="dropdown-item" data-value="">選擇版型</span></li>
+                </ul>
+                <input type="text" id="styleName" class="form-control" aria-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" style="color:black">尺寸</label>
+                <label for="paperSize" style="color: black">尺寸</label>
+            </div>
+            <div id="sizeDiv" style="display:none;">
+            <div class="form-floating mb-3">
+                <input type="text" class="form-control form-select-sm mb-2 " id="paperName" />
+
+                <label for="paperName" style="color: black">名稱</label>
+            </div>
+           
+            <div class="form-floating mb-3">
+                <input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" />
+
+                <label for="paperWidth" style="color: black">寬度</label>
+            </div>
+            <div class="form-floating mb-3">
+                <input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" />
+
+                <label for="paperHeight" style="color: black">高度</label>
+            </div>
+                <div class="row">
+                    <span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span>
+                </div>
             </div>
             <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
                 <span></span>
@@ -43,41 +64,41 @@
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
             <div class="form-floating mb-3">
-             <%--   <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
+                <%--   <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
                     <i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
                 </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">--%>
+                <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.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="combine">合併</option>
                     <option value="origin">原尺寸</option>
                 </select>
-                <label for="printMode" style="color:black">列印模式</label>
+                <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>
+                <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>--%>
+                    <%--  <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="">存檔</span>--%>
                 </div>
             </div>
         </div>
@@ -142,51 +163,84 @@
                 </div>
             </div>
             <div class="row">
-              <div class="col-6">
-                  <div class="form-floating mb-3">
-                      <input type="number" id="width" class="form-control form-control-sm mb-2">
-                      <label class="small" for="width">寬度</label>
-                  </div>
-              </div>
-              <div class="col-6">
-                  <div class="form-floating mb-3">
-                      <input type="number" id="height" class="form-control form-control-sm mb-2">
-                      <label class="small" for="height">高度</label>
-                  </div>
-              </div>
-          </div>
-          <div class="row">
-            <div class="col-6">
-                <div class="form-floating mb-3">
-                    <input type="number" id="textWidth" class="form-control form-control-sm mb-2">
-                    <label class="small" for="textWidth">文字寬度</label>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="width" class="form-control form-control-sm mb-2">
+                        <label class="small" for="width">寬度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="height" class="form-control form-control-sm mb-2">
+                        <label class="small" for="height">高度</label>
+                    </div>
                 </div>
             </div>
-            <div class="col-6">
-                <div class="form-floating mb-3">
-                    <input type="number" id="textHeight" class="form-control form-control-sm mb-2">
-                    <label class="small" for="textHeight">文字高度</label>
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="textWidth" class="form-control form-control-sm mb-2">
+                        <label class="small" for="textWidth">文字寬度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="textHeight" class="form-control form-control-sm mb-2">
+                        <label class="small" for="textHeight">文字高度</label>
+                    </div>
                 </div>
             </div>
         </div>
-        </div>
     </div>
 
+
+
 </asp:Content>
+
 <asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
+    <%-- <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+     
+                    <h5 class="modal-title">紙張尺寸設定</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <input type="text" id="PaperName" />
+                        </div>
+                        <div class="col-12">
+                            <input type="text" id="PaperWidth" />
+                        </div>
+                        <div class="col-12">
+                            <input type="text" id="PaperHeight" />
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>--%>
+
     <%--      <script src="../../js/jquery-4.0.0.min.js"></script>
     <script src="jquery-ui/jquery-ui.js"></script>--%>
     <script>
         const Designer = {
             elements: [],
             activeId: null,
+            styleID: null,
             paper: { width: 100, height: 272 },
             rosterLimit: 8,
             allSize: [
-                { name: "A3", width: 297, height: 420, selected: "" },
-                { name: "A4", width: 210, height: 297, selected: "" },
-                { name: "B4", width: 257, height: 364, selected: "" },
-                { name: "red", width: 100, height: 272, selected: "selected" },
+                //{ name: "A3", width: 297, height: 420, selected: "" },
+                //{ name: "A4", width: 210, height: 297, selected: "" },
+                //{ name: "B4", width: 257, height: 364, selected: "" },
+                //{ name: "red", width: 100, height: 272, selected: "selected" },
             ],
             bg: [
                 { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
@@ -201,15 +255,13 @@
             orientation: "portrait",
             init() {
                 //$(".tablet-element").draggable({});
+                this.getPaperSize();
                 this.getElements();
                 this.getStyles();
                 this.bindEvents();
-                this.loadConfig();
+                //this.loadConfig();
                 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>")
                 });
@@ -231,8 +283,29 @@
                     height: this.paper.height + "mm",
                 });
             },
+            async getPaperSize() {
+                let self = this
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                data.data.forEach(x => {
+                                    self.allSize.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
+                                });
+                            }
+                        }
+                    });
+                $("#paperSize").append("<option value='newsize' >新增尺寸</option>")
+                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>");
+                })
+            },
             async getElements() {
-                let self=this
+                let self = this
                 await axios
                     .post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
                     .then(response => {
@@ -272,30 +345,29 @@
                     $(".style-menu li").removeClass('active');
                     $(this).addClass('active');
                     $("#styleName").val(e.target.textContent);
+                    self.styleID = e.target.getAttribute("data-value")
                     self.changeStyle(e.target.getAttribute("data-value"));
                     let style = self.allStyle.find(x => x.styleID == e.target.getAttribute("data-value"));
                     let size = self.allSize.find(x => x.name == style.paperSize);
                     self.paper.width = size.width;
                     self.paper.height = size.height;
-                    
+
                 });
             },
             async changeStyle(id) {//切換版型，抓回明細
                 let self = this;
                 this.elements.length = 0;
                 let obj = this.elements
-                let s=this.allStyle.find(x=>x.styleID==id)
+                let s = this.allStyle.find(x => x.styleID == id)
                 $("#paperSize").val(s.paperSize);
                 $("#backendInp").val(s.backendImg);
                 $("#printSize").val(s.printSize);
                 $("#printMode").val(s.printMode);
                 $("#perPage").val(s.printPageCount);
-                console.log("s:",s);
                 let img = this.bg.find(x => x.name == s.backendImg);
-                console.log(img);
-                $(".tablet-paper").css({ 'background-image': 'url(' + img.path + ')', 'background-size': '100% 100%' })
+                $(".tablet-paper").css({ 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%' })
                 await axios
-                    .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', {})
+                    .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
                     .then(response => {
                         if (response.status == "200") {
                             let data = response.data;
@@ -307,27 +379,29 @@
                                     let te = self.tabletElements.find(x => {
                                         return x.elementID == el.elementID
                                     });
-                                    console.log("details:",el,te);
+                                    //console.log("details:",el,te);
                                     let config = {
                                         id: el.elementID,
                                         type: te.elementType,
-                                        text: te.sampleContent,
+                                        text: te.sampleContent.replaceAll("\\n", "\n"),
                                         x: el.startX, y: el.startY,
                                         style: {
-                                            fontSize: 24,
-                                            fontFamily: "Kaiti", isVertical : true,
-                                            letterSpacing : 5, lineHeight : 1.5,
-                                            visibility: te.isActive
+                                            fontSize: el.fontSize,
+                                            fontFamily: "Kaiti",
+                                            isVertical: true,
+                                            letterSpacing: 5, lineHeight: 1.5,
+                                            visibility: el.isActive,
                                         },
+
                                         width: el.width,
                                         height: el.height,
                                         textWidth: el.textWidth,
-                                        textHeight:el.textHeight,
+                                        textHeight: el.textHeight,
                                         breakLen: el.breakLen,
                                         backendInp: el.backendImg
                                     };
 
-                                   obj.push(config)
+                                    obj.push(config)
 
                                 })
 
@@ -342,12 +416,33 @@
             },
             changePaper() {
                 let paperSize = $("#paperSize").val()
-                let size = this.allSize.find(x => x.name == paperSize)
-                $(".tablet-paper").css({
-                    "background-color": "white",
-                    width: size.width + "mm",
-                    height: size.height + "mm",
-                });
+                console.log(paperSize);
+
+                if (paperSize == "newsize") {
+                    $("#sizeDiv").attr("style","display:");
+                } else {
+                    let size = this.allSize.find(x => x.name == paperSize)
+                    $(".tablet-paper").css({
+                        "background-color": "white",
+                        width: size.width + "mm",
+                        height: size.height + "mm",
+                    });
+                }
+            },
+            async savePaperSize() {
+                let ps = {
+                    paperName: $("#paperName").val(),
+                    width: $("#paperWidth").val(),
+                    height: $("#paperHeight").val()
+                }
+                console.log(ps);
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/SavePaperSize', ps)
+                    .then(response => {
+                        if (response.status == "200") {
+                        }
+                    });
+
             },
             changePrintMode() {
 
@@ -370,7 +465,6 @@
                     this.select($(e.currentTarget).attr('id'));
                 });
             },
-
             loadConfig() {
                 $.ajax({
                     type: "POST", url: "TabletDesigner.aspx/GetConfig", contentType: "application/json",
@@ -381,9 +475,9 @@
                     }
                 });
             },
-
             // 處理分頁渲染邏輯
             render() {
+                $(".tablet-paper").empty();
                 //const $canvas = $('#canvas').empty();
                 const roster = this.elements.find(e => e.type === 'roster');
                 const names = roster ? roster.text.split('\n').filter(s => s.trim()) : [];
@@ -396,10 +490,15 @@
                 //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 => {
+                    console.log("shit:", el);
                     $paper.append(this.createEl(el, slice));
                 });
                 //$canvas.append($paper);
                 //}
+
+                //let s = this.allStyle.find(x => x.styleID == this.styleID);
+                //let d = this.elements.filter(x => x.styleID == this.styleID);
+                //console.log(s,d);
                 this.makeDraggable();
             },
 
@@ -422,27 +521,21 @@
                     html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
                 }
                 else if (el.id === 'title1') {
-
-                    //html = "<div class='name-list'>";
-                    //console.log(slice);
-                    //slice.forEach(x => {
-                    //    html=html+"<span>"+x+"</span>"
-                    //});
-                    //html = html + "</div>";
-                    html = this.renderNameList(slice,el);
+                    html = this.renderNameList(slice, el);
                     console.log(html);
                 }
                 else {
                     html = el.text;
                 }
-
+                console.log("QQ:", el);
                 return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
                     .css({
                         position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                        //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
                     })
                     .html(html);
             },
-            renderNameList(names,el) {
+            renderNameList(names, el) {
                 let $namelist = $(`<div class='nameList'></div>`).css({
                     "writing-mode": "vertical rl",
                     display: "flex",
@@ -462,11 +555,11 @@
                 console.log("nameList:", $namelist)
                 let self = this;
                 names.forEach(n => {
-                    $namelist.append(self.renderNameSpan(n,el))
+                    $namelist.append(self.renderNameSpan(n, el))
                 })
                 return $namelist;
             },
-            renderNameSpan(name,el) {
+            renderNameSpan(name, el) {
                 return $(`<span>${name}</span>`).css({
                     display: "block",
                     "min-height": `${el.textHeight}px`,
@@ -486,7 +579,7 @@
                 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.style.fontSize);
+                const size = this.autoScale(names, el.fontSize);
 
                 let h = `<div class="roster-container" style="gap:${el.style.itemSpacing || 20}px">`;
                 h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
@@ -514,7 +607,7 @@
                         el.x = self.getPosInMm(ui.position.left);
                         el.y = self.getPosInMm(ui.position.top);
                         //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" });
+                        $(`.tablet-element[id="${id}"]`).css({ left: el.startX + "mm", top: el.startY + "mm" });
                     }
                 });
             },
@@ -541,7 +634,8 @@
 
             updateActive(key, val) {
                 const el = this.elements.find(x => x.id === this.activeId);
-                if (key === 'fontSize') el.style.fontSize = parseFloat(val);
+
+                if (key === 'fontSize') el.fontSize = parseFloat(val);
                 else if (key === 'width') el.width = parseFloat(val);
                 else if (key === 'breakLen') el.breakLen = parseInt(val);
                 else if (key === '2offset') el.twoOffset = parseFloat(val);
@@ -551,7 +645,7 @@
                 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
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.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") {
                     const parts = el.text.split('\n');
@@ -560,7 +654,7 @@
                                 <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
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
                     }).html(html);
                 } else if (this.activeId === "title1") {
                     let slice = el.text.split('\n').filter(s => s.trim());
@@ -631,7 +725,7 @@
             },
             bindBackend() {
                 $("#backendInp").on('change', function (e) {
-              
+
                     const input = e.target;
                     if (input.files && input.files[0]) {
                         const file = input.files[0];
@@ -653,28 +747,32 @@
                 })
             },
             async saveStyle() {
-                
+
                 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,
+                        elementID: el.id, startX: el.x.toString(), startY: el.y.toString(), fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
                         breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset,
-                        isActive: el.style.visibility,width:el.width,height:el.height,textWidth:el.textWidth,textHeight:el.textHeight
+                        isActive: el.style.visibility, width: el.width, height: el.height, textWidth: el.textWidth, textHeight: el.textHeight
                     });
                 });
 
                 let master = {
-                    styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
+                    styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
                     backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
                     orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(),
                     detail: detail
                 }
                 console.log(master);
+                let path = "SavDegignerData";
+                if (this.styleID != null && this.styleID != "") {
+                    path = "UpdateDegignerData"
+                }
                 await axios
-                    .post(HTTP_HOST + 'api/tablet/SavDegignerData', master)
+                    .post(HTTP_HOST + `api/tablet/${path}`, master)
                     .then(response => {
                         console.log(response);
                     });