Skip to content

Instantly share code, notes, and snippets.

@motephyr

motephyr/index.html

Created May 9, 2019 23:41
Show Gist options
  • Save motephyr/a529d97b4a26d3d30f96889cbb5021eb to your computer and use it in GitHub Desktop.
Save motephyr/a529d97b4a26d3d30f96889cbb5021eb to your computer and use it in GitHub Desktop.
Download ZIP
react-konva DEMO react-konva DEMO // source https://jsbin.com/rexogokeqa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="react-konva DEMO">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>react-konva DEMO</title>
<script type="text/javascript" src="https://cdn.rawgit.com/konvajs/konva/0.14.0/konva.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/lavrton/react-konva/v1.0.1/dist/react-konva.bundle.js"></script>
<script src="http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<style id="jsbin-css">
#fps {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div id='container'></div>
<div id="fps"></div>
<script id="jsbin-javascript">
// noprotect
"use strict";
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _ReactKonva = ReactKonva;
var Layer = _ReactKonva.Layer;
var Text = _ReactKonva.Text;
var Stage = _ReactKonva.Stage;
var Line = _ReactKonva.Line;
var BinarySearchTree = (function () {
function BinarySearchTree() {
_classCallCheck(this, BinarySearchTree);
this.root = null;
}
_createClass(BinarySearchTree, [{
key: "insertNode",
value: function insertNode(val) {
var node = {
data: val,
left: null,
right: null
};
var currentNode;
if (!this.root) {
this.root = node;
} else {
currentNode = this.root;
while (currentNode) {
if (val < currentNode.data) {
if (!currentNode.left) {
currentNode.left = node;
break;
} else {
currentNode = currentNode.left;
}
} else if (val > currentNode.data) {
if (!currentNode.right) {
currentNode.right = node;
break;
} else {
currentNode = currentNode.right;
}
} else {
console.log('Ignoring this value as the BST supposed to be a tree containing UNIQUE values');
break;
}
}
}
}
}]);
return BinarySearchTree;
})();
var TextCache = (function (_React$Component) {
_inherits(TextCache, _React$Component);
function TextCache() {
_classCallCheck(this, TextCache);
_get(Object.getPrototypeOf(TextCache.prototype), "constructor", this).apply(this, arguments);
}
_createClass(TextCache, [{
key: "componentDidUpdate",
value: function componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.text.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.text.cache();
}
}
}, {
key: "render",
value: function render() {
var _props = this.props;
var x = _props.x;
var y = _props.y;
var value = _props.value;
var onClick = _props.onClick;
return React.createElement(Text, { onClick: onClick, x: x, y: y, text: value, fontSize: 20, ref: "text", shadowBlur: 3 });
}
}]);
return TextCache;
})(React.Component);
var LineCache = (function (_React$Component2) {
_inherits(LineCache, _React$Component2);
function LineCache() {
_classCallCheck(this, LineCache);
_get(Object.getPrototypeOf(LineCache.prototype), "constructor", this).apply(this, arguments);
}
_createClass(LineCache, [{
key: "componentDidUpdate",
value: function componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.line.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.line.cache();
}
}
}, {
key: "render",
value: function render() {
var _props2 = this.props;
var x = _props2.x;
var y = _props2.y;
var middle = _props2.middle;
var top = _props2.top;
return React.createElement(Line, {
points: [middle, top, x, y],
stroke: "red",
strokeWidth: 1,
fill: "black",
ref: "line"
});
}
}]);
return LineCache;
})(React.Component);
var App = (function (_React$Component3) {
_inherits(App, _React$Component3);
function App() {
var _this = this;
_classCallCheck(this, App);
_get(Object.getPrototypeOf(App.prototype), "constructor", this).call(this);
this.handle = function (node) {
alert(_this.sum(node));
};
this.state = {
useCache: false
};
}
_createClass(App, [{
key: "componentDidMount",
value: function componentDidMount() {
this.requestUpdate();
}
}, {
key: "requestUpdate",
value: function requestUpdate() {
var _this2 = this;
var update = function update() {
requestAnimationFrame(function () {
_this2.forceUpdate();
_this2.requestUpdate();
});
};
setTimeout(update, 5000);
}
}, {
key: "treval",
value: function treval(node, middle, top, layer) {
var _this3 = this;
var xdistance = 150;
var ydistance = 70;
var x1 = middle - xdistance / layer;
var y1 = top + ydistance;
var x2 = middle + xdistance / layer;
var y2 = top + ydistance;
var l = node.left ? this.treval(node.left, x1, y1, layer + 1).concat([React.createElement(LineCache, { key: node.data + x1 + y1,
middle: middle, top: top, x: x1, y: y1 })]) : [];
var r = node.right ? [React.createElement(LineCache, { key: node.data + x2 + y2,
middle: middle, top: top, x: x2, y: y2 })].concat(this.treval(node.right, x2, y2, layer + 1)) : [];
return l.concat([React.createElement(TextCache, { onClick: function () {
return _this3.handle(node);
}, key: node.data, x: middle, y: top, value: node.data, useCache: this.state.useCache })]).concat(r);
}
}, {
key: "sum",
value: function sum(root) {
var l = root.left ? this.sum(root.left) : 0;
var r = root.right ? this.sum(root.right) : 0;
return l + root.data + r;
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var BST = new BinarySearchTree();
for (var i = 0; i < 15; i++) {
BST.insertNode(Math.floor(Math.random() * 1000));
}
var middle = 350;
var top = 25;
var shapes = this.treval(BST.root, middle, top, 1);
var sum = this.sum(BST.root);
return React.createElement(
"div",
null,
"use cache:",
React.createElement("input", {
type: "checkbox",
checked: this.state.useCache,
onChange: function () {
_this4.setState({ useCache: !_this4.state.useCache });
}
}),
React.createElement(
Stage,
{ width: 700, height: 700 },
React.createElement(
Layer,
null,
shapes,
React.createElement(TextCache, { key: "sum", x: 0, y: 0, value: "sum=" + sum, useCache: false })
)
)
);
}
}]);
return App;
})(React.Component);
ReactDOM.render(React.createElement(App, null), document.getElementById('container'));
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
// monitored code goes here
stats.end();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
stats.dom.style.right = '0';
stats.dom.style.left = 'initial';
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="react-konva DEMO">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>react-konva DEMO</title>
<script type="text/javascript" src="https://cdn.rawgit.com/konvajs/konva/0.14.0/konva.min.js"><\/script>
<script type="text/javascript" src="https://rawgit.com/lavrton/react-konva/v1.0.1/dist/react-konva.bundle.js"><\/script>
<script src="//rawgit.com/mrdoob/stats.js/master/build/stats.min.js"><\/script>
</head>
<body>
<div id='container'></div>
<div id="fps"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#fps {
position: absolute;
right: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// noprotect
const { Layer, Text, Stage, Line } = ReactKonva;
class BinarySearchTree {
constructor() {
this.root = null;
}
insertNode(val) {
var node = {
data: val,
left: null,
right: null
};
var currentNode;
if (!this.root) {
this.root = node;
} else {
currentNode = this.root;
while (currentNode) {
if (val < currentNode.data) {
if (!currentNode.left) {
currentNode.left = node;
break;
} else {
currentNode = currentNode.left;
}
} else if (val > currentNode.data) {
if (!currentNode.right) {
currentNode.right = node;
break;
} else {
currentNode = currentNode.right;
}
} else {
console.log('Ignoring this value as the BST supposed to be a tree containing UNIQUE values');
break;
}
}
}
}
}
class TextCache extends React.Component {
componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.text.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.text.cache();
}
}
render() {
const { x, y, value, onClick } = this.props
return <Text onClick={onClick} x={x} y={y} text={value} fontSize={20} ref="text" shadowBlur={3} />;
}
}
class LineCache extends React.Component {
componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.line.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.line.cache();
}
}
render() {
const { x, y, middle, top } = this.props
return <Line
points={[middle, top, x, y]}
stroke="red"
strokeWidth={1}
fill="black"
ref="line"
/>;
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
useCache: false,
};
}
componentDidMount() {
this.requestUpdate();
}
requestUpdate() {
let update = () => {
requestAnimationFrame(() => {
this.forceUpdate();
this.requestUpdate();
});
}
setTimeout(update, 5000)
}
treval(node, middle, top, layer) {
let xdistance = 150
let ydistance = 70
let x1 = middle - xdistance / layer
let y1 = top + ydistance
let x2 = middle + xdistance / layer
let y2 = top + ydistance
let l = (node.left) ? this.treval(node.left, x1, y1, layer + 1).concat([<LineCache key={node.data + x1 + y1}
middle={middle} top={top} x={x1} y={y1} />]) : []
let r = (node.right) ? ([<LineCache key={node.data + x2 + y2}
middle={middle} top={top} x={x2} y={y2} />]).concat(this.treval(node.right, x2, y2, layer + 1)) : []
return l.concat(
[<TextCache onClick={() => this.handle(node)} key={node.data} x={middle} y={top} value={node.data} useCache={this.state.useCache} />]
).concat(r)
}
sum(root) {
let l = (root.left) ? this.sum(root.left) : 0
let r = (root.right) ? this.sum(root.right) : 0
return l + root.data + r
}
handle = (node) => {
alert(this.sum(node))
}
render() {
const BST = new BinarySearchTree()
for (let i = 0; i < 15; i++) {
BST.insertNode(Math.floor(Math.random() * 1000))
}
const middle = 350
const top = 25
const shapes = this.treval(BST.root, middle, top, 1)
const sum = this.sum(BST.root)
return (
<div>
use cache:
<input
type="checkbox"
checked={this.state.useCache}
onChange={() => {
this.setState({ useCache: !this.state.useCache });
}}
/>
<Stage width={700} height={700}>
<Layer>
{shapes}
<TextCache key="sum" x={0} y={0} value={"sum=" + sum} useCache={false} />
</Layer>
</Stage>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
// monitored code goes here
stats.end();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
stats.dom.style.right = '0';
stats.dom.style.left = 'initial';</script></body>
</html>
Raw
jsbin.rexogokeqa.css
#fps {
position: absolute;
right: 0;
}
Raw
jsbin.rexogokeqa.js
// noprotect
"use strict";
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _ReactKonva = ReactKonva;
var Layer = _ReactKonva.Layer;
var Text = _ReactKonva.Text;
var Stage = _ReactKonva.Stage;
var Line = _ReactKonva.Line;
var BinarySearchTree = (function () {
function BinarySearchTree() {
_classCallCheck(this, BinarySearchTree);
this.root = null;
}
_createClass(BinarySearchTree, [{
key: "insertNode",
value: function insertNode(val) {
var node = {
data: val,
left: null,
right: null
};
var currentNode;
if (!this.root) {
this.root = node;
} else {
currentNode = this.root;
while (currentNode) {
if (val < currentNode.data) {
if (!currentNode.left) {
currentNode.left = node;
break;
} else {
currentNode = currentNode.left;
}
} else if (val > currentNode.data) {
if (!currentNode.right) {
currentNode.right = node;
break;
} else {
currentNode = currentNode.right;
}
} else {
console.log('Ignoring this value as the BST supposed to be a tree containing UNIQUE values');
break;
}
}
}
}
}]);
return BinarySearchTree;
})();
var TextCache = (function (_React$Component) {
_inherits(TextCache, _React$Component);
function TextCache() {
_classCallCheck(this, TextCache);
_get(Object.getPrototypeOf(TextCache.prototype), "constructor", this).apply(this, arguments);
}
_createClass(TextCache, [{
key: "componentDidUpdate",
value: function componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.text.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.text.cache();
}
}
}, {
key: "render",
value: function render() {
var _props = this.props;
var x = _props.x;
var y = _props.y;
var value = _props.value;
var onClick = _props.onClick;
return React.createElement(Text, { onClick: onClick, x: x, y: y, text: value, fontSize: 20, ref: "text", shadowBlur: 3 });
}
}]);
return TextCache;
})(React.Component);
var LineCache = (function (_React$Component2) {
_inherits(LineCache, _React$Component2);
function LineCache() {
_classCallCheck(this, LineCache);
_get(Object.getPrototypeOf(LineCache.prototype), "constructor", this).apply(this, arguments);
}
_createClass(LineCache, [{
key: "componentDidUpdate",
value: function componentDidUpdate(oldProps) {
if (oldProps.useCache && !this.props.useCache) {
this.refs.line.clearCache();
}
if (!oldProps.useCache && this.props.useCache) {
this.refs.line.cache();
}
}
}, {
key: "render",
value: function render() {
var _props2 = this.props;
var x = _props2.x;
var y = _props2.y;
var middle = _props2.middle;
var top = _props2.top;
return React.createElement(Line, {
points: [middle, top, x, y],
stroke: "red",
strokeWidth: 1,
fill: "black",
ref: "line"
});
}
}]);
return LineCache;
})(React.Component);
var App = (function (_React$Component3) {
_inherits(App, _React$Component3);
function App() {
var _this = this;
_classCallCheck(this, App);
_get(Object.getPrototypeOf(App.prototype), "constructor", this).call(this);
this.handle = function (node) {
alert(_this.sum(node));
};
this.state = {
useCache: false
};
}
_createClass(App, [{
key: "componentDidMount",
value: function componentDidMount() {
this.requestUpdate();
}
}, {
key: "requestUpdate",
value: function requestUpdate() {
var _this2 = this;
var update = function update() {
requestAnimationFrame(function () {
_this2.forceUpdate();
_this2.requestUpdate();
});
};
setTimeout(update, 5000);
}
}, {
key: "treval",
value: function treval(node, middle, top, layer) {
var _this3 = this;
var xdistance = 150;
var ydistance = 70;
var x1 = middle - xdistance / layer;
var y1 = top + ydistance;
var x2 = middle + xdistance / layer;
var y2 = top + ydistance;
var l = node.left ? this.treval(node.left, x1, y1, layer + 1).concat([React.createElement(LineCache, { key: node.data + x1 + y1,
middle: middle, top: top, x: x1, y: y1 })]) : [];
var r = node.right ? [React.createElement(LineCache, { key: node.data + x2 + y2,
middle: middle, top: top, x: x2, y: y2 })].concat(this.treval(node.right, x2, y2, layer + 1)) : [];
return l.concat([React.createElement(TextCache, { onClick: function () {
return _this3.handle(node);
}, key: node.data, x: middle, y: top, value: node.data, useCache: this.state.useCache })]).concat(r);
}
}, {
key: "sum",
value: function sum(root) {
var l = root.left ? this.sum(root.left) : 0;
var r = root.right ? this.sum(root.right) : 0;
return l + root.data + r;
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var BST = new BinarySearchTree();
for (var i = 0; i < 15; i++) {
BST.insertNode(Math.floor(Math.random() * 1000));
}
var middle = 350;
var top = 25;
var shapes = this.treval(BST.root, middle, top, 1);
var sum = this.sum(BST.root);
return React.createElement(
"div",
null,
"use cache:",
React.createElement("input", {
type: "checkbox",
checked: this.state.useCache,
onChange: function () {
_this4.setState({ useCache: !_this4.state.useCache });
}
}),
React.createElement(
Stage,
{ width: 700, height: 700 },
React.createElement(
Layer,
null,
shapes,
React.createElement(TextCache, { key: "sum", x: 0, y: 0, value: "sum=" + sum, useCache: false })
)
)
);
}
}]);
return App;
})(React.Component);
ReactDOM.render(React.createElement(App, null), document.getElementById('container'));
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
// monitored code goes here
stats.end();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
stats.dom.style.right = '0';
stats.dom.style.left = 'initial';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment