vislite 0.4.1 → 0.5.0

package/src/common/canvas/texts.ts

@@ -1,19 +1,19 @@
-export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
-
-    let lineNumber = 0, content = ""
-    for (let i = 0; i < contents.length; i++) {
-        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
-            lineNumber += 1
-            doback(content, (lineNumber - 0.5) * height)
-
-            content = contents[i]
-        } else if (i == contents.length - 1) {
-            lineNumber += 1
-            doback(content + contents[i], (lineNumber - 0.5) * height)
-        } else {
-            content += contents[i]
-        }
-    }
-
-    return lineNumber * height
+export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
+
+    let lineNumber = 0, content = ""
+    for (let i = 0; i < contents.length; i++) {
+        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
+            lineNumber += 1
+            doback(content, (lineNumber - 0.5) * height)
+
+            content = contents[i]
+        } else if (i == contents.length - 1) {
+            lineNumber += 1
+            doback(content + contents[i], (lineNumber - 0.5) * height)
+        } else {
+            content += contents[i]
+        }
+    }
+
+    return lineNumber * height
 }

package/src/common/geometry/prism-horizontal.ts

@@ -0,0 +1,33 @@
+import rotate from '../../rotate'
+
+// 棱柱水平部分
+
+export default function (normal: boolean, x: number, y: number, z: number, radius: number, num: number, d: number) {
+
+    let beginX: number, beginZ: number
+    if (num == 4) {
+        let temp = radius / 1.414
+        beginX = x + temp
+        beginZ = z + temp
+
+    } else {
+        beginX = x + radius
+        beginZ = z
+    }
+
+    let point = [beginX, beginZ], points = [], deg = Math.PI * 2 / num
+    for (let i = 0; i < num; i++) {
+
+        points.push(x, y, z)
+        if (normal) points.push(0, d, 0)
+
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+
+        point = rotate(x, z, deg * (i + 1), beginX, beginZ)
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+    }
+
+    return points
+}

package/src/common/geometry/prism-vertical.ts

@@ -0,0 +1,40 @@
+import rotate from '../../rotate'
+
+// 棱柱垂直部分
+
+export default function (normal: boolean, x: number, y: number, z: number, radius: number, height: number, num: number) {
+    let points = []
+    let beginPosition: [number, number]
+
+    if (num == 4) {
+        beginPosition = rotate(x, z, Math.PI * 0.25, x - radius, z)
+    } else {
+        beginPosition = [x + radius, z]
+    }
+
+    let deg = Math.PI * 2 / num, degHalf = Math.PI * 2 / (num * 2)
+
+    let endPosition: [number, number], normalPosition = []
+    for (let i = 0; i < num; i++) {
+
+        endPosition = rotate(x, z, deg, ...beginPosition)
+
+        if (normal) {
+            let halfPosition = rotate(x, z, degHalf, ...beginPosition)
+            normalPosition = [halfPosition[0], 0, halfPosition[1]]
+        }
+
+        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
+        points.push(beginPosition[0], y + height, beginPosition[1], ...normalPosition)
+        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
+
+        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
+        points.push(endPosition[0], y, endPosition[1], ...normalPosition)
+        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
+
+
+        beginPosition = endPosition
+    }
+
+    return points
+}

package/src/common/geometry/sphere-fragment.ts

@@ -0,0 +1,39 @@
+import rotate from '../../rotate'
+
+// 球体中的一瓣子
+
+export default function (normal: boolean, cx: number, cy: number, cz: number, radius: number, num: number, index: number) {
+    let points = [cx, cy + radius, cz], deg = Math.PI * 2 / num, point: [number, number]
+
+    if (normal) points.push(0, radius, 0)
+
+    let copy2 = () => {
+        points.push(...points.slice(points.length - (normal ? 12 : 6)))
+    }
+
+    for (let i = 1; i < num * 0.5; i++) {
+        point = rotate(cx, cy, deg * i, cx, cy + radius)
+
+        if (i > 1) copy2()
+
+        // 第一个点
+        let point1 = rotate(cx, cz, deg * index, point[0], cz)
+        points.push(point1[0], point[1], point1[1])
+
+        if (normal) points.push(point1[0] - cx, point[1] - cy, point1[1] - cz)
+
+        if (i > 1) copy2()
+
+        // 下一个点
+        let point2 = rotate(cx, cz, deg * (index + 1), point[0], cz)
+        points.push(point2[0], point[1], point2[1])
+
+        if (normal) points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz)
+    }
+    copy2()
+    points.push(cx, cy - radius, cz)
+
+    if (normal) points.push(0, - radius, 0)
+
+    return points
+}

package/src/common/geometry/tool/circle.ts

@@ -0,0 +1,12 @@
+// 计算切割份数
+export let splitNum = function (precision: number, radius: number) {
+
+    // 根据切割弧度得出切割块数目
+    let num = Math.ceil(Math.PI * 2 /
+
+        // 为了满足最小精度而得出的切割弧度
+        Math.asin(precision / radius) * 2)
+
+    return (isNaN(num) || num < 12) ? 12 : num
+
+}

package/src/common/mergeOption.ts

@@ -1,7 +1,7 @@
-export default function (option: any, defaultOption: any) {
-    for (let key in option) {
-        defaultOption[key] = option[key]
-    }
-
-    return defaultOption
+export default function (option: any, defaultOption: any) {
+    for (let key in option) {
+        defaultOption[key] = option[key]
+    }
+
+    return defaultOption
 }

package/src/common/setStyle.ts

@@ -1,6 +1,6 @@
-// 修改样式
-export default function (el: HTMLElement | SVGElement, styles: any) {
-    for (let key in styles) {
-        el.style[key] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (let key in styles) {
+        el.style[key] = styles[key]
+    }
 }

package/src/common/svg/config.ts

@@ -1,174 +1,174 @@
-import type SVGConfigType from "../../../types/SVGConfig"
-
-import { setAttribute } from "./tool"
-import setStyle from "../setStyle"
-import arc from "../canvas/arc"
-
-// 文字统一设置方法
-export let initText = (
-  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 + ")")
-  }
-}
-
-// 画圆统一设置方法
-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)
-}
-
-// 路径统一设置方法
-export let initPath = (el: SVGElement, path: string) => {
-  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
-) => {
-  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
-) => {
-  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)
-    }
-  )
-}
+import type SVGConfigType from "../../../types/SVGConfig"
+
+import { setAttribute } from "./tool"
+import setStyle from "../setStyle"
+import arc from "../canvas/arc"
+
+// 文字统一设置方法
+export let initText = (
+  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 + ")")
+  }
+}
+
+// 画圆统一设置方法
+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)
+}
+
+// 路径统一设置方法
+export let initPath = (el: SVGElement, path: string) => {
+  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
+) => {
+  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
+) => {
+  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/index.ts

@@ -28,7 +28,7 @@ class SVG {
         textBaseline: <textBaselineType>"middle",
 
         // 文字设置
-        "fontSize": 50,
+        "fontSize": 16,
         "fontFamily": "sans-serif",
 
         // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
@@ -331,6 +331,14 @@ class SVG {
             "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y
         return this
     }
+
+    // 绑定事件
+    bind(eventType: string, callback: (event: Event, target: SVGElement) => void) {
+        this.__useEl.addEventListener(eventType, function (event: Event) {
+            callback.call(this, event, this)
+        }, false)
+        return this
+    }
 }
 
 export default SVG

package/src/common/svg/tool.ts

@@ -1,45 +1,45 @@
-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)
-}
-
-// 设置属性
-let _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 let 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)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.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)
+}
+
+// 设置属性
+let _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 let 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)
+    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", "none")
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
 }