vislite 1.3.0-alpha.0 → 1.3.0-beta.0

package/lib/throttle/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of VISLite JavaScript Library v1.3.0-alpha.0
+* throttle of VISLite JavaScript Library v1.3.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,e){var n={time:200,keep:!1,opportunity:"end"};if(e)for(var p in e)n[p]=e[p];var r,i=!1,o=!1,a=!1;return function(){const e=this;if(r=arguments,i)o=!0,a=!0;else{"end"!=n.opportunity&&t.apply(e,r),i=!0;var p=setInterval((()=>{o?n.keep||t.apply(e,r):("begin"!=n.opportunity&&(a||"end"==n.opportunity)&&t.apply(e,r),i=!1,a=!1,clearInterval(p)),o=!1}),n.time)}}}export{t as default};

package/package/MapCoordinate/index.ts

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

package/package/index.ts

@@ -24,6 +24,8 @@ import Mercator from "./Mercator/index"
 
 import throttle from "./throttle/index"
 
+import MapCoordinate from "./MapCoordinate/index"
+
 import TreeLayout from "./TreeLayout/index"
 
 import initOption from "./initOption/index"
@@ -67,6 +69,9 @@ export default {
     throttle,
     assemble,
 
+    // 坐标系
+    MapCoordinate,
+
     // 布局
     TreeLayout,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0-beta.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -8,7 +8,6 @@
   "jsdelivr": "./lib/index.umd.min.js",
   "sideEffects": false,
   "scripts": {
-    "init": "npm install && oipage-cli --copy ./node_modules/pageby/dist/pageby.min.js ./docs/js/min/pageby.min.js",
     "dev": "webpack serve --config ./build/webpack.config.js",
     "build": "oipage-cli --delete ./lib && node ./build/pkg.js",
     "test": "karma start ./build/karma.config.js",
@@ -61,7 +60,6 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-webpack": "^5.0.0",
-    "pageby": "^0.1.0",
     "rollup": "^3.20.6",
     "terser": "^5.17.1",
     "ts-loader": "^9.2.8",

package/src/common/canvas/default.ts

@@ -22,7 +22,7 @@ export default function (type?: string) {
         "arcEndCap": <arcCapType>'butt',
 
         // 矩形圆角半径
-        "rectRadius": 0
+        "rectRadius": []
     }
 
     const init = {

package/src/common/canvas/painter.ts

@@ -287,6 +287,19 @@ class Painter {
         this.painter.clearRect(x, y, w, h)
         return this
     }
+    clearCircle(cx: number, cy: number, r: number) {
+        if (this.__region && !this.__onlyView) this.__region.clearCircle(cx, cy, r)
+
+        if (this.__isPainter && this.__onlyRegion) return this
+
+        this.painter.beginPath()
+        this.painter.globalCompositeOperation = "destination-out"
+        this.painter.arc(cx, cy, r, 0, Math.PI * 2)
+        this.painter.fill()
+        this.painter.globalCompositeOperation = "source-over"
+        this.painter.closePath()
+        return this
+    }
 
     // 弧
     fillArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {

package/src/common/map/getBoundary.ts

@@ -0,0 +1,16 @@
+import { mllData } from "./tool"
+
+export default function (...geos: any[]) {
+    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
+
+    for (let geoJson of geos) {
+        let [_minLongitude, _maxLongitude, _minLatitude, _maxLatitude] = mllData(geoJson)
+
+        if (minLongitude == void 0 || _minLongitude < minLongitude) minLongitude = _minLongitude
+        if (maxLongitude == void 0 || _maxLongitude > maxLongitude) maxLongitude = _maxLongitude
+        if (minLatitude == void 0 || _minLatitude < minLatitude) minLatitude = _minLatitude
+        if (maxLatitude == void 0 || _maxLatitude > maxLatitude) maxLatitude = _maxLatitude
+    }
+
+    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
+}

package/src/common/map/tool.ts

@@ -0,0 +1,30 @@
+export function mllData(geoJson: any) {
+    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
+
+    let forPolygon = function (coordinates: any) {
+        for (let j = 0; j < coordinates.length; j++) {
+            for (let k = 0; k < coordinates[j].length; k++) {
+                let longitude = coordinates[j][k][0], latitude = coordinates[j][k][1]
+
+                if (minLongitude == void 0 || minLongitude > longitude) minLongitude = longitude
+                if (maxLongitude == void 0 || maxLongitude < longitude) maxLongitude = longitude
+
+                if (minLatitude == void 0 || minLatitude > latitude) minLatitude = latitude
+                if (maxLatitude == void 0 || maxLatitude < latitude) maxLatitude = latitude
+            }
+        }
+    };
+
+    let features = geoJson.features
+    for (let i = 0; i < features.length; i++) {
+        if (features[i].geometry.type == "Polygon") {
+            forPolygon(features[i].geometry.coordinates)
+        } else if (features[i].geometry.type == "MultiPolygon") {
+            for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
+                forPolygon(features[i].geometry.coordinates[j])
+            }
+        }
+    }
+
+    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
+}

package/src/common/svg/config.ts

@@ -76,24 +76,28 @@ export const initCircle = (el: SVGElement, cx: number, cy: number, r: number) =>
 }
 
 // 路径统一设置方法
-export const initPath = (el: SVGElement, path: string, config: SVGConfigType) => {
+export const initPath = (el: SVGElement, path: string) => {
     if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
     setAttribute(el, "d", path)
-    setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
-    setAttribute(el, "stroke-width", config.lineWidth + "")
-    setAttribute(el, "stroke-linecap", config.lineCap + "")
-    setAttribute(el, "stroke-linejoin", config.lineJoin + "")
 }
 
 // 画矩形统一设置方法
 export const initRect = (
     el: SVGElement,
+    config: SVGConfigType,
     x: number,
     y: number,
     width: number,
     height: number
 ) => {
-    if (el.nodeName.toLowerCase() !== "rect") throw new Error("Need a <rect> !")
+    if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
+
+    const rectRadius: Array<number> = [];
+    if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
+        for (let index = 0; index < 4; index++) {
+            rectRadius.push(...config.rectRadius)
+        }
+    }
 
     // 由于高和宽不可以是负数，校对一下
     if (height < 0) {
@@ -105,10 +109,25 @@ export const initRect = (
         x -= width
     }
 
-    setAttribute(el, "x", x)
-    setAttribute(el, "y", y)
-    setAttribute(el, "width", width)
-    setAttribute(el, "height", height)
+    let d = ""
+    if (rectRadius.length >= 4) {
+        d = "M" + (x + rectRadius[0]) + " " + y
+        d += "L" + (x + width - rectRadius[1]) + " " + y
+        d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1])
+        d += "L" + (x + width) + " " + (y + height - rectRadius[2])
+        d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height)
+        d += "L" + (x + rectRadius[3]) + " " + (y + height)
+        d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3])
+        d += "L" + x + " " + (y + rectRadius[0])
+        d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y
+    } else {
+        d = "M" + x + " " + y
+        d += "L" + (x + width) + " " + y
+        d += "L" + (x + width) + " " + (y + height)
+        d += "L" + x + " " + (y + height)
+        d += "Z"
+    }
+    setAttribute(el, "d", d)
 }
 
 // 画弧统一设置方法

package/src/common/svg/default.ts

@@ -22,6 +22,9 @@ export default function () {
         lineDash: [],
         lineWidth: 1,
         lineCap: <lineCapType>"butt",
-        lineJoin: <lineJoinType>"miter"
+        lineJoin: <lineJoinType>"miter",
+
+        // 矩形圆角半径
+        "rectRadius": []
     }
 }

package/src/common/svg/gradient.ts

@@ -4,7 +4,7 @@ import { toNode, setAttribute } from "./tool"
 const enhanceGradient = function (gradient: SVGElement, gradientId: string) {
     const enhanceGradient = {
         "value": function () {
-            return "url(#" + gradientId + ")";
+            return "url(#" + gradientId + ")"
         },
         "setColor": function (stop: number, color: string) {
 

package/src/common/svg/index.ts

@@ -202,17 +202,17 @@ class SVG {
 
     // 矩形
     fillRect(x: number, y: number, width: number, height: number) {
-        initRect(this.__useEl, x, y, width, height)
+        initRect(this.__useEl, this.__config, x, y, width, height)
         fill(this.__useEl, this.__config)
         return this
     }
     strokeRect(x: number, y: number, width: number, height: number) {
-        initRect(this.__useEl, x, y, width, height)
+        initRect(this.__useEl, this.__config, x, y, width, height)
         stroke(this.__useEl, this.__config)
         return this
     }
     fullRect(x: number, y: number, width: number, height: number) {
-        initRect(this.__useEl, x, y, width, height)
+        initRect(this.__useEl, this.__config, x, y, width, height)
         full(this.__useEl, this.__config)
         return this
     }
@@ -240,17 +240,17 @@ class SVG {
         return this
     }
     fill() {
-        initPath(this.__useEl, this.__path, this.__config)
+        initPath(this.__useEl, this.__path)
         fill(this.__useEl, this.__config)
         return this
     }
     stroke() {
-        initPath(this.__useEl, this.__path, this.__config)
+        initPath(this.__useEl, this.__path)
         stroke(this.__useEl, this.__config)
         return this
     }
     full() {
-        initPath(this.__useEl, this.__path, this.__config);
+        initPath(this.__useEl, this.__path)
         full(this.__useEl, this.__config)
         return this
     }

package/src/common/svg/tool.ts

@@ -2,6 +2,13 @@ import type SVGConfigType from '../../../types/SVGConfig'
 
 import { XLINK_ATTRIBUTE } from "./dictionary"
 
+const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
+    setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
+    setAttribute(el, "stroke-width", config.lineWidth + "")
+    setAttribute(el, "stroke-linecap", config.lineCap + "")
+    setAttribute(el, "stroke-linejoin", config.lineJoin + "")
+}
+
 // 新建节点
 export function toNode(tagname: string) {
     return document.createElementNS('http://www.w3.org/2000/svg', tagname)
@@ -29,6 +36,7 @@ export function getAttribute(el: SVGElement, key: string) {
 }
 
 export function full(el: SVGElement, config: SVGConfigType) {
+    setLineAttr(el, config)
     _setAttribute(el, "stroke", config.strokeStyle as string)
     _setAttribute(el, "fill", config.fillStyle as string)
 }
@@ -38,6 +46,7 @@ export function fill(el: SVGElement, config: SVGConfigType) {
 }
 
 export function stroke(el: SVGElement, config: SVGConfigType) {
+    setLineAttr(el, config)
     _setAttribute(el, "stroke", config.strokeStyle as string)
     _setAttribute(el, "fill", "none")
 }

package/src/coordinate/MapCoordinate.ts

@@ -0,0 +1,81 @@
+import type MapConfigType from '../../types/MapConfig'
+import type MapCoordinateType from '../../types/MapCoordinate'
+import type MapType from '../../types/Map'
+
+import { initOption, mergeOption } from '../common/option'
+import getBoundary from '../common/map/getBoundary'
+import Mercator from '../Mercator'
+import Eoap from '../Eoap'
+
+class MapCoordinate implements MapCoordinateType {
+    readonly name: string = 'MapCoordinate'
+
+    private __config: MapConfigType
+    private __map: MapType
+    private __boundary: Array<number>
+
+    constructor(config: MapConfigType = {}) {
+        this.__config = initOption(config, {
+            api: "Mercator",
+            width: 400,
+            height: 300,
+            left: 0,
+            top: 0
+        })
+    }
+
+    private $$updateMap() {
+        let [minLongitude, maxLongitude, minLatitude, maxLatitude] = this.__boundary
+
+        if (this.__config.api == "Eoap") {
+
+            let xScale = (this.__config.width as number) * 0.836 / (maxLongitude - minLongitude)
+            let yScale = (this.__config.height as number) * 0.557 / (maxLatitude - minLatitude)
+
+            this.__map = new Eoap(xScale < yScale ? xScale : yScale, [
+                (minLongitude + maxLongitude) * 0.5 * 0.9778,
+                (minLatitude + maxLatitude) * 0.5 * 1.025
+            ])
+
+        } else if (this.__config.api == "Mercator") {
+
+            let xScale = (this.__config.width as number) * 0.72 / (maxLongitude - minLongitude)
+            let yScale = (this.__config.height as number) * 0.575 / (maxLatitude - minLatitude)
+
+            this.__map = new Mercator(xScale < yScale ? xScale : yScale, [
+                (minLongitude + maxLongitude) * 0.5,
+                (minLatitude + maxLatitude) * 0.5
+            ])
+
+        } else {
+            throw new Error("Unexpected API types:" + this.__config.api)
+        }
+    }
+
+    setConfig(config: MapConfigType) {
+        mergeOption(this.__config, config)
+        this.$$updateMap()
+        return this
+    }
+
+    setGeos(...geos: any[]) {
+        this.__boundary = getBoundary(...geos)
+        this.$$updateMap()
+        return this
+    }
+
+    use(λ: number, φ: number): [number, number] {
+        if (this.__map) {
+            let dxyz = this.__map.use(λ, φ)
+            return [
+                (this.__config.left as number) + (this.__config.width as number) * 0.5 + dxyz[0],
+                (this.__config.top as number) + (this.__config.height as number) * 0.5 + dxyz[1],
+            ]
+        } else {
+            throw new Error("Geographic data not set")
+        }
+    }
+
+}
+
+export default MapCoordinate

package/types/Canvas.d.ts

@@ -241,6 +241,14 @@ export default interface CanvasType {
      */
     clearRect(x: number, y: number, w: number, h: number): this
 
+    /**
+     * 擦除画笔上的一个圆形区域
+     * @param cx 区域中心X坐标
+     * @param cy 区域中心Y坐标
+     * @param r 区域半径
+     */
+    clearCircle(cx: number, cy: number, r: number): this
+
     /**
      * 是否操作只影响区域
      */

package/types/CanvasConfig.d.ts

@@ -59,61 +59,31 @@ export default interface CanvasConfigType {
      */
     fontSize?: number
 
-    /**
-     * 已废弃，向下兼容，请用 fontSize 代替
-     */
-    "font-size"?: number // 向下兼容
-
     /**
      * 字体，默认"sans-serif"
      */
     fontFamily?: string
 
-    /**
-     * 已废弃，向下兼容，请用 fontFamily 代替
-     */
-    "font-family"?: string // 向下兼容
-
     /**
      * 字重，默认400
      */
     fontWeight?: number
 
-    /**
-     * 已废弃，向下兼容，请用 fontWeight 代替
-     */
-    "font-weight"?: number // 向下兼容
-
     /**
      * 字类型，默认"normal"
      */
     fontStyle?: string
 
-    /**
-     * 已废弃，向下兼容，请用 fontStyle 代替
-     */
-    "font-style"?: string // 向下兼容
-
     /**
      * 圆弧开始端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
      */
     arcStartCap?: arcCapType
 
-    /**
-     * 已废弃，向下兼容，请用 arcStartCap 代替
-     */
-    "arc-start-cap"?: string // 向下兼容
-
     /**
      * 圆弧结束端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
      */
     arcEndCap?: arcCapType
 
-    /**
-     * 已废弃，向下兼容，请用 arcEndCap 代替
-     */
-    "arc-end-cap"?: string // 向下兼容
-
     // 矩形圆角半径
     rectRadius?: Array<number>
 }

package/types/MapConfig.d.ts

@@ -0,0 +1,28 @@
+export default interface MapConfigType {
+
+    /**
+     * 投影算法，默认Mercator，即墨卡托投影
+     */
+    api?: "Eoap" | "Mercator"
+
+    /**
+     * 地图宽
+     */
+    width?: number
+
+    /**
+     * 地图高
+     */
+    height?: number
+
+    /**
+     * 地图左上角横坐标
+     */
+    left?: number
+
+    /**
+     * 地图左上角枞坐标
+     */
+    top?: number
+
+}

package/types/MapCoordinate.d.ts

@@ -0,0 +1,23 @@
+import MapConfigType from './MapConfig'
+
+export default interface MapCoordinateType {
+
+    /**
+     * 修改配置
+     * @param config
+     */
+    setConfig(config: MapConfigType): this
+
+    /**
+     * 地理数据
+     * @param geos
+     */
+    setGeos(...geos: any[]): this
+
+    /**
+    * 返回该点的绘图坐标
+    * @param λ 经纬度
+    * @param φ
+    */
+    use(λ: number, φ: number): [number, number]
+}

package/types/SVGConfig.d.ts

@@ -52,39 +52,21 @@ export default interface SVGConfigType {
      */
     fontSize?: number
 
-    /**
-     * 已废弃，向下兼容，请用 fontSize 代替
-     */
-    "font-size"?: number // 向下兼容
-
     /**
      * 字体，默认"sans-serif"
      */
     fontFamily?: string
 
-    /**
-     * 已废弃，向下兼容，请用 fontFamily 代替
-     */
-    "font-family"?: string // 向下兼容
-
     /**
      * 圆弧开始端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
      */
     arcStartCap?: arcCapType
 
-    /**
-     * 已废弃，向下兼容，请用 arcStartCap 代替
-     */
-    "arc-start-cap"?: string // 向下兼容
-
     /**
      * 圆弧结束端闭合方式，默认"butt"直线闭合（还有"round"圆帽闭合,"-round"反圆帽闭合）
      */
     arcEndCap?: arcCapType
 
-    /**
-     * 已废弃，向下兼容，请用 arcEndCap 代替
-     */
-    "arc-end-cap"?: string // 向下兼容
-
+    // 矩形圆角半径
+    rectRadius?: Array<number>
 }

package/types/index.d.ts

@@ -27,8 +27,11 @@ import MapType from './Map'
 import throttleType from './throttle'
 import assembleType from './assemble'
 
-import TreeLayoutType from './TreeLayout'
+import MapConfigType from './MapConfig'
+import MapCoordinateType from './MapCoordinate'
+
 import TreeConfigType from './TreeConfig'
+import TreeLayoutType from './TreeLayout'
 
 import { initOptionType, mergeOptionType } from './option'
 
@@ -75,6 +78,11 @@ interface NewMercatorType extends MapType {
     new(scale?: number, center?: number[]): this
 }
 
+// 坐标系
+interface NewMapCoordinateType extends MapCoordinateType {
+    new(config?: MapConfigType): this
+}
+
 // 布局
 interface NewTreeLayoutType extends TreeLayoutType {
     new(config?: TreeConfigType): this
@@ -116,6 +124,9 @@ export default class VISLite {
     static throttle: throttleType
     static assemble: assembleType
 
+    // 坐标系
+    static MapCoordinate: NewMapCoordinateType
+
     // 布局
     static TreeLayout: NewTreeLayoutType
 
@@ -158,6 +169,9 @@ export let Mercator: NewMercatorType
 export let throttle: throttleType
 export let assemble: assembleType
 
+// 坐标系
+export let MapCoordinate: NewMapCoordinateType
+
 // 布局
 export let TreeLayout: NewTreeLayoutType