oipage 1.6.0 → 1.7.0-alpha.1

package/bin/website-htmls/pages/image-editor/index.js

@@ -1,107 +1,107 @@
-import { defineElement } from "zipaper";
-import template from "./index.html";
-import style from "./index.scss";
-import { Canvas } from "vislite";
-
-export default defineElement({
-    template,
-    data() {
-        return {
-            painter: null,
-            drawEl: null
-        }
-    },
-    created() {
-        this.drawEl = document.getElementById("drawId");
-        this.painter = new Canvas(this.drawEl, {
-            scale: 1
-        }, 700, 400);
-    },
-    methods: {
-        openImage(event, target) {
-            let file = target.files[0];
-            if (file) {
-                let reader = new FileReader();
-
-                reader.onload = () => {
-                    let image = new Image();
-
-                    image.onload = () => {
-
-                        // 调整画布大小
-                        this.painter = new Canvas(this.drawEl, {
-                            scale: 1
-                        }, image.width, image.height);
-
-                        // 绘制图片
-                        this.painter.clearRect(0, 0, image.width, image.height).drawImage(image, 0, 0, image.width, image.height);
-                    }
-
-                    image.src = reader.result;
-                }
-                reader.readAsDataURL(file);
-            }
-        },
-        download(event, target) {
-            let btn = document.createElement('a');
-            btn.href = this.painter.__canvas.toDataURL("image/" + target.getAttribute("type"));
-            btn.download = "图片." + target.getAttribute("type");
-            btn.click();
-        },
-        changeSize(event, target) {
-            let canvasInfo = this.painter.getInfo();
-            this.$openDialog("imageSize", {
-                title: target.innerText.trim(),
-                width: canvasInfo.width,
-                height: canvasInfo.height
-            }).then(data => {
-                if (data) {
-                    let base64 = this.painter.__canvas.toDataURL();
-
-                    // 调整画布大小
-                    this.painter = new Canvas(this.drawEl, {
-                        scale: 1
-                    }, data.width, data.height).clearRect(0, 0, data.width, data.height);
-
-                    if (target.innerText.trim() === "画布大小") {
-
-                        // 计算图片的对齐方式
-
-                        let _left, _top;
-                        let changeType = data.changeType.split('-');
-
-                        // 水平方向
-                        if (changeType[0] == 'left') {
-                            _left = 0;
-                        } else if (changeType[0] == 'right') {
-                            _left = data.width - canvasInfo.width;
-                        } else {
-                            _left = (data.width - canvasInfo.width) * 0.5;
-                        }
-
-                        // 垂直方向
-                        if (changeType[1] == 'top') {
-                            _top = 0;
-                        } else if (changeType[1] == 'bottom') {
-                            _top = data.height - canvasInfo.height;
-                        } else {
-                            _top = (data.height - canvasInfo.height) * 0.5;
-                        }
-
-                        const img = new Image();
-                        img.onload = () => {
-                            this.painter.getContext().drawImage(img, 0, 0, canvasInfo.width, canvasInfo.height, _left, _top, canvasInfo.width, canvasInfo.height);
-                        };
-                        img.src = base64;
-
-                    } else {
-                        this.painter.drawImage(base64, 0, 0, data.width, data.height);
-                    }
-                }
-            });
-        }
-    },
-    style: {
-        content: style
-    }
+import { defineElement } from "zipaper";
+import template from "./index.html";
+import style from "./index.scss";
+import { Canvas } from "vislite";
+
+export default defineElement({
+    template,
+    data() {
+        return {
+            painter: null,
+            drawEl: null
+        }
+    },
+    created() {
+        this.drawEl = document.getElementById("drawId");
+        this.painter = new Canvas(this.drawEl, {
+            scale: 1
+        }, 700, 400);
+    },
+    methods: {
+        openImage(event, target) {
+            let file = target.files[0];
+            if (file) {
+                let reader = new FileReader();
+
+                reader.onload = () => {
+                    let image = new Image();
+
+                    image.onload = () => {
+
+                        // 调整画布大小
+                        this.painter = new Canvas(this.drawEl, {
+                            scale: 1
+                        }, image.width, image.height);
+
+                        // 绘制图片
+                        this.painter.clearRect(0, 0, image.width, image.height).drawImage(image, 0, 0, image.width, image.height);
+                    }
+
+                    image.src = reader.result;
+                }
+                reader.readAsDataURL(file);
+            }
+        },
+        download(event, target) {
+            let btn = document.createElement('a');
+            btn.href = this.painter.__canvas.toDataURL("image/" + target.getAttribute("type"));
+            btn.download = "图片." + target.getAttribute("type");
+            btn.click();
+        },
+        changeSize(event, target) {
+            let canvasInfo = this.painter.getInfo();
+            this.$openDialog("imageSize", {
+                title: target.innerText.trim(),
+                width: canvasInfo.width,
+                height: canvasInfo.height
+            }).then(data => {
+                if (data) {
+                    let base64 = this.painter.__canvas.toDataURL();
+
+                    // 调整画布大小
+                    this.painter = new Canvas(this.drawEl, {
+                        scale: 1
+                    }, data.width, data.height).clearRect(0, 0, data.width, data.height);
+
+                    if (target.innerText.trim() === "画布大小") {
+
+                        // 计算图片的对齐方式
+
+                        let _left, _top;
+                        let changeType = data.changeType.split('-');
+
+                        // 水平方向
+                        if (changeType[0] == 'left') {
+                            _left = 0;
+                        } else if (changeType[0] == 'right') {
+                            _left = data.width - canvasInfo.width;
+                        } else {
+                            _left = (data.width - canvasInfo.width) * 0.5;
+                        }
+
+                        // 垂直方向
+                        if (changeType[1] == 'top') {
+                            _top = 0;
+                        } else if (changeType[1] == 'bottom') {
+                            _top = data.height - canvasInfo.height;
+                        } else {
+                            _top = (data.height - canvasInfo.height) * 0.5;
+                        }
+
+                        const img = new Image();
+                        img.onload = () => {
+                            this.painter.getContext().drawImage(img, 0, 0, canvasInfo.width, canvasInfo.height, _left, _top, canvasInfo.width, canvasInfo.height);
+                        };
+                        img.src = base64;
+
+                    } else {
+                        this.painter.drawImage(base64, 0, 0, data.width, data.height);
+                    }
+                }
+            });
+        }
+    },
+    style: {
+        content: style
+    }
 })

package/bin/website-htmls/pages/image-editor/index.scss

@@ -1,46 +1,46 @@
-.image-editor-view {
-    &>.menu {
-        position: fixed;
-        left: 50%;
-        top: 5px;
-        transform: translateX(-50%);
-        white-space: nowrap;
-
-        &>li {
-            display: inline-block;
-            background-color: #FF5722;
-            color: white;
-            margin: 0 5px;
-            border-radius: 5px;
-
-            &>label {
-                line-height: 30px;
-                padding: 0 5px;
-                display: inline-block;
-                cursor: pointer;
-            }
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    &>.content {
-        text-align: center;
-        margin-top: 100px;
-
-        #drawId {
-            display: inline-block;
-
-            &>canvas {
-                background-image: url("./images/mosaic.png");
-                outline: 2px solid #CDDC39;
-            }
-        }
-    }
-
-    &>.no-view {
-        display: none;
-    }
+.image-editor-view {
+    &>.menu {
+        position: fixed;
+        left: 50%;
+        top: 5px;
+        transform: translateX(-50%);
+        white-space: nowrap;
+
+        &>li {
+            display: inline-block;
+            background-color: #FF5722;
+            color: white;
+            margin: 0 5px;
+            border-radius: 5px;
+
+            &>label {
+                line-height: 30px;
+                padding: 0 5px;
+                display: inline-block;
+                cursor: pointer;
+            }
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    &>.content {
+        text-align: center;
+        margin-top: 100px;
+
+        #drawId {
+            display: inline-block;
+
+            &>canvas {
+                background-image: url("./images/mosaic.png");
+                outline: 2px solid #CDDC39;
+            }
+        }
+    }
+
+    &>.no-view {
+        display: none;
+    }
 }

package/bin/website-htmls/pages/img-to-pdf/index.html

@@ -1,4 +1,4 @@
-<div class="img-to-pdf-view">
-    <ui-select-file z-on:change="doChange" title="图片转PDF" tips="选择一张或多张图片后，可以把这些图片拼接成一个PDF文件" type="image"></ui-select-file>
-    <iframe id="iframe"></iframe>
+<div class="img-to-pdf-view">
+    <ui-select-file z-on:change="doChange" title="图片转PDF" tips="选择一张或多张图片后，可以把这些图片拼接成一个PDF文件" type="image"></ui-select-file>
+    <iframe id="iframe"></iframe>
 </div>

package/bin/website-htmls/pages/img-to-pdf/index.js

@@ -1,45 +1,45 @@
-import { defineElement, ref } from "zipaper"
-import template from "./index.html"
-import style from "./index.scss"
-
-export default defineElement({
-    template,
-    methods: {
-        doChange(event) {
-            let files = event.data, promises = [], iframeEl = document.getElementById("iframe");
-
-            let template = "";
-            for (let index = 0; index < files.length; index++) {
-                let file = files[index];
-
-                promises.push(new Promise(function (resolve) {
-
-                    let reader = new FileReader();
-
-                    reader.onload = function () {
-
-                        template += '<div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;"><img src="' + reader.result + '" style="max-width: 100vw;max-height: 100vh;"></img></div>';
-                        resolve("");
-                    }
-                    reader.readAsDataURL(file);
-                }));
-            }
-
-            Promise.all(promises).then(function () {
-                    let iframeWindow = iframeEl.contentWindow;
-                    let iframeDocument = iframeEl.contentWindow?.document;
-
-                    iframeDocument.open();
-                    iframeDocument.write(`<style>body{margin:0px;}</style>` + template);
-                    iframeDocument.close();
-
-                    setTimeout(function () {
-                        iframeWindow.print();
-                    }, 500);
-            });
-        }
-    },
-    style: {
-        content: style
-    }
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    methods: {
+        doChange(event) {
+            let files = event.data, promises = [], iframeEl = document.getElementById("iframe");
+
+            let template = "";
+            for (let index = 0; index < files.length; index++) {
+                let file = files[index];
+
+                promises.push(new Promise(function (resolve) {
+
+                    let reader = new FileReader();
+
+                    reader.onload = function () {
+
+                        template += '<div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;"><img src="' + reader.result + '" style="max-width: 100vw;max-height: 100vh;"></img></div>';
+                        resolve("");
+                    }
+                    reader.readAsDataURL(file);
+                }));
+            }
+
+            Promise.all(promises).then(function () {
+                    let iframeWindow = iframeEl.contentWindow;
+                    let iframeDocument = iframeEl.contentWindow?.document;
+
+                    iframeDocument.open();
+                    iframeDocument.write(`<style>body{margin:0px;}</style>` + template);
+                    iframeDocument.close();
+
+                    setTimeout(function () {
+                        iframeWindow.print();
+                    }, 500);
+            });
+        }
+    },
+    style: {
+        content: style
+    }
 })

package/bin/website-htmls/pages/img-to-pdf/index.scss

@@ -1,5 +1,5 @@
-.img-to-pdf-view {
-    iframe {
-        display: none;
-    }
+.img-to-pdf-view {
+    iframe {
+        display: none;
+    }
 }

package/bin/website-htmls/router.config.js

@@ -1,20 +1,20 @@
-import { defineRouter } from "zipaper"
-
-export default defineRouter({
-    routers: [{
-        path: "/",
-        redirect: "/appStore"
-    }, {
-        path: "/appStore",
-        component: () => import("./pages/appStore/index.js"),
-    }, {
-        path: "/chart",
-        component: () => import("./pages/chart/index.js"),
-    }, {
-        path: "/image-editor",
-        component: () => import("./pages/image-editor/index.js"),
-    }, {
-        path: "/img-to-pdf",
-        component: () => import("./pages/img-to-pdf/index.js"),
-    }]
+import { defineRouter } from "zipaper"
+
+export default defineRouter({
+    routers: [{
+        path: "/",
+        redirect: "/appStore"
+    }, {
+        path: "/appStore",
+        component: () => import("./pages/appStore/index.js"),
+    }, {
+        path: "/chart",
+        component: () => import("./pages/chart/index.js"),
+    }, {
+        path: "/image-editor",
+        component: () => import("./pages/image-editor/index.js"),
+    }, {
+        path: "/img-to-pdf",
+        component: () => import("./pages/img-to-pdf/index.js"),
+    }]
 })

package/bin/website-htmls/styles/normalize.css

@@ -1,95 +1,95 @@
-/* 统一不同浏览器的基础样式 */
-
-html {
-    /* 防止iPhone在坚屏转向横屏时放大文字 */
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    /* 统一行高 */
-    line-height: 1.15;
-}
-
-button,
-input,
-select {
-    /* 兼容部分手机下border不显示问题 */
-    border: 1px solid #b2b2bd;
-}
-
-article,
-footer,
-header,
-nav,
-section {
-    /* 修正旧浏览器未定义的块级元素 */
-    display: block;
-}
-
-canvas,
-svg {
-    /* 修正旧浏览器未定义的行内块元素 */
-    display: inline-block;
-}
-
-* {
-    /* 统一不同浏览器盒子尺寸计算方法 */
-    box-sizing: border-box;
-}
-
-::-ms-clear,
-::-ms-reveal {
-    /* 去掉IE浏览器输入框叉叉和眼睛 */
-    display: none;
-}
-
-img {
-    /* 针对火狐浏览器在img标签没有src时候的差异修复 */
-    display: inline-block;
-}
-
-html {
-    /* 设置默认字体为统一的安全字体 */
-    font-family: sans-serif;
-}
-
-a {
-    /* 默认去掉下划线 */
-    text-decoration: none;
-}
-
-li {
-    /* 去掉前置索引 */
-    list-style-type: none;
-}
-
-ul,
-ol,
-li,
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    /* 去掉不喜欢的间距 */
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-    -webkit-padding-start: 0;
-    /* 去掉不喜欢的间距，针对火狐浏览器等 */
-    margin-block-end: 0;
-    margin-block-start: 0;
-    padding-inline-start: 0;
-    /* 修改IE和其它浏览器不一致问题 */
-    padding: 0;
-    margin: 0;
-}
-
-body {
-    /* 去掉默认的8px */
-    margin: 0;
-}
-
-table {
-    /* 设置默认表格边框合并为一个单一的边框 */
-    border-collapse: collapse;
+/* 统一不同浏览器的基础样式 */
+
+html {
+    /* 防止iPhone在坚屏转向横屏时放大文字 */
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    /* 统一行高 */
+    line-height: 1.15;
+}
+
+button,
+input,
+select {
+    /* 兼容部分手机下border不显示问题 */
+    border: 1px solid #b2b2bd;
+}
+
+article,
+footer,
+header,
+nav,
+section {
+    /* 修正旧浏览器未定义的块级元素 */
+    display: block;
+}
+
+canvas,
+svg {
+    /* 修正旧浏览器未定义的行内块元素 */
+    display: inline-block;
+}
+
+* {
+    /* 统一不同浏览器盒子尺寸计算方法 */
+    box-sizing: border-box;
+}
+
+::-ms-clear,
+::-ms-reveal {
+    /* 去掉IE浏览器输入框叉叉和眼睛 */
+    display: none;
+}
+
+img {
+    /* 针对火狐浏览器在img标签没有src时候的差异修复 */
+    display: inline-block;
+}
+
+html {
+    /* 设置默认字体为统一的安全字体 */
+    font-family: sans-serif;
+}
+
+a {
+    /* 默认去掉下划线 */
+    text-decoration: none;
+}
+
+li {
+    /* 去掉前置索引 */
+    list-style-type: none;
+}
+
+ul,
+ol,
+li,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    /* 去掉不喜欢的间距 */
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    -webkit-padding-start: 0;
+    /* 去掉不喜欢的间距，针对火狐浏览器等 */
+    margin-block-end: 0;
+    margin-block-start: 0;
+    padding-inline-start: 0;
+    /* 修改IE和其它浏览器不一致问题 */
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    /* 去掉默认的8px */
+    margin: 0;
+}
+
+table {
+    /* 设置默认表格边框合并为一个单一的边框 */
+    border-collapse: collapse;
 }