@jiaminghi/c-render - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

config/elements.js

 import { checkPointIsInCircle, checkPointIsInPolygon, getDistanceBetweenPointAndLine, getCircleRadianPoint } from '../extend/methods'
 
-import { checkPointIsInSector, getRegularPolygonPoints } from '../extend/methods'
+import { checkPointIsInSector, getRegularPolygonPoints, getTwoPointDistance } from '../extend/methods'
 
-import { drawPolylinePath } from '../extend/canvas'
+import { drawPolylinePath, drawSmoothlinePath } from '../extend/canvas'
 
@@ -228,5 +228,5 @@ export const circle = {
   setGraphOrigin (shape, style) {
-    const { x, y } = shape
+    const { x, y, w, h } = shape
 
-    style.graphOrigin = [x, y]
+    style.graphOrigin = [x + w / 2, y + h / 2]
   },
@@ -580,3 +580,86 @@
 
-export default new Map([
+export const smoothline = {
+  shape: {
+    points: []
+  },
+
+  validator (shape, style) {
+    const { points } = shape
+
+    if (!(points instanceof Array)) {
+      console.warn('Points should be an array!')
+
+      return false
+    }
+
+    return true
+  },
+
+  draw (ctx, shape, style) {
+    ctx.beginPath()
+
+    let { points } = shape
+
+    const first = points.find(point => point)
+
+    drawSmoothlinePath(ctx, points, first)
+
+    ctx.stroke()
+
+    ctx.closePath()
+  },
+
+  hoverCheck (point, shape, style) {
+    let { points } = shape
+
+    const lineNum = points.length - 1
+
+    const { lineWidth } = style
+
+    const minus = lineWidth / 2
+
+    const [x, y] = point
+
+    const { max, min } = Math
+
+    if (lineNum === 0) return false
+
+    const lines = new Array(lineNum).fill('').map((t, i) => [points[i], points[i + 1]])
+
+    const result = lines.find(line => {
+      const xB = line[0][0]
+      const xE = line[1][0]
+
+      const yB = line[0][1]
+      const yE = line[1][1]
+
+      if (x > max(xB, xE) || x < min(xB, xE)) return false
+
+      if (y > max(yB, yE) || y < min(yB, yE)) return false
+
+      return getDistanceBetweenPointAndLine(point, ...line) < minus
+    })
+
+    return result
+  },
+
+  setGraphOrigin (shape, style) {
+    const { points } = shape
+
+    style.graphOrigin = points[0]
+  },
+
+  drag ({movementX, movementY}, shape, style) {
+    const { points } = shape
+
+    const moveAfterPoints = points.map(([x, y]) => [x + movementX, y + movementY])
+
+    this.attr('shape', {
+      points: moveAfterPoints
+    })
+  }
+}
+
+
+const elements = new Map([
   ['circle', circle],
@@ -590,3 +673,16 @@ ['ellipse', ellipse],
   ['arc', arc],
-  ['regPolygon', regPolygon]
-])
+  ['regPolygon', regPolygon],
+  ['smoothline', smoothline]
+])
+
+export default elements
+
+export function extendNewElement (name, config) {
+  if (!name || !curve) {
+    console.warn('extendNewElement Missing Parameters!')
+
+    return
+  }
+
+  config.set(name, config)
+}

config/style.js

@@ -18,5 +18,5 @@ import { tranRgbaValue } from '../extend/color'
   graphRect: null,
-  transform: null,
   scale: null,
   rotate: null,
+  translate: null,
   hoverCursor: 'default',
@@ -23,0 +23,0 @@

extend/canvas.js

@@ -12,4 +12,75 @@ export function drawPolylinePath (ctx, points, beginPath = false, closePath = false) {
 
+export function drawBezierCurveLinePath (ctx, points, moveTo = false, beginPath = false, closePath = false) {
+  if (!ctx || !points) return false
+
+  if (beginPath) ctx.beginPath()
+
+  if (moveTo) ctx.moveTo(...moveTo)
+
+  points.forEach(item => (item && ctx.bezierCurveTo(...item[0], ...item[1], ...item[2])))
+
+  if (closePath) ctx.closePath()
+}
+
+export function drawSmoothlinePath (ctx, points, moveTo = false, beginPath = false, closePath = false) {
+  if (!ctx || !points) return false
+
+  const canDrawPoints = points.filter(point => point)
+
+  if (canDrawPoints.length < 2) return false
+
+  if (beginPath) ctx.beginPath()
+
+  if (canDrawPoints.length === 2) {
+    drawPolylinePath(ctx, canDrawPoints)
+
+    return
+  }
+
+  const bezierCurveLineNum = canDrawPoints.length - 1
+
+  const bezierCurvePoints = new Array(bezierCurveLineNum).fill(0).map((t, i) =>
+    [...getBezierCurveLineControlPoints(canDrawPoints, i), canDrawPoints[i + 1]])
+
+  drawBezierCurveLinePath(ctx, bezierCurvePoints, moveTo)
+
+  if (closePath) ctx.closePath()
+}
+
+export function getBezierCurveLineControlPoints (points, index, close = false, offsetA = 0.25, offsetB = 0.25) {
+  const pointNum = points.length
+
+  if (pointNum < 3 || index >= pointNum) return
+
+  let beforePointIndex = index - 1
+  beforePointIndex < 0 && (beforePointIndex = (close ? pointNum + beforePointIndex : 0))
+
+  let afterPointIndex = index + 1
+  afterPointIndex >= pointNum && (afterPointIndex = (close ? afterPointIndex - pointNum : pointNum - 1))
+
+  let afterNextPointIndex = index + 2
+  afterNextPointIndex >= pointNum && (afterNextPointIndex = (close ? afterNextPointIndex - pointNum : pointNum - 1))
+
+  const pointBefore = points[beforePointIndex]
+  const pointMiddle = points[index]
+  const pointAfter = points[afterPointIndex]
+  const pointAfterNext = points[afterNextPointIndex]
+
+  return [
+    [
+      pointMiddle[0] + offsetA * (pointAfter[0] - pointBefore[0]),
+      pointMiddle[1] + offsetA * (pointAfter[1] - pointBefore[1])
+    ],
+    [
+      pointAfter[0] - offsetB * (pointAfterNext[0] - pointMiddle[0]),
+      pointAfter[1] - offsetB * (pointAfterNext[1] - pointMiddle[1])
+    ]
+  ]
+}
+
 export default {
-  drawPolylinePath
+  drawPolylinePath,
+  drawBezierCurveLinePath,
+  drawSmoothlinePath,
+  getBezierCurveLineControlPoints
 }

extend/methods.js

@@ -82,2 +82,11 @@ export function deepClone (object, recursionType = false) {
 
+export function getTranslatePointPos (translate, point) {
+  if (!translate || !point) return false
+
+  const [x, y] = point
+  const [tx, ty] = translate
+
+  return [x + tx, y + ty]
+}
+
 export function checkPointIsInPolygon (point, polygon) {
@@ -188,2 +197,6 @@ if (!point || !polygon || polygon.length < 3) return false
 
+export function filterNull (arr) {
+  return arr.filter(v => (v || v === 0))
+}
+
 export default {
@@ -195,2 +208,3 @@ deepClone,
   getScalePointPos,
+  getTranslatePointPos,
   checkPointIsInPolygon,
@@ -197,0 +211,0 @@ checkPointIsInSector,

function/instance.js

@@ -5,3 +5,3 @@ import transition from '@jiaminghi/transition'
 
-import { getRotatePointPos, getScalePointPos } from '../extend/methods'
+import { getRotatePointPos, getScalePointPos, getTranslatePointPos } from '../extend/methods'
 
@@ -47,3 +47,3 @@ function init () {
 
-  const { graphOrigin, rotate, scale } = style
+  const { graphOrigin, rotate, scale, translate } = style
 
@@ -53,2 +53,3 @@ if (graphOrigin) {
     if (scale) pos = getScalePointPos(scale.map(s => 1 / s), pos, graphOrigin)
+    if (translate) pos = getTranslatePointPos(translate.map(v => v * -1), pos)
   }
@@ -55,0 +56,0 @@

function/prototype.js

@@ -184,3 +184,3 @@ import { deepClone } from '../extend/methods'
 
-  this.setCurrentHoverElement(hoverElement)
+  this.setCurrentHoverElement(hoverElement, e)
 }
@@ -203,3 +203,3 @@
         typeof this.hoverElement.onClick === 'function' &&
-          this.hoverElement.onClick()
+          this.hoverElement.onClick(e)
 
@@ -209,7 +209,7 @@ this.hoverElement && (this.hoverElement.dragging = false)
 
-function setCurrentHoverElement (hoverElement = false) {
+function setCurrentHoverElement (hoverElement = false, e) {
   if (hoverElement && hoverElement.hovered) return hoverElement
 
   if ((!hoverElement && this.hoverElement) || (hoverElement && this.hoverElement)) {
-    typeof this.hoverElement.mouseOuter === 'function' && this.hoverElement.mouseOuter()
+    typeof this.hoverElement.mouseOuter === 'function' && this.hoverElement.mouseOuter(e)
 
@@ -227,3 +227,3 @@ this.hoverElement.hovered = false
 
-  typeof hoverElement.mouseEnter === 'function' && hoverElement.mouseEnter()
+  typeof hoverElement.mouseEnter === 'function' && hoverElement.mouseEnter(e)
 
@@ -268,3 +268,3 @@ this.hoverElement = hoverElement
 
-  const { graphOrigin, rotate, scale } = style
+  const { graphOrigin, rotate, scale, translate } = style
 
@@ -279,2 +279,4 @@ if (!(graphOrigin instanceof Array)) return
 
+  if (translate) ctx.translate(...translate)
+
   ctx.translate(-graphOrigin[0], -graphOrigin[1])
@@ -281,0 +283,0 @@ }

index.js

 import extendPrototype from './function/prototype'
 
+export { extendNewElement } from './config/elements'
+
+export { injectNewCurve } from '@jiaminghi/transition'
+
 export default class CRender {
@@ -37,2 +41,2 @@
 
-extendPrototype(CRender)
+extendPrototype(CRender)

package.json

 {
   "name": "@jiaminghi/c-render",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "JiaMing <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "Canvas-based vector graphics rendering plugin",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37934

increased by14.56%

Lines of code

1131

increased by12.43%

No dependency changes