server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

to:sync

Browse Source
This commit is contained in:
shaoyongjun 2024-11-08 10:09:31 +08:00
parent 70eff9141b
commit 57cdbdba50
8 changed files with 79 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/myEdit.css
View File

@ -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{

27
static/js/common/a4Utils.js
View File

@ -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;
}

3
static/js/common/ctx.js
View File

@ -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;
}

6
static/js/event/MyEventListener.js
View File

@ -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。

5
static/js/event/impl/MutationObserverImpl.js
View File

@ -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,

22
static/js/event/impl/RSizeEventImpl.js
View File

@ -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;
}

24
static/js/index.js
View File

@ -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"));
})

30
static/yanxuelu.html
View File

@ -33,7 +33,7 @@
<header>
<!-- 顶部 -->
<div id="head_top" style="font-size: 100rem">
<div id="head_top" style="font-size: 16rem">
<div style="width:20%">测试</div>
<div style="width: 60%"></div>
<div style="width:20%">
@ -49,7 +49,7 @@
<div style="display: flex;margin: 0 0; ">
<div style="display: flex; margin: 0 0;">
<div>
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
<path
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
@ -57,7 +57,7 @@
</svg>
</div>
<div>
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<path
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
@ -70,7 +70,7 @@
<div style="display: flex;">
<div>
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
<path
d="M2 4a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"
@ -78,7 +78,7 @@
</svg>
</div>
<div>
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<path
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
@ -90,7 +90,7 @@
<div class="my-divider-item"></div>
<div style="display: flex;">
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
<path
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
@ -98,7 +98,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
<path
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
@ -106,7 +106,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
<path
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
@ -115,7 +115,7 @@
</span>
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
data-v="underline,30rem">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
<path
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
@ -127,7 +127,7 @@
<div class="my-divider-item"></div>
<div>
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
<svg width="100rem" height="100rem" viewBox="0 0 240 240" version="1.1"
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(0.000000, 0.500000)">
@ -147,7 +147,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
<svg width="100rem" height="100rem" viewBox="0 0 256 256" version="1.1"
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon/背景颜色">
@ -176,7 +176,7 @@
<div class="my-divider-item"></div>
<div>
<span>
<svg width="100rem" height="100rem" viewBox="0 0 18 18" fill="none"
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
@ -186,7 +186,7 @@
</div>
<div class="my-divider-item"></div>
<div>
<button onclick="info(this)" style="font-size: 80rem">info</button>
<button onclick="info(this)" style="font-size: 8rem">info</button>
</div>
</div>
</div>
@ -205,8 +205,8 @@
<footer>
</footer>
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
<div id="testDiv" style="font-size: 16rem; width: 300px;margin-left: 10%; display: block"></div>
<div id="testDevice" style="font-size: 16rem; width: 300px;margin-left: 10%; display: block"></div>
</body>
<script>