forked from PrincetonUniversity/PsyNeuLinkView
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #48 from MetaCell/feature/32_2
Feature/32 2
- Loading branch information
Showing
14 changed files
with
295 additions
and
10,919 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,20 @@ | ||
| #!/bin/bash | ||
|
|
||
| # TODO we will uncomment the below when we will have the deployment for this | ||
| #mv package.json old_package.json | ||
| #mv package.dev package.json | ||
| npm -g install yalc | ||
| PSYVIEW=`pwd` | ||
|
|
||
| if [ -d '../meta-diagram' ]; then | ||
| cd ../meta-diagram; | ||
| yarn && yarn run build:dev && yalc push --changed | ||
| cd - | ||
| cd $PSYVIEW | ||
| else | ||
| cd ../ | ||
| git clone https://github.com/metacell/meta-diagram | ||
| cd meta-diagram | ||
| yarn && yarn run build:dev && yalc push --changed | ||
| cd - | ||
| cd $PSYVIEW | ||
| fi | ||
|
|
||
| yalc add @metacell/meta-diagram | ||
| yarn | ||
| yarn run start | ||
| #mv package.json package.dev | ||
| #mv old_package.json package.json | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,152 @@ | ||
| import * as React from "react"; | ||
| import {MetaLinkModel} from "@metacell/meta-diagram"; | ||
| import { | ||
| DefaultLinkWidget, LinkWidget, PointModel | ||
| } from '@projectstorm/react-diagrams'; | ||
| import { projectionLinkArrow, projectionLink } from "../../../assets/styles/variables"; | ||
|
|
||
| export class CustomLinkWidget extends React.Component { | ||
| const pointlength = 6; | ||
|
|
||
| const CustomLinkArrowWidget = (props) => { | ||
| const { point, previousPoint } = props; | ||
|
|
||
| const angle = | ||
| 90 + | ||
| (Math.atan2( | ||
| point.getPosition().y - previousPoint.getPosition().y, | ||
| (point.getPosition().x - 10) - (previousPoint.getPosition().x + 10) | ||
| ) * | ||
| 180) / | ||
| Math.PI; | ||
|
|
||
| return ( | ||
| <g className="arrow" transform={'translate(' + point.getPosition().x + ', ' + point.getPosition().y + ')'}> | ||
| <g style={{ transform: 'rotate(' + angle + 'deg)' }}> | ||
| <g transform={'translate(0, -3)'}> | ||
| <polyline | ||
| points={`${pointlength * -2},${pointlength * 4} 0,${pointlength + 2} ${pointlength * 2},${pointlength * 4}`} | ||
| { | ||
| ...projectionLinkArrow | ||
| } | ||
| data-id={point.getID()} | ||
| data-linkid={point.getLink().getID()} | ||
| /> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| class CustomLink extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.percent = 0; | ||
|
|
||
| this.path = React.createRef(); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.mounted = true; | ||
| this.callback = () => { | ||
| if (!this.circle || !this.path) { | ||
| return; | ||
| } | ||
|
|
||
| this.percent += 2; | ||
| if (this.percent > 100) { | ||
| this.percent = 0; | ||
| } | ||
|
|
||
| let point = this.path.getPointAtLength(this.path.getTotalLength() * (this.percent / 100.0)); | ||
|
|
||
| this.circle.setAttribute('cx', '' + point.x); | ||
| this.circle.setAttribute('cy', '' + point.y); | ||
|
|
||
| if (this.mounted) { | ||
| requestAnimationFrame(this.callback); | ||
| } | ||
| }; | ||
| requestAnimationFrame(this.callback); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.mounted = false; | ||
| } | ||
|
|
||
| shouldComponentUpdate() { | ||
| return true; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <> | ||
| <g> | ||
| <path | ||
| fill="none" | ||
| ref={(ref) => { | ||
| this.path = ref; | ||
| }} | ||
| strokeWidth={this.props.model.getOptions().width} | ||
| stroke="rgba(255,0,0,0.5)" | ||
| ref={this.path} | ||
| { | ||
| ...projectionLink | ||
| } | ||
| d={this.props.path} | ||
| /> | ||
| </g> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| export class CustomLinkWidget extends DefaultLinkWidget { | ||
| generateArrow(point, previousPoint) { | ||
| return ( | ||
| <CustomLinkArrowWidget | ||
| key={point.getID()} | ||
| point={point} | ||
| previousPoint={previousPoint} | ||
| colorSelected={this.props.link.getOptions().selectedColor} | ||
| color={this.props.link.getOptions().color} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| generateLinePath(firstPoint, lastPoint) { | ||
| // the below shorten the touching point as per design, computing a point of the segment minus the arrow height | ||
| if (firstPoint.x <= lastPoint.x) { | ||
| let x = lastPoint.x - firstPoint.x; | ||
| let y = lastPoint.y - firstPoint.y; | ||
| let distance = Math.sqrt(x * x + y * y); | ||
| let newDistance = distance - (pointlength * 3); | ||
| const angle = (Math.atan2( lastPoint.y - firstPoint.y, (lastPoint.x) - (firstPoint.x)) * 180) / Math.PI; | ||
| let newX = Math.round(Math.cos(angle * Math.PI / 180) * newDistance + firstPoint.x); | ||
| let newY = Math.round(Math.sin(angle * Math.PI / 180) * newDistance + firstPoint.y); | ||
| return `M${firstPoint.x + 10},${firstPoint.y} L ${newX},${newY}`; | ||
| } else { | ||
| let x = firstPoint.x - lastPoint.x; | ||
| let y = firstPoint.y - lastPoint.y; | ||
| let distance = Math.sqrt(x * x + y * y); | ||
| let newDistance = distance - (pointlength * 3); | ||
| const angle = (Math.atan2( lastPoint.y - firstPoint.y, (lastPoint.x) - (firstPoint.x)) * 180) / Math.PI; | ||
| let newX = Math.round(Math.cos(angle * Math.PI / 180) * newDistance + firstPoint.x); | ||
| let newY = Math.round(Math.sin(angle * Math.PI / 180) * newDistance + firstPoint.y); | ||
| return `M${firstPoint.x - 10},${firstPoint.y} L ${newX},${newY}`; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| //ensure id is present for all points on the path | ||
| var points = this.props.link.getPoints(); | ||
| var paths = []; | ||
| this.refPaths = []; | ||
|
|
||
| //draw the multiple anchors and complex line instead | ||
| for (let j = 0; j < points.length - 1; j++) { | ||
| paths.push( | ||
| <CustomLink | ||
| key={`link-from-${points[j].getID()}-to-${points[j+1].getID()}`} | ||
| path={this.generateLinePath( | ||
| {x: points[j].getX(), y: points[j].getY()}, | ||
| {x: points[j + 1].getX(), y: points[j + 1].getY()} | ||
| )} | ||
| {...this.props} | ||
| /> | ||
| <circle | ||
| ref={(ref) => { | ||
| this.circle = ref; | ||
| }} | ||
| r={10} | ||
| fill="orange" | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| if (this.props.link.getTargetPort() !== null) { | ||
| paths.push(this.generateArrow(points[points.length - 1], points[points.length - 2])); | ||
| } else { | ||
| paths.push(this.generatePoint(points[points.length - 1])); | ||
| } | ||
|
|
||
| return <g data-default-link-test={this.props.link.getOptions().testName}>{paths}</g>; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| class CustomLinkAdapter extends React.Component { | ||
| render() { | ||
| const {model, engine} = this.props; | ||
| return ( | ||
| <CustomLinkWidget link={model} diagramEngine={engine}/> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // @ts-ignore | ||
| export default CustomLinkWidget; | ||
| export default CustomLinkAdapter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.