vislite 0.5.2-alpha.0 → 0.5.2-alpha.2

package/lib/viewHandler/index.umd.js

@@ -0,0 +1,139 @@
+/*!
+* VISLite JavaScript Library v0.5.2-alpha.2
+* git+https://github.com/oi-contrib/VISLite.git
+*
+* Copyright zxl20070701
+* Released under the MIT license
+* https://zxl20070701.github.io/notebook/home.html
+*
+* Publish Date:  Mon Oct 23 2023 22:21:10 GMT+0800 (中国标准时间)
+*/
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite_viewHandler = factory());
+})(this, (function () { 'use strict';
+
+    var mousePosition = function (el, event) {
+        var bounding = el.getBoundingClientRect();
+        return {
+            "x": event.clientX - bounding.left,
+            "y": event.clientY - bounding.top
+        };
+    };
+    var getKeyString = function (event) {
+        return {
+            37: "left",
+            38: "up",
+            39: "right",
+            40: "down",
+        }[event.keyCode || event.which];
+    };
+    function viewHandler (callback) {
+        var el = document.getElementsByTagName('body')[0];
+        el.addEventListener("keydown", function (event) {
+            var keyCode = getKeyString(event);
+            if (keyCode == 'up') {
+                callback({
+                    type: "lookUp",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'down') {
+                callback({
+                    type: "lookDown",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'left') {
+                callback({
+                    type: "lookLeft",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'right') {
+                callback({
+                    type: "lookRight",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+        });
+        var mouseP = null;
+        var doMove = function (event) {
+            if (mouseP == null) {
+                callback({
+                    type: "hover",
+                    normal: [],
+                    value: 0,
+                    event: event
+                });
+            }
+            else {
+                var tempMouseP = mousePosition(el, event);
+                var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
+                var rotateNormal = [
+                    normal[1],
+                    normal[0],
+                    0
+                ];
+                if (rotateNormal[0] == 0 && rotateNormal[1] == 0)
+                    return;
+                callback({
+                    type: "rotate",
+                    normal: rotateNormal,
+                    value: (Math.abs(tempMouseP.x - mouseP.x) + Math.abs(tempMouseP.y - mouseP.y)) * 0.01,
+                    event: event
+                });
+                mouseP = tempMouseP;
+            }
+        };
+        el.addEventListener("mousedown", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("mouseup", function (event) {
+            mouseP = null;
+        });
+        el.addEventListener("mousemove", function (event) {
+            doMove(event);
+        });
+        el.addEventListener("touchend", function (event) {
+            mouseP = null;
+        });
+        el.addEventListener("touchstart", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("touchmove", function (event) {
+            doMove(event.touches[0]);
+        });
+        var doScale = function (value, event) {
+            if (value == 0)
+                return;
+            var baseTimes = 0.899;
+            callback({
+                type: "scale",
+                value: value < 0 ? baseTimes : 2 - baseTimes,
+                normal: [],
+                event: event
+            });
+        };
+        el.addEventListener("mousewheel", function (event) {
+            doScale(event.wheelDelta, event);
+        });
+        if (window.addEventListener) {
+            window.addEventListener('DOMMouseScroll', function (event) {
+                doScale(-1 * event.detail, event);
+            }, false);
+        }
+    }
+
+    return viewHandler;
+
+}));

package/lib/viewHandler/index.umd.min.js

@@ -0,0 +1,11 @@
+/*!
+* VISLite JavaScript Library v0.5.2-alpha.2
+* git+https://github.com/oi-contrib/VISLite.git
+*
+* Copyright zxl20070701
+* Released under the MIT license
+* https://zxl20070701.github.io/notebook/home.html
+*
+* Publish Date:  Mon Oct 23 2023 22:21:10 GMT+0800 (中国标准时间)
+*/
+var e,n;e=this,n=function(){"use strict";var e=function(e,n){var t=e.getBoundingClientRect();return{x:n.clientX-t.left,y:n.clientY-t.top}};return function(n){var t=document.getElementsByTagName("body")[0];t.addEventListener("keydown",(function(e){var t=function(e){return{37:"left",38:"up",39:"right",40:"down"}[e.keyCode||e.which]}(e);"up"==t?n({type:"lookUp",normal:[],value:.1,event:e}):"down"==t?n({type:"lookDown",normal:[],value:.1,event:e}):"left"==t?n({type:"lookLeft",normal:[],value:.1,event:e}):"right"==t&&n({type:"lookRight",normal:[],value:.1,event:e})}));var o=null,i=function(i){if(null==o)n({type:"hover",normal:[],value:0,event:i});else{var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];if(0==a[0]&&0==a[1])return;n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y)),event:i}),o=u}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(e){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(e){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e,t){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[],event:t})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta,e)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail,e)}),!1)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_viewHandler=n();

package/package/index.ts

@@ -3,6 +3,8 @@ import Hermite from "./Hermite/index"
 
 import Matrix4 from "./Matrix4/index"
 import rotate from "./rotate/index"
+import move from "./move/index"
+import scale from "./scale/index"
 
 import getLoopColors from "./getLoopColors/index"
 import formatColor from "./formatColor/index"
@@ -38,6 +40,8 @@ export default {
     // 变换
     Matrix4,
     rotate,
+    move,
+    scale,
 
     // 工具
     getLoopColors,

package/package/move/index.ts

@@ -0,0 +1,3 @@
+import move from "../../src/move"
+
+export default move

package/package/scale/index.ts

@@ -0,0 +1,3 @@
+import scale from "../../src/scale"
+
+export default scale

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.5.2-alpha.0",
+  "version": "0.5.2-alpha.2",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

package/src/common/svg/config.ts

@@ -3,172 +3,184 @@ import type SVGConfigType from "../../../types/SVGConfig"
 import { setAttribute } from "./tool"
 import setStyle from "../setStyle"
 import arc from "../canvas/arc"
+import { toNode } from "./tool"
+
+export let initDefs = (el: SVGElement) => {
+    let defs = el.getElementsByTagName('defs')
+    if (defs.length <= 0) {
+        let newDefs = toNode("defs")
+        el.appendChild(newDefs)
+        return newDefs
+    } else {
+        return defs[0]
+    }
+}
 
 // 文字统一设置方法
 export let initText = (
-  el: SVGElement,
-  config: SVGConfigType,
-  x: number,
-  y: number,
-  deg: number
+    el: SVGElement,
+    config: SVGConfigType,
+    x: number,
+    y: number,
+    deg: number
 ) => {
-  if (el.nodeName.toLowerCase() !== "text") throw new Error("Need a <text> !")
-
-  // 垂直对齐采用dy实现
-  setAttribute(
-    el,
-    "dy",
-    {
-      top: config["fontSize"] * 0.5,
-      middle: 0,
-      bottom: -config["fontSize"] * 0.5,
-    }[config.textBaseline]
-  )
-
-  setStyle(el, {
-    // 文字对齐方式
-    "text-anchor": {
-      left: "start",
-      right: "end",
-      center: "middle",
-    }[config.textAlign],
-    "dominant-baseline": "central",
-
-    // 文字大小和字体设置
-    "font-size": config["fontSize"] + "px",
-    "font-family": config["fontFamily"],
-  })
-
-  // 位置
-  setAttribute(el, "x", x)
-  setAttribute(el, "y", y)
-
-  // 旋转
-  if (typeof deg == "number") {
-    deg = deg % 360
-    setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
-  }
+    if (el.nodeName.toLowerCase() !== "text") throw new Error("Need a <text> !")
+
+    // 垂直对齐采用dy实现
+    setAttribute(
+        el,
+        "dy",
+        {
+            top: config["fontSize"] * 0.5,
+            middle: 0,
+            bottom: -config["fontSize"] * 0.5,
+        }[config.textBaseline]
+    )
+
+    setStyle(el, {
+        // 文字对齐方式
+        "text-anchor": {
+            left: "start",
+            right: "end",
+            center: "middle",
+        }[config.textAlign],
+        "dominant-baseline": "central",
+
+        // 文字大小和字体设置
+        "font-size": config["fontSize"] + "px",
+        "font-family": config["fontFamily"],
+    })
+
+    // 位置
+    setAttribute(el, "x", x)
+    setAttribute(el, "y", y)
+
+    // 旋转
+    if (typeof deg == "number") {
+        deg = deg % 360
+        setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
+    }
 }
 
 // 画圆统一设置方法
 export let initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
-  if (el.nodeName.toLowerCase() !== "circle")
-    throw new Error("Need a <circle> !")
-  setAttribute(el, "cx", cx)
-  setAttribute(el, "cy", cy)
-  setAttribute(el, "r", r)
+    if (el.nodeName.toLowerCase() !== "circle")
+        throw new Error("Need a <circle> !")
+    setAttribute(el, "cx", cx)
+    setAttribute(el, "cy", cy)
+    setAttribute(el, "r", r)
 }
 
 // 路径统一设置方法
 export let initPath = (el: SVGElement, path: string) => {
-  if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
-  setAttribute(el, "d", path)
+    if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
+    setAttribute(el, "d", path)
 }
 
 // 画矩形统一设置方法
 export let initRect = (
-  el: SVGElement,
-  x: number,
-  y: number,
-  width: number,
-  height: number
+    el: SVGElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number
 ) => {
-  if (el.nodeName.toLowerCase() !== "rect") throw new Error("Need a <rect> !")
-
-  // 由于高和宽不可以是负数，校对一下
-  if (height < 0) {
-    height *= -1
-    y -= height
-  }
-  if (width < 0) {
-    width *= -1
-    x -= width
-  }
-
-  setAttribute(el, "x", x)
-  setAttribute(el, "y", y)
-  setAttribute(el, "width", width)
-  setAttribute(el, "height", height)
+    if (el.nodeName.toLowerCase() !== "rect") throw new Error("Need a <rect> !")
+
+    // 由于高和宽不可以是负数，校对一下
+    if (height < 0) {
+        height *= -1
+        y -= height
+    }
+    if (width < 0) {
+        width *= -1
+        x -= width
+    }
+
+    setAttribute(el, "x", x)
+    setAttribute(el, "y", y)
+    setAttribute(el, "width", width)
+    setAttribute(el, "height", height)
 }
 
 // 画弧统一设置方法
 export let initArc = (
-  el: SVGElement,
-  config: SVGConfigType,
-  cx: number,
-  cy: number,
-  r1: number,
-  r2: number,
-  beginDeg: number,
-  deg: number
+    el: SVGElement,
+    config: SVGConfigType,
+    cx: number,
+    cy: number,
+    r1: number,
+    r2: number,
+    beginDeg: number,
+    deg: number
 ) => {
-  if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
-
-  beginDeg = (beginDeg / 180) * Math.PI
-  deg = (deg / 180) * Math.PI
-
-  beginDeg = beginDeg % (Math.PI * 2)
-
-  if (r1 > r2) {
-    let temp = r1
-    r1 = r2
-    r2 = temp
-  }
-
-  // 当|deg|>=2π的时候都认为是一个圆环
-  if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-    deg = Math.PI * 1.999999
-  } else {
-    deg = deg % (Math.PI * 2)
-  }
-
-  arc(
-    beginDeg,
-    deg,
-    cx,
-    cy,
-    r1,
-    r2,
-    function (
-      beginA: number,
-      endA: number,
-      begInnerX: number,
-      begInnerY: number,
-      begOuterX: number,
-      begOuterY: number,
-      endInnerX: number,
-      endInnerY: number,
-      endOuterX: number,
-      endOuterY: number,
-      r: number
-    ) {
-      let f = endA - beginA > Math.PI ? 1 : 0,
-        d = "M" + begInnerX + " " + begInnerY
-      if (r < 0) r = -r
-
-      d +=
-        // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
-        "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
-
-      // 结尾
-      if (config.arcEndCap == "round")
-        d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
-      else if (config.arcEndCap == "-round")
-        d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
-      else d += "L" + endOuterX + " " + endOuterY
-      d +=
-        "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
-
-      // 开头
-      if (config.arcStartCap == "round")
-        d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
-      else if (config.arcStartCap == "-round")
-        d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
-      else d += "L" + begInnerX + " " + begInnerY
-
-      if (config.arcStartCap == "butt") d += "Z"
-
-      setAttribute(el, "d", d)
+    if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
+
+    beginDeg = (beginDeg / 180) * Math.PI
+    deg = (deg / 180) * Math.PI
+
+    beginDeg = beginDeg % (Math.PI * 2)
+
+    if (r1 > r2) {
+        let temp = r1
+        r1 = r2
+        r2 = temp
     }
-  )
+
+    // 当|deg|>=2π的时候都认为是一个圆环
+    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+        deg = Math.PI * 1.999999
+    } else {
+        deg = deg % (Math.PI * 2)
+    }
+
+    arc(
+        beginDeg,
+        deg,
+        cx,
+        cy,
+        r1,
+        r2,
+        function (
+            beginA: number,
+            endA: number,
+            begInnerX: number,
+            begInnerY: number,
+            begOuterX: number,
+            begOuterY: number,
+            endInnerX: number,
+            endInnerY: number,
+            endOuterX: number,
+            endOuterY: number,
+            r: number
+        ) {
+            let f = endA - beginA > Math.PI ? 1 : 0,
+                d = "M" + begInnerX + " " + begInnerY
+            if (r < 0) r = -r
+
+            d +=
+                // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
+                "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
+
+            // 结尾
+            if (config.arcEndCap == "round")
+                d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
+            else if (config.arcEndCap == "-round")
+                d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
+            else d += "L" + endOuterX + " " + endOuterY
+            d +=
+                "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
+
+            // 开头
+            if (config.arcStartCap == "round")
+                d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
+            else if (config.arcStartCap == "-round")
+                d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
+            else d += "L" + begInnerX + " " + begInnerY
+
+            if (config.arcStartCap == "butt") d += "Z"
+
+            setAttribute(el, "d", d)
+        }
+    )
 }

package/src/common/svg/gradient.ts

@@ -0,0 +1,63 @@
+import { initDefs } from './config'
+import { toNode, setAttribute } from "./tool"
+
+// 线性渐变
+export let linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
+
+    let defs = initDefs(el)
+    let gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random()
+
+    let linearGradient = toNode("linearGradient")
+    defs.appendChild(linearGradient)
+    setAttribute(linearGradient, "id", gradientId)
+    setAttribute(linearGradient, "x1", x0 + "%")
+    setAttribute(linearGradient, "y1", y0 + "%")
+    setAttribute(linearGradient, "x2", x1 + "%")
+    setAttribute(linearGradient, "y2", y1 + "%")
+
+    let enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            let stopEl = toNode("stop")
+            linearGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}
+
+// 环形渐变
+export let radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
+
+    let defs = initDefs(el)
+    let gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random()
+
+    let radialGradient = toNode("radialGradient")
+    defs.appendChild(radialGradient)
+    setAttribute(radialGradient, "id", gradientId)
+    setAttribute(radialGradient, "cx", cx + "%")
+    setAttribute(radialGradient, "cy", cy + "%")
+    setAttribute(radialGradient, "r", r + "%")
+
+    let enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            let stopEl = toNode("stop")
+            radialGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}

package/src/common/svg/index.ts

@@ -4,6 +4,7 @@ import type { arcCapType, textAlignType, textBaselineType } from "../../../types
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
 import { toNode, setAttribute, getAttribute, full, fill, stroke } from "./tool"
 import rotate from "../../rotate"
+import { linearGradient, radialGradient } from "./gradient"
 
 // 属性名向下兼容
 let oldAttrName = {
@@ -339,6 +340,17 @@ class SVG {
         }, false)
         return this
     }
+
+
+    // 线性渐变
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
+        return linearGradient(this.__svg, x0, y0, x1, y1)
+    }
+
+    // 环形渐变
+    createRadialGradient(cx: number, cy: number, r: number) {
+        return radialGradient(this.__svg, cx, cy, r)
+    }
 }
 
 export default SVG

package/src/move.ts

@@ -0,0 +1,8 @@
+// 点（x,y）沿着向量（ax,ay）方向移动距离d
+export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
+    let sqrt = Math.sqrt(ax * ax + ay * ay)
+    return [
+        ax * d / sqrt + x,
+        ay * d / sqrt + y
+    ]
+}

package/src/scale.ts

@@ -0,0 +1,7 @@
+// 点（x,y）围绕中心（cx,cy）缩放times倍
+export default function (cx: number, cy: number, times: number, x: number, y: number): [number, number] {
+    return [
+        times * (x - cx) + cx,
+        times * (y - cy) + cy
+    ]
+}

package/types/Canvas.d.ts

@@ -274,7 +274,7 @@ export default interface CanvasType {
         y0: number,
         x1: number,
         y1: number
-    ): GradientType
+    ): GradientType<CanvasGradient>
 
     /**
      * 创建环形渐变
@@ -282,7 +282,7 @@ export default interface CanvasType {
      * @param cy
      * @param r 半径
      */
-    createRadialGradient(cx: number, cy: number, r: number): GradientType
+    createRadialGradient(cx: number, cy: number, r: number): GradientType<CanvasGradient>
 
     /**
      * 获取指定位置颜色

package/types/Gradient.d.ts

@@ -1,4 +1,4 @@
-export default interface GradientType {
+export default interface GradientType<T> {
 
     /**
      * 设置程度颜色
@@ -10,6 +10,6 @@ export default interface GradientType {
     /**
      * 返回渐变色值
      */
-    value(): CanvasGradient
+    value(): T
 
 }