@lichin/pico - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

		{
		"name": "@lichin/pico",
		"version": "0.2.0",
		"version": "0.2.1",
		"description": "Photo Editor helper",
		@@ -5,0 +5,0 @@ "license": "MIT",

README.md

		@@ -19,3 +19,3 @@ [![npm(scoped)](https://img.shields.io/npm/v/@lichin/pico.svg)](https://github.com/lichin-lin/pico)
		import React, { useEffect } from "react";
		import { pico } from "@lichin/pico";
		import { pico } from "./pico";
		import "./styles.css";
		@@ -41,4 +41,4 @@
		<div className="btns">
		<div className="btn rotate-45-pos" onClick={() => handleRotate(-45)}>
		rotate -45deg
		<div className="btn rotate-90-pos" onClick={() => handleRotate(-90)}>
		rotate -90deg
		</div>
		@@ -76,5 +76,4 @@ <div className="btn rotate-90-neg" onClick={() => handleRotate(90)}>
		\| options \| Object \| {} \| Please see next object description for the details \|
		\| source \| HTMLElement Object \| - \| Single HTMLElement `IMG` Object \|

		options object contain serverl keys (In progress):
		options object contain several keys (In progress):
		\| Key \| Type \| Default \| Description \|
		@@ -81,0 +80,0 @@ \| -------- \| -------- \| -------- \| ---------------------------------------------------- \|

src/pico.js

		@@ -1,2 +0,7 @@
		export const pico = (elm, options, source) => {
		/**
		*
		* @param {HTMLElement} elm canvas
		* @param {object} options transform properties
		*/
		export const pico = (elm, options) => {
		if (!(elm instanceof HTMLElement) \|\| elm.tagName !== "CANVAS") {
		@@ -14,7 +19,18 @@ throw new Error("Element for Pico should be a canvas");
		let ctx = elm.getContext("2d");
		ctx.clearRect(0, 0, width, height);
		ctx.translate(width / 2, height / 2);
		ctx.rotate((value * Math.PI) / 180);
		ctx.translate(-width / 2, -height / 2);
		ctx.drawImage(source, 0, 0, width, height);

		// create a temp
		const tempCanvas = document.createElement("canvas");
		tempCanvas.width = height;
		tempCanvas.height = width;
		const tempCtx = tempCanvas.getContext("2d");
		tempCtx.clearRect(0, 0, width, height);
		tempCtx.translate(height / 2, width / 2);
		tempCtx.rotate((value * Math.PI) / 180);
		tempCtx.translate(-width / 2, -height / 2);
		tempCtx.drawImage(elm, 0, 0);

		// render on original
		elm.height = width;
		elm.width = height;
		ctx.drawImage(tempCanvas, 0, 0);
		break;
		@@ -21,0 +37,0 @@ default:

New alerts