Skip to content
This repository has been archived by the owner on Oct 26, 2021. It is now read-only.

Commit

Permalink
Fix DiagramCompletion with snabbdom
Browse files Browse the repository at this point in the history
  • Loading branch information
@hermanbanken
hermanbanken committed Sep 27, 2016
1 parent 33fc94f commit fc9b001
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 50 deletions.
73 changes: 45 additions & 28 deletions dist/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35481,7 +35481,7 @@ function render(time, isDraggable, isTall, inputStyle, isHighlighted) {
};
var containerStyle = createContainerStyle(inputStyle);
var innerStyle = createInnerStyle(inputStyle);
return (0, _dom.h)('div.completionRoot', {
return (0, _dom.h)('div.completionRoot.diagramCompletion', {
style: (0, _utils.mergeStyles)({
left: time + '%' }, containerStyle, isDraggable ? draggableContainerStyle : {})
}, [(0, _dom.h)('div.completionInner', {
Expand All @@ -35493,12 +35493,12 @@ function diagramCompletionComponent(_ref) {
var DOM = _ref.DOM;
var props = _ref.props;

var startHighlight$ = DOM.get('.completionRoot', 'mouseenter');
var stopHighlight$ = DOM.get('.completionRoot', 'mouseleave');
var time$ = props.get('time').startWith(100);
var isDraggable$ = props.get('isDraggable').startWith(false);
var isTall$ = props.get('isTall').startWith(false);
var style$ = props.get('style').startWith({
var startHighlight$ = DOM.select('.completionRoot').events('mouseenter');
var stopHighlight$ = DOM.select('.completionRoot').events('mouseleave');
var time$ = _rx2.default.Observable.of(props.time);
var isDraggable$ = _rx2.default.Observable.of(props.isDraggable).startWith(false);
var isTall$ = _rx2.default.Observable.of(props.isTall).startWith(false);
var style$ = _rx2.default.Observable.of(props.style).startWith({
thickness: '2px',
height: '10px',
color: 'black'
Expand Down Expand Up @@ -35713,6 +35713,10 @@ var _marble = require('../marble');

var _marble2 = _interopRequireDefault(_marble);

var _diagramCompletion = require('../diagram-completion');

var _diagramCompletion2 = _interopRequireDefault(_diagramCompletion);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var MARBLE_WIDTH = 5; // estimate of a marble width, in percentages
Expand Down Expand Up @@ -35756,22 +35760,26 @@ function renderMarble$(DOM, marbleData$, isDraggable$) {

function renderCompletion$(DOM, diagramData$, isDraggable$) {
return diagramData$.combineLatest(isDraggable$, function (data, isDraggable) {
return { data: data, isDraggable: isDraggable };
}).flatMap(function (_ref) {
var data = _ref.data;
var isDraggable = _ref.isDraggable;

var isTall = data.get('notifications').some(function (marbleData) {
return Math.abs(marbleData.get('time') - data.get('end')) <= MARBLE_WIDTH * 0.5;
});
return (0, _dom.h)('div', {
props: {
var completion = (0, _diagramCompletion2.default)({ DOM: DOM, props: {
key: 'completion',
time: data.get('endTime'),
time: data.get('end') || data.get('endTime'),
isDraggable: isDraggable,
isTall: isTall
},
style: {
thickness: diagramArrowThickness,
color: diagramArrowColor,
height: diagramCompletionHeight
}
});
isTall: isTall,
style: {
thickness: diagramArrowThickness,
color: diagramArrowColor,
height: diagramCompletionHeight
}
} });
return completion.DOM;
});
}

Expand Down Expand Up @@ -35882,10 +35890,10 @@ function animateData$(data$) {
});
}

function diagramView(_ref) {
var DOM = _ref.DOM;
var model = _ref.model;
var props = _ref.props;
function diagramView(_ref2) {
var DOM = _ref2.DOM;
var model = _ref2.model;
var props = _ref2.props;

// TODO animate, animation is disabled for now as it is WAY to slow for the full DOM
// const data$ = animateData$(model.data$).merge(model.newData$)
Expand All @@ -35898,7 +35906,7 @@ function diagramView(_ref) {

module.exports = diagramView;

},{"../../styles/colors":163,"../../styles/dimens":164,"../../styles/fonts":165,"../../styles/utils":166,"../marble":146,"@cycle/dom":13,"rx":102,"rxtween":111}],145:[function(require,module,exports){
},{"../../styles/colors":163,"../../styles/dimens":164,"../../styles/fonts":165,"../../styles/utils":166,"../diagram-completion":141,"../marble":146,"@cycle/dom":13,"rx":102,"rxtween":111}],145:[function(require,module,exports){
'use strict';

var _diagramModel = require('./diagram-model');
Expand Down Expand Up @@ -36477,12 +36485,15 @@ function renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, wid
interactive: _rx2.default.Observable.of(true)
} });
});
});
}).shareReplay();

var data$ = inputs$.debug("data");

var output = (0, _diagram2.default)({ DOM: DOM, props: {
class: 'sandboxOutputDiagram',
key: 'outputDiagram',
data: outputDiagram$,
interactive: _rx2.default.Observable.of(true)
interactive: _rx2.default.Observable.of(false)
} });

var inputsVTrees$ = inputs$.map(_rx2.default.Observable.fromArray).flatMap(function (o) {
Expand All @@ -36499,10 +36510,15 @@ function renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, wid
});
});

return _rx2.default.Observable.combineLatest(inputsVTrees$, operatorLabel$, width$, output.DOM, function (inputs, label, width, output) {
var vtree$ = _rx2.default.Observable.combineLatest(inputsVTrees$, operatorLabel$, width$, output.DOM, function (inputs, label, width, output) {
var children = inputs.concat([renderOperator(label), output]);
return (0, _dom.h)('div', { style: getSandboxStyle(width), attrs: { class: 'sandboxRoot' } }, children);
});

return {
vtree$: vtree$,
data$: data$
};
}

function renderSandbox(inputDiagrams, operatorLabel, outputDiagram, width) {
Expand Down Expand Up @@ -36566,10 +36582,11 @@ function sandboxComponent(_ref) {
var newOutputDiagram$ = (0, _sandboxOutput.getOutputDiagram$)(example$, newInputDiagrams$);
var outputDiagram$ = firstOutputDiagram$.merge(newOutputDiagram$);

var vtree$ = renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, width$);
var sandbox = renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, width$);

return {
DOM: vtree$
DOM: sandbox.vtree$.debug('sandbox.dom'),
data$: sandbox.data$.debug('sandbox.data')
};
}

Expand Down
2 changes: 1 addition & 1 deletion dist/js/app.js.map
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions src/components/diagram-completion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function render(time, isDraggable, isTall, inputStyle, isHighlighted) {
};
let containerStyle = createContainerStyle(inputStyle);
let innerStyle = createInnerStyle(inputStyle);
return h('div.completionRoot', {
return h('div.completionRoot.diagramCompletion', {
style: mergeStyles({
left: `${time}%`},
containerStyle,
Expand All @@ -49,12 +49,12 @@ function render(time, isDraggable, isTall, inputStyle, isHighlighted) {
}

function diagramCompletionComponent({DOM, props}) {
let startHighlight$ = DOM.get('.completionRoot', 'mouseenter');
let stopHighlight$ = DOM.get('.completionRoot', 'mouseleave');
let time$ = props.get('time').startWith(100);
let isDraggable$ = props.get('isDraggable').startWith(false);
let isTall$ = props.get('isTall').startWith(false);
let style$ = props.get('style').startWith({
let startHighlight$ = DOM.select('.completionRoot').events('mouseenter');
let stopHighlight$ = DOM.select('.completionRoot').events('mouseleave');
let time$ = Rx.Observable.of(props.time);
let isDraggable$ = Rx.Observable.of(props.isDraggable).startWith(false);
let isTall$ = Rx.Observable.of(props.isTall).startWith(false);
let style$ = Rx.Observable.of(props.style).startWith({
thickness: '2px',
height: '10px',
color: 'black'
Expand Down
20 changes: 11 additions & 9 deletions src/components/diagram/diagram-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Fonts from '~styles/fonts';
import RxTween from 'rxtween';
import {mergeStyles, textUnselectable} from '~styles/utils';
import Marble from '~components/marble';
import DiagramCompletion from '~components/diagram-completion';

const MARBLE_WIDTH = 5; // estimate of a marble width, in percentages
const diagramSidePadding = Dimens.spaceMedium;
Expand Down Expand Up @@ -49,23 +50,24 @@ function renderMarble$(DOM, marbleData$, isDraggable$) {
}

function renderCompletion$(DOM, diagramData$, isDraggable$) {
return diagramData$.combineLatest(isDraggable$, (data, isDraggable) => {
return diagramData$
.combineLatest(isDraggable$, (data, isDraggable) => ({data, isDraggable}))
.flatMap(({data, isDraggable}) => {
let isTall = data.get('notifications').some(marbleData =>
Math.abs(marbleData.get('time') - data.get('end')) <= MARBLE_WIDTH*0.5
);
return h('div', {
props: {
key: 'completion',
time: data.get('endTime'),
isDraggable,
isTall,
},
const completion = DiagramCompletion({DOM, props: {
key: 'completion',
time: data.get('end') || data.get('endTime'),
isDraggable,
isTall,
style: {
thickness: diagramArrowThickness,
color: diagramArrowColor,
height: diagramCompletionHeight
}
})
}})
return completion.DOM;
})
}

Expand Down
19 changes: 14 additions & 5 deletions src/components/sandbox/sandbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,15 @@ function renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, wid
data: Rx.Observable.of(diagram),
interactive: Rx.Observable.of(true)
}})
))
)).shareReplay()

const data$ = inputs$.debug("data")

const output = Diagram({ DOM, props: {
class: 'sandboxOutputDiagram',
key: `outputDiagram`,
data: outputDiagram$,
interactive: Rx.Observable.of(true)
interactive: Rx.Observable.of(false)
}})

const inputsVTrees$ = inputs$
Expand All @@ -72,13 +75,18 @@ function renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, wid
.flatMap(array => Rx.Observable.combineLatest(array, (...args) => args))
})

return Rx.Observable.combineLatest(inputsVTrees$, operatorLabel$, width$, output.DOM, (inputs, label, width, output) => {
const vtree$ = Rx.Observable.combineLatest(inputsVTrees$, operatorLabel$, width$, output.DOM, (inputs, label, width, output) => {
let children = inputs.concat([
renderOperator(label),
output
])
return h('div', { style: getSandboxStyle(width), attrs: { class: 'sandboxRoot' } }, children)
})

return {
vtree$,
data$
}
}

function renderSandbox(inputDiagrams, operatorLabel, outputDiagram, width) {
Expand Down Expand Up @@ -144,10 +152,11 @@ function sandboxComponent({DOM, props$}) {
let newOutputDiagram$ = getOutputDiagram$(example$, newInputDiagrams$);
let outputDiagram$ = firstOutputDiagram$.merge(newOutputDiagram$);

let vtree$ = renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, width$)
let sandbox = renderSandbox$(DOM, inputDiagrams$, operatorLabel$, outputDiagram$, width$)

return {
DOM: vtree$
DOM: sandbox.vtree$.debug('sandbox.dom'),
data$: sandbox.data$.debug('sandbox.data')
};
}

Expand Down

0 comments on commit fc9b001

Please sign in to comment.