I have a component that draws a sequence that it gets from my redux store:
const sequence = useSelector(state => state.sequence)
My useEffect call that does the canvas draw is being triggered whenever ‘sequence’ updates:
useEffect(() => {
store.subscribe(() => {
console.log(`sequence-canvas: store state is now ${JSON.stringify(store.getState())}`)
drawSequenceCanvas(sequence)
});
}, [sequence])
But for some reason the ‘sequence’ populated by useSelector is behind my store state. If I draw sequence instead of the store state it draws the correct state:
useEffect(() => {
store.subscribe(() => {
console.log(`sequence-canvas: store state is now ${JSON.stringify(store.getState())}`)
drawSequenceCanvas(store.getState().sequence)
});
}, [sequence])
I don't get why I need to use the store state here instead of the selector. What am I not understanding?
Here is the full module:
import React, { useEffect, useRef } from 'react';
import store from '../app/store'
import { useSelector } from "react-redux";
import * as PIXI from 'pixi.js'
import SongPlayer from "../player/song-player";
Math.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
var pixiapp;
var container;
var parentContainer;
var renderer;
var height;
var width;
var mouseIsDown = false;
var isDraggingVertical = false
var isDraggingHorizontal = false
const dragThresholdVertical = 10
const dragThresholdHorizontal = 10
const grey = 0x404040
const darkgrey = 0x707070
const green = 0x10a010
const brightRed = 0xdb5660
const brightGreen = 0x56db60
const blue = 0x0000ff
const borderColor = 0x1e1e1e
const envelopeLineColor = 0xff0000
const backgroundColor = 0x28282b
const darkgreen = 0x107010
const red = 0xff0000
const white = 0xffffff;
const colorVelocityBar = 0x5e5f68;
const middleNote = 60;
const minNote = middleNote - 24;
const maxNote = middleNote + 24;
const borderWidth = 10;
const bottomBorderHeight = 20;
const topBorderHeight = 20;
const gapWidth = 4;
const barWidth = 50;
const numSteps = 16;
const lineThickness = 0.005;
const DragTargets = {
None: 0,
NoteBox: 1,
OctaveBox: 2,
VelocityBox: 3,
}
const DragDirections = {
None: 0,
Vertical: 1,
Horizontal: 2,
}
var dragTarget
var dragDirection
var dragStepNum = -1
var dragStartPos = { x: -1, y: -1, }
const noteBarTextStyle = new PIXI.TextStyle({
align: "center",
fill: "#000000",
fontFamily: "Helvetica",
fontSize: 12
});
const turnAKnobTextStyle = new PIXI.TextStyle({
align: "center",
fill: "#000000",
fontFamily: "Helvetica",
fontSize: 36,
});
const noteName = [
"C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B",
]
function getControllerValueTop(value, minValue, maxValue) {
// return bottomBorderHeight + (value - minvalue) / (maxValue - minvalue) * (height - bottomBorderHeight - topBorderHeight) / 127
return height - bottomBorderHeight - (value - minValue) / (maxValue - minValue) * (height - bottomBorderHeight - topBorderHeight);
}
function getTimeX(sequence, time) {
const maxTime = sequence.steps.length * sequence.tempo / 60 / sequence.division
// console.log(`maxTime ${maxTime} sequence.steps.length ${sequence.steps.length} sequence.tempo ${sequence.tempo} sequence.division ${sequence.division}`)
const timex = borderWidth + time / maxTime * (width - borderWidth - borderWidth)
// console.log(`time ${time} timex ${timex} borderWidth ${borderWidth} maxTime ${maxTime} width ${width}`)
return timex
}
// function getXTime(sequence, x) {
// const maxTime = sequence.steps * sequence.tempo / 60 / sequence.division
// return borderWidth + x / (width - borderWidth - borderWidth) * maxTime
// }
function getNoteTop(note) {
return height - bottomBorderHeight - (note + 12 - minNote) / (maxNote - minNote + 12) * (height - bottomBorderHeight - topBorderHeight);
}
function getNoteBottom(note) {
return getNoteTop(note - 12) + lineThickness;
// return bottomBorderHeight - lineThickness + (note - minNote) / (maxNote - minNote + 12) * (1 - bottomBorderHeight - topBorderHeight);
}
function getNoteHeight() {
return (height - bottomBorderHeight - topBorderHeight) * 12 / (maxNote - minNote + 12);
}
function getStepLeft(sequence, stepNum) {
var stride = getStepStride(sequence)
// console.log(`getStepLeft: borderWidth ${borderWidth} num steps ${sequence.steps.length} stride ${stride}`)
return borderWidth + stepNum * stride;
}
function getStepRight(sequence, stepNum) {
var stride = (width - (borderWidth * 2)) / sequence.steps.length;
var step = sequence.steps[stepNum];
return getStepLeft(sequence, stepNum) + stride * step.gateLength - lineThickness;
}
function getStepStride(sequence) {
var stride = (width - (borderWidth * 2)) / sequence.steps.length;
// console.log(`getStepStride: ${sequence.numSteps} -> ${stride}`)
return stride
}
function getStepWidth(sequence, stepNum) {
var stride = getStepStride(sequence);
var step = sequence.steps[stepNum];
return stride * step.gateLength;
}
function drawSequenceCanvas(sequence) {
const sequencePlayer = SongPlayer.getSequencePlayer(sequence._id)
// console.log(`draw: sequence player is ${JSON.stringify(sequencePlayer)}`)
const stepnum = sequencePlayer ? sequencePlayer.stepNum : -1;
// console.log(`stepnum ${stepnum}`)
if (container) {
container.destroy({ children: true })
}
container = new PIXI.Container();
parentContainer.addChild(container);
// Background
var bar = new PIXI.Graphics();
// bar.lineStyle(2, 0x00FFFF, 1);
bar.beginFill(backgroundColor, 1);
bar.drawRect(0, 0, width, height);
bar.endFill();
container.addChild(bar);
// Top border
bar = new PIXI.Graphics();
bar.beginFill(borderColor, 1);
bar.drawRect(0, 0, width, topBorderHeight, 16);
bar.endFill();
container.addChild(bar);
// Bottom border
bar = new PIXI.Graphics();
bar.beginFill(borderColor, 1);
bar.drawRect(0, height-bottomBorderHeight, width, bottomBorderHeight);
bar.endFill();
container.addChild(bar);
// Sides
bar = new PIXI.Graphics();
bar.beginFill(borderColor, 1);
bar.drawRect(0, topBorderHeight, borderWidth, height - bottomBorderHeight - topBorderHeight);
bar.drawRect(width - borderWidth, topBorderHeight, borderWidth, height - bottomBorderHeight - topBorderHeight);
bar.endFill();
container.addChild(bar);
// Velocity bars
var stepNum = 0;
var barColor = colorVelocityBar;
sequence.steps.forEach(step => {
const bar = new PIXI.Graphics();
// bar.lineStyle(2, 0xFF00FF, 1);
bar.beginFill(barColor, 1);
var barHeight = height - bottomBorderHeight - getControllerValueTop(step.velocity, 0, 127);
bar.drawRect(getStepLeft(sequence, stepNum), height - bottomBorderHeight - barHeight, getStepWidth(sequence, stepNum), barHeight);
bar.endFill();
container.addChild(bar);
++stepNum;
})
// Horizontal grid lines
const lineColor = borderColor;
var lines = new PIXI.Graphics();
// console.log(`minnote ${minNote} ${getNoteTop(minNote)} ${getNoteTop(minNote - 12)}`)
lines.position.set(borderWidth, getNoteTop(minNote - 12));
lines.lineStyle(2, lineColor, 1)
.moveTo(borderWidth, getNoteTop(minNote - 12))
.lineTo(width - borderWidth, getNoteTop(minNote - 12))
.moveTo(borderWidth, getNoteTop(minNote))
.lineTo(width - borderWidth, getNoteTop(minNote))
.moveTo(borderWidth, getNoteTop(minNote + 12))
.lineTo(width - borderWidth, getNoteTop(minNote + 12))
.moveTo(borderWidth, getNoteTop(minNote + 24))
.lineTo(width - borderWidth, getNoteTop(minNote + 24))
.moveTo(borderWidth, getNoteTop(minNote + 36))
.lineTo(width - borderWidth, getNoteTop(minNote + 36))
.moveTo(borderWidth, getNoteTop(minNote + 48))
.lineTo(width - borderWidth, getNoteTop(minNote + 48))
container.addChild(lines);
// Note bars
stepNum = 0;
console.log(`SequenceCanvas.draw - note bars - ${JSON.stringify(sequence.steps)}`);
sequence.steps.forEach(step => {
const bar = new PIXI.Graphics();
// bar.lineStyle(2, 0xFF00FF, 1);
barColor = sequencePlayer && stepNum === sequencePlayer.stepNum ? brightRed : brightGreen;
bar.beginFill(barColor, 1);
var barHeight = height - bottomBorderHeight - getControllerValueTop(step.velocity, 0, 127);
bar.drawRoundedRect(getStepLeft(sequence, stepNum), getNoteTop(step.note), getStepWidth(sequence, stepNum), getNoteHeight(), 8);
bar.endFill();
container.addChild(bar);
const noteText = new PIXI.Text(noteName[step.note % 12], noteBarTextStyle)
noteText.anchor.set(0.5);
// noteText.width = getStepStride(sequence)
noteText.x = getStepLeft(sequence, stepNum) + getStepWidth(sequence, stepNum) / 2
noteText.y = getNoteTop(step.note) + getNoteHeight() / 2
container.addChild(noteText)
++stepNum;
})
// Bottom bars
stepNum = 0;
barColor = green;
// console.log(`SequenceCanvas.Init ${JSON.stringify(sequence.steps)}`);
sequence.steps.forEach(step => {
const bar = new PIXI.Graphics();
// bar.lineStyle(2, 0xFF00FF, 1);
bar.beginFill(0x707481, 1);
bar.drawRoundedRect(getStepLeft(sequence, stepNum), height - bottomBorderHeight, getStepWidth(sequence, stepNum), bottomBorderHeight, 4);
bar.endFill();
container.addChild(bar);
const noteText = new PIXI.Text((step.note % 12), noteBarTextStyle)
noteText.anchor.set(0.5);
// noteText.width = getStepStride(sequence)
noteText.x = getStepLeft(sequence, stepNum) + getStepStride(sequence) / 2
noteText.y = height - bottomBorderHeight + 10
container.addChild(noteText)
++stepNum;
})
if (sequence.currentEnvelopeId != 'notes') {
DrawEnvelopes(container, sequence)
}
// // Random box for testing
// bar = new PIXI.Graphics();
// bar.lineStyle(2, 0x00FFFF, 1);
// bar.beginFill(0x650A5A, 0.25);
// bar.drawRoundedRect(height, getNoteTop(minNote), 50, getNoteHeight(minNote), 16);
// bar.endFill();
// container.addChild(bar);
}
function DrawEnvelopes(container, sequence) {
if (sequence.currentEnvelopeId) {
console.log(`DrawEnvelopes: ${sequence.currentEnvelopeId}`)
if (sequence.currentEnvelopeId == "notes") {
// don't draw envelopes
} else if (sequence.currentEnvelopeId == "new" || sequence.currentEnvelopeId == "learn") {
console.log(`draw warning`)
const bar = new PIXI.Graphics();
bar.beginFill(white, 0.5);
bar.drawRect(0, 0, width, height);
bar.endFill();
container.addChild(bar);
const turnAKnobText = new PIXI.Text("Turn a knob to map", turnAKnobTextStyle)
turnAKnobText.anchor.set(0.5);
turnAKnobText.width = width / 2
turnAKnobText.x = width / 2
turnAKnobText.y = height / 2
container.addChild(turnAKnobText)
} else {
DrawEnvelope(container, sequence, sequence.currentEnvelopeId)
}
}
}
function DrawEnvelope(container, sequence, envelopeId) {
console.log(`DrawEnvelope: ${envelopeId} ${JSON.stringify(sequence)}`)
const envelope = sequence.envelopes[envelopeId]
if (!envelope) {
return
}
console.log(`DrawEnvelope: ${envelopeId} - envelope.controller ${JSON.stringify(envelope.controller)}`)
if (envelope.controller !== "notes") {
console.log(`DrawEnvelope: ${envelope.controller}`)
if (envelope.controller == null) {
} else {
const points = envelope.points
// console.log(`DrawEnvelope: We have ${envelope.controllers.length} controllers with points ${JSON.stringify(points)}`)
// console.log(`DrawEnvelope: point 0 ${JSON.stringify(points[0])}`)
// Lines
const lineColor = envelopeLineColor;
var lines = new PIXI.Graphics();
lines.position.set(0, 0);
lines.lineStyle(1, lineColor, 1)
var y = getControllerValueTop(points[0].value, 0, 127)
lines.moveTo(0, y)
for (const [pointTime, point] of Object.entries(points)) {
var x = getTimeX(sequence, point.time)
y = getControllerValueTop(point.value, 0, 127)
// console.log(`point ${JSON.stringify(point)} draw line to time ${point.time} value ${point.value} ${x},${y}`)
lines.lineTo(x, y)
}
lines.lineTo(width, y)
// Dots
lines.fillStyle = { color: lineColor, alpha: 0.5, visible: true }
lines.beginFill(lineColor)
for (const [pointTime, point] of Object.entries(points)) {
var x = getTimeX(sequence, point.time)
y = getControllerValueTop(point.value, 0, 127)
// console.log(`point ${JSON.stringify(point)} draw line to time ${point.time} value ${point.value} ${x},${y}`)
lines.drawCircle(x, y, 4)
}
container.addChild(lines);
}
}
}
const handlePointerDown = e => {
const sequence = store.getState().sequence
console.log(`handlePointerDown ${mouseIsDown} ${JSON.stringify(e.data)}`)
mouseIsDown = true;
var x = e.data.global.x
var y = e.data.global.y
dragStartPos = { x: x, y: y, }
dragStepNum = -1
for (var stepNum = 0; stepNum < sequence.steps.length; stepNum++) {
var stepleft = getStepLeft(sequence, stepNum);
if (x > stepleft && x < getStepRight(sequence, stepNum)) {
dragStepNum = stepNum
console.log(`tapped step ${dragStepNum}`)
break
}
}
console.log(`handlePointerDown: ${x},${y} dragStepNum ${dragStepNum} target ${dragTarget}`)
console.log(`handlePointerDown: step ${JSON.stringify(sequence.steps[stepNum])}`)
if (dragStartPos.y > height - bottomBorderHeight) {
dragTarget = DragTargets.NoteBox
} else if (dragStartPos.y < getNoteBottom(sequence.steps[stepNum].note) && dragStartPos.y > getNoteTop(sequence.steps[stepNum].note)) {
dragTarget = DragTargets.OctaveBox
} else if (dragStartPos.y > bottomBorderHeight && dragStartPos.y < height - topBorderHeight) {
console.log(`drag velocity box y = ${dragStartPos.y}`)
dragTarget = DragTargets.VelocityBox
}
console.log(`handlePointerDown: step ${dragStepNum} target ${dragTarget}`)
}
const handlePointerUp = e => {
const sequence = store.getState().sequence
console.log(`handlePointerUp ${mouseIsDown}`)
mouseIsDown = false;
isDraggingVertical = false;
isDraggingHorizontal = false;
}
const handlePointerMove = e => {
const sequence = store.getState().sequence
if (mouseIsDown) {
var x = e.data.global.x
var y = e.data.global.y
if (x !== null && y !== null && x !== Infinity && y !== Infinity) {
// console.log(`drag ${JSON.stringify(e.data)}`)
if (dragTarget === DragTargets.OctaveBox) {
// Detect direction before we start editing
if (!isDraggingVertical && !isDraggingHorizontal) {
if (Math.abs(y - dragStartPos.y) > dragThresholdVertical) {
isDraggingVertical = true;
}
else if (Math.abs(x - dragStartPos.x) > dragThresholdHorizontal) {
isDraggingHorizontal = true;
}
else {
return
}
}
if (isDraggingVertical) {
console.log(`drag note: ${sequence.steps[dragStepNum].note} ${x},${y} `)
const notenum = sequence.steps[dragStepNum].note
if (y < getNoteTop(notenum)) {
console.log(`drag y ${y} < ${getNoteTop(notenum)} getNoteTop note for note ${notenum}, dragStepNum ${dragStepNum}`)
store.dispatch({type: "sequence/stepNote", payload: {stepNum: dragStepNum, note: notenum + 12}})
} else if (y > getNoteBottom(notenum)) {
console.log(`drag y ${y} > ${getNoteBottom(notenum)} getNoteBottom for note ${notenum}, dragStepNum ${dragStepNum}`)
store.dispatch({type: "sequence/stepNote", payload: {stepNum: dragStepNum, note: notenum - 12}})
}
}
else {
var stride = getStepStride(sequence);
// note.gateLength
// x = Math.minmix(x, getStepLeft(sequence, dragStepNum), getStepRight(sequence, dragStepNum))
var newGateLength = (x - getStepLeft(sequence, dragStepNum)) / getStepStride(sequence)
if (x < getStepLeft(sequence, dragStepNum)) {
newGateLength = 0;
} else if (x > getStepLeft(sequence, dragStepNum) + getStepStride(sequence)) {
newGateLength = 1.0
}
store.dispatch({
type: "sequence/stepGateLength",
payload: {stepNum: dragStepNum, gateLength: newGateLength}
})
}
}
else if (dragTarget === DragTargets.NoteBox) {
const notenum = sequence.steps[dragStepNum].note
if (y - dragStartPos.y > bottomBorderHeight) {
store.dispatch({ type: "sequence/stepNote", payload: { stepNum: dragStepNum, note: notenum - 1 } })
dragStartPos.y = y
} else if (y - dragStartPos.y < -bottomBorderHeight) {
store.dispatch({ type: "sequence/stepNote", payload: { stepNum: dragStepNum, note: notenum + 1 } })
dragStartPos.y = y
}
}
else if (dragTarget === DragTargets.VelocityBox) {
const velocity = sequence.steps[dragStepNum].velocity
y = Math.minmax(y, topBorderHeight, height - bottomBorderHeight)
const newVelocity = 127 - (127 * (y - topBorderHeight) / (height - topBorderHeight - bottomBorderHeight))
console.log(`drag velocitybox ${y} => ${newVelocity}`)
store.dispatch({ type: "sequence/stepVelocity", payload: { stepNum: dragStepNum, velocity: newVelocity } })
}
}
}
}
function SequenceCanvas(props) {
console.log(`hi from SequenceCanvas ${JSON.stringify(props)}`)
// The React way to get a dom element is by giving it a ref prop
const canvasRef = useRef(null)
const sequence = useSelector(state => state.sequence)
useEffect( () => {
// console.log(`sequence-canvas: store state is now ${JSON.stringify(store.getState())}`)
width = props.width;
height = props.height;
console.log("new PIXI.Application")
pixiapp = new PIXI.Application({
view: canvasRef.current,
powerPreference: 'high-performance',
backgroundAlpha: false,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
width: width,
height: height
});
renderer = PIXI.autoDetectRenderer();
parentContainer = new PIXI.Container();
parentContainer.interactive = true
parentContainer.on('pointerdown', (e) => { handlePointerDown(e) })
parentContainer.on('pointerup', (e) => { handlePointerUp(e) })
parentContainer.on('mouseupoutside', (e) => { handlePointerUp(e) })
parentContainer.on('pointermove', (e) => { handlePointerMove(e) })
pixiapp.stage.addChild(parentContainer);
drawSequenceCanvas(sequence)
return () => {
parentContainer.removeAllListeners()
}
}, [])
useEffect(() => {
store.subscribe(() => {
console.log(`sequence-canvas: store state is now ${JSON.stringify(store.getState())}`)
drawSequenceCanvas(store.getState().sequence)
});
}, [sequence])
const timerIdRef = useRef(0)
function handleInterval() {
console.log(`hi from sequenceCanvas.IntervalTimer`)
drawSequenceCanvas(sequence)
}
const startIntervalTimer = () => {
console.log(`SequenceCanvas.startIntervalTimer - timerIdRef.current === ${timerIdRef.current}`)
if (timerIdRef.current == 0) {
timerIdRef.current = setInterval(() => {
handleInterval()
})
}
}
const stopIntervalTimer = () => {
console.log(`SequenceCanvas.stopIntervalTimer`)
clearInterval(timerIdRef.current)
timerIdRef.current = 0
}
useEffect(() => {
console.log(`startIntervalTime from useEffect`)
// startIntervalTimer();
return () => clearInterval(timerIdRef.current);
}, []);
return (
<div>
<div>
<canvas {...props} ref={canvasRef}>
Your browser does not support the HTML canvas tag.
</canvas>
</div>
</div>
);
}
// export {SequenceCanvas, drawSequenceCanvas};
export {SequenceCanvas};
Every time that sequence is changed - you create new store subscribe on useEffect hook - more and more. You can make it work like this:
const sequence = useSelector(state => state.sequence);
const sequenceRef = useRef(sequence);
sequenceRef.current = sequence;
useEffect(() => {
return store.subscribe(() => { // <--- return will unsubscribe from store
drawSequenceCanvas(sequenceRef.current); // <---actual link
});
}, []);
or you can do it like this
const sequence = useSelector(state => state.sequence);
useEffect(() => {
return store.subscribe(() => { // <--- return will unsubscribe from store
drawSequenceCanvas(sequence);
});
}, [sequence]);
BUT - useSelector hook is already uses store subscribe - so you can do just like this:
const sequence = useSelector(state => state.sequence);
useEffect(() => {
drawSequenceCanvas(sequence);
}, [sequence]);
// OR with usePrevious hook - https://usehooks.com/usePrevious/
const sequence = useSelector(state => state.sequence);
const prevSequence = usePrevious(sequence);
if (sequence !== prevSequence) {
drawSequenceCanvas(sequence);
}
Related
I am trying to make floodfill function by manipulating the pixel color.
When i scale the image to the canvas size, context.getImageData returns only rgba[0,0,0,0].
/* library */
import { useCallback, useEffect, useRef } from "react";
import { useSelector } from "react-redux";
/* module from local */
import { RootState } from "../../store";
import img1 from "../../test.png";
interface srcProps {
src: string;
}
export function ImageCanvas({ src }: srcProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const contextRef = useRef<CanvasRenderingContext2D | null>(null);
const awareness = useSelector((state: RootState) => state.yjs.awareness);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
canvas.addEventListener(
"touchmove",
(e) => {
e.preventDefault();
},
{ passive: false }
);
}, []);
useEffect(() => {
const img = new Image();
img.src = img1;
img.onload = () => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (ctx === null) return;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
contextRef.current = ctx;
};
}, []);
const _valid = useCallback((x: number, y: number) => {
console.log("Enter _valid");
const width = canvasRef.current?.offsetWidth as number;
const height = canvasRef.current?.offsetHeight as number;
console.log(`width: ${width}, height: ${height}`);
if (x > 0 && x < width && y > 0 && y < height) {
const imageData = contextRef.current?.getImageData(x, y, 1, 1);
console.log(imageData?.data);
if (
imageData?.data[0] === 255 &&
imageData?.data[1] === 255 &&
imageData?.data[2] === 255
) {
console.log("_valid => Success");
return true;
} else {
console.log("_valid => valid Failed!!");
return false;
}
}
}, []);
const _isPixel = useCallback((x: number, y: number) => {
console.log("Enter _isPixel");
const imageData = contextRef.current?.getImageData(x, y, 1, 1);
if (imageData) {
return imageData.data.length > 0;
} else {
return false;
}
}, []);
const _setPixel = useCallback((x: number, y: number) => {
console.log("Enter _setPixel");
const imageData = contextRef.current?.getImageData(x, y, 1, 1);
const pixelData = imageData?.data;
let color = awareness.getLocalState().color;
if (color === "black") {
color = "rgba(223,154,36)";
}
const values = color.match(/\d+/g).map(Number);
console.log("This is pixel data => _setPixel");
console.log(pixelData);
if (pixelData) {
pixelData[0] = values[0];
pixelData[1] = values[1];
pixelData[2] = values[2];
pixelData[3] = 255;
}
if (imageData) {
contextRef.current?.putImageData(imageData, x, y);
}
}, []);
const _fill = useCallback((x: number, y: number) => {
const fillStack = [];
fillStack.push([x, y]);
while (fillStack.length > 0) {
const [x, y]: any = fillStack.pop();
if (_valid(x, y)) {
console.log("It is valid");
} else {
console.log("NOT!! Valid");
continue;
}
if (_isPixel(x, y)) {
console.log("This is pixel");
} else {
console.log("NOT!! pixel");
continue;
}
_setPixel(x, y);
fillStack.push([x + 1, y]);
fillStack.push([x - 1, y]);
fillStack.push([x, y + 1]);
fillStack.push([x, y - 1]);
}
}, []);
const handlePointerDown = useCallback((e: React.PointerEvent<any>) => {
_fill(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
}, []);
return (
<canvas
ref={canvasRef}
onPointerDown={handlePointerDown}
style={{ touchAction: "none" }}
className={"w-full"}
/>
);
}
export default ImageCanvas;
What i tried:
runs fill function after the image is loaded
set ctx.imageSmoothingEnabled = false;
test if the canvas size is equal to the image (then the fill function works because i can get the right pixel color)
What i expect:
i want to get the right pixel color, even the image is scale to the canvas size which is full screen size.
I faced an issue with react-p5-wrapper that it is running in background although I have switch to another route in my react app.
For example, I am currently in /game, and the console is logging "running draw", but when I switch to /about-us, it still logging, meaning it is still running the draw function
Here is my code in sandbox
App.js
import "./styles.css";
import { Route, Switch, BrowserRouter as Router, Link } from "react-router-dom";
export default function App() {
return (
<div className="App">
<Router>
<Link to="/game">Game</Link> | <Link to="/about-us">About Us</Link>
<Switch>
<Route path="/about-us" component={require("./abtus").default} />
<Route path="/game" component={require("./game").default} />
</Switch>
</Router>
</div>
);
}
game.js
import { useEffect } from "react";
import { ReactP5Wrapper, P5Instance } from "react-p5-wrapper";
// Sound
let pointSound, endSound;
let playEndSound = false;
/**
* #param {P5Instance} p
*/
const sketch = (p) => {
const MAX_SPEED = 15;
const pickDirections = () => {
return ((Math.floor(Math.random() * 3) % 2 === 0 ? 1 : -1) * (Math.floor(Math.random() * 2) + 1));
};
const randomXPos = () => {
return p.random(30, p.width - 30);
};
const ramdomImgIndex = () => {
return Math.floor(Math.random() * imgs.length);
};
const reset = () => {
score = 0;
speed = 2;
falls = [
{
y: -70,
x: randomXPos(),
rotation: 0,
direction: pickDirections(),
imgIndex: ramdomImgIndex()
}
];
};
const rotate_n_draw_image = (image,img_x,img_y,img_width,img_height,img_angle) => {
p.imageMode(p.CENTER);
p.translate(img_x + img_width / 2, img_y + img_width / 2);
p.rotate((Math.PI / 180) * img_angle);
p.image(image, 0, 0, img_width, img_height);
p.rotate((-Math.PI / 180) * img_angle);
p.translate(-(img_x + img_width / 2), -(img_y + img_width / 2));
p.imageMode(p.CORNER);
};
// Images
let imgs = [],
basket = { img: null, width: 150, height: 150 },
imgSize = 50;
let screen = 0,
falls = [
{
y: -70,
x: randomXPos(),
rotation: 0,
direction: pickDirections(),
imgIndex: ramdomImgIndex()
}
],
score = 0,
speed = 2;
const startScreen = () => {
p.background(205, 165, 142);
p.fill(255);
p.textAlign(p.CENTER);
p.text("WELCOME TO MY CATCHING GAME", p.width / 2, p.height / 2);
p.text("click to start", p.width / 2, p.height / 2 + 20);
reset();
};
const gameOn = () => {
p.background(219, 178, 157);
p.textAlign(p.LEFT);
p.text("score = " + score, 30, 20);
falls = falls.map(({ x, y, rotation, direction, imgIndex }) => {
// rotate while dropping
rotation += direction;
// dropping
y += speed;
return { x, y, rotation, direction, imgIndex };
});
falls.forEach(({ x, y, rotation, imgIndex }, i) => {
// when is lower than the border line
if (y > p.height) {
screen = 2;
playEndSound = true;
}
// when reaching the border line and is within the range
if (
y > p.height - 50 &&
x > p.mouseX - basket.width / 2 &&
x < p.mouseX + basket.width / 2
) {
// Play Sound
pointSound.currentTime = 0;
pointSound.play();
// Increase Score
score += 10;
// Increase Speed
if (speed < MAX_SPEED) {
speed += 0.1;
speed = parseFloat(speed.toFixed(2));
}
// Whether add new item into array or not
if (i === falls.length - 1 && falls.length < 3) {
falls.push({
x: randomXPos(),
y: -70 - p.height / 3,
rotation: 0,
direction: pickDirections(),
imgIndex: ramdomImgIndex()
});
}
falls[i].y = -70;
falls[i].x = randomXPos();
falls[i].imgIndex = ramdomImgIndex();
}
rotate_n_draw_image(imgs[imgIndex], x, y, imgSize, imgSize, rotation);
});
p.imageMode(p.CENTER);
p.image(
basket.img,
p.mouseX,
p.height - basket.height / 2,
basket.width,
basket.height
);
};
const endScreen = () => {
if (playEndSound) {
endSound.play();
playEndSound = false;
}
p.background(205, 165, 142);
p.textAlign(p.CENTER);
p.text("GAME OVER", p.width / 2, p.height / 2);
p.text("SCORE = " + score, p.width / 2, p.height / 2 + 20);
p.text("click to play again", p.width / 2, p.height / 2 + 60);
};
p.preload = () => {
// Load Images
imgs[0] = p.loadImage("https://dummyimage.com/400x400");
imgs[1] = p.loadImage("https://dummyimage.com/400x400");
imgs[2] = p.loadImage("https://dummyimage.com/401x401");
basket.img = p.loadImage("https://dummyimage.com/500x500");
};
p.setup = () => {
p.createCanvas(
window.innerWidth > 400 ? 400 : window.innerWidth,
window.innerHeight > 500 ? 500 : window.innerHeight
);
};
p.draw = () => {
console.log("running draw");
switch (screen) {
case 0:
startScreen();
break;
case 1:
gameOn();
break;
case 2:
endScreen();
break;
default:
}
};
p.mousePressed = () => {
if (screen === 0) {
screen = 1;
} else if (screen === 2) {
screen = 0;
}
};
};
const CatchingGmae = () => {
useEffect(() => {
// eslint-disable-next-line
pointSound = new Audio("/game/points.wav");
// eslint-disable-next-line
endSound = new Audio("/game/end.wav");
pointSound.volume = 0.3;
return () => {
pointSound.muted = true;
endSound.muted = true;
};
});
return (
<div className="mx-auto flex justify-center items-center">
<ReactP5Wrapper sketch={sketch} />
</div>
);
};
export default CatchingGame;
Is there anyway to stop it from running in background when user switches route?
Given your setup, I can see two ways of telling the sketch to stop when route is switched and the Game react component is not rendered anymore.
Alt 1. You can make something similar to react-p5-wrapper
documentation, reacting to props:
In CatchingGmae component:
const [lastRender, setLastRender] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => setLastRender(Date.now()), 100);
return () => {
clearInterval(interval);
};
}, []);
return (
<>
<div className="mx-auto flex justify-center items-center">
<ReactP5Wrapper sketch={sketch} lastRender={lastRender} />
In sketch:
let lastRender = 0;
p.updateWithProps = (props) => {
lastRender = props.lastRender;
};
p.draw = () => {
if (!(Date.now() > lastRender + 100)) {
console.log("running draw");
☝ The problem with the Alt 1 is that react will do calculations and re-render frequently for no reason.
Alt 2. Use a state outside of React, a very simple side-effect
for the component, for the sketch to poll on.
Add to CatchingGmae component:
useEffect(() => {
window.noLoop = false;
return () => {
window.noLoop = true;
};
}, []);
Inside p.draw:
if (window.noLoop) return p.noLoop();
☝ This works without calculations, but you might want to scope the global within your own namespace or using other state manager.
I am trying to draw multi color circles in a canvas image. When I draw one circle previous circle was deleted.So I make a function to replicate the previous circle but there I was unable to get the exact coordinate of the center of the circle and a straight line is created. I am sharing my code.
In the draw circle function I need the proper centerx and centery.
class Circle extends Component {
constructor(props) {
super(props);
//added state
this.state = {
isDown: false,
previousPointX: '',
previousPointY: '',
base_image: {},
circleConfig: {
maxCircle: 4,
color: ["red", "blue", "#ffa500", "green"]
},
circles: [],
canvasId: this.props.canvasid,
rotate:this.props.rotate
}
this.handleMouseDown = this.handleMouseDown.bind(this);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
}
render() {
return (
<div>
<canvas ref="canvas" className="CursorCanvas"
width={400}
height={390}
onMouseDown={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseDown(nativeEvent);
}}
onMouseMove={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseMove(nativeEvent);
}}
onMouseUp={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseUp(nativeEvent);
}}
/>
<pre hidden>{JSON.stringify(this.state.lines, null, 2)}</pre>
</div>
);
}
drawCircle(circles, ctx) {
console.log('draw circle',circles)
circles.forEach((item) => {
var r=(item.endx-item.startx)/2;
var centerx=(item.endx-item.startx)/2;
var centery=(item.endy-item.starty)/2;
ctx.arc(centerx, centery, r, 0, 2 * Math.PI);
ctx.strokeStyle = item.color ;
})
}
handleMouseDown(event) {
if (this.state.circles.length >= this.state.circleConfig.maxCircle) return;
this.setState({
isDown: true,
previousPointX: event.offsetX,
previousPointY: event.offsetY
},()=>{
console.log('mousedown',this.state)
})
}
handleMouseMove(event){
if (this.state.isDown) {
event.preventDefault();
event.stopPropagation();
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this.state.base_image, 0, 0);
//Save
ctx.save();
ctx.beginPath();
this.drawCircle(this.state.circles,ctx);
var circleLength = this.state.circles.length || 0;
//Dynamic scaling
var scalex = (x-this.state.previousPointX)/2;
var scaley = (y-this.state.previousPointY)/2;
ctx.scale(scalex,scaley);
//Create ellipse
var centerx = (this.state.previousPointX/scalex)+1;
var centery = (this.state.previousPointY/scaley)+1;
ctx.arc(centerx, centery, 1, 0, 2*Math.PI);
ctx.restore();
ctx.stroke();
ctx.strokeStyle = this.state.circleConfig.color[circleLength];;
}
}
handleMouseUp(event) {
if (this.state.circles.length >= this.state.circleConfig.maxCircle) return;
this.setState({
isDown: false
});
console.log('mouseup',this.state)
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
var circleLength = this.state.circles.length || 0;
if (this.state.previousPointX !== x && this.state.previousPointY !== y) {
this.setState({
circles: this.state.circles.concat({
startx: this.state.previousPointX,
starty: this.state.previousPointY,
endx: x,
endy: y,
color: this.state.circleConfig.color[circleLength]
})
},
() => {
ctx.stroke();
ctx.closePath();
this.props.drawCircleToStore(this.state.circles, this.state.canvasId, this.props.imgSrc,this.state.rotate)
}
);
}
}
componentDidMount(){
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
const ctx = canvas.getContext("2d");
const base_image = new Image();
base_image.src = this.props.imgSrc
base_image.onload = function (){
ctx.drawImage(base_image, 0, 0);
}
this.setState({
base_image: base_image
});
}
}
In the drawCircle metho the center coordinate wil be
var r = (item.endx - item.startx) / 2;
centerx = (r + item.startx);
centery = (r + item.starty);
ctx.arc(centerx, centery, r, 0, 2 * Math.PI);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
class CircleMultiple extends Component {
constructor(props) {
super(props);
//added state
this.state = {
isDown: false,
previousPointX: '',
previousPointY: '',
base_image: {},
circleConfig: {
maxCircle: 4,
},
circles: [],
canvasId: this.props.canvasid,
rotate: this.props.rotate
}
this.handleMouseDown = this.handleMouseDown.bind(this);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
}
render() {
return (
<div>
<canvas ref="canvas" className="CursorCanvas" width="300" height="300"
onMouseDown={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseDown(nativeEvent);
}}
onMouseMove={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseMove(nativeEvent);
}}
onMouseUp={
e => {
let nativeEvent = e.nativeEvent;
this.handleMouseUp(nativeEvent);
}}
/>
<pre hidden>{JSON.stringify(this.state.circles, null, 2)}</pre>
</div>
);
}
drawCircle(circles, ctx) {
circles.forEach((item) => {
ctx.beginPath();
var r = (item.endx - item.startx) / 2;
var centerx = (r + item.startx);
var centery = (r + item.starty);
ctx.arc(centerx, centery, r, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
})
}
handleMouseDown(event) {
if (this.state.circles.length >= this.state.circleConfig.maxCircle) return;
this.setState({
isDown: true,
previousPointX: event.offsetX,
previousPointY: event.offsetY
}, () => {
// console.log('mousedown',this.state)
})
}
handleMouseMove(event) {
if (this.state.isDown) {
event.preventDefault();
event.stopPropagation();
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
var x = event.offsetX;
var y = event.offsetY;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ctx.drawImage(this.state.base_image, 0, 0);
ctx.drawImage(this.state.base_image,
canvas.width / 2 - this.state.base_image.width / 2,
canvas.height / 2 - this.state.base_image.height / 2
);
//Save
ctx.save();
ctx.beginPath();
this.drawCircle(this.state.circles, ctx);
// var circleLength = this.state.circles.length || 0;
//Dynamic scaling
var scalex = (x - this.state.previousPointX) / 2;
var scaley = (y - this.state.previousPointY) / 2;
ctx.scale(scalex, scaley);
//Create ellipse
var centerx = (this.state.previousPointX / scalex) + 1;
var centery = (this.state.previousPointY / scaley) + 1;
ctx.beginPath();
ctx.arc(centerx, centery, 1, 0, 2 * Math.PI);
ctx.restore();
ctx.stroke();
// ctx.strokeStyle = this.state.circleConfig.color[circleLength];
// console.log('centerx',centerx,'centery',centery)
}
}
handleMouseUp(event) {
if (this.state.circles.length >= this.state.circleConfig.maxCircle) return;
this.setState({
isDown: false
});
// console.log('mouseup',this.state)
var x = event.offsetX;
var y = event.offsetY;
if (this.state.previousPointX !== x && this.state.previousPointY !== y) {
this.setState({
circles: this.state.circles.concat({
startx: this.state.previousPointX,
starty: this.state.previousPointY,
endx: x,
endy: y,
r: (x - this.state.previousPointX) / 2,
centerx: (((x - this.state.previousPointX) / 2) + this.state.previousPointX),
centery: (((x - this.state.previousPointX) / 2) + this.state.previousPointY)
// color: this.state.circleConfig.color[circleLength]
})
},
() => {
//console.log('mouseup', this.state);
}
);
}
}
componentDidMount() {
const canvas = ReactDOM.findDOMNode(this.refs.canvas);
const ctx = canvas.getContext("2d");
const base_image = new Image();
base_image.src = this.props.imgSrc
base_image.onload = function () {
// ctx.drawImage(base_image, 0, 0);
ctx.drawImage(base_image,
canvas.width / 2 - base_image.width / 2,
canvas.height / 2 - base_image.height / 2
);
}
this.setState({
base_image: base_image
});
}
}
export default CircleMultiple;
To remove the connecting line between circles need to add
ctx.beginPath();
before calling drawCircle() method.
I wanted to implement the code from this video:
https://www.youtube.com/watch?v=nPEYdw2Ssa8
(you can download it from here https://codepen.io/i2801/pen/waQPQj)
but using React. I had no luck and got error:
Attempted import error: 'CSS3DObject' is not exported from 'three' (imported as 'THREE').
Of course I have installed all the dependencies i tried to import
So here is My code
import React, { Component } from 'react';
import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols';
import Tween from 'three-tween';
import TrackballControls from 'three-trackballcontrols';
import CSS3DRenderer from 'three-css3drenderer';
export default class Scene extends Component {
componentWillMount() {
window.addEventListener('resize', this.handleWindowResize)
}
componentDidMount() {
this.setupScene();
this.THREE = THREE;
}
setupScene = () => {
this.THREE = THREE;
let objects = [];
let targets = { table: [], sphere: [], helix: [], grid: [] };
let table = [
"H", "Hydrogen", "1.00794", 1, 1,
//Deleted most of the stuff to save space
"Uuo", "Ununoctium", "(294)", 18, 7
];
this.width = this.container.clientWidth;
this.height = this.container.clientHeight;
const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
let scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 3000;
scene.add(camera);
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.objects = objects;
this.targets = targets;
for (var i = 0; i < table.length; i += 5) {
var element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
var number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1;
element.appendChild(number);
var symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = table[i];
element.appendChild(symbol);
var details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
element.appendChild(details);
var object = new THREE.CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add(object);
objects.push(object);
var object = new THREE.Object3D();
object.position.x = (table[i + 3] * 140) - 1260;
object.position.y = - (table[i + 4] * 180) + 990;
targets.table.push(object);
}
for (var i = 0; i < objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = ((i % 5) * 400) - 800;
object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;
targets.grid.push(object);
}
//
this.renderer = new THREE.CSS3DRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
//
this.controls = new THREE.TrackballControls(camera, renderer.domElement);
this.controls.rotateSpeed = 0.5;
this.controls.minDistance = 500;
this.controls.maxDistance = 6000;
this.controls.addEventListener('change', this.renderScene);
var button = document.getElementById('table');
button.addEventListener('click', event => {
this.transform(targets.table, 2000);
}, false);
// var button = document.getElementById('sphere');
// button.addEventListener('click', event => {
// transform(targets.sphere, 2000);
// }, false);
// var button = document.getElementById('helix');
// button.addEventListener('click', event => {
// transform(targets.helix, 2000);
// }, false);
// var button = document.getElementById('grid');
// button.addEventListener('click', event => {
// transform(targets.grid, 2000);
// }, false);
this.transform(targets.table, 2000);
//
this.start();
}
transform = (targets, duration) => {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = this.objects[i];
var target = this.targets[i];
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(this.renderScene)
.start();
}
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate)
}
}
renderScene = () => {
this.renderer.render(this.scene, this.camera)
}
animate = () => {
this.frameId = requestAnimationFrame(this.animate);
this.renderScene();
TWEEN.update();
this.controls.update();
}
stop = () => {
cancelAnimationFrame(this.frameId);
}
handleWindowResize = () => {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderScene();
}
componentWillUnmount = () => {
this.stop();
this.destroyContext();
}
destroyContext = () => {
this.container.removeChild(this.renderer.domElement);
this.renderer.forceContextLoss();
this.renderer.context = null;
this.renderer.domElement = null;
this.renderer = null;
}
render() {
const width = '100%';
const height = '100%';
return (
<div
ref={(container) => { this.container = container }}
style={{ width: width, height: height, position: 'absolute', overflow: 'hidden' }}
>
</div>
)
}
}
Thanks in advance,
Stack is complaining about my post being mostly code so here is some dummy text to bypass it: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales volutpat ligula, sed iaculis metus consectetur eget. Sed vulputate tellus vel velit consequat scelerisque. Vestibulum sodales massa risus, ac
THREE.CSS3DObject is not part of the three.js core. But you should be able to import it from the npm module three-css3drenderer. Try this:
import { CSS3DObject } from 'three-css3drenderer';
Also ensure to create you renderer like so (notice the missing THREE namespace):
this.renderer = new CSS3DRenderer();
With help of Mugen87 i have got every thing set up and working !
If you would like to try this on your own here is the code you need :
import React, { Component } from 'react';
import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols/OrbitControls';
import TWEEN from 'three-tween';
import TrackballControls from 'three-trackballcontrols';
import { CSS3DRenderer } from 'three-css3drenderer';
import { CSS3DObject } from 'three-css3drenderer';
export default class Scene extends Component {
componentWillMount() {
window.addEventListener('resize', this.handleWindowResize)
}
componentDidMount() {
this.setupScene();
this.THREE = THREE;
}
setupScene = () => {
this.THREE = THREE;
this.objects = [];
this.targets = { table: [], sphere: [], helix: [], grid: [] };
this.table = [
"H", "Hydrogen", "1.00794", 1, 1,
//Deleted most of the stuff to save up space
"Uuo", "Ununoctium", "(294)", 18, 7
];
this.width = this.container.clientWidth;
this.height = this.container.clientHeight;
this.renderer = new CSS3DRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(this.renderer.domElement);
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 3000;
this.scene.add(this.camera);
for (var i = 0; i < this.table.length; i += 5) {
var element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
var number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1;
element.appendChild(number);
var symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = this.table[i];
element.appendChild(symbol);
var details = document.createElement('div');
details.className = 'details';
details.innerHTML = this.table[i + 1] + '<br>' + this.table[i + 2];
element.appendChild(details);
var object = new CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
this.scene.add(object);
this.objects.push(object);
var object = new THREE.Object3D();
object.position.x = (this.table[i + 3] * 140) - 1260;
object.position.y = - (this.table[i + 4] * 180) + 990;
this.targets.table.push(object);
}
for (var i = 0; i < this.objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = ((i % 5) * 400) - 800;
object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;
this.targets.grid.push(object);
}
this.controls = new TrackballControls(this.camera, this.renderer.domElement);
this.controls.rotateSpeed = 0.5;
this.controls.minDistance = 500;
this.controls.maxDistance = 6000;
this.controls.addEventListener('change', this.renderScene);
// var button = document.getElementById('table');
// button.addEventListener('click', event => {
// this.transform(this.targets.table, 2000);
// }, false);
// var button = document.getElementById('sphere');
// button.addEventListener('click', event => {
// transform(targets.sphere, 2000);
// }, false);
// var button = document.getElementById('helix');
// button.addEventListener('click', event => {
// transform(targets.helix, 2000);
// }, false);
// var button = document.getElementById('grid');
// button.addEventListener('click', event => {
// transform(targets.grid, 2000);
// }, false);
this.transform(this.targets.table, 2000);
//
this.start();
}
transform = (targets, duration) => {
TWEEN.removeAll();
for (var i = 0; i < this.objects.length; i++) {
var object = this.objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(this.renderScene)
.start();
}
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate)
}
}
renderScene = () => {
this.renderer.render(this.scene, this.camera)
}
animate = () => {
this.frameId = requestAnimationFrame(this.animate);
this.renderScene();
TWEEN.update();
this.controls.update();
}
stop = () => {
cancelAnimationFrame(this.frameId);
}
handleWindowResize = () => {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderScene();
}
componentWillUnmount = () => {
this.stop();
this.destroyContext();
}
destroyContext = () => {
this.container.removeChild(this.renderer.domElement);
this.renderer.forceContextLoss();
this.renderer.context = null;
this.renderer.domElement = null;
this.renderer = null;
}
render() {
const width = '100%';
const height = '100%';
return (
<React.Fragment>
<div
ref={(container) => { this.container = container }}
style={{ width: width, height: height, position: 'absolute', overflow: 'hidden' }}
>
</div>
<div id="container"></div>
</React.Fragment>
)
}
}
I am not too good at data visualization.I want to create a Sunburst where the user can zoom. I have done the zoom with the help of my friend but I am unable to add text from data. Here is my code of zoomable Sunburst.
import React from "react";
import { Group } from "#vx/group";
import { Arc } from "#vx/shape";
import { Partition } from "#vx/hierarchy";
import { arc as d3arc } from "d3-shape";
import {
scaleLinear,
scaleSqrt,
scaleOrdinal,
schemeCategory20c
} from "d3-scale";
import { interpolate } from "d3-interpolate";
import Animate from "react-move/Animate";
import NodeGroup from "react-move/NodeGroup";
const color = scaleOrdinal(schemeCategory20c);
export default class extends React.Component {
state = {
xDomain: [0, 1],
xRange: [0, 2 * Math.PI],
yDomain: [0, 1],
yRange: [0, this.props.width / 2]
};
xScale = scaleLinear();
yScale = scaleSqrt();
arc = d3arc()
.startAngle(d => Math.max(0, Math.min(2 * Math.PI, this.xScale(d.x0))))
.endAngle(d => Math.max(0, Math.min(2 * Math.PI, this.xScale(d.x1))))
.innerRadius(d => Math.max(0, this.yScale(d.y0)))
.outerRadius(d => Math.max(0, this.yScale(d.y1)));
handleClick = d => {
this.setState({
xDomain: [d.x0, d.x1],
yDomain: [d.y0, 1],
yRange: [d.y0 ? 20 : 0, this.props.width / 2]
});
};
render() {
const {
root,
width,
height,
margin = {
top: 0,
left: 0,
right: 0,
bottom: 0
}
} = this.props;
const { xDomain, xRange, yDomain, yRange } = this.state;
if (width < 10) return null;
const radius = Math.min(width, height) / 2 - 10;
return (
<svg width={width} height={height}>
<Partition top={margin.top} left={margin.left} root={root}>
{({ data }) => {
const nodes = data.descendants();
return (
<Animate
start={() => {
this.xScale.domain(xDomain).range(xRange);
this.yScale.domain(yDomain).range(yRange);
}}
update={() => {
const xd = interpolate(this.xScale.domain(), xDomain);
const yd = interpolate(this.yScale.domain(), yDomain);
const yr = interpolate(this.yScale.range(), yRange);
return {
unused: t => {
this.xScale.domain(xd(t));
this.yScale.domain(yd(t)).range(yr(t));
},
timing: {
duration: 800
}
};
}}
>
{() => (
<Group top={height / 2} left={width / 2}>
{nodes.map((node, i) => (
<path
d={this.arc(node)}
stroke="#fff"
fill={color(
(node.children ? node.data : node.parent.data).name
)}
fillRule="evenodd"
onClick={() => this.handleClick(node)}
text="H"
key={`node-${i}`}
/>
))}
</Group>
)}
</Animate>
);
}}
</Partition>
</svg>
);
}
}
Currently this visualization does not display the name of data from data.js. I want to display that and add a tooltip. How can I achieve that?
class Sunburst extends React.Component {
componentDidMount() {
this.renderSunburst(this.props);
}
componentWillReceiveProps(nextProps) {
if (!isEqual(this.props, nextProps)) {
this.renderSunburst(nextProps);
}
}
arcTweenData(a, i, node, x, arc) {
const oi = d3.interpolate({ x0: (a.x0s ? a.x0s : 0), x1: (a.x1s ? a.x1s : 0) }, a);
function tween(t) {
const b = oi(t);
a.x0s = b.x0;
a.x1s = b.x1;
return arc(b);
}
if (i === 0) {
const xd = d3.interpolate(x.domain(), [node.x0, node.x1]);
return function (t) {
x.domain(xd(t));
return tween(t);
};
} else {
return tween;
}
}
formatNameTooltip(d) {
const name = d.data.name;
return `${name}`;
}
labelName(d) {
const name = d.data.name;
return `${name}`;
}
labelVisible(d) {
return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
}
labelTransform(d) {
const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
const y = (d.y0 + d.y1) / 2 * 130;
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
}
update(root, firstBuild, svg, partition, hueDXScale, x, y, radius, arc, node, self) {
if (firstBuild) {
firstBuild = false;
function click(d) {
node = d; // eslint-disable-line
self.props.onSelect && self.props.onSelect(d);
svg.selectAll('path').transition().duration(1000);
}
const tooltipContent = self.props.tooltipContent;
const tooltip = d3.select(`#${self.props.keyId}`)
.append(tooltipContent ? tooltipContent.type : 'div')
.style('position', 'absolute')
.style('z-index', '10')
.style('opacity', '0');
if (tooltipContent) {
Object.keys(tooltipContent.props).forEach((key) => {
tooltip.attr(key, tooltipContent.props[key]);
});
}
svg.selectAll('path')
.data(partition(root).descendants())
.enter()
.append('path')
.style('fill', (d) => {
const current = d;
if (current.depth === 0) {
return '#ffff';
}
if (current.depth === 1) {
return '#3f51b5';
}
if (current.depth > 1) {
return '#f44336';
}
})
.attr('stroke', '#fff') // lines color
.attr('stroke-width', '2') // line width
.on('click', d => click(d, node, svg, self, x, y, radius, arc))
.on('mouseover', function (d) {
if (self.props.tooltip) {
d3.select(this).style('cursor', 'pointer');
tooltip.html(() => { const name = self.formatNameTooltip(d); return name; });
return tooltip.transition().duration(50).style('opacity', 1);
}
return null;
})
.on('mousemove', () => {
if (self.props.tooltip) {
tooltip
.style('top', `${d3.event.pageY - 50}px`)
.style('left', `${self.props.tooltipPosition === 'right' ? d3.event.pageX - 100 : d3.event.pageX - 50}px`);
}
return null;
})
.on('mouseout', function () {
if (self.props.tooltip) {
d3.select(this).style('cursor', 'default');
tooltip.transition().duration(50).style('opacity', 0);
}
return null;
})
} else {
svg.selectAll('path').data(partition(root).descendants());
}
svg.selectAll('path').transition().duration(1000).attrTween('d', (d, i) => self.arcTweenData(d, i, node, x, arc));
}
renderSunburst(props) {
if (props.data) {
const self = this, // eslint-disable-line
gWidth = props.width,
gHeight = props.height,
radius = (Math.min(gWidth, gHeight) / 2) - 10,
svg = d3.select('svg').append('g').attr('transform', `translate(${gWidth / 2},${gHeight / 2})`),
x = d3.scaleLinear().range([0, 2 * Math.PI]),
y = props.scale === 'linear' ? d3.scaleLinear().range([0, radius]) : d3.scaleSqrt().range([0, radius]),
partition = d3.partition(),
arc = d3.arc()
.startAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x0))))
.endAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x1))))
.innerRadius(d => Math.max(0, y(d.y0)))
.outerRadius(d => Math.max(0, y(d.y1))),
hueDXScale = d3.scaleLinear()
.domain([0, 1])
.range([0, 360]),
rootData = d3.hierarchy(props.data);
const firstBuild = true;
const node = rootData;
rootData.sum(d => d.size);
self.update(rootData, firstBuild, svg, partition, hueDXScale, x, y, radius, arc, node, self); // GO!
}
}
render() {
return (
<div id={this.props.keyId} className="text-center">
<svg style={{ width: parseInt(this.props.width, 10) || 480, height: parseInt(this.props.height, 10) || 400 }} id={`${this.props.keyId}-svg`} />
</div>
);
}
}
export default Sunburst;