From 57cdbdba5003a1a62746d1e868b5663f01833828 Mon Sep 17 00:00:00 2001 From: shaoyongjun Date: Fri, 8 Nov 2024 10:09:31 +0800 Subject: [PATCH] to:sync --- static/css/myEdit.css | 24 ++++++++-------- static/js/common/a4Utils.js | 27 ++++++++++++++++++ static/js/common/ctx.js | 3 ++ static/js/event/MyEventListener.js | 6 ++-- static/js/event/impl/MutationObserverImpl.js | 5 ++-- static/js/event/impl/RSizeEventImpl.js | 22 +++++++++----- static/js/index.js | 24 ++-------------- static/yanxuelu.html | 30 ++++++++++---------- 8 files changed, 79 insertions(+), 62 deletions(-) diff --git a/static/css/myEdit.css b/static/css/myEdit.css index baf1bec..b553115 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -74,7 +74,7 @@ header { left: 0; /*right: 0;*/ width: 100%; - min-height: 580rem; + min-height: 58rem; /*background-color: #ffebc3;*/ /*background-color: deepskyblue;*/ @@ -88,14 +88,14 @@ header { #head_top{ width: 100%; - height: 320rem; + height: 32rem; border: 1px #f5f5f5 solid; /*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*/ background-color: rgb(255, 255, 255); /*background-color: blue;*/ - font-size: 16px; + font-size: 16rem; display: flex; justify-content: center; align-items: center; @@ -104,7 +104,7 @@ header { .fixStylePosition { display: block; width: 100%; - height: 260rem; + height: 26rem; /*border: 1px #dee0e3 solid;*/ /*border: 1px orange solid;*/ @@ -119,7 +119,7 @@ header { margin: 0 0; width: auto; /*height: 130rem;*/ - padding: 50rem 50rem; + padding: 5rem 5rem; display: flex; justify-content: center; @@ -128,7 +128,7 @@ header { } .fixStyleInnerSpan { - margin: 0 80rem; + margin: 0 8rem; } main { @@ -137,7 +137,7 @@ main { flex-direction: column; align-items: center; - margin-top: 580rem; + margin-top: 58rem; /*min-height: 80%;*/ /*border: 1px greenyellow solid;*/ @@ -146,12 +146,12 @@ main { #yxl_note { width: 60%; /* width: 21cm; */ - min-height: 2000rem; + min-height: 200rem; /* font-size: 1.5rem; */ /*border: 1px red solid;*/ margin: auto auto; - padding: 100rem 100rem; + padding: 10rem 10rem; /*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*/ /*响应式*/ @@ -182,7 +182,7 @@ main { #testInput { width: 60%; - min-height: 1000rem; + min-height: 100rem; border: 1px rgb(0, 140, 255) solid; margin: 20px auto; justify-content: center; @@ -197,8 +197,8 @@ main { .my-divider-item { background-color: #e9e9eb; width: 1px; - height: 180rem; - margin: 0 60rem; + height: 18rem; + margin: 0 6rem; } footer{ diff --git a/static/js/common/a4Utils.js b/static/js/common/a4Utils.js index ef6a17d..c8075be 100644 --- a/static/js/common/a4Utils.js +++ b/static/js/common/a4Utils.js @@ -3,6 +3,26 @@ define(function (require, exports, module) { class A4Utils { constructor() { let dpi = this.GetDPI(); + console.log("dpi: ", dpi) + //A0纸尺寸841mm×1189mm + // + // A1纸尺寸594mm×841mm + // + // A2纸尺寸420mm×594mm + // + // A3纸尺寸297mm×420mm + // + // A4纸尺寸210mm×297mm + // + // A5纸尺寸148mm×210mm + // + // A6纸尺寸105mm×148mm + // + // A7纸尺寸74mm×105mm + // + // A8纸尺寸52mm×74mm + // + // A9纸尺寸37mm×52mm let width_mm = 210; // A4纸宽度，单位：毫米 let height_mm = 297; // A4纸高度，单位：毫米 let width_px = this.MmToPixel(width_mm, dpi); @@ -13,13 +33,20 @@ define(function (require, exports, module) { /** * A4纸 + * 计算 dpi */ GetDPI() { let tempDiv = document.createElement("div"); tempDiv.style.width = "1in"; + tempDiv.style.height = "1in"; tempDiv.style.visibility = "hidden"; + // + // tempDiv.style.position = "fixed" + // tempDiv.style.top = "0px" + // tempDiv.style.left = "0px" document.body.appendChild(tempDiv); let dpi = tempDiv.offsetWidth; + // alert(123) document.body.removeChild(tempDiv); return dpi; } diff --git a/static/js/common/ctx.js b/static/js/common/ctx.js index 64c0ce6..f65530a 100644 --- a/static/js/common/ctx.js +++ b/static/js/common/ctx.js @@ -73,6 +73,9 @@ define(function (require, exports, module) { } getScreenWidth() { + //vh 和 vw 都是相对于视窗的宽高度，“视窗”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小 + //不包含任务栏标题栏以及底部工具栏的浏览器区域大小。可以简单理解为屏幕百分比，1vh = 屏幕的1% + //移动端浏览器对于 vh 单位的计算，是不包含地址栏的，也就是说 100vh 的高度会使带有地址栏的视图溢出。 return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; } diff --git a/static/js/event/MyEventListener.js b/static/js/event/MyEventListener.js index eb1296d..a4f4e0e 100644 --- a/static/js/event/MyEventListener.js +++ b/static/js/event/MyEventListener.js @@ -7,9 +7,9 @@ define(function (require, exports, module) { constructor() { //resize - window.addEventListener('resize', this.RSizeListener, true); - window.addEventListener('pageshow', this.RSizeListener, true); - window.addEventListener('DOMContentLoaded', this.RSizeListener, true); + window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), this.RSizeListener, false); + window.addEventListener('pageshow', this.RSizeListener, false); + window.addEventListener('DOMContentLoaded', this.RSizeListener, false); /** * 窗口事件. * js中的键盘事件只有三种：keydown、keyup、keypress。 diff --git a/static/js/event/impl/MutationObserverImpl.js b/static/js/event/impl/MutationObserverImpl.js index dcb3031..c986475 100644 --- a/static/js/event/impl/MutationObserverImpl.js +++ b/static/js/event/impl/MutationObserverImpl.js @@ -53,9 +53,6 @@ define(function (require, exports, module) { if (target.nodeName === "DIV" && mutation.previousSibling !== null) { let utils = require("../../common/utils"); let ctx = require("../../common/ctx"); - if (ctx.getCurRowNo() <= 0) { - return - } let newParagraph = mutation.previousSibling.nextSibling; console.log( "addNewP target: ", target, @@ -104,6 +101,8 @@ define(function (require, exports, module) { function updateText(mutation) { let target = mutation.target; if (target.nodeType === 3 && target.nodeName === "#text") { + let testDiv = document.getElementById("testDevice"); + testDiv.innerText="" // console.log( // "updateText target: ", target, // "\nnodeType: ", target.nodeType, diff --git a/static/js/event/impl/RSizeEventImpl.js b/static/js/event/impl/RSizeEventImpl.js index 031716d..9604f41 100644 --- a/static/js/event/impl/RSizeEventImpl.js +++ b/static/js/event/impl/RSizeEventImpl.js @@ -19,24 +19,29 @@ define(function (require, exports, module) { } /** - * 刷新跟节点 front-size + * 刷新跟节点 front-size for 全局盒子尺寸 * @constructor */ function refreshRootFrontSize() { const ctx = require("../../common/ctx"); + let designWidth = ctx.designWith; let curDoc = document.documentElement;//当前文档的 root 元素 let curClientW = ctx.getScreenWidth(); if (!curClientW) { - return + curClientW = designWidth; } - let designWidth = ctx.designWith; - //set 1rem = viewWidth/10 (支持响应式) - let nowFrontSize = ((curClientW / designWidth) / 10) + 'px'; + + //set 1rem = curClientW / designWidth (支持响应式) + let nowFrontSize = curClientW / designWidth + 'px'; curDoc.style.fontSize = nowFrontSize; console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); let testDiv = document.getElementById("testDevice"); - testDiv.innerText += "\nnowFrontSize: " + nowFrontSize; + testDiv.innerText += "\ncurClientW: " + curClientW; + testDiv.innerText += "\ndesignWith: " + designWidth; + testDiv.innerText += "\n1rem =: " + nowFrontSize; + testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width; + testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height; // testDiv.innerText = testDiv.innerText + // // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() + // "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) + @@ -56,7 +61,10 @@ define(function (require, exports, module) { if (!curClientW) { return } + //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html + //12～72 px 建议最大字体是48px + //获取屏幕像素密度 let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值 if (!dpr) { //devicePixelRatio这个属性是可以获取到设备的dpr @@ -93,7 +101,7 @@ define(function (require, exports, module) { // console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize); let testDiv = document.getElementById("testDevice"); - testDiv.innerText = "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize; + testDiv.innerText += "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize; } diff --git a/static/js/index.js b/static/js/index.js index 779a74c..8fd3bc5 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -4,26 +4,6 @@ define(function (require) { const eventListener = require('./event/MyEventListener') const utils = require('./common/utils') console.log("uuid1 -10 : ", utils.Uuid(ctx.usn)); - - - // 初始化第一个输入框 - let newParagraph = document.createElement("p"); - newParagraph.setAttribute("id", utils.Uuid(ctx.usn, ctx.docType)); - newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn()); - //前置 span - let preSpan = document.createElement("span"); - preSpan.setAttribute("contenteditable", "false") - preSpan.setAttribute("data-flag", "span_pre") - //内置span - let span = document.createElement("span"); - span.append(document.createElement("br")); - span.setAttribute("data-flag", "span_content") - newParagraph.append(preSpan, span); - //添加一行 - ctx.MyRoot().append(newParagraph); - //收起选区到一个点，光标落在一个可编辑元素上 - utils.GetSelection().setPosition(span, 0); - span.focus(); - - + //初始化第一个输入框 + ctx.MyRoot().append(document.createElement("p")); }) \ No newline at end of file diff --git a/static/yanxuelu.html b/static/yanxuelu.html index 295c7db..81d26b4 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -33,7 +33,7 @@
-
+
测试
@@ -49,7 +49,7 @@
-
-
-
-
- - - -
- @@ -147,7 +147,7 @@ - @@ -176,7 +176,7 @@
-
- +
@@ -205,8 +205,8 @@
-
-
+
+