Skip to content

Commit

Permalink
debug tools #15: tree drag WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
DavidLeoni committed Aug 29, 2020
1 parent 5725b5c commit ef07ac8
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 27 deletions.
49 changes: 46 additions & 3 deletions src/components/botch/botch-life-tree.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,10 @@ class BotchLifeTree extends React.Component {
'handlePlayingEnd',
'handleSelect',
'handleTagClick',
'setFilteredDataRef'
'setFilteredDataRef',
'handleOnPointerDown',
'handleOnPointerUp',
'handleOnPointerMove'
]);
log.log('Botch props=', props);
this.state = {
Expand All @@ -68,6 +71,19 @@ class BotchLifeTree extends React.Component {
this.scrollToTop();
}
}

handleOnPointerDown (event){
this.props.onPointerDown(event);
}

handleOnPointerMove (event){
this.props.onPointerMove(event);
}

handleOnPointerUp (event){
this.props.onPointerUp(event);
}

handleSelect (id) {
this.handleClose();
this.props.onItemSelected(this.getFilteredLayout()[id]);
Expand Down Expand Up @@ -170,10 +186,19 @@ class BotchLifeTree extends React.Component {
this.filteredDataRef = ref;
}

/**
* @returns {string} a string for svg param
* @since botch-0.3
*/
getViewBox (){
const vb = this.props.viz.viewBox;
return [vb.x, vb.y, vb.width, vb.height].join(' ');
}

/**
* @returns {object} the rendered tree
* @since botch-0.3
*/
renderTree (){

const connectorStyle = {
Expand All @@ -191,7 +216,9 @@ class BotchLifeTree extends React.Component {
width={vp.width}
height={vp.height}
viewBox={this.getViewBox()}

onMouseDown={this.handleOnPointerDown}
onMouseUp={this.handleOnPointerUp}
onMouseMove={this.handleOnPointerMove}
style={{border: '1px', red: 'solid'}}
>
{Object.keys(fl).filter(key => fl[key].generation > 1)
Expand Down Expand Up @@ -227,6 +254,10 @@ class BotchLifeTree extends React.Component {
);
}

/**
* @returns {object} the rendered TreeContainer
* @since botch-0.3
*/
renderTreeContainer (){
const LOADED = this.renderTree();

Expand All @@ -246,7 +277,12 @@ class BotchLifeTree extends React.Component {
)}
</div>);
}


/**
* @param {object} dataItem
* @returns {object} the rendered TreeItem
* @since botch-0.3
*/
renderTreeItem (dataItem){
return (<BotchLifeTreeItem
bluetoothRequired={dataItem.bluetoothRequired}
Expand Down Expand Up @@ -275,6 +311,10 @@ class BotchLifeTree extends React.Component {
/>);
}

/**
* @returns {object} the rendered filter
* @since botch-0.3
*/
renderFilter (){
return (this.props.filterable || this.props.tags) && (
<div className={styles.filterBar}>
Expand Down Expand Up @@ -338,6 +378,9 @@ BotchLifeTree.propTypes = {
filterable: PropTypes.bool,
id: PropTypes.string.isRequired,
intl: intlShape.isRequired,
onPointerDown: PropTypes.func,
onPointerUp: PropTypes.func,
onPointerMove: PropTypes.func,
onItemMouseEnter: PropTypes.func,
onItemMouseLeave: PropTypes.func,
onItemSelected: PropTypes.func,
Expand Down
9 changes: 0 additions & 9 deletions src/components/gui/gui.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
/*
COSE CHE SERVONO PER TAB:
onActivateOrganismsTab = ?
organismsTabVisible = ?
*/


import classNames from 'classnames';
import omit from 'lodash.omit';
import PropTypes from 'prop-types';
Expand Down
104 changes: 89 additions & 15 deletions src/containers/botch-debug-tab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,31 @@ const messages = defineMessages({

class BotchDebugTab extends React.Component {

/**
*
* @param {@s} event
* @since botch-0.3
*/
static getPointFromEvent (event) {
const svg = event.target;
// Create an SVG point that contains x & y values
const point = svg.createSVGPoint();

// If even is triggered by a touch event, we get the position of the first finger
if (event.targetTouches) {
point.x = event.targetTouches[0].clientX;
point.y = event.targetTouches[0].clientY;
} else {
point.x = event.clientX;
point.y = event.clientY;
}

// We get the current transformation matrix of the SVG and we inverse it
const invertedSVGMatrix = svg.getScreenCTM().inverse();

return point.matrixTransform(invertedSVGMatrix);
}

/**
* Calculates the layed out node group total width.
* @param {array} nodeGroup list of nodes
Expand Down Expand Up @@ -74,9 +99,9 @@ class BotchDebugTab extends React.Component {
if (genNum === 0){
return;
}
const vp = viz.viewport;
const vb = viz.viewBox;
const m = viz.measures;
// TO DO

const midIndex = Math.floor(generation.length / 2);
log.log('midIndex', midIndex);
const midGroup = generation[midIndex];
Expand All @@ -86,6 +111,7 @@ class BotchDebugTab extends React.Component {
log.log('midX', midX);
let rightLimit = midX - m.deltaw;
log.log('rightLimit', rightLimit);
// first calculate left side
for (const nodeGroup of generation.slice(0, midIndex).reverse()){

const px = layout[nodeGroup[0].parentId].x;
Expand All @@ -99,11 +125,12 @@ class BotchDebugTab extends React.Component {
// | | |
node.x = rightLimit - groupw + (m.nodew / 2) + ((m.nodew + (m.deltaw * 2)) * i);
node.xoff = node.x - (m.nodew / 2);
node.y = vp.height - (m.nodeh + (m.levh * (genNum - 1)) - (m.nodeh / 2));
node.y = vb.height - (m.nodeh + (m.levh * (genNum - 1)) - (m.nodeh / 2));
node.yoff = node.y - (m.nodeh / 2);
}
rightLimit = rightLimit - groupw - (2 * m.deltaw);
}
// then calculate right side
let leftLimit = midX + m.deltaw;
for (const nodeGroup of generation.slice(midIndex, generation.length)){
/* x x x x
Expand All @@ -118,7 +145,7 @@ class BotchDebugTab extends React.Component {

node.x = leftLimit + (m.nodew / 2) + ((m.nodew + (m.deltaw * 2)) * i);
node.xoff = node.x - (m.nodew / 2);
node.y = vp.height - (m.nodeh + (m.levh * (genNum - 1)) - (m.nodeh / 2));
node.y = vb.height - (m.nodeh + (m.levh * (genNum - 1)) - (m.nodeh / 2));
node.yoff = node.y - (m.nodeh / 2);
}
leftLimit = leftLimit + groupw + (2 * m.deltaw);
Expand Down Expand Up @@ -265,7 +292,11 @@ class BotchDebugTab extends React.Component {
super(props);
bindAll(this, [
'handleItemSelect',
'updateSprites'
'updateSprites',
'handleOnPointerDown',
'handleOnPointerMove',
'handleOnPointerUp'

]);

const viz = {};
Expand Down Expand Up @@ -295,7 +326,9 @@ class BotchDebugTab extends React.Component {
this.state = {
libSprites: [],
layout: {},
viz: viz};
viz: viz,
isPointerDown: false,
pointerOrigin: null};
}

componentDidMount () {
Expand Down Expand Up @@ -349,6 +382,51 @@ class BotchDebugTab extends React.Component {
log.log(`Selected tab: ${index}`);
}

handleOnPointerDown (event){
this.setState({
isPointerDown: true,
pointerOrigin: BotchDebugTab.getPointFromEvent(event)
});

}


handleOnPointerMove (event){
// Only run this function if the pointer is down
if (!this.state.isPointerDown) {
return;
}
// This prevent user to do a selection on the page
event.preventDefault();

// Get the pointer position as an SVG Point
const pointerPosition = BotchDebugTab.getPointFromEvent(event);

// Update the viewBox variable with the distance from origin and current position
// We don't need to take care of a ratio because this is handled in the getPointFromEvent function
const oldViewBox = this.state.viz.viewBox;
const newViewBox = {
x: oldViewBox.x - (pointerPosition.x - this.state.pointerOrigin.x),
y: oldViewBox.y - (pointerPosition.y - this.state.pointerOrigin.y),
height: oldViewBox.height,
width: oldViewBox.width
};
this.setState({
viz: {
viewBox: newViewBox,
viewport: this.state.viz.viewport,
measures: this.state.viz.measures
}
});
}

handleOnPointerUp (event){
this.setState(
{isPointerDown: false}
);
}


handleItemSelect (item) {
// Randomize position of library sprite
randomizeSpritePosition(item);
Expand All @@ -372,16 +450,12 @@ class BotchDebugTab extends React.Component {
tags={this.getTags()}
title={this.props.intl.formatMessage(messages.libraryTitle)}
onItemSelected={this.handleItemSelect}
onPointerDown={this.handleOnPointerDown}
onPointerMove={this.handleOnPointerMove}
onPointerUp={this.handleOnPointerUp}

/>);
/* (
<canvas
id="orgCanvas"
width={400}
height={400}
style={{border: '1px solid black', backgroundColor: 'white'}}
onClick={this.showCostume}>
</canvas>
);*/

}
}

Expand Down

0 comments on commit ef07ac8

Please sign in to comment.