vislite 1.2.0-alpha.3 → 1.2.0-alpha.4

package/src/common/svg/tool.ts

@@ -1,45 +1,43 @@
-import type SVGConfigType from '../../../types/SVGConfig'
-
-import { XLINK_ATTRIBUTE } from "./dictionary"
-
-// 新建节点
-export function toNode(tagname: string) {
-    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
-}
-
-// 设置属性
-const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
-
-    // 需要使用xlink命名空间的xml属性
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
-    }
-
-    // 否则
-    else {
-        el.setAttribute(key, value + "")
-    }
-}
-export const setAttribute = _setAttribute
-
-// 获取属性
-export function getAttribute(el: SVGElement, key: string) {
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
-    return el.getAttribute(key)
-}
-
-export function full(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle as string)
-    _setAttribute(el, "fill", config.fillStyle as string)
-    _setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle as string)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle as string)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
+import type SVGConfigType from '../../../types/SVGConfig'
+
+import { XLINK_ATTRIBUTE } from "./dictionary"
+
+// 新建节点
+export function toNode(tagname: string) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
+}
+
+// 设置属性
+const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
+
+    // 需要使用xlink命名空间的xml属性
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
+    }
+
+    // 否则
+    else {
+        el.setAttribute(key, value + "")
+    }
+}
+export const setAttribute = _setAttribute
+
+// 获取属性
+export function getAttribute(el: SVGElement, key: string) {
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
+    return el.getAttribute(key)
+}
+
+export function full(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle as string)
+    _setAttribute(el, "fill", config.fillStyle as string)
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle as string)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle as string)
+    _setAttribute(el, "fill", "none")
 }

package/src/layout/TreeLayout.ts

@@ -4,7 +4,7 @@ import type TreeOptionType from '../../types/TreeOption'
 
 import Tree from '../common/tree/index'
 import { initOption } from '../common/option'
-import animation from '../animation'
+import { animation } from "@oipage/core.js/src/animation/index"
 import rotate from '../rotate'
 
 class TreeLayout extends Tree implements TreeLayoutType {

package/types/CanvasConfig.d.ts

@@ -1,107 +1,117 @@
-import { arcCapType, textAlignType, textBaselineType } from './painterConfig'
-
-export default interface CanvasConfigType {
-
-    /**
-     * 填充色或图案，默认"#000"
-     */
-    fillStyle?: string | CanvasGradient
-
-    /**
-     * 轮廓色或图案，默认"#000"
-     */
-    strokeStyle?: string | CanvasGradient
-
-    /**
-     * 线条宽度，默认1(单位px)
-     */
-    lineWidth?: number
-
-    /**
-     * 文字水平对齐方式，默认"left"左对齐（还有"center"居中和"right"右对齐）
-     */
-    textAlign?: textAlignType
-
-    /**
-     * 文字垂直对齐方式，默认"middle"垂直居中（还有"top"上对齐和"bottom"下对齐）
-     */
-    textBaseline?: textBaselineType
-
-    /**
-     * 设置线条虚线，默认为[]表示使用实线绘制
-     *
-     * 值应该是一个数组，格式：[实线长，虚线长，实线长 ...]，数组长度任意，会自动循环
-     */
-    lineDash?: Array<number>
-
-    /**
-     * 阴影的模糊系数，默认0，也就是无阴影
-     */
-    shadowBlur?: number
-
-    /**
-     * 阴影的颜色
-     */
-    shadowColor?: string | CanvasGradient
-
-    /**
-     * 文字大小，默认16
-     */
-    "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 // 向下兼容
-
+import { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from './painterConfig'
+
+export default interface CanvasConfigType {
+
+    /**
+     * 填充色或图案，默认"#000"
+     */
+    fillStyle?: string | CanvasGradient
+
+    /**
+     * 轮廓色或图案，默认"#000"
+     */
+    strokeStyle?: string | CanvasGradient
+
+    /**
+     * 线条宽度，默认1(单位px)
+     */
+    lineWidth?: number
+
+    /**
+     * 线的端点类型，默认"butt"平直边缘（还有"round"半圆和"square"矩形）
+     */
+    lineCap?: lineCapType
+
+    /**
+     * 线的拐角连接方式，默认"miter"连接处边缘延长相接（还有"bevel"对角线斜角和"round"圆）
+     */
+    lineJoin?: lineJoinType
+
+    /**
+     * 设置线条虚线，默认为[]表示使用实线绘制
+     *
+     * 值应该是一个数组，格式：[实线长，虚线长，实线长 ...]，数组长度任意，会自动循环
+     */
+    lineDash?: Array<number>
+
+    /**
+     * 文字水平对齐方式，默认"left"左对齐（还有"center"居中和"right"右对齐）
+     */
+    textAlign?: textAlignType
+
+    /**
+     * 文字垂直对齐方式，默认"middle"垂直居中（还有"top"上对齐和"bottom"下对齐）
+     */
+    textBaseline?: textBaselineType
+
+    /**
+     * 阴影的模糊系数，默认0，也就是无阴影
+     */
+    shadowBlur?: number
+
+    /**
+     * 阴影的颜色
+     */
+    shadowColor?: string | CanvasGradient
+
+    /**
+     * 文字大小，默认16
+     */
+    "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 // 向下兼容
+
 }

package/types/SVGConfig.d.ts

@@ -1,80 +1,90 @@
-import { arcCapType, textAlignType, textBaselineType } from './painterConfig'
-
-export type svgElType = SVGElement | "g" | "text" | "path" | "circle" | "rect" | "polygon" | "polyline"
-export type svgBoardType = SVGElement | "text" | "path" | "arc" | "circle" | "rect"
-
-export default interface SVGConfigType {
-
-    /**
-     * 填充色或图案，默认"#000"
-     */
-    fillStyle?: string
-
-    /**
-     * 轮廓色或图案，默认"#000"
-     */
-    strokeStyle?: string
-
-    /**
-     * 线条宽度，默认1(单位px)
-     */
-    lineWidth?: number
-
-    /**
-     * 文字水平对齐方式，默认"left"左对齐（还有"center"居中和"right"右对齐）
-     */
-    textAlign?: textAlignType
-
-    /**
-     * 文字垂直对齐方式，默认"middle"垂直居中（还有"top"上对齐和"bottom"下对齐）
-     */
-    textBaseline?: textBaselineType
-
-    /**
-     * 设置线条虚线，默认为[]表示使用实线绘制
-     *
-     * 值应该是一个数组，格式：[实线长，虚线长，实线长 ...]，数组长度任意，会自动循环
-     */
-    lineDash?: Array<number>
-
-    /**
-     * 文字大小，默认16
-     */
-    "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 // 向下兼容
-
+import { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from './painterConfig'
+
+export type svgElType = SVGElement | "g" | "text" | "path" | "circle" | "rect" | "polygon" | "polyline"
+export type svgBoardType = SVGElement | "text" | "path" | "arc" | "circle" | "rect"
+
+export default interface SVGConfigType {
+
+    /**
+     * 填充色或图案，默认"#000"
+     */
+    fillStyle?: string
+
+    /**
+     * 轮廓色或图案，默认"#000"
+     */
+    strokeStyle?: string
+
+    /**
+     * 线条宽度，默认1(单位px)
+     */
+    lineWidth?: number
+
+    /**
+     * 线的端点类型，默认"butt"平直边缘（还有"round"半圆和"square"矩形）
+     */
+    lineCap?: lineCapType
+
+    /**
+     * 线的拐角连接方式，默认"miter"连接处边缘延长相接（还有"bevel"对角线斜角和"round"圆）
+     */
+    lineJoin?: lineJoinType
+
+    /**
+     * 设置线条虚线，默认为[]表示使用实线绘制
+     *
+     * 值应该是一个数组，格式：[实线长，虚线长，实线长 ...]，数组长度任意，会自动循环
+     */
+    lineDash?: Array<number>
+
+    /**
+     * 文字水平对齐方式，默认"left"左对齐（还有"center"居中和"right"右对齐）
+     */
+    textAlign?: textAlignType
+
+    /**
+     * 文字垂直对齐方式，默认"middle"垂直居中（还有"top"上对齐和"bottom"下对齐）
+     */
+    textBaseline?: textBaselineType
+
+    /**
+     * 文字大小，默认16
+     */
+    "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 // 向下兼容
+
 }

package/types/animation.d.ts

@@ -1,10 +1,6 @@
-interface animationFun {
-    (deep: number): void
-}
+import { animationType } from "@oipage/core.js/src/animation"
 
 /**
  * 轮询动画，返回一个函数，调用该函数，可以提前结束动画
  */
-export default interface animationType {
-    (doback: animationFun, duration?: number, callback?: animationFun): Function
-}
+export default animationType

package/types/painterConfig.d.ts

@@ -1,3 +1,5 @@
-export type arcCapType = "butt" | "round" | "-round"
-export type textAlignType = "left" | "center" | "right"
-export type textBaselineType = "top" | "middle" | "bottom"
+export type arcCapType = "butt" | "round" | "-round"
+export type textAlignType = "left" | "center" | "right"
+export type textBaselineType = "top" | "middle" | "bottom"
+export type lineCapType = "butt" | "round" | "square"
+export type lineJoinType = "miter" | "bevel" | "round"

package/types/throttle.d.ts

@@ -1,8 +1,6 @@
-import throttleOptionType from './throttleOption'
+import { throttleType } from "@oipage/core.js/src/throttle"
 
 /**
  * 节流函数
  */
-export default interface throttle {
-    (callback: Function, option?: throttleOptionType): Function
-}
+export default throttleType

package/types/throttleOption.d.ts

@@ -1,22 +1 @@
-export type throttleOpportunityType = "begin" | "end" | "wide"
-
-export default interface throttleOptionType {
-
-    /**
-     * 节流时长
-     */
-    time?: number
-
-    /**
-     * 是否持续节流
-     */
-    keep?: boolean
-
-    /**
-     * 执行时机
-     *
-     * begin（开始触发）、end（结束触发）、wide（第一次开始触发，其余结束触发）
-     */
-    opportunity?: throttleOpportunityType
-
-}
+export * from "@oipage/core.js/src/throttle"

package/src/animation.ts

@@ -1,99 +0,0 @@
-//当前正在运动的动画的tick函数堆栈
-let $timers: any[] = []
-//唯一定时器的定时间隔
-const $interval = 13
-//定时器ID
-let $timerId: any
-
-/**
- * 动画轮播
- * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
- * @param {number} duration 动画时长，可选
- * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
- *
- * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
- */
-export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
-
-    const clock = {
-        //把tick函数推入堆栈
-        "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
-            if (!tick) {
-                throw new Error('Tick is required!')
-            }
-            const id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
-            $timers.push({
-                "id": id,
-                "createTime": new Date(),
-                "tick": tick,
-                "duration": duration,
-                "callback": callback
-            })
-            clock.start()
-            return id
-        },
-
-        //开启唯一的定时器timerId
-        "start": function () {
-            if (!$timerId) {
-                $timerId = setInterval(clock.tick, $interval)
-            }
-        },
-
-        //被定时器调用，遍历timers堆栈
-        "tick": function () {
-            let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number
-            const timers: any[] = $timers
-            $timers = []
-            $timers.length = 0
-            for (flag = 0; flag < timers.length; flag++) {
-                //初始化数据
-                timer = timers[flag]
-                createTime = timer.createTime
-                tick = timer.tick
-                duration = timer.duration
-                callback = timer.callback
-
-                //执行
-                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration
-                passTime = passTime > 1 ? 1 : passTime
-                tick(passTime)
-                if (passTime < 1 && timer.id) {
-                    //动画没有结束再添加
-                    $timers.push(timer)
-                } else {
-                    callback(passTime)
-                }
-            }
-            if ($timers.length <= 0) {
-                clock.stop()
-            }
-        },
-
-        //停止定时器，重置timerId=null
-        "stop": function () {
-            if ($timerId) {
-                clearInterval($timerId)
-                $timerId = null
-            }
-        }
-    }
-
-    const id = clock.timer(function (deep: number) {
-        //其中deep为0-1，表示改变的程度
-        doback(deep)
-    }, duration, callback)
-
-    // 返回一个函数
-    // 用于在动画结束前结束动画
-    return function () {
-        let i: string
-        for (i in $timers) {
-            if ($timers[i].id == id) {
-                $timers[i].id = void 0
-                return
-            }
-        }
-    }
-
-}