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-10-31 19:01:59 +08:00
parent 6ef8b1b133
commit 258fed649b
7 changed files with 120 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/a4.html
View File

@ -21,4 +21,36 @@
<h1>这是一个 A4 大小的网页</h1>
<p>这是一段示例文本。</p>
</body>
<script>
function getDPI() {
var tempDiv = document.createElement("div");
tempDiv.style.width = "1in";
tempDiv.style.visibility = "hidden";
document.body.appendChild(tempDiv);
var dpi = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
return dpi;
}
function mmToPixel(mm, dpi) {
// 1 inch = 25.4 mm
var inches = mm / 25.4;
var pixels = inches * dpi;
return Math.round(pixels);
}
function a4SizeInPixels() {
var dpi = getDPI();
var width_mm = 210; // A4纸宽度，单位：毫米
var height_mm = 297; // A4纸高度，单位：毫米
var width_px = mmToPixel(width_mm, dpi);
var height_px = mmToPixel(height_mm, dpi);
return { width: width_px, height: height_px };
}
// 直接调用工具函数获取 A4 纸的像素尺寸
var a4_size = a4SizeInPixels();
console.log("A4纸的像素尺寸：宽 " + a4_size.width + "px, 高 " + a4_size.height + "px");
</script>
</html>

14
static/css/myEdit.css
View File

@ -88,10 +88,10 @@ header {
}
.my-divider-item {
background-color: lightgray;
background-color: #e9e9eb;
width: 1px;
height: 240rem;
margin: 20rem 160rem;
height: 180rem;
margin: 0 60rem;
}
.childStyleStrong {
@ -121,7 +121,7 @@ header {
position: fixed;
z-index: 99;
width: auto;
height: 340rem;
height: 200rem;
padding: 30rem 30rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/
@ -139,8 +139,8 @@ header {
/*border: 1px blue solid;*/
margin: 0 0;
width: auto;
height: 200rem;
padding: 50rem 50rem;
height: 130rem;
padding: 20rem 20rem;
display: flex;
justify-content: center;
@ -149,5 +149,5 @@ header {
}
.fixStyleInnerSpan {
margin: 0 100rem;
margin: 0 80rem;
}

20
static/js/lib/biz/MyBiz.js
View File

@ -400,6 +400,11 @@ export class MyBiz {
let start = curSec.startOffset;
let end = curSec.endOffset;
if (start > end) {
let tmpS = start;
start = end;
end = tmpS;
}
console.log(" 当前选区信息 : ", curSec,
"\ncurPe: ", curPe,
"\ncurPeP: ", curPe.parentNode, curPe.parentNode.nodeType, curPe.parentNode.nodeName,
@ -443,13 +448,22 @@ export class MyBiz {
curHtml += '<span>' + curStartP.innerText.charAt(j) + '</span>';
}
}
curStartP.innerHTML = curHtml;
curStartP.innerHTML = curHtml;
curPEle = curStartP;
//光标保持
// curS.collapseToEnd();
// window.myEdit.utils.GetSelection().setPosition(newParagraph, 0);
let s = window.getSelection();
if (s.rangeCount > 0) s.removeAllRanges();
let newR = document.createRange();
//重新获取元素
let tmpP = document.getElementById(curStartP.getAttribute("id"));
let childrenSize = tmpP.childNodes.length;
console.log("debug007: ", tmpP, start, end, childrenSize)
newR.setStart(tmpP, start);
newR.setEnd(tmpP, end);
//区域 添加 到选区
s.addRange(newR);
} else {
let tmpPNode = curSec.commonAncestorContainer;
if (!curPeIsP && curPeParentIsSpan) {

43
static/js/lib/common/MyUtils.js
View File

@ -273,6 +273,12 @@ export class MyUtils {
"\nwindow.webkit: ", window.webkit,
"\nwindow.gecko: ", window.gecko,
"\nwindow.opera: ", window.opera)
let testDiv = document.getElementById("testDevice")
testDiv.innerText = testDiv.innerText +
"\n ie: " + window.ie +
"\n window.webkit: " + window.webkit +
"\n window.gecko: " + window.gecko +
"\n window.opera: " + window.opera
}
/**
@ -290,10 +296,12 @@ export class MyUtils {
//set 1rem = viewWidth/10 (支持响应式)
let nowFrontSize = ((curClientW / designWidth) / 10) + 'px';
curDoc.style.fontSize = nowFrontSize;
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize)
document.getElementById("testDevice").innerText = "curClientW :" + curClientW + " designWidth: " + designWidth + "-> " + nowFrontSize
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
let testDiv = document.getElementById("testDevice")
testDiv.innerText = testDiv.innerText + "\n curClientW :" + curClientW + " \n designWidth: " + designWidth + "\n -> " + nowFrontSize
}
RefreshBodyFrontSize() {
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
let defaultFrontSize = window.myEdit.ctx.bodyFrontSize;
@ -447,4 +455,35 @@ export class MyUtils {
// console.log("sync docP : ", docP, " children: ", docP.children, " childrenMap: ", mapItem.getStyle().getChildrenStyleMap())
}
/**
* A4纸
*/
GetDPI() {
let tempDiv = document.createElement("div");
tempDiv.style.width = "1in";
tempDiv.style.visibility = "hidden";
document.body.appendChild(tempDiv);
let dpi = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
return dpi;
}
MmToPixel(mm, dpi) {
// 1 inch = 25.4 mm
let inches = mm / 25.4;
let pixels = inches * dpi;
return Math.round(pixels);
}
A4SizeInPixels() {
let dpi = window.myEdit.utils.GetDPI();
let width_mm = 210; // A4纸宽度，单位：毫米
let height_mm = 297; // A4纸高度，单位：毫米
let width_px = window.myEdit.utils.MmToPixel(width_mm, dpi);
let height_px = window.myEdit.utils.MmToPixel(height_mm, dpi);
return {width: width_px, height: height_px};
}
}

12
static/js/lib/event/MyEventListener.js
View File

@ -140,17 +140,17 @@ export class MyEventListener {
// posY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
// }
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = event.pageX || event.clientX + scrollX;
var y = event.pageY || event.clientY + scrollY;
let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
let x = event.pageX || event.clientX + scrollX;
let y = event.pageY || event.clientY + scrollY;
console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY);
//
styleUtils.style.display = "block";
styleUtils.style.left = (event.clientX - 60) + "px";
styleUtils.style.top = (event.clientY - 60) + "px";
styleUtils.style.left = (event.clientX - 80) + "px";
styleUtils.style.top = (event.clientY - 80) + "px";
// window.myEdit.utils.ProhibitDefaultEvent(event);
}

8
static/js/lib/main.js
View File

@ -83,6 +83,10 @@ import {MyEventListener} from "./event/MyEventListener.js";
biz: new MyBiz()
}
// 直接调用工具函数获取 A4 纸的像素尺寸
let a4_size = window.myEdit.utils.A4SizeInPixels();
window.myEdit.ctx.designWith = a4_size.width;
/**
* 业务处理
*/
@ -115,10 +119,10 @@ import {MyEventListener} from "./event/MyEventListener.js";
window.onload = function () {
//样式事件监听
let styleList = document.getElementsByClassName("fixStyleInnerSpan");
console.log("styleList : ", styleList);
// console.log("styleList : ", styleList);
if (styleList && styleList.length > 0) {
for (let i = 0; i < styleList.length; i++) {
console.log(styleList[i]);
// console.log(styleList[i]);
styleList[i].addEventListener('click', window.myEdit.eventListener.SurroundContentsByStyleListener, true);
}
}

22
static/yanxuelu.html
View File

@ -18,7 +18,7 @@
<header>
</header>
<main style="margin-top: 150rem; display: flex; flex-direction:column; align-items:center;">
<main style="margin-top: 90rem; display: flex; flex-direction:column; align-items:center;">
<h3>测试编辑</h3>
<div id="noteshare" spellcheck="false" translate="no">
</div>
@ -30,7 +30,7 @@
<div style="display: flex;">
<div style="display: flex;">
<div>
<svg width="180rem" height="180rem" viewBox="0 0 24 24" fill="none"
<svg width="90rem" height="90rem" 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"
@ -38,7 +38,7 @@
</svg>
</div>
<div>
<svg width="140rem" height="140rem" viewBox="0 0 24 24" fill="none"
<svg width="90rem" height="90rem" 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"
@ -51,7 +51,7 @@
<div style="display: flex;">
<div>
<svg width="180rem" height="180rem" viewBox="0 0 24 24" fill="none"
<svg width="90rem" height="90rem" 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"
@ -59,7 +59,7 @@
</svg>
</div>
<div>
<svg width="140rem" height="140rem" viewBox="0 0 24 24" fill="none"
<svg width="90rem" height="90rem" 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"
@ -71,7 +71,7 @@
<div class="my-divider-item"></div>
<div style="display: flex;">
<span class="fixStyleInnerSpan" data-value="b">
<svg width="180rem" height="180rem" viewBox="0 0 24 24"
<svg width="90rem" height="90rem" 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"
@ -79,7 +79,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="del">
<svg width="180rem" height="180rem"
<svg width="90rem" height="90rem"
viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
<path
@ -88,7 +88,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="i">
<svg width="180rem" height="180rem" viewBox="0 0 24 24"
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
<path
@ -97,7 +97,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="u">
<svg width="180rem" height="180rem" viewBox="0 0 24 24"
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
<path
@ -110,7 +110,7 @@
<div class="my-divider-item"></div>
<div>
<span>
<svg width="180rem" height="180rem" viewBox="0 0 18 18" fill="none"
<svg width="90rem" height="90rem" 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"
@ -125,7 +125,7 @@
</div>
</div>
</footer>
<div id="testDevice"></div>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
</body>