From b053e1a75e3b43cf7700f347c82fb2bf3f671587 Mon Sep 17 00:00:00 2001 From: Evgeny Kochetkov Date: Tue, 28 Feb 2017 19:25:26 +0300 Subject: [PATCH 1/5] refactor(xod-client): extract PinLabel component from Pin This will be required to render them on separate layers. See #394. --- .../src/core/styles/components/Pin.scss | 18 ------- .../src/core/styles/components/PinLabel.scss | 15 ++++++ packages/xod-client/src/core/styles/main.scss | 1 + .../src/project/components/Node.jsx | 22 ++++++--- .../xod-client/src/project/components/Pin.jsx | 37 +-------------- .../src/project/components/PinLabel.jsx | 47 +++++++++++++++++++ packages/xod-client/src/project/nodeLayout.js | 2 + packages/xod-client/stories/Pin.jsx | 9 +--- packages/xod-client/stories/PinLabel.jsx | 41 ++++++++++++++++ 9 files changed, 124 insertions(+), 68 deletions(-) create mode 100644 packages/xod-client/src/core/styles/components/PinLabel.scss create mode 100644 packages/xod-client/src/project/components/PinLabel.jsx create mode 100644 packages/xod-client/stories/PinLabel.jsx diff --git a/packages/xod-client/src/core/styles/components/Pin.scss b/packages/xod-client/src/core/styles/components/Pin.scss index c1e23423..bd4fc284 100644 --- a/packages/xod-client/src/core/styles/components/Pin.scss +++ b/packages/xod-client/src/core/styles/components/Pin.scss @@ -43,22 +43,6 @@ } } - .label { - font-family: $font-family-condensed; - font-weight: 500; - font-size: 12px; - dominant-baseline: central; - } - - .label.input { - fill: $color-pinlabel-input; - } - - .label.output { - fill: $color-pinlabel-output; - font-weight: 700; // black font looks thinner - } - .linkingHighlight { display: none; fill: $color-highlight; @@ -77,6 +61,4 @@ fill: $color-canvas-selected; } } - - } diff --git a/packages/xod-client/src/core/styles/components/PinLabel.scss b/packages/xod-client/src/core/styles/components/PinLabel.scss new file mode 100644 index 00000000..f6c5d861 --- /dev/null +++ b/packages/xod-client/src/core/styles/components/PinLabel.scss @@ -0,0 +1,15 @@ +.PinLabel { + font-family: $font-family-condensed; + font-weight: 500; + font-size: 12px; + dominant-baseline: central; +} + +.PinLabel.input { + fill: $color-pinlabel-input; +} + +.PinLabel.output { + fill: $color-pinlabel-output; + font-weight: 700; // black font looks thinner +} \ No newline at end of file diff --git a/packages/xod-client/src/core/styles/main.scss b/packages/xod-client/src/core/styles/main.scss index 06e3586e..cf6a5eac 100644 --- a/packages/xod-client/src/core/styles/main.scss +++ b/packages/xod-client/src/core/styles/main.scss @@ -26,6 +26,7 @@ 'components/Node', 'components/NodeText', 'components/Pin', + 'components/PinLabel', 'components/Link', 'components/PopupAlert', 'components/PopupPrompt', diff --git a/packages/xod-client/src/project/components/Node.jsx b/packages/xod-client/src/project/components/Node.jsx index 2d240011..1619813a 100644 --- a/packages/xod-client/src/project/components/Node.jsx +++ b/packages/xod-client/src/project/components/Node.jsx @@ -3,6 +3,7 @@ import React from 'react'; import classNames from 'classnames'; import Pin from './Pin'; +import PinLabel from './PinLabel'; import NodeText from './NodeText'; import { noop } from '../../utils/ramda'; @@ -114,13 +115,20 @@ class Node extends React.Component { {pinsArr.map(pin => - + + + + )} diff --git a/packages/xod-client/src/project/components/Pin.jsx b/packages/xod-client/src/project/components/Pin.jsx index d05d2197..240eb67b 100644 --- a/packages/xod-client/src/project/components/Pin.jsx +++ b/packages/xod-client/src/project/components/Pin.jsx @@ -1,10 +1,8 @@ import React from 'react'; import classNames from 'classnames'; -import { PIN_DIRECTION, PIN_VALIDITY } from 'xod-core'; +import { PIN_VALIDITY } from 'xod-core'; import { noop } from '../../utils/ramda'; - -const PIN_RADIUS = 6; -const TEXT_OFFSET_FROM_PIN_BORDER = 10; +import { PIN_RADIUS } from '../nodeLayout'; export default class Pin extends React.Component { constructor(props) { @@ -57,39 +55,11 @@ export default class Pin extends React.Component { }; } - getTextProps() { - const textVerticalOffset = PIN_RADIUS + TEXT_OFFSET_FROM_PIN_BORDER; - const pos = this.getPinCenter(); - return { - x: pos.x, - y: pos.y + (textVerticalOffset * (this.isInput() ? 1 : -1)), - textAnchor: 'middle', - }; - } - - getDirection() { - return this.props.direction; - } - - isInput() { - return (this.getDirection() === PIN_DIRECTION.INPUT); - } - isInjected() { return !!this.props.injected; } render() { - const pinLabel = this.props.pinLabel ? ( - - {this.props.pinLabel} - - ) : null; - const cls = classNames('Pin', { 'is-property': this.isInjected(), 'is-selected': this.props.isSelected, @@ -125,7 +95,6 @@ export default class Pin extends React.Component { r="15" /> {symbol} - {pinLabel} ); } @@ -134,9 +103,7 @@ export default class Pin extends React.Component { Pin.propTypes = { keyName: React.PropTypes.string.isRequired, injected: React.PropTypes.bool, - pinLabel: React.PropTypes.string, type: React.PropTypes.string, - direction: React.PropTypes.string.isRequired, position: React.PropTypes.object.isRequired, onMouseUp: React.PropTypes.func.isRequired, onMouseDown: React.PropTypes.func.isRequired, diff --git a/packages/xod-client/src/project/components/PinLabel.jsx b/packages/xod-client/src/project/components/PinLabel.jsx new file mode 100644 index 00000000..9d649fda --- /dev/null +++ b/packages/xod-client/src/project/components/PinLabel.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { PIN_DIRECTION } from 'xod-core'; + +import { PIN_RADIUS, TEXT_OFFSET_FROM_PIN_BORDER } from '../nodeLayout'; + +export default class Pin extends React.Component { + getPinCenter() { + return this.props.position; + } + + getTextProps() { + const textVerticalOffset = PIN_RADIUS + TEXT_OFFSET_FROM_PIN_BORDER; + const pos = this.getPinCenter(); + return { + x: pos.x, + y: pos.y + (textVerticalOffset * (this.isInput() ? 1 : -1)), + textAnchor: 'middle', + }; + } + + getDirection() { + return this.props.direction; + } + + isInput() { + return (this.getDirection() === PIN_DIRECTION.INPUT); + } + + render() { + return this.props.pinLabel ? ( + + {this.props.pinLabel} + + ) : null; + } +} + +Pin.propTypes = { + keyName: React.PropTypes.string.isRequired, + pinLabel: React.PropTypes.string, + direction: React.PropTypes.string.isRequired, + position: React.PropTypes.object.isRequired, +}; diff --git a/packages/xod-client/src/project/nodeLayout.js b/packages/xod-client/src/project/nodeLayout.js index 2c4ebbcd..489fe368 100644 --- a/packages/xod-client/src/project/nodeLayout.js +++ b/packages/xod-client/src/project/nodeLayout.js @@ -20,6 +20,8 @@ export const PIN_MARGIN = { }; export const NODE_CORNER_RADIUS = 5; +export const PIN_RADIUS = 6; +export const TEXT_OFFSET_FROM_PIN_BORDER = 10; /** * @param {number} pinCount diff --git a/packages/xod-client/stories/Pin.jsx b/packages/xod-client/stories/Pin.jsx index 71969ac7..92788272 100644 --- a/packages/xod-client/stories/Pin.jsx +++ b/packages/xod-client/stories/Pin.jsx @@ -34,16 +34,9 @@ storiesOf('Pin', module) {story()} )) - .add('input', () => ( + .add('default', () => ( - )) - .add('output', () => ( - )) .add('selected', () => ( diff --git a/packages/xod-client/stories/PinLabel.jsx b/packages/xod-client/stories/PinLabel.jsx new file mode 100644 index 00000000..492549a7 --- /dev/null +++ b/packages/xod-client/stories/PinLabel.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; + +import '../src/core/styles/main.scss'; +import PinLabel from '../src/project/components/PinLabel'; + +const pinCenter = { x: 70, y: 70 }; + +const baseProps = { + keyName: "my pin's keyname", + pinLabel: 'PIN', + direction: 'input', + position: pinCenter, +}; + +storiesOf('PinLabel', module) + .addDecorator(story => ( + + + + + + cross line indicates center + position passed to pin + + {story()} + + )) + .add('input', () => ( + + )) + .add('output', () => ( + + )); + From 7d1e6c9461a38483003e799193265a2f290dda0a Mon Sep 17 00:00:00 2001 From: Evgeny Kochetkov Date: Tue, 28 Feb 2017 19:52:01 +0300 Subject: [PATCH 2/5] refactor(xod-core): render node pins in a separate layer Part of #394. --- .../src/editor/containers/Patch.jsx | 14 +++- .../src/project/components/Node.jsx | 56 ++------------ .../src/project/components/NodePins.jsx | 76 +++++++++++++++++++ .../src/project/components/PinsLayer.jsx | 32 ++++++++ 4 files changed, 125 insertions(+), 53 deletions(-) create mode 100644 packages/xod-client/src/project/components/NodePins.jsx create mode 100644 packages/xod-client/src/project/components/PinsLayer.jsx diff --git a/packages/xod-client/src/editor/containers/Patch.jsx b/packages/xod-client/src/editor/containers/Patch.jsx index aa287dfd..501ff911 100644 --- a/packages/xod-client/src/editor/containers/Patch.jsx +++ b/packages/xod-client/src/editor/containers/Patch.jsx @@ -15,6 +15,7 @@ import { COMMAND } from '../../utils/constants'; import PatchSVG from '../../project/components/PatchSVG'; import BackgroundLayer from '../../project/components/BackgroundLayer'; import NodesLayer from '../../project/components/NodesLayer'; +import PinsLayer from '../../project/components/PinsLayer'; import LinksLayer from '../../project/components/LinksLayer'; import GhostsLayer from '../../project/components/GhostsLayer'; import SnappingPreviewLayer from '../../project/components/SnappingPreviewLayer'; @@ -280,10 +281,6 @@ class Patch extends React.Component { draggedNodeId={this.getDraggedNodeId()} nodes={this.props.nodes} /> - + + ); diff --git a/packages/xod-client/src/project/components/Node.jsx b/packages/xod-client/src/project/components/Node.jsx index 1619813a..0de99e01 100644 --- a/packages/xod-client/src/project/components/Node.jsx +++ b/packages/xod-client/src/project/components/Node.jsx @@ -2,7 +2,6 @@ import R from 'ramda'; import React from 'react'; import classNames from 'classnames'; -import Pin from './Pin'; import PinLabel from './PinLabel'; import NodeText from './NodeText'; import { noop } from '../../utils/ramda'; @@ -13,15 +12,7 @@ class Node extends React.Component { constructor(props) { super(props); this.id = this.props.id; - - // needed for distinguishing between mouseDown events on pins and on node body - this.pinListRef = null; - - this.assignPinListRef = this.assignPinListRef.bind(this); - this.onMouseDown = this.onMouseDown.bind(this); - this.onPinMouseUp = this.onPinMouseUp.bind(this); - this.onPinMouseDown = this.onPinMouseDown.bind(this); } shouldComponentUpdate(newProps) { @@ -29,26 +20,9 @@ class Node extends React.Component { } onMouseDown(event) { - if (this.pinListRef && this.pinListRef.contains(event.target)) { - event.preventDefault(); - return; - } - this.props.onMouseDown(event, this.id); } - onPinMouseUp(pinId) { - this.props.onPinMouseUp(this.id, pinId); - } - - onPinMouseDown(pinId) { - this.props.onPinMouseDown(this.id, pinId); - } - - assignPinListRef(ref) { - this.pinListRef = ref; - } - render() { const { size, @@ -83,10 +57,7 @@ class Node extends React.Component { viewBox={`0 0 ${size.width} ${size.height}`} onMouseDown={this.onMouseDown} > - + - + {pinsArr.map(pin => - - - - + )} @@ -146,15 +108,11 @@ Node.propTypes = { isSelected: React.PropTypes.bool, isGhost: React.PropTypes.bool, onMouseDown: React.PropTypes.func, - onPinMouseUp: React.PropTypes.func, - onPinMouseDown: React.PropTypes.func, }; Node.defaultProps = { isSelected: false, isGhost: false, onMouseDown: noop, - onPinMouseUp: noop, - onPinMouseDown: noop, }; export default Node; diff --git a/packages/xod-client/src/project/components/NodePins.jsx b/packages/xod-client/src/project/components/NodePins.jsx new file mode 100644 index 00000000..7799200c --- /dev/null +++ b/packages/xod-client/src/project/components/NodePins.jsx @@ -0,0 +1,76 @@ +import R from 'ramda'; +import React from 'react'; +import classNames from 'classnames'; + +import Pin from './Pin'; +import PinLabel from './PinLabel'; +import NodeText from './NodeText'; +import { noop } from '../../utils/ramda'; + +import { NODE_CORNER_RADIUS } from '../nodeLayout'; + +class NodePins extends React.Component { + constructor(props) { + super(props); + this.id = this.props.id; + + this.onPinMouseUp = this.onPinMouseUp.bind(this); + this.onPinMouseDown = this.onPinMouseDown.bind(this); + } + + shouldComponentUpdate(newProps) { + return R.not(R.equals(newProps, this.props)); + } + + onPinMouseUp(pinId) { + this.props.onPinMouseUp(this.id, pinId); + } + + onPinMouseDown(pinId) { + this.props.onPinMouseDown(this.id, pinId); + } + + render() { + const { + size, + position, + pins, + } = this.props; + + const pinsArr = R.values(pins); + + return ( + + {pinsArr.map(pin => + + )} + + ); + } +} + +NodePins.propTypes = { + id: React.PropTypes.string.isRequired, + pins: React.PropTypes.any.isRequired, + size: React.PropTypes.any.isRequired, + position: React.PropTypes.object.isRequired, + onPinMouseUp: React.PropTypes.func, + onPinMouseDown: React.PropTypes.func, +}; +NodePins.defaultProps = { + onPinMouseUp: noop, + onPinMouseDown: noop, +}; + +export default NodePins; diff --git a/packages/xod-client/src/project/components/PinsLayer.jsx b/packages/xod-client/src/project/components/PinsLayer.jsx new file mode 100644 index 00000000..6e7be52f --- /dev/null +++ b/packages/xod-client/src/project/components/PinsLayer.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { LAYER } from 'xod-core'; + +import SVGLayer from './SVGLayer'; +import NodePins from './NodePins'; + +const PinsLayer = ({ nodes, onPinMouseUp, onPinMouseDown }) => ( + + {nodes.map(node => + + )} + +); + +PinsLayer.propTypes = { + nodes: React.PropTypes.arrayOf(React.PropTypes.object), + onPinMouseUp: React.PropTypes.func, + onPinMouseDown: React.PropTypes.func, +}; + +export default PinsLayer; From ab9c213c90cf59ed102191d1ed898e4edee94e00 Mon Sep 17 00:00:00 2001 From: Evgeny Kochetkov Date: Wed, 1 Mar 2017 13:55:25 +0300 Subject: [PATCH 3/5] refactor(xod-client): change Links appearance, render them on top of Pins --- .../src/core/styles/components/Link.scss | 31 +++++---- .../src/core/styles/components/Pin.scss | 33 +++++---- .../src/project/components/Link.jsx | 17 +++++ .../src/project/components/Node.jsx | 43 +++++++++--- packages/xod-client/stories/Link.jsx | 68 +++++++++++++++++++ 5 files changed, 158 insertions(+), 34 deletions(-) create mode 100644 packages/xod-client/stories/Link.jsx diff --git a/packages/xod-client/src/core/styles/components/Link.scss b/packages/xod-client/src/core/styles/components/Link.scss index 354cccb4..bef4b317 100644 --- a/packages/xod-client/src/core/styles/components/Link.scss +++ b/packages/xod-client/src/core/styles/components/Link.scss @@ -1,33 +1,40 @@ +@mixin link-parts-coloring($type-color) { + .line { + stroke: $type-color; + } + + .end { + fill: $type-color; + } +} .Link { - stroke: grey; - stroke-width: 2px; + .line { + stroke: grey; + stroke-width: 2px; + } &.string { - stroke: $color-datatype-string; + @include link-parts-coloring($color-datatype-string); } &.number { - stroke: $color-datatype-number; + @include link-parts-coloring($color-datatype-number); } &.bool { - stroke: $color-datatype-bool; + @include link-parts-coloring($color-datatype-bool); } &.pulse { - stroke: $color-datatype-pulse; + @include link-parts-coloring($color-datatype-pulse); } &:hover { - .line { - stroke: white; - } + @include link-parts-coloring(white); } &.is-selected { - .line { - stroke: #4ed5ec; - } + @include link-parts-coloring($color-canvas-selected); } } diff --git a/packages/xod-client/src/core/styles/components/Pin.scss b/packages/xod-client/src/core/styles/components/Pin.scss index bd4fc284..32f180d2 100644 --- a/packages/xod-client/src/core/styles/components/Pin.scss +++ b/packages/xod-client/src/core/styles/components/Pin.scss @@ -1,17 +1,8 @@ @mixin symbol-coloring($type-color) { stroke: $type-color; - $hover-color: lighten($type-color, 25%); - - &:hover { - stroke: $hover-color - } - &.is-connected { fill: $type-color; - &:hover { - fill: $hover-color - } } } @@ -22,10 +13,6 @@ stroke-width: 2px; filter: url(#dropshadow); - &:hover { - fill: color-canvas-hover($color-pin-fill); - } - &.string { @include symbol-coloring($color-datatype-string); } @@ -43,6 +30,26 @@ } } + &:hover { + .symbol { + &.string { + @include symbol-coloring(lighten($color-datatype-string, 25%)); + } + + &.number { + @include symbol-coloring(lighten($color-datatype-number, 25%)); + } + + &.bool { + @include symbol-coloring(lighten($color-datatype-bool, 25%)); + } + + &.pulse { + @include symbol-coloring(lighten($color-datatype-pulse, 25%)); + } + } + } + .linkingHighlight { display: none; fill: $color-highlight; diff --git a/packages/xod-client/src/project/components/Link.jsx b/packages/xod-client/src/project/components/Link.jsx index 676fad99..8d441394 100644 --- a/packages/xod-client/src/project/components/Link.jsx +++ b/packages/xod-client/src/project/components/Link.jsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { SIZE } from 'xod-core'; import { noop } from '../../utils/ramda'; +import { PIN_RADIUS } from '../nodeLayout'; class Link extends React.Component { constructor(props) { @@ -48,6 +49,8 @@ class Link extends React.Component { const clickable = this.isClickable(); const pointerEvents = (clickable) ? 'all' : 'none'; + const linkEndRadius = PIN_RADIUS - 3; + return ( + + ); } diff --git a/packages/xod-client/src/project/components/Node.jsx b/packages/xod-client/src/project/components/Node.jsx index 0de99e01..03a54998 100644 --- a/packages/xod-client/src/project/components/Node.jsx +++ b/packages/xod-client/src/project/components/Node.jsx @@ -2,6 +2,7 @@ import R from 'ramda'; import React from 'react'; import classNames from 'classnames'; +import Pin from './Pin'; import PinLabel from './PinLabel'; import NodeText from './NodeText'; import { noop } from '../../utils/ramda'; @@ -13,6 +14,9 @@ class Node extends React.Component { super(props); this.id = this.props.id; this.onMouseDown = this.onMouseDown.bind(this); + + this.onPinMouseUp = this.onPinMouseUp.bind(this); + this.onPinMouseDown = this.onPinMouseDown.bind(this); } shouldComponentUpdate(newProps) { @@ -23,6 +27,14 @@ class Node extends React.Component { this.props.onMouseDown(event, this.id); } + onPinMouseUp(pinId) { + this.props.onPinMouseUp(this.id, pinId); + } + + onPinMouseDown(pinId) { + this.props.onPinMouseDown(this.id, pinId); + } + render() { const { size, @@ -51,13 +63,12 @@ class Node extends React.Component { return ( - + - + + {pinsArr.map(pin => - + + + + )} @@ -108,11 +129,15 @@ Node.propTypes = { isSelected: React.PropTypes.bool, isGhost: React.PropTypes.bool, onMouseDown: React.PropTypes.func, + onPinMouseUp: React.PropTypes.func, + onPinMouseDown: React.PropTypes.func, }; Node.defaultProps = { isSelected: false, isGhost: false, onMouseDown: noop, + onPinMouseUp: noop, + onPinMouseDown: noop, }; export default Node; diff --git a/packages/xod-client/stories/Link.jsx b/packages/xod-client/stories/Link.jsx new file mode 100644 index 00000000..cdaaf549 --- /dev/null +++ b/packages/xod-client/stories/Link.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; + +import '../src/core/styles/main.scss'; +import XODLink from '../src/project/components/Link'; + +const pFrom = { x: 30, y: 30 }; +const pTo = { x: 120, y: 120 }; + +const baseProps = { + id: 'qwerty', + from: pFrom, + to: pTo, + isGhost: false, + isSelected: false, + type: 'string', +}; + +storiesOf('Link', module) + .addDecorator(story => ( + + + + + {story()} + + )) + .add('string', () => ( + + )) + .add('bool', () => ( + + )) + .add('number', () => ( + + )) + .add('pulse', () => ( + + )) + .add('selected', () => ( + + )); + From 03ad1da6a5ead98722d498cb23ed45f71bb94bc2 Mon Sep 17 00:00:00 2001 From: Evgeny Kochetkov Date: Wed, 1 Mar 2017 14:11:51 +0300 Subject: [PATCH 4/5] refactor(xod-client): change drawing order of editor objects, introduce new layer --- .../src/editor/containers/Patch.jsx | 38 +++++++------ .../project/components/DraggedNodeLayer.jsx | 53 +++++++++++++++++++ 2 files changed, 75 insertions(+), 16 deletions(-) create mode 100644 packages/xod-client/src/project/components/DraggedNodeLayer.jsx diff --git a/packages/xod-client/src/editor/containers/Patch.jsx b/packages/xod-client/src/editor/containers/Patch.jsx index 501ff911..a3599ea8 100644 --- a/packages/xod-client/src/editor/containers/Patch.jsx +++ b/packages/xod-client/src/editor/containers/Patch.jsx @@ -15,10 +15,10 @@ import { COMMAND } from '../../utils/constants'; import PatchSVG from '../../project/components/PatchSVG'; import BackgroundLayer from '../../project/components/BackgroundLayer'; import NodesLayer from '../../project/components/NodesLayer'; -import PinsLayer from '../../project/components/PinsLayer'; import LinksLayer from '../../project/components/LinksLayer'; import GhostsLayer from '../../project/components/GhostsLayer'; import SnappingPreviewLayer from '../../project/components/SnappingPreviewLayer'; +import DraggedNodeLayer from '../../project/components/DraggedNodeLayer'; import { addNodesPositioning, addLinksPositioning, @@ -48,6 +48,9 @@ class Patch extends React.Component { this.onLinkClick = this.onLinkClick.bind(this); this.deselectAll = this.deselectAll.bind(this); + + this.getDraggedNodeId = this.getDraggedNodeId.bind(this); + this.extendNodesByPinValidness = this.extendNodesByPinValidness.bind(this); } shouldComponentUpdate(nextProps, nextState) { @@ -172,8 +175,11 @@ class Patch extends React.Component { } getNodes() { - const nodes = R.values(this.props.nodes); - return this.extendNodesByPinValidness(nodes); + return R.compose( + this.extendNodesByPinValidness, + R.values, + R.omit([this.getDraggedNodeId()]) // we are rendering dragged node in a separate layer + )(this.props.nodes); } getLinks() { return R.values(this.props.links); @@ -260,6 +266,7 @@ class Patch extends React.Component { } render() { + const draggedNodeId = this.getDraggedNodeId(); const nodes = this.getNodes(); const links = this.getLinks(); @@ -277,30 +284,29 @@ class Patch extends React.Component { height={this.props.size.height} onClick={this.deselectAll} /> - - - + diff --git a/packages/xod-client/src/project/components/DraggedNodeLayer.jsx b/packages/xod-client/src/project/components/DraggedNodeLayer.jsx new file mode 100644 index 00000000..c837730f --- /dev/null +++ b/packages/xod-client/src/project/components/DraggedNodeLayer.jsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import SVGLayer from './SVGLayer'; +import Node from './Node'; + +class DraggedNodeLayer extends React.Component { + constructor(props) { + super(props); + this.displayName = 'DraggedNodeLayer'; + } + + shouldComponentUpdate(nextProps) { + return !!(nextProps.draggedNodeId || this.props.draggedNodeId); + } + + render() { + const { + nodes, + draggedNodeId, + } = this.props; + + if (!draggedNodeId) return null; + + const node = nodes[draggedNodeId]; + + return ( + + + + ); + } +} + +DraggedNodeLayer.propTypes = { + draggedNodeId: React.PropTypes.any, + nodes: React.PropTypes.any, +}; + +export default DraggedNodeLayer; From bde26cc1754bc9c15182aff132217ced2bf692ee Mon Sep 17 00:00:00 2001 From: Evgeny Kochetkov Date: Wed, 1 Mar 2017 15:51:25 +0300 Subject: [PATCH 5/5] tweak(xod-client): remove PinsLayer and NodePins components they are not used anymore --- .../src/project/components/NodePins.jsx | 76 ------------------- .../src/project/components/PinsLayer.jsx | 32 -------- 2 files changed, 108 deletions(-) delete mode 100644 packages/xod-client/src/project/components/NodePins.jsx delete mode 100644 packages/xod-client/src/project/components/PinsLayer.jsx diff --git a/packages/xod-client/src/project/components/NodePins.jsx b/packages/xod-client/src/project/components/NodePins.jsx deleted file mode 100644 index 7799200c..00000000 --- a/packages/xod-client/src/project/components/NodePins.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import R from 'ramda'; -import React from 'react'; -import classNames from 'classnames'; - -import Pin from './Pin'; -import PinLabel from './PinLabel'; -import NodeText from './NodeText'; -import { noop } from '../../utils/ramda'; - -import { NODE_CORNER_RADIUS } from '../nodeLayout'; - -class NodePins extends React.Component { - constructor(props) { - super(props); - this.id = this.props.id; - - this.onPinMouseUp = this.onPinMouseUp.bind(this); - this.onPinMouseDown = this.onPinMouseDown.bind(this); - } - - shouldComponentUpdate(newProps) { - return R.not(R.equals(newProps, this.props)); - } - - onPinMouseUp(pinId) { - this.props.onPinMouseUp(this.id, pinId); - } - - onPinMouseDown(pinId) { - this.props.onPinMouseDown(this.id, pinId); - } - - render() { - const { - size, - position, - pins, - } = this.props; - - const pinsArr = R.values(pins); - - return ( - - {pinsArr.map(pin => - - )} - - ); - } -} - -NodePins.propTypes = { - id: React.PropTypes.string.isRequired, - pins: React.PropTypes.any.isRequired, - size: React.PropTypes.any.isRequired, - position: React.PropTypes.object.isRequired, - onPinMouseUp: React.PropTypes.func, - onPinMouseDown: React.PropTypes.func, -}; -NodePins.defaultProps = { - onPinMouseUp: noop, - onPinMouseDown: noop, -}; - -export default NodePins; diff --git a/packages/xod-client/src/project/components/PinsLayer.jsx b/packages/xod-client/src/project/components/PinsLayer.jsx deleted file mode 100644 index 6e7be52f..00000000 --- a/packages/xod-client/src/project/components/PinsLayer.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { LAYER } from 'xod-core'; - -import SVGLayer from './SVGLayer'; -import NodePins from './NodePins'; - -const PinsLayer = ({ nodes, onPinMouseUp, onPinMouseDown }) => ( - - {nodes.map(node => - - )} - -); - -PinsLayer.propTypes = { - nodes: React.PropTypes.arrayOf(React.PropTypes.object), - onPinMouseUp: React.PropTypes.func, - onPinMouseDown: React.PropTypes.func, -}; - -export default PinsLayer;