canvas-rect - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

index.js

@@ -47,2 +47,3 @@ /**
         this._storedAccords = []
+        this._popedAccord = null
         // fix this cursor
@@ -57,2 +58,3 @@ this._handleDown = this._handleDown.bind(this)
      init() {
+        this._checkSupport()
         this._checkValidContainer()
@@ -62,2 +64,3 @@ this._initCanvasArea()
         this._bindEvent()
+        return this
      }
@@ -68,7 +71,16 @@ /**
       */
+     _checkSupport() {
+        this._canvas = document.createElement('canvas')
+        if(!this._canvas || !this._canvas instanceof HTMLCanvasElement || typeof this._canvas.getContext !== "function") {
+            throw new ReferenceError(`the current browser enviroment is not support the canvas interface, please consider upgrading your browser.`)
+        }
+     }
+     /**
+      * @memberof DrawRect
+      * @private
+      */
      _handleDown(ev) { 
         const { preserve } = this.options
         if(!preserve) {
-            this._clearCanvas()
-            this._storedAccords.length = 0
+            this._clear(true)
         }
@@ -87,4 +99,3 @@ this._from = {
      _handleMove(ev) { 
-        // this._ctx.globalCompositeOperation = 'source-out'
-        this._clearCanvas()
+        this._clear()
         const to = {
@@ -115,3 +126,3 @@ x: ev.offsetX || ev.layerX,
       */
-     _handleUp(ev) {
+     _handleUp() {
         // if preserve, store last accordions 
@@ -164,4 +175,3 @@ if(this.options.preserve) {
      _generateCanvas() {
-        const { el, bgColor, preserve } = this.options
-        this._canvas = document.createElement('canvas')
+        const { el, bgColor } = this.options
         this._canvas.width = this._area.w
@@ -238,3 +248,3 @@ this._canvas.height = this._area.h
       */
-     _clearCanvas(clearStoredData = false) {
+     _clear(clearStoredData = false) {
         const { w, h } = this._area
@@ -244,4 +254,33 @@ this._ctx.clearRect(0,0,w,h)
      }
+     /**
+      * @memberof DrawRect
+      */
+     clearCanvas() {
+        const { w, h } = this._area
+        this._ctx.clearRect(0,0,w,h)
+        this._storedAccords.length = 0
+     }
+     /**
+      * @memberof DrawRect
+      */
+     rect(x,y,width,height) {
+        const { w,h } = this._area
+        if(width>w || height>h) {
+            console.warn(`the rectangle to draw is outside the canvas area.`)
+        }
+        if(!this.options.preserve) {
+            this._clear(true)
+        } else {
+            this._storedAccords.push({x,y,w:width,y:height})
+        }
+        this._ctx.strokeRect(x,y,width,height)
+        this._lastRecord = {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0
+        }
+     }
  }
  module.exports =  DrawRect;
- module.exports.default = module.exports;
+ module.exports.default = module.exports; // for typescript

package.json

 {
   "name": "canvas-rect",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "canvas rect drawing on element",
@@ -5,0 +5,0 @@ "main": "index.js",

src/drawRect.js

 /**
  * @class DrawRect
- * @example
- * ```html
- * let a
- * ```
  */
@@ -33,3 +29,3 @@ class DrawRect {
             lineColor: options.lineColor || '#000',
-            preserve: options.preserve ?? false,
+            preserve: options.preserve || false,
             onFinish: options.onFinish
@@ -52,2 +48,3 @@ }
         this._storedAccords = []
+        this._popedAccord = null
         // fix this cursor
@@ -62,2 +59,3 @@ this._handleDown = this._handleDown.bind(this)
      init() {
+        this._checkSupport()
         this._checkValidContainer()
@@ -67,2 +65,3 @@ this._initCanvasArea()
         this._bindEvent()
+        return this
      }
@@ -73,7 +72,16 @@ /**
       */
+     _checkSupport() {
+        this._canvas = document.createElement('canvas')
+        if(!this._canvas || !this._canvas instanceof HTMLCanvasElement || typeof this._canvas.getContext !== "function") {
+            throw new ReferenceError(`the current browser enviroment is not support the canvas interface, please consider upgrading your browser.`)
+        }
+     }
+     /**
+      * @memberof DrawRect
+      * @private
+      */
      _handleDown(ev) { 
         const { preserve } = this.options
         if(!preserve) {
-            this._clearCanvas()
-            this._storedAccords.length = 0
+            this._clear(true)
         }
@@ -92,4 +100,3 @@ this._from = {
      _handleMove(ev) { 
-        // this._ctx.globalCompositeOperation = 'source-out'
-        this._clearCanvas()
+        this._clear()
         const to = {
@@ -102,2 +109,3 @@ x: ev.offsetX || ev.layerX,
         const heigth = to.y-from.y
+        this._ctx.lineWidth = this.options.lineWidth
         this._ctx.strokeStyle = this.options.lineColor
@@ -120,3 +128,3 @@ this._storedAccords.forEach(({x,y,w,h})=>{
       */
-     _handleUp(ev) {
+     _handleUp() {
         // if preserve, store last accordions 
@@ -149,3 +157,3 @@ if(this.options.preserve) {
         const { el } = this.options
-        if(!el || !el instanceof HTMLElement || el.tagName.toUpperCase() != 'DIV') {
+        if(!el || !el instanceof Element || el.tagName.toUpperCase() != 'DIV') {
             throw new TypeError(`the param 'options.el' must be instance of HTMLElement`)
@@ -170,4 +178,3 @@ }
      _generateCanvas() {
-        const { el, bgColor, preserve } = this.options
-        this._canvas = document.createElement('canvas')
+        const { el, bgColor } = this.options
         this._canvas.width = this._area.w
@@ -244,3 +251,3 @@ this._canvas.height = this._area.h
       */
-     _clearCanvas(clearStoredData = false) {
+     _clear(clearStoredData = false) {
         const { w, h } = this._area
@@ -250,2 +257,31 @@ this._ctx.clearRect(0,0,w,h)
      }
+     /**
+      * @memberof DrawRect
+      */
+     clearCanvas() {
+        const { w, h } = this._area
+        this._ctx.clearRect(0,0,w,h)
+        this._storedAccords.length = 0
+     }
+     /**
+      * @memberof DrawRect
+      */
+     rect(x,y,width,height) {
+        const { w,h } = this._area
+        if(width>w || height>h) {
+            console.warn(`the rectangle to draw is outside the canvas area.`)
+        }
+        if(!this.options.preserve) {
+            this._clear(true)
+        } else {
+            this._storedAccords.push({x,y,w:width,y:height})
+        }
+        this._ctx.strokeRect(x,y,width,height)
+        this._lastRecord = {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0
+        }
+     }
  }

types/index.d.ts

 // Type definitions for canvas-rect
 // Definitions by: vinsurs <https://github.com/vinsurs>
 
+export default DrawRect
 export interface DrawFinishResult {
@@ -29,3 +30,3 @@ /**Coordinate position */
     lineColor?: string;
-    /**if set to `true`,will Keep last drawing on the canvas */
+    /**if set to `true`,will Keep last drawing on the canvas,default `false` */
     preserve?: boolean;
@@ -54,10 +55,13 @@ /**will be called when mouseup event is emitted */
      */
-    init(): void
+    init(): this
     /**
      * @memberof DrawRect
-     * @param {boolean} clearStoredData Whether to clear the previous drawing data in the cache,default `false`
-     * @private
+     * @desciption clear the canvas
      */
-    _clearCanvas(clearStoredData: boolean): void
+    clearCanvas(): void
+    /**
+     * @memberof DrawRect
+     * @desciption draw rect on the canvas
+     */
+    rect(x:number,y:number,width:number,height:number): void
 }
-export default DrawRect

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

22490

increased by12.87%

Lines of code

613

increased by15.01%

No dependency changes