react-konva-utils - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

es/html.js

		@@ -15,2 +15,7 @@ var __rest = (this && this.__rest) \|\| function (s, e) {
		import { Group } from 'react-konva';
		const needForceStyle = (el) => {
		const pos = window.getComputedStyle(el).position;
		const ok = pos === 'absolute' \|\| pos === 'relative';
		return !ok;
		};
		export const Html = ({ children, groupProps, divProps, transform }) => {
		@@ -33,4 +38,6 @@ const groupRef = React.useRef();
		const attrs = tr.decompose();
		div.style.top = attrs.y + 'px';
		div.style.left = attrs.x + 'px';
		div.style.top = '0px';
		div.style.left = '0px';
		div.style.transform = `translate(${attrs.x}px, ${attrs.y}px) rotate(${attrs.rotation}deg) scaleX(${attrs.scaleX}) scaleY(${attrs.scaleY})`;
		div.style.transformOrigin = 'top left';
		}
		@@ -51,4 +58,5 @@ };
		parent.appendChild(div);
		parent.style.position = 'relative';
		parent.style.position = 'relative';
		if (shouldTransform && needForceStyle(parent)) {
		parent.style.position = 'relative';
		}
		group.on('_clearTransformCache', handleTransform);
		@@ -55,0 +63,0 @@ handleTransform();

package.json

		{
		"name": "react-konva-utils",
		"version": "0.1.0",
		"version": "0.1.1",
		"description": "Useful components and hooks for react-konva",
		@@ -5,0 +5,0 @@ "author": "Anton Lavrenov",

README.md

		# Useful components and hooks for [react-konva](https://github.com/konvajs/react-konva/) apps.

		### Html

		`Html` components allows you to create DOM components inside Konva stage. All DOM components will be placed over canvas content.

		```js
		import { Html } from 'react-konva-utils';

		<Html
		transform // should we apply position transform automatically to DOM container, default is true
		groupProps={{}} // additional properties to the group wrapper, useful for some position offset
		divProps={{}} // additional props for wrapped div elements, useful for styles
		>
		<div>DOM content</div>
		</Html>;
		```

		### Portal

		`Portal` allows you to create portal from one Konva container (such as `Layer` or `Group`) into another.

		```js
		import { Html } from 'react-konva-utils';

		<Layer>
		<Portal selector=".top">
		{/* content of that portal will be moved into "top" group*/}
		<Rect width={100} height={100} fill="red" draggable />
		</Portal>
		<Rect width={100} height={100} fill="black" draggable />
		<Group name="top" />
		</Layer>;
		```

Improved metrics