oipage 1.5.0-alpha.0 → 1.5.0-alpha.1

package/bin/website-htmls/dialogs/imageSize/index.html

@@ -0,0 +1,55 @@
+<h2 z-bind="title"></h2>
+<div class="right-btn">
+    <div>
+        <fieldset>
+            <legend>
+                当前大小
+            </legend>
+            <ul z-bind:lock="title=='图像大小'?'yes':'no'">
+                <li>
+                    <label>宽度：</label>
+                    <span z-bind="width"></span>px
+                </li>
+                <li>
+                    <label>宽度：</label>
+                    <span z-bind="height"></span>px
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>
+                新建大小
+            </legend>
+            <ul z-bind:lock="title=='图像大小'?'yes':'no'">
+                <li>
+                    <label>宽度(W)：</label>
+                    <input type="text" z-model="newWidth" z-on:input="calcHeight">
+                    px
+                </li>
+                <li>
+                    <label>高度(H)：</label>
+                    <input type="text" z-model="newHeight" z-on:input="calcWidth">
+                    px
+                </li>
+                <li z-bind:active="title=='画布大小'?'yes':'no'">
+                    <label>定位：</label>
+                    <div class="change-type" z-bind:type="changeType">
+                        <span z-on:click="doChangeType" val="left-top"></span>
+                        <span z-on:click="doChangeType" val="center-top"></span>
+                        <span z-on:click="doChangeType" val="right-top"></span>
+                        <span z-on:click="doChangeType" val="left-middle"></span>
+                        <span z-on:click="doChangeType" val="center-middle"></span>
+                        <span z-on:click="doChangeType" val="right-middle"></span>
+                        <span z-on:click="doChangeType" val="left-bottom"></span>
+                        <span z-on:click="doChangeType" val="center-bottom"></span>
+                        <span z-on:click="doChangeType" val="right-bottom"></span>
+                    </div>
+                </li>
+            </ul>
+        </fieldset>
+    </div>
+    <div>
+        <button z-on:click="doSubmit">确定</button>
+        <button z-on:click="doClose">取消</button>
+    </div>
+</div>

package/bin/website-htmls/dialogs/imageSize/index.js

@@ -0,0 +1,53 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss";
+
+export default defineElement({
+    template,
+    data() {
+        return {
+            title: this._props.title,
+            width: this._props.width,
+            height: this._props.height,
+
+            newWidth: ref(this._props.width),
+            newHeight: ref(this._props.height),
+
+            changeType: ref('center-middle')
+        }
+    },
+    methods: {
+        calcHeight() {
+            if (this.title == '图像大小') {
+                this.newHeight = +(this.newWidth * this.height / this.width).toFixed(0);
+            }
+        },
+
+        calcWidth() {
+            if (this.title == '图像大小') {
+                this.newWidth = +(this.newHeight * this.width / this.height).toFixed(0);
+            }
+        },
+
+        doChangeType: function (event, target) {
+            this.changeType = target.getAttribute('val');
+        },
+
+        // 确定
+        doSubmit: function () {
+            this.$closeDialog({
+                width: +this.newWidth,
+                height: +this.newHeight,
+                changeType: this.changeType
+            });
+        },
+
+        // 取消
+        doClose: function () {
+            this.$closeDialog();
+        }
+    },
+    style: {
+        content: style
+    }
+})

package/bin/website-htmls/dialogs/imageSize/index.scss

@@ -0,0 +1,139 @@
+#dialog-root>.content.imageSize {
+    border: 1px solid gray;
+    min-height: 300px;
+    width: 300px;
+    background-color: white;
+
+    &>h2 {
+        font-size: 12px;
+        padding-left: 30px;
+        background-image: url('./images/image-editor.png');
+        background-size: auto 80%;
+        background-repeat: no-repeat;
+        background-position: 3px center;
+        border-bottom: 1px solid gray;
+        line-height: 30px;
+        height: 30px;
+        user-select: none;
+    }
+
+    &>div.right-btn {
+        display: flex;
+
+        &>div {
+            &:first-child {
+                flex-grow: 1;
+                padding: 10px 0 10px 10px;
+            }
+
+            &:last-child {
+                text-align: center;
+                flex-grow: 0;
+                flex-shrink: 0;
+                flex-basis: 70px;
+
+                &>button {
+                    height: 30px;
+                    border-radius: 15px;
+                    width: 50px;
+                    margin-top: 10px;
+
+                    &:hover {
+                        background-color: rgb(127, 131, 131);
+                        cursor: pointer;
+                    }
+                }
+
+            }
+        }
+    }
+
+    fieldset {
+        margin-top: 10px;
+        font-size: 12px;
+    }
+
+    ul {
+
+        &[lock='yes'] {
+            background-image: url('./images/lock.png');
+            background-repeat: no-repeat;
+            background-position: right;
+        }
+
+        &>li {
+            line-height: 2em;
+            margin-top: 5px;
+
+            &[active='no'] {
+                display: none;
+            }
+
+            &>label {
+                width: 70px;
+                display: inline-block;
+                text-align: right;
+            }
+
+            &>input {
+                width: 50px;
+                margin-right: 5px;
+            }
+
+            .change-type {
+                font-size: 0;
+                width: 90px;
+                display: inline-block;
+                line-height: 0;
+                vertical-align: top;
+                background-image: url('./images/size.png');
+                background-size: 100% auto;
+                background-repeat: no-repeat;
+
+                &>span {
+                    display: inline-block;
+                    width: 30px;
+                    height: 30px;
+                    cursor: pointer;
+                    outline: 1px solid #dedede;
+                }
+
+                &[type='left-top'] {
+                    background-position: -29px -32px;
+                }
+
+                &[type='center-top'] {
+                    background-position: 1px -32px;
+                }
+
+                &[type='right-top'] {
+                    background-position: 30px -32px;
+                }
+
+                &[type='left-middle'] {
+                    background-position: -29px -1px;
+                }
+
+                &[type='center-middle'] {
+                    background-position: 1px -1px;
+                }
+
+                &[type='right-middle'] {
+                    background-position: 30px -1px;
+                }
+
+                &[type='left-bottom'] {
+                    background-position: -29px 30px;
+                }
+
+                &[type='center-bottom'] {
+                    background-position: 1px 30px;
+                }
+
+                &[type='right-bottom'] {
+                    background-position: 30px 30px;
+                }
+            }
+        }
+    }
+}

package/bin/website-htmls/dialogs/index.js

@@ -1,43 +1,53 @@
-import { createApp } from "zipaper"
+import { createApp } from "zipaper";
 
 const dialogs = {
+    imageSize: () => import("./imageSize/index.js")
+};
 
-    // xxx
-    xxx: () => import("./xxx/index.js")
-}
-
-let dialogsResolve = []
+let dialogsResolve = [];
 export default {
     install(Zipaper) {
 
         // 打开弹框
-        Zipaper.prototype.$openDialog = function (dialogName, callback) {
-            let el = document.createElement("div")
+        Zipaper.prototype.$openDialog = function (dialogName, data) {
+            let el = document.createElement("div");
 
             dialogs[dialogName]().then(App => {
 
                 // 准备好挂载点
-                el.setAttribute("class", "content " + dialogName)
+                el.setAttribute("class", "content " + dialogName);
 
                 // 创建并挂载
-                document.getElementById("dialog-root").appendChild(el)
-                createApp(App.default).mount(el)
-                if (callback) callback()
-            })
+                document.getElementById("dialog-root").appendChild(el);
+
+                if (data) {
+                    let props = {};
+                    for (let key in data) {
+                        props[key] = {
+                            default: data[key]
+                        };
+                    }
+                    App.default.props = props;
+                } else {
+                    App.default.props = {};
+                }
+
+                createApp(App.default).mount(el);
+            });
 
             return new Promise((resolve) => {
                 dialogsResolve.push({
                     resolve,
                     el
-                })
-            })
-        }
+                });
+            });
+        };
 
         // 关闭弹框
         Zipaper.prototype.$closeDialog = function (data) {
-            let dialog = dialogsResolve.pop()
+            let dialog = dialogsResolve.pop();
             dialog.el.parentNode.removeChild(dialog.el);
-            dialog.resolve(data)
-        }
+            dialog.resolve(data);
+        };
     }
 }

package/bin/website-htmls/pages/chart/index.js

@@ -12,7 +12,7 @@ export default defineElement({
     },
     created() {
 
-        var ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
+        let ws = new WebSocket('ws://' + window.location.hostname + ':' + (+window.location.port + 1) + '/');
 
         // 连接成功
         ws.addEventListener('open', () => {

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

@@ -1,19 +1,28 @@
 <div class="image-editor-view">
     <ul class="menu">
         <li>
-            打开
+            <label for="openImage">打开</label>
         </li>
         <li>
-            画布大小
+            <label z-on:click="changeSize">画布大小</label>
         </li>
         <li>
-            图像大小
+            <label z-on:click="changeSize">图像大小</label>
         </li>
         <li>
-            保存
+            <label z-on:click="download" type="jpeg">下载JPEG</label>
+        </li>
+        <li>
+            <label z-on:click="download" type="png">下载PNG</label>
         </li>
     </ul>
     <div class="content">
-        <canvas style="width:700px;height:400px"></canvas>
+        <div id="drawId"></div>
+    </div>
+    <div class="no-view">
+
+        <!-- 选择图片 -->
+        <input type="file" id="openImage" z-on:change="openImage" accept="image/*" />
+
     </div>
 </div>

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

@@ -1,18 +1,105 @@
-import { defineElement } from "zipaper"
-import template from "./index.html"
-import style from "./index.scss"
+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

@@ -4,16 +4,22 @@
         left: 50%;
         top: 5px;
         transform: translateX(-50%);
+        white-space: nowrap;
 
         &>li {
             display: inline-block;
-            padding: 5px 10px;
-            cursor: pointer;
             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;
             }
@@ -24,9 +30,17 @@
         text-align: center;
         margin-top: 100px;
 
-        canvas {
-            background-image: url("./images/mosaic.png");
-            outline: 2px solid #CDDC39;
+        #drawId {
+            display: inline-block;
+
+            &>canvas {
+                background-image: url("./images/mosaic.png");
+                outline: 2px solid #CDDC39;
+            }
         }
     }
+
+    &>.no-view {
+        display: none;
+    }
 }

package/bin/website-plugins/intercept/index.js

@@ -1,7 +1,9 @@
 const OIPageZipaperIntercept = require("./oipage-zipaper-intercept.js");
+const OIPageVISLiteIntercept = require("./oipage-vislite-intercept.js");
 const ChartIntercept = require("./chart.js");
 
 module.exports = [
     OIPageZipaperIntercept,
+    OIPageVISLiteIntercept,
     ChartIntercept
 ];

package/bin/website-plugins/intercept/oipage-vislite-intercept.js

@@ -0,0 +1,34 @@
+const { readFileSync } = require("fs");
+const { join } = require("path");
+const headFactory = require("./head.js");
+
+const head = headFactory();
+
+// VISLite库
+module.exports = {
+    test: /^vislite$/,
+    handler(request, response) {
+        head["Content-Type"] = "application/javascript;charset=utf-8";
+        head["ETag"] = "VISLite@v" + require("vislite/package.json").version;
+
+        if (request.headers["if-none-match"] === head["ETag"]) {
+            response.writeHead('304', head);
+            response.end();
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Cache File: VISLite\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");;
+            return;
+        }
+
+        response.writeHead(200, head);
+
+        let source = readFileSync(join(__dirname, "../../../node_modules/vislite/lib/index.umd.min.js"), {
+            encoding: "utf8"
+        });
+
+        response.write(`let module = { exports: {} };
+let exports = module.exports;
+${source}
+export let Canvas = module.exports.Canvas;
+`);
+        response.end();
+    }
+};

package/bin/website-plugins/intercept/oipage-zipaper-intercept.js

@@ -24,7 +24,7 @@ module.exports = {
             encoding: "utf8"
         });
 
-        response.write(`let module = { exports: {}};
+        response.write(`let module = { exports: {} };
 let exports = module.exports;
 ${source}
 export let createApp = exports.createApp;

package/nodejs/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.5.0-alpha.0
+* animation of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/cmdlog/index.js

@@ -1,5 +1,5 @@
 /*!
-* cmdlog of OIPage v1.5.0-alpha.0
+* cmdlog of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/disk/index.js

@@ -1,5 +1,5 @@
 /*!
-* disk of OIPage v1.5.0-alpha.0
+* disk of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/format/index.js

@@ -1,5 +1,5 @@
 /*!
-* format of OIPage v1.5.0-alpha.0
+* format of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/json/index.js

@@ -1,5 +1,5 @@
 /*!
-* json of OIPage v1.5.0-alpha.0
+* json of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 const {reader} = require("../reader/index.js");

package/nodejs/logform/index.js

@@ -1,5 +1,5 @@
 /*!
-* logform of OIPage v1.5.0-alpha.0
+* logform of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 const {linelog} = require("../cmdlog/index.js");

package/nodejs/reader/index.js

@@ -1,5 +1,5 @@
 /*!
-* reader of OIPage v1.5.0-alpha.0
+* reader of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.5.0-alpha.0
+* throttle of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oipage",
-  "version": "1.5.0-alpha.0",
+  "version": "1.5.0-alpha.1",
   "description": "前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等",
   "sideEffects": false,
   "scripts": {
@@ -35,7 +35,7 @@
   },
   "homepage": "https://oi-contrib.github.io/OIPage",
   "dependencies": {
-    "vislite": "^1.4.0",
+    "vislite": "^1.5.0",
     "xhtml-to-json": "^0.1.0",
     "zipaper": "^0.2.0"
   }

package/web/XMLHttpRequest/index.js

@@ -1,5 +1,5 @@
 /*!
-* XMLHttpRequest of OIPage v1.5.0-alpha.0
+* XMLHttpRequest of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.5.0-alpha.0
+* animation of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/format/index.js

@@ -1,5 +1,5 @@
 /*!
-* format of OIPage v1.5.0-alpha.0
+* format of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/json/index.js

@@ -1,5 +1,5 @@
 /*!
-* json of OIPage v1.5.0-alpha.0
+* json of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 import {reader} from "../reader/index.js";

package/web/onReady/index.js

@@ -1,5 +1,5 @@
 /*!
-* onReady of OIPage v1.5.0-alpha.0
+* onReady of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/performChunk/index.js

@@ -1,5 +1,5 @@
 /*!
-* performChunk of OIPage v1.5.0-alpha.0
+* performChunk of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/reader/index.js

@@ -1,5 +1,5 @@
 /*!
-* reader of OIPage v1.5.0-alpha.0
+* reader of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/style/index.js

@@ -1,5 +1,5 @@
 /*!
-* style of OIPage v1.5.0-alpha.0
+* style of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.5.0-alpha.0
+* throttle of OIPage v1.5.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */