7 |
15 | Lambda Bricks
16 |
17 | )
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/utils/ComponentFactory.js:
--------------------------------------------------------------------------------
1 | import Brick from '../containers/Brick'
2 | import SelectablePipe from '../containers/SelectablePipe'
3 | import MainBrick from '../containers/MainBrick'
4 | import Primitive from '../containers/Primitive'
5 |
6 | import {
7 | BRICK,
8 | MAIN_BRICK,
9 | SELECTABLE_PIPE,
10 | PRIMITIVE
11 | } from './componentNames'
12 |
13 | export const getComponent = (type) => {
14 | switch (type) {
15 | case BRICK:
16 | return Brick
17 | case MAIN_BRICK:
18 | return MainBrick
19 | case SELECTABLE_PIPE:
20 | return SelectablePipe
21 | case PRIMITIVE:
22 | return Primitive
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/reducers/libraryReducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | REQUEST_LIBRARY,
3 | RECEIVE_LIBRARY
4 | } from '../actions'
5 |
6 | const initialLibrary = {
7 | isFetching: false,
8 | items: {}
9 | }
10 |
11 | export const library = (state = initialLibrary, action) => {
12 | const { payload, type } = action
13 |
14 | switch (type) {
15 | case RECEIVE_LIBRARY:
16 | return Object.assign({}, state, {
17 | isFetching: false,
18 | didInvalidate: false,
19 | items: payload.items
20 | })
21 | case REQUEST_LIBRARY:
22 | return Object.assign({}, state, {
23 | isFetching: true,
24 | didInvalidate: false
25 | })
26 | default:
27 | return state
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/ElementDetails/ElementDetailsFactory.js:
--------------------------------------------------------------------------------
1 | import DefaultDetails from './DefaultDetails'
2 | import MainBrickDetails from './MainBrickDetails'
3 | import PrimitiveDetails from './PrimitiveDetails'
4 | import TestNodeDetails from './TestNodeDetails'
5 |
6 | import {
7 | MAIN_BRICK,
8 | PRIMITIVE,
9 | TEST_INPUT,
10 | TEST_OUTPUT
11 | } from '../../utils/componentNames'
12 |
13 | export const getDetailsComponent = (type) => {
14 | switch (type) {
15 | case MAIN_BRICK:
16 | return MainBrickDetails
17 | case PRIMITIVE:
18 | return PrimitiveDetails
19 | case TEST_INPUT:
20 | case TEST_OUTPUT:
21 | return TestNodeDetails
22 | default:
23 | return DefaultDetails
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/containers/Brick.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 |
3 | import Brick from '../components/Brick'
4 | import { addPipeOrSelectSlot } from '../actions'
5 | import Draggable from './Draggable'
6 |
7 | const mapDispatchToProps = (dispatch) => {
8 | return {
9 | selectBrickInputSlot: (elementId, slotId) => {
10 | // A Brick's input slot is on the contrary an output for a pipe
11 | dispatch(addPipeOrSelectSlot('output', elementId, slotId))
12 | },
13 | selectBrickOutputSlot: (elementId, slotId) => {
14 | // A Brick's output slot is on the contrary an input for a pipe
15 | dispatch(addPipeOrSelectSlot('input', elementId, slotId))
16 | }
17 | }
18 | }
19 |
20 | export default connect(null, mapDispatchToProps)(Draggable(Brick))
21 |
--------------------------------------------------------------------------------
/src/components/Translate.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 |
3 | import { getMessage } from '../utils/translationUtils'
4 |
5 | export default class Translate extends Component {
6 | render() {
7 | const {
8 | childProps,
9 | HtmlElement,
10 | message
11 | } = this.props
12 | const { locale } = this.context
13 |
14 | return (
15 |
14 |
18 | )
19 | }
20 |
21 | getChildContext() {
22 | return {
23 | locale: 'en'
24 | }
25 | }
26 | }
27 |
28 | LambdaBricksApp.childContextTypes = {
29 | locale: PropTypes.string.isRequired
30 | }
31 |
32 | LambdaBricksApp.defaultProps = {
33 | libraryId: '1',
34 | workspaceType: UNIT_TEST
35 | }
36 |
37 | LambdaBricksApp.PropTypes = {
38 | libraryId: PropTypes.string.isRequired,
39 | workspaceType: PropTypes.string.isRequired
40 | }
41 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import { selectElement } from '../actions'
2 | import { LEFT } from '../components/constants'
3 |
4 | export * from './colors'
5 | export * from './slotPosition'
6 | export * from './slotSelection'
7 |
8 | export const isNotEmpty = (object) => {
9 | return Object.keys(object).length > 0
10 | }
11 |
12 | export const handleSelectElement = (dispatch) => {
13 | return (elementId, mouseEvent, workspaceIndex) => {
14 | if(mouseEvent.button != LEFT)
15 | return
16 |
17 | dispatch(
18 | selectElement(
19 | elementId,
20 | { x: mouseEvent.pageX, y: mouseEvent.pageY },
21 | workspaceIndex
22 | )
23 | )
24 | }
25 | }
26 |
27 | export const unique = (array) => {
28 | return array.filter((() => {
29 | var seen = {}
30 | return (element, index, array) => !(element in seen) && (seen[element] = 1)
31 | })())
32 | }
33 |
34 | export const bound = (value, lowerLimit, upperLimit) => {
35 | if(value < lowerLimit) {
36 | return lowerLimit
37 | }
38 | if(value > upperLimit) {
39 | return upperLimit
40 | }
41 |
42 | return value
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/ElementDetails/MainBrickDetails.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 |
3 | import DialogButton from './DialogButton'
4 |
5 | export default class MainBrickDetails extends Component {
6 | render() {
7 | const {
8 | addUnitTest,
9 | deleteUnitTest,
10 | totalUnitTests,
11 | workspaceIndex
12 | } = this.props
13 |
14 | return (
15 |
16 |
31 | )
32 | }
33 | }
34 |
35 | MainBrickDetails.propTypes = {
36 | addUnitTest: PropTypes.func.isRequired,
37 | deleteUnitTest: PropTypes.func.isRequired,
38 | totalUnitTests: PropTypes.number.isRequired,
39 | workspaceIndex: PropTypes.number.isRequired
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/TestSummary.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 |
3 | import {
4 | getTestResultColor
5 | } from '../utils/unitTestUtils'
6 |
7 | const ulStyles = {
8 | display: 'inline-block',
9 | listStyleType: 'none',
10 | margin: 0,
11 | padding: 0
12 | }
13 |
14 | const liStyles = {
15 | border: '2px solid black',
16 | borderRadius: '3px',
17 | display: 'inline-block',
18 | height: '20px',
19 | marginRight: '5px',
20 | width: '20px'
21 | }
22 |
23 | export default class TestSummary extends Component {
24 | render() {
25 | const {
26 | unitTests
27 | } = this.props
28 |
29 | return (
30 |
17 |
22 | { totalUnitTests > 1 &&
23 |
24 | deleteUnitTest(workspaceIndex) }
26 | message="deleteUnitTest"
27 | />
28 |
29 | }
30 | -
31 | { unitTests.map((unitTest, index) =>
32 |
41 | )}
42 |
14 |
32 | )
33 | }
34 | }
35 |
36 | Module.propTypes = {
37 | label: PropTypes.string.isRequired,
38 | name: PropTypes.string.isRequired,
39 | functions: PropTypes.arrayOf(
40 | PropTypes.shape({
41 | arity: PropTypes.number.isRequired,
42 | id: PropTypes.number.isRequired,
43 | label: PropTypes.string.isRequired,
44 | name: PropTypes.string.isRequired
45 | }).isRequired
46 | ).isRequired,
47 | onFunctionClick: PropTypes.func.isRequired
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/TestResult.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import Rectangle from 'react-art/lib/Rectangle.art'
3 |
4 | import { getTestResultColor } from '../utils/unitTestUtils'
5 | import { PositionPropTypes, SizePropTypes } from '../propTypes'
6 |
7 | import { getConstant } from './constants'
8 | import { TEST_RESULT } from '../utils/componentNames'
9 |
10 | class TestResult extends Component {
11 | render() {
12 | const {
13 | mainBrick,
14 | unitTest
15 | } = this.props
16 |
17 | const componentName = TEST_RESULT
18 | const slotHeight = getConstant(componentName, 'slotHeight')
19 | const delta = slotHeight * 5 / 3
20 |
21 | return (
22 | 15 | { label } 16 |
17 |-
18 | { functions.map((libraryFunction) => {
19 | return (
20 |
- onFunctionClick(name, libraryFunction) } 23 | title={ libraryFunction.title } 24 | > 25 | { libraryFunction.label } 26 | 27 | ) 28 | } 29 | )} 30 |
25 |
35 | deleteElement(id) }
37 | message="delete"
38 | />
39 |
40 | )
41 | }
42 | }
43 |
44 | PrimitiveDetails.propTypes = {
45 | deleteElement: PropTypes.func.isRequired,
46 | changePrimitiveValue: PropTypes.func.isRequired,
47 | closeDialog: PropTypes.func.isRequired,
48 | id: PropTypes.number.isRequired,
49 | primitives: PropTypes.objectOf(PrimitivePropTypes).isRequired,
50 | type: PropTypes.string.isRequired,
51 | value: PropTypes.string,
52 | workspaceIndex: PropTypes.number
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/WorkspaceSurface.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import { Surface } from 'react-art'
3 |
4 | import MainBrick from '../containers/MainBrick'
5 | import TestResult from '../components/TestResult'
6 |
7 | const workspaceSurfaceStyles = {
8 | marginRight: '10px'
9 | }
10 |
11 | const surfaceStyles = {
12 | backgroundColor: 'white'
13 | }
14 |
15 | class WorkspaceSurface extends Component {
16 | render() {
17 | const {
18 | index,
19 | mainBrick,
20 | selectedSlots,
21 | unitTest
22 | } = this.props
23 |
24 | return (
25 | 35 |
28 |
33 |
44 |
45 | )
46 | }
47 | }
48 |
49 | WorkspaceSurface.propTypes = {
50 | index: PropTypes.number.isRequired,
51 | mainBrick: PropTypes.object.isRequired,
52 | selectedSlots: PropTypes.arrayOf(PropTypes.number).isRequired,
53 | unitTest: PropTypes.object.isRequired
54 | }
55 |
56 | export default WorkspaceSurface
57 |
--------------------------------------------------------------------------------
/src/components/Slot.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import Rectangle from 'react-art/lib/Rectangle.art'
3 |
4 | import { getConstant } from './constants'
5 | import { isSlotSelected } from '../utils'
6 | import { SLOT } from '../utils/componentNames'
7 |
8 | class Slot extends Component {
9 | render() {
10 | const {
11 | fillColor: unselectedFillColor,
12 | id,
13 | parentId,
14 | selectedSlots,
15 | selectSlot,
16 | strokeColor,
17 | x,
18 | y
19 | } = this.props
20 | const componentName = SLOT
21 |
22 | const fillColor = isSlotSelected(selectedSlots, id) ?
23 | getConstant(componentName, 'fillColor') :
24 | unselectedFillColor
25 |
26 | return (
27 |
21 |
51 | )
52 |
53 | }
54 | }
55 |
56 | TypesSelect.propTypes = {
57 | handleChange: PropTypes.func.isRequired,
58 | id: PropTypes.number.isRequired,
59 | primitives: PropTypes.objectOf(PrimitivePropTypes).isRequired,
60 | type: PropTypes.string.isRequired,
61 | workspaceIndex: PropTypes.number
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/ElementDetails/TestNodeDetails.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 |
3 | import {
4 | PrimitivePropTypes
5 | } from '../../propTypes'
6 |
7 | import CustomValueInput from './CustomValueInput'
8 | import TypesSelect from './TypesSelect'
9 |
10 | export default class TestNodeDetails extends Component {
11 | render() {
12 | const {
13 | changeTestNodeType,
14 | changeTestNodeValue,
15 | closeDialog,
16 | id,
17 | primitives,
18 | value,
19 | type,
20 | workspaceIndex
21 | } = this.props
22 |
23 | return (
24 |
25 |
46 | )
47 | }
48 | }
49 |
50 | TestNodeDetails.propTypes = {
51 | changeTestNodeType: PropTypes.func.isRequired,
52 | changeTestNodeValue: PropTypes.func.isRequired,
53 | closeDialog: PropTypes.func.isRequired,
54 | id: PropTypes.number.isRequired,
55 | primitives: PropTypes.objectOf(PrimitivePropTypes).isRequired,
56 | value: PropTypes.string,
57 | type: PropTypes.string.isRequired,
58 | workspaceIndex: PropTypes.number
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/SelectedElementDialog.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 |
3 | import {
4 | getDetailsComponent
5 | } from './ElementDetails/ElementDetailsFactory'
6 |
7 | import {
8 | PositionPropTypes,
9 | PrimitivePropTypes
10 | } from '../propTypes'
11 |
12 | export default class SelectedElementDialog extends Component {
13 | render() {
14 | const {
15 | closeDialog,
16 | componentName,
17 | mousePosition
18 | } = this.props
19 |
20 | const ReactComponent = getDetailsComponent(componentName)
21 |
22 | return (
23 |
34 |
44 | }
45 |
32 |
37 | x
38 |
39 |
41 | )
42 | }
43 | }
44 |
45 | SelectedElementDialog.propTypes = {
46 | addUnitTest: PropTypes.func.isRequired,
47 | changePrimitiveValue: PropTypes.func.isRequired,
48 | changeTestNodeType: PropTypes.func.isRequired,
49 | changeTestNodeValue: PropTypes.func.isRequired,
50 | closeDialog: PropTypes.func.isRequired,
51 | componentName: PropTypes.string.isRequired,
52 | deleteElement: PropTypes.func.isRequired,
53 | id: PropTypes.number.isRequired,
54 | mousePosition: PositionPropTypes.isRequired,
55 | primitives: PropTypes.objectOf(PrimitivePropTypes).isRequired,
56 | value: PropTypes.string,
57 | totalUnitTests: PropTypes.number.isRequired,
58 | type: PropTypes.string,
59 | workspaceIndex: PropTypes.number
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/SelectablePipe.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import { Group, Text } from 'react-art'
3 |
4 | import { getConstant } from './constants'
5 | import { BindingPropTypes, PositionPropTypes } from '../propTypes'
6 | import { getFillColor } from '../utils'
7 | import Pipe from './Pipe'
8 |
9 | class SelectablePipe extends Component {
10 | render() {
11 | const {
12 | componentName,
13 | binding,
14 | handleClick,
15 | id,
16 | inputPosition,
17 | outputPosition
18 | } = this.props
19 |
20 | const fillColor = getFillColor(binding.type, binding.value)
21 |
22 | return (
23 |
83 |
89 | )
90 | }
91 | }
92 |
93 | CustomValueInput.propTypes = {
94 | closeDialog: PropTypes.func.isRequired,
95 | handleChange: PropTypes.func.isRequired,
96 | id: PropTypes.number.isRequired,
97 | primitives: PropTypes.objectOf(PrimitivePropTypes).isRequired,
98 | type: PropTypes.string.isRequired,
99 | value: PropTypes.string,
100 | workspaceIndex: PropTypes.number
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/MainBrick.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react'
2 | import { Group } from 'react-art'
3 | import Rectangle from 'react-art/lib/Rectangle.art'
4 |
5 | import composeBrick from './composeBrick'
6 | import { getConstant } from './constants'
7 | import { getComponent } from '../utils/ComponentFactory'
8 | import { PositionPropTypes, SizePropTypes } from '../propTypes'
9 |
10 | import TestInput from '../containers/TestInput'
11 | import TestOutput from '../containers/TestOutput'
12 |
13 | class MainBrick extends Component {
14 | render() {
15 | const {
16 | componentName,
17 | handleClick,
18 | id,
19 | inner,
20 | selectedSlots,
21 | size,
22 | testInputs,
23 | testOutputs,
24 | unitTest,
25 | workspaceIndex
26 | } = this.props
27 | const slotHeight = getConstant(componentName, 'slotHeight')
28 |
29 | return (
30 |
69 |
83 |
101 | )
102 | }
103 | }
104 |
105 | Workspace.propTypes = {
106 | dragStarted: PropTypes.bool.isRequired,
107 | initWorkspace: PropTypes.func.isRequired,
108 | mainBrick: PropTypes.object.isRequired,
109 | moveElement: PropTypes.func.isRequired,
110 | selectedElement: PropTypes.object.isRequired,
111 | selectedSlots: PropTypes.arrayOf(PropTypes.number).isRequired,
112 | selectElementOrStopDrag: PropTypes.func.isRequired,
113 | type: PropTypes.string.isRequired,
114 | unitTests: PropTypes.array.isRequired
115 | }
116 |
--------------------------------------------------------------------------------
/src/reducers/workspaceReducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | ADD_BRICK,
3 | ADD_PIPE,
4 | ADD_PRIMITIVE,
5 | ADD_UNIT_TEST,
6 | CHANGE_PRIMITIVE_VALUE,
7 | CHANGE_TEST_NODE_TYPE,
8 | CHANGE_TEST_NODE_VALUE,
9 | CLEAR_SLOT_SELECTION,
10 | EVALUATE,
11 | INIT_WORKSPACE,
12 | LINK_SLOTS,
13 | MOVE_ELEMENT,
14 | REMOVE_ELEMENT,
15 | REMOVE_SELECTED_ELEMENT,
16 | REMOVE_UNIT_TEST,
17 | SELECT_ELEMENT,
18 | SELECT_SLOT,
19 | START_DRAG,
20 | STOP_DRAG,
21 | UNEVALUATE,
22 | UNLINK_SLOTS,
23 | } from '../actions'
24 |
25 | import {
26 | addBrickToWorkspace,
27 | addPipeToWorkspace,
28 | addPrimitiveToWorkspace,
29 | addUnitTestToWorkspace,
30 | initWorkspace,
31 | removeElementInWorkspace,
32 | removeUnitTest
33 | } from './workspace/addRemoveElementReducer'
34 |
35 | import {
36 | addDragStartedToWorkspace,
37 | addDragStoppedToWorkspace,
38 | updateElementInWorkspace
39 | } from './workspace/dragReducer'
40 |
41 | import {
42 | evaluateAllWorkspaces,
43 | unevaluate
44 | } from './workspace/evaluationReducer'
45 |
46 | import {
47 | addSelectedElementToWorkspace,
48 | removeSlotSelectionState,
49 | removeSelectedElementFromWorkspace,
50 | updateSlotSelectionStateInWorkspace
51 | } from './workspace/selectionReducer'
52 |
53 | import {
54 | changePrimitiveValue,
55 | changeTestNodeType,
56 | changeTestNodeValue,
57 | linkSlots,
58 | unlinkSlots
59 | } from './workspace/updateElementReducer'
60 |
61 | const initialWorkspace = {
62 | entities: {
63 | 1: {
64 | innerIds: [],
65 | testInputIds: [],
66 | testOutputIds: []
67 | }
68 | },
69 | mainBrickId: 1,
70 | selectionState: {
71 | dragStarted: false,
72 | element: { },
73 | pipe: {
74 | input: { },
75 | output: { }
76 | }
77 | },
78 | unitTests: []
79 | }
80 |
81 | export const workspace = (state = initialWorkspace, action) => {
82 | const { payload, type } = action
83 |
84 | switch (type) {
85 | case ADD_BRICK:
86 | return addBrickToWorkspace(state, payload)
87 | case ADD_PIPE:
88 | return addPipeToWorkspace(state, payload)
89 | case ADD_PRIMITIVE:
90 | return addPrimitiveToWorkspace(state, payload)
91 | case ADD_UNIT_TEST:
92 | return addUnitTestToWorkspace(state)
93 | case CHANGE_PRIMITIVE_VALUE:
94 | return changePrimitiveValue(state, payload)
95 | case CHANGE_TEST_NODE_TYPE:
96 | return changeTestNodeType(state, payload)
97 | case CHANGE_TEST_NODE_VALUE:
98 | return changeTestNodeValue(state, payload)
99 | case CLEAR_SLOT_SELECTION:
100 | return removeSlotSelectionState(state)
101 | case EVALUATE:
102 | return evaluateAllWorkspaces(state, payload)
103 | case INIT_WORKSPACE:
104 | return initWorkspace(state, payload)
105 | case LINK_SLOTS:
106 | return linkSlots(state, payload)
107 | case MOVE_ELEMENT:
108 | return updateElementInWorkspace(state, payload)
109 | case REMOVE_ELEMENT:
110 | return removeElementInWorkspace(state, payload)
111 | case REMOVE_SELECTED_ELEMENT:
112 | return removeSelectedElementFromWorkspace(state)
113 | case REMOVE_UNIT_TEST:
114 | return removeUnitTest(state, payload)
115 | case SELECT_ELEMENT:
116 | return addSelectedElementToWorkspace(state, payload)
117 | case SELECT_SLOT:
118 | return updateSlotSelectionStateInWorkspace(state, payload)
119 | case START_DRAG:
120 | return addDragStartedToWorkspace(state, payload)
121 | case STOP_DRAG:
122 | return addDragStoppedToWorkspace(state, payload)
123 | case UNEVALUATE:
124 | return unevaluate(state, payload)
125 | case UNLINK_SLOTS:
126 | return unlinkSlots(state, payload)
127 | default:
128 | return state
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/components/Tutorial.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import JoyRide from 'react-joyride'
3 |
4 | import { getMessage } from '../utils/translationUtils'
5 | import {
6 | getTutorialConfig,
7 | totalSteps
8 | } from './tutorialSteps'
9 |
10 | import Library from '../containers/Library'
11 | import Logo from './Logo'
12 | import Translate from './Translate'
13 | import Workspace from '../containers/Workspace'
14 |
15 | export default class Tutorial extends Component {
16 | constructor(props) {
17 | super(props)
18 |
19 | this.state = {
20 | joyrideOverlay: true,
21 | joyrideType: 'continuous',
22 | ready: false,
23 | showStepsProgress: false,
24 | joyrideSteps: [
25 | {
26 | text: getMessage(props.locale, 'joyrideSteps.window'),
27 | selector: '#window',
28 | position: 'top'
29 | },
30 | {
31 | text: getMessage(props.locale, 'joyrideSteps.library'),
32 | selector: '#library',
33 | position: 'right'
34 | },
35 | {
36 | text: getMessage(props.locale, 'joyrideSteps.constants'),
37 | selector: '#constants',
38 | position: 'right'
39 | },
40 | {
41 | text: getMessage(props.locale, 'joyrideSteps.functions'),
42 | selector: '#functions',
43 | position: 'right'
44 | },
45 | {
46 | text: getMessage(props.locale, 'joyrideSteps.workspace'),
47 | selector: '#workspace',
48 | position: 'left'
49 | },
50 | {
51 | text: getMessage(props.locale, 'joyrideSteps.tutorial'),
52 | selector: '#instructions',
53 | position: 'right'
54 | }
55 | ]
56 | }
57 | }
58 |
59 | componentDidMount() {
60 | this.setState({
61 | ready: getTutorialConfig(this.props.step).openSiteTourAtStart
62 | })
63 | }
64 |
65 | componentDidUpdate(prevProps, prevState) {
66 | if(!prevState.ready && this.state.ready) {
67 | this.refs.joyride.start(true)
68 | }
69 | }
70 |
71 | render() {
72 | const { locale, step } = this.props
73 | const nextStep = step + 1
74 | const tutorialConfig = getTutorialConfig(step)
75 | const state = this.state
76 |
77 | return (
78 | 
81 |
84 | { unitTests.map((unitTest, index) => {
85 | return (
86 |
97 | { isNotEmpty(selectedElement) &&
98 |
79 |
109 | )
110 | }
111 |
112 | getChildContext() {
113 | return {
114 | locale: this.props.locale
115 | }
116 | }
117 | }
118 |
119 | Tutorial.childContextTypes = {
120 | locale: PropTypes.string.isRequired
121 | }
122 |
123 | Tutorial.defaultProps = {
124 | step: 1
125 | }
126 |
127 | Tutorial.PropTypes = {
128 | locale: PropTypes.string.isRequired,
129 | step: PropTypes.number.isRequired
130 | }
131 |
--------------------------------------------------------------------------------
/src/reducers/workspace/addRemoveElementReducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | PRIMITIVE
3 | } from '../../utils/componentNames'
4 |
5 | import {
6 | newBrick,
7 | newPipe,
8 | newPrimitive,
9 | newUnitTest,
10 | newWorkspace,
11 | pipeConnectedToElement
12 | } from './workspaceReducerUtils'
13 |
14 | export const initWorkspace = (workspace, type) =>
15 | newWorkspace(type)
16 |
17 | export const addBrickToWorkspace = (workspace, attributes) =>
18 | addToWorkspace(workspace, newBrick(attributes, workspace.mainBrickId))
19 |
20 | export const addPipeToWorkspace = (workspace, attributes) =>
21 | addToWorkspace(workspace, newPipe(attributes))
22 |
23 | export const addPrimitiveToWorkspace = (workspace, primitiveType) => {
24 | const primitive = newPrimitive(primitiveType, workspace.mainBrickId)
25 | const newWorkspace = addToWorkspace(workspace, primitive)
26 |
27 | newWorkspace.unitTests = newWorkspace.unitTests.map((unitTest) => {
28 | return Object.assign({}, unitTest, {
29 | values: {
30 | ...unitTest.values,
31 | [primitive.id]: {
32 | componentName: PRIMITIVE,
33 | type: primitiveType
34 | }
35 | }
36 | })
37 | })
38 |
39 | return newWorkspace
40 | }
41 |
42 | export const addUnitTestToWorkspace = (workspace) => {
43 | const values = workspace.unitTests[0].values
44 | let newValues = {}
45 |
46 | for(let elementId in values) {
47 | if(values[elementId].componentName == PRIMITIVE)
48 | newValues[elementId] = values[elementId]
49 | }
50 |
51 | return Object.assign({}, workspace, {
52 | ...workspace,
53 | unitTests: [
54 | ...workspace.unitTests,
55 | {
56 | values: newValues
57 | }
58 | ]
59 | })
60 | }
61 |
62 | const addToWorkspace = (workspace, element) => {
63 | const mainBrickId = workspace.mainBrickId
64 | const mainBrick = workspace.entities[mainBrickId]
65 |
66 | return Object.assign({}, workspace, {
67 | ...workspace,
68 | entities: {
69 | ...workspace.entities,
70 | [mainBrickId]: {
71 | ...mainBrick,
72 | innerIds: [
73 | ...mainBrick.innerIds,
74 | element.id
75 | ]
76 | },
77 | [element.id]: element
78 | }
79 | })
80 | }
81 |
82 | export const removeElementInWorkspace = (workspace, payload) => {
83 | const { elementId } = payload
84 | const { entities, mainBrickId } = workspace
85 | const mainBrick = entities[mainBrickId]
86 |
87 | let newEntities = {}
88 | let removedKeys = []
89 |
90 | for(let key in entities) {
91 | const element = entities[key]
92 |
93 | // Skip if key is the elementId or is a pipe connected to this elementId
94 | if(!(key == elementId || pipeConnectedToElement(element, elementId))) {
95 | newEntities[key] = element
96 | } else {
97 | removedKeys.push(key)
98 | }
99 | }
100 |
101 | const newUnitTests = workspace.unitTests.map((unitTest) => {
102 | let newValues = {}
103 | for(let key in unitTest.values) {
104 | if(removedKeys.indexOf(key) === -1)
105 | newValues[key] = unitTest.values[key]
106 | }
107 | return {
108 | ...unitTest,
109 | values: newValues
110 | }
111 | })
112 |
113 | return Object.assign({}, workspace, {
114 | ...workspace,
115 | entities: {
116 | ...newEntities,
117 | [mainBrickId]: {
118 | ...mainBrick,
119 | // Remove from mainBrick.innerIds all the entities removed by
120 | // the loop above
121 | innerIds: mainBrick.innerIds.filter((id) => newEntities[id])
122 | }
123 | },
124 | unitTests: newUnitTests
125 | })
126 | }
127 |
128 | export const removeUnitTest = (workspace, workspaceIndex) => {
129 | const { unitTests } = workspace
130 |
131 | return Object.assign({}, workspace, {
132 | unitTests: [
133 | ...unitTests.slice(0, workspaceIndex),
134 | ...unitTests.slice(workspaceIndex + 1)
135 | ]
136 | })
137 | }
138 |
--------------------------------------------------------------------------------
/docs/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | color: #4f5f6f;
3 | font-family: 'Open Sans', sans-serif;
4 | height: 100%;
5 | margin: 0;
6 | min-height: 100%;
7 | overflow-x: hidden;
8 | padding: 0;
9 | }
10 |
11 | body {
12 | font-size: 14px;
13 | line-height: 1.5;
14 | }
15 |
16 | h1, h2, h3, h4, h5 {
17 | font-weight: normal;
18 | }
19 |
20 | h2, h3 {
21 | font-size: 14px;
22 | }
23 |
24 | a {
25 | color: #59c2e6;
26 | text-decoration: none;
27 | transition: color 0.13s;
28 | }
29 |
30 | a:hover {
31 | color: #0b98ca;
32 | }
33 |
34 | ol, ul {
35 | padding-left: 15px;
36 | }
37 |
38 | button {
39 | background-color: #0b98ca;
40 | border: 0;
41 | color: white;
42 | cursor: pointer;
43 | padding: 6px 12px;
44 | transition: background-color 0.13s;
45 | }
46 |
47 | button:hover {
48 | background-color: #219FCA;
49 | }
50 |
51 | label {
52 | display: inline-block;
53 | width: 45px;
54 | }
55 |
56 | select, input {
57 | background-color: white;
58 | border: 0;
59 | font-size: 14px;
60 | height: 26px;
61 | padding: 3px 3px;
62 | width: 200px;
63 | }
64 |
65 | hr {
66 | border-style: groove;
67 | }
68 |
69 | ::-webkit-scrollbar {
70 | height: 7px;
71 | width: 7px;
72 | }
73 |
74 | ::-webkit-scrollbar-thumb {
75 | background: #767D86;
76 | border-radius: 0;
77 | }
78 |
79 | ::-webkit-scrollbar-track {
80 | background-color: #2d363f;
81 | border-radius: 0;
82 | }
83 |
84 | #main {
85 | height: 100%;
86 | overflow-x: hidden;
87 | overflow-y: auto;
88 | position: absolute;
89 | width: 100%;
90 | }
91 |
92 | .app {
93 | background-color: #f0f3f6;
94 | box-sizing: border-box;
95 | /*box-shadow: 0 0 3px #ccc;*/
96 | left: 0;
97 | /*margin: 0 auto;*/
98 | min-height: 100vh;
99 | padding: 10px 10px 10px 240px;
100 | position: relative;
101 | transition: left 0.3s ease, padding-left 0.3s ease;
102 | width: 100%;
103 | }
104 |
105 | #logo {
106 | background-color: #3a4651;
107 | box-sizing: border-box;
108 | color: white;
109 | font-size: 16px;
110 | left: 0;
111 | line-height: 70px;
112 | padding-left: 15px;
113 | position: fixed;
114 | top: 0;
115 | width: 230px;
116 | }
117 |
118 | .brick {
119 | float: left;
120 | height: 40px;
121 | padding-top: 18px;
122 | width: 50px;
123 | }
124 |
125 | .brick rect {
126 | fill: #79D1EF;
127 | }
128 |
129 | #library {
130 | background-color: #3a4651;
131 | bottom: 0;
132 | color: white;
133 | font-size: 14px;
134 | left: 0;
135 | overflow-y: auto;
136 | position: fixed;
137 | top: 70px;
138 | transition: left 0.3s ease;
139 | width: 230px;
140 | }
141 |
142 | #library h2 {
143 | padding-left: 20px;
144 | }
145 |
146 | .nav h3, .nav h4 {
147 | color: white;
148 | font-size: 14px;
149 | margin: 0;
150 | }
151 |
152 | .nav h3 {
153 | background-color: #0b98ca;
154 | padding: 15px 10px 15px 20px;
155 | }
156 |
157 | .nav h4 {
158 | background-color: #2d363f;
159 | padding: 15px 10px 15px 40px;
160 | }
161 |
162 | .nav ul {
163 | list-style: none;
164 | margin: 0;
165 | padding-left: 0;
166 | }
167 |
168 | .nav li {
169 | color: rgba(255, 255, 255, 0.5);
170 | cursor: pointer;
171 | margin: 0;
172 | padding: 10px 0 10px 40px;
173 | transition: color 0.13s;
174 | }
175 |
176 | .nav li:hover {
177 | color: white;
178 | background-color: #2d363f;
179 | }
180 |
181 | #instructions {
182 | background-color: #2d363f;
183 | bottom: 0;
184 | box-sizing: border-box;
185 | color: rgba(255, 255, 255, 0.6);
186 | left: 0;
187 | overflow-y: auto;
188 | padding: 10px;
189 | position: fixed;
190 | top: 70px;
191 | width: 250px;
192 | }
193 |
194 | .tutorial.app {
195 | padding-left: 490px;
196 | }
197 |
198 | .tutorial #logo {
199 | width: 480px;
200 | }
201 |
202 | .tutorial #library {
203 | left: 250px;
204 | }
205 |
206 | .selectedElementDialog {
207 | background-color: rgba(58, 70, 81, 0.9);
208 | border-radius: 4px;
209 | color: white;
210 | padding: 20px 14px 10px;
211 | position: absolute;
212 | }
213 |
214 | #customValueInput input[type=radio] {
215 | display: none;
216 | }
217 |
218 | #customValueInput input[type=radio] + label {
219 | border: 3px solid rgba(0, 0, 0, 0);
220 | color: white;
221 | display: inline-block;
222 | font-weight: bold;
223 | height: 20px;
224 | margin-right: 3px;
225 | padding-left: 3px;
226 | }
227 |
228 | #customValueInput input[type=radio]:checked + label {
229 | border: 3px solid orange;
230 | }
231 |
232 | .closeBtn {
233 | color: white;
234 | font-size: 15px;
235 | line-height: 10px;
236 | position: absolute;
237 | right: 6px;
238 | text-decoration: none;
239 | top: 6px;
240 | }
241 |
242 | .closeBtn:hover, .closeBtn:focus, .closeBtn:active {
243 | color: white;
244 | text-decoration: none;
245 | }
246 |
247 | .topMargin {
248 | margin-top: 5px;
249 | }
250 |
251 | .code {
252 | color: rgba(255, 255, 255, 0.9);
253 | font-weight: bold;
254 | }
255 |
256 | .github-logo {
257 | width: 32px;
258 | float: right;
259 | filter: opacity(80%);
260 | -webkit-filter: opacity(80%);
261 | transition: filter 0.13s, -webkit-filter 0.13s;
262 | }
263 |
264 | .github-logo:hover {
265 | filter: opacity(90%);
266 | -webkit-filter: opacity(90%);
267 | }
268 |
--------------------------------------------------------------------------------
/src/utils/evalUtils.js:
--------------------------------------------------------------------------------
1 | import {
2 | BRICK,
3 | MAIN_BRICK
4 | } from './componentNames'
5 |
6 | export const ERROR = 'error'
7 |
8 | export const doesAllInputsHaveValues = (element, valueIds, unitTest) => {
9 | const numberOfInputs = Object.keys(element.inputSlots).length
10 |
11 | return (numberOfInputs == valueIds.length) &&
12 | (unitTestValues(valueIds, unitTest).length == numberOfInputs)
13 | }
14 |
15 | export const elementInputValueIds = (element) => {
16 | let valueIds = []
17 |
18 | for(let id in element.inputSlots) {
19 | const inputSlot = element.inputSlots[id]
20 |
21 | if(inputSlot.value) {
22 | valueIds[inputSlot.index] = inputSlot.value.slotId
23 | }
24 | }
25 |
26 | return valueIds
27 | }
28 |
29 | const unitTestValues = (valueIds, unitTest) => {
30 | let values = []
31 |
32 | for(let id in valueIds) {
33 | const valueId = valueIds[id]
34 | const element = unitTest.values[valueId]
35 |
36 | if(element && element.type !== ERROR && element.value) {
37 | values.push({
38 | id: valueId,
39 | type: element.type,
40 | value: element.value
41 | })
42 | }
43 | }
44 |
45 | return values
46 | }
47 |
48 | const nativeBricks = {
49 | arithmetic: {
50 | "+": (a, b) => {
51 | if(assert([a, b], ["number", "number"]))
52 | return a + b
53 | throw "Invalid parameters"
54 | },
55 | "-": (a, b) => {
56 | if(assert([a, b], ["number", "number"]))
57 | return a - b
58 | throw "Invalid parameters"
59 | },
60 | "*": (a, b) => {
61 | if(assert([a, b], ["number", "number"]))
62 | return a * b
63 | throw "Invalid parameters"
64 | },
65 | "/": (a, b) => {
66 | if(assert([a, b], ["number", "number"]))
67 | return a / b
68 | throw "Invalid parameters"
69 | }
70 | },
71 | boolean: {
72 | "&&": (a, b) => a && b,
73 | "||": (a, b) => a || b,
74 | "!": (a) => !a
75 | },
76 | eq: {
77 | "==": (a, b) => a === b,
78 | },
79 | hof: {
80 | "join": (a) => a.join(''),
81 | "sort": (a) => a.slice(0).sort()
82 | },
83 | parse: {
84 | "toNumber": (a) => {
85 | if(assert([a], ["string"]))
86 | return parseFloat(a)
87 | throw "Invalid parameters"
88 | },
89 | "toString": (a) => {
90 | if(assert([a], ["number"]))
91 | return a.toString()
92 | throw "Invalid parameters"
93 | },
94 | },
95 | string: {
96 | "concat": (a, b) => {
97 | if(assert([a, b], ["string", "string"]))
98 | return a.concat(b)
99 | throw "Invalid parameters"
100 | },
101 | "length": (a) => {
102 | if(assert([a], ["string"]))
103 | return a.length
104 | throw "Invalid parameters"
105 | },
106 | "reverse": (a) => {
107 | if(assert([a], ["string"]))
108 | return a.split('').reverse().join('')
109 | throw "Invalid parameters"
110 | },
111 | "split": (a) => {
112 | if(assert([a], ["string"]))
113 | return a.split('')
114 | throw "Invalid parameters"
115 | },
116 | }
117 | }
118 |
119 | const assert = (parameters, types) => {
120 | for(var i = 0; i < parameters.length; i++) {
121 | if(typeof parameters[i] !== types[i])
122 | return false
123 | }
124 |
125 | return true
126 | }
127 |
128 | const parsers = {
129 | boolean: (value) => value.toLowerCase() == "true",
130 | list: (value) => value.split(','),
131 | number: (value) => parseFloat(value),
132 | string: (value) => value
133 | }
134 |
135 | const _evalBrick = (brick, args) => {
136 | const { moduleName, name } = brick
137 | let brickOutput
138 |
139 | try {
140 | brickOutput = nativeBricks[moduleName][name].apply(null, args)
141 | } catch(error) {
142 | }
143 |
144 | if(brickOutput === undefined) {
145 | return {
146 | componentName: BRICK,
147 | type: ERROR,
148 | value: 'error'
149 | }
150 | }
151 |
152 | return {
153 | componentName: BRICK,
154 | type: _getOutputType(brickOutput),
155 | value: brickOutput.toString()
156 | }
157 | }
158 |
159 | export const tryEvalPath = (workspace, unitTest, elementId) => {
160 | let newUnitTest = Object.assign({}, unitTest)
161 |
162 | return _tryEvalPath(workspace, newUnitTest, elementId)
163 | }
164 |
165 | const _tryEvalPath = (workspace, unitTest, elementId) => {
166 | const brick = workspace.entities[elementId]
167 | let args = []
168 |
169 | if(brick.componentName != BRICK) {
170 | return unitTest
171 | }
172 |
173 | for(var id in brick.inputSlots) {
174 | const { value } = brick.inputSlots[id]
175 | const slotValue = unitTest.values[value.slotId]
176 |
177 | if(slotValue && slotValue.type && slotValue.value) {
178 | args.push(parsers[slotValue.type](slotValue.value))
179 | } else {
180 | return unitTest
181 | }
182 | }
183 |
184 | const outputSlotId = Object.keys(brick.outputSlots)[0]
185 | const outputSlot = brick.outputSlots[outputSlotId]
186 |
187 | unitTest.values[outputSlotId] = _evalBrick(brick, args)
188 |
189 | outputSlot.outputElementIds.forEach((id) =>
190 | _tryEvalPath(workspace, unitTest, id)
191 | )
192 |
193 | return unitTest
194 | }
195 |
196 | export const evalPathValueIds = (workspace, element, valueIds) => {
197 | if(element.componentName != MAIN_BRICK) {
198 | const outputSlotId = Object.keys(element.outputSlots)[0]
199 | const outputSlot = element.outputSlots[outputSlotId]
200 |
201 | valueIds.push(outputSlot.id)
202 |
203 | if(outputSlot.outputElementIds) {
204 | outputSlot.outputElementIds.forEach((id) => {
205 | evalPathValueIds(workspace, workspace.entities[id], valueIds)
206 | })
207 | }
208 | }
209 |
210 | return valueIds
211 | }
212 |
213 | const _getOutputType = (output) => {
214 | if(Array.isArray(output)) {
215 | return 'list'
216 | } else {
217 | return typeof output
218 | }
219 | }
220 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WIP
2 |
3 | # Lambda Bricks
4 |
5 | What will happen if we separate a programming language in front-end and back-end?
6 | The back-end will be the programming language as we know it.
7 | But in the front-end we could add new features to it, for example:
8 | - Translations
9 | - Multiple ways of reading and writing the code.
10 | The code could behave as data, and we could have multiple views of it.
11 | - etc.
12 |
13 | This project is an experiment around this question.
14 |
15 | [](http://www.youtube.com/watch?v=bf7bJLPxivc)
16 |
17 | - [How this project started](#how-this-project-started)
18 | - [Benefits](#benefits)
19 | - [Paradigms](#paradigms)
20 | - [Differences with similar projects](#differences-with-similar-projects)
21 | - [Roadmap](#roadmap)
22 | - [Further work](#further-work)
23 | - [License](#license)
24 | - [Development](#development)
25 | - [Tasks](#tasks)
26 |
27 |
28 | ## How this project started
29 |
30 | I was working in a bootcamp as a teacher,
31 | and realized that there is a lot of incidental complexity
32 | when someone is learning to program.
33 |
34 | We could use the ideas above to think of a programming environment
35 | that makes learning to program easier.
36 | Here are some ways in which applying this ideas could help:
37 | - Having translations or a visual representation could help non-English speakers.
38 | - Avoid the need to know all the syntax of a programing language
39 | before starting to program. You don't need to know where all the commas,
40 | parenthesis, brackets, keywords, etc. are placed.
41 | - Teach programming concepts and not a programming language.
42 | General concepts could be applied to different programming languages later.
43 | - All you need in one place: documentation, usage examples, tests, etc.
44 |
45 | The project currently have the constraint that can only represent
46 | functional languages that have some kind of pattern matching or guards.
47 | For example: Haskell, Erlang, Elixir.
48 |
49 | > Anything is easy if you can assimilate it to your collection of models.
50 | > If you can't, anything can be painfully difficult.
51 | Seymour Papert, Mindstorms.
52 |
53 |
54 | ## Benefits
55 |
56 | It is not a new programming language.
57 |
58 |
59 | ## Paradigms
60 |
61 | The project takes a lot of inspiration from the following paradigms:
62 | - Dataflow programming
63 | - Visual programming
64 | - Functional programming
65 | - Live programming
66 |
67 |
68 | ## Differences with similar projects
69 |
70 | This project differentiates by 3 main ideas of other visual programming environments:
71 | - Uses Functional Programming
72 | - The connections between blocks are as important as the blocks.
73 | In most of the other projects the connections are just lines.
74 | - The execution flow is from top to bottom,
75 | not from left to right like in most projects.
76 | I think flow from top to bottom is more natural,
77 | an example in the real world is gravity.
78 |
79 |
80 | ## Roadmap
81 |
82 | ### Evaluate technologies
83 |
84 | The first step is to evaluate
85 | if the project will continue to be developed with react/redux/canvas.
86 | Using it in Firefox feels slow.
87 | I don't know if it is because my limited knowledge of react/redux,
88 | or because the project is not suited for using these technologies.
89 | Please open an issue with your OS, browser, pc specs
90 | if the project feels slow in your machine.
91 |
92 | ### ~~Test output~~ DONE
93 |
94 | The same way as you select the values/types of the test inputs,
95 | you will select the value/type of the test output.
96 | If the test output is the same as the brick output
97 | there will be visual cue that the test is passing.
98 |
99 | ### ~~Custom constant value input depending on type~~ DONE
100 |
101 | 
102 | 
103 |
104 | ### Pattern matching/Guards
105 |
106 | The only way to do control flow will be with multiple brick heads.
107 |
108 | 
109 |
110 | ### Collapse/Expand bricks
111 |
112 | This way you could see the dataflow inside other bricks.
113 | Also expand bricks implemented by other people to see what
114 | is happening inside.
115 |
116 | ### Keyboard shortcuts
117 |
118 | Just examples, the actual shortcuts will be defined later.
119 | - B Add new brick
120 | - C Add new constant
121 | - L Link slots
122 | - E Select element
123 |
124 | I think that with just this shortcuts and some autocompletion
125 | you could program with fewer keystrokes than even inside an IDE.
126 | This is because with each shortcut you are narrowing a lot
127 | the potential following actions.
128 |
129 | ### Higher order functions
130 |
131 | Wrap bricks inside a funnel, so it can flow through a pipe.
132 |
133 | ### Search bar for defined bricks
134 |
135 | Add a search bar for bricks with autocompletion.
136 |
137 | 
138 |
139 | ### Change locale/programming language
140 |
141 | There will be the need to implement backends in different programming languages
142 | that can evaluate Lambda Bricks state.
143 |
144 |
145 | ## Further work
146 |
147 | 1. Do physical open-hardware toys that could teach programming to kids.
148 | 2. Translate between code (in different languages) and brick visualization.
149 | 3. Apply this ideas for tools in:
150 | - Debugging
151 | - Refactoring
152 | - Navigating code
153 | - Visualization of a project architecture
154 |
155 |
156 | ## License
157 |
158 | This project is licensed AGPL for non-commercial use.
159 | A donation to the project will be required for commercial use.
160 |
161 |
162 | ## Development
163 |
164 | You need npm & browserify installed on your machine.
165 |
166 | ```
167 | $ git clone https://github.com/lambdabricks/bricks-front-react.git
168 | $ cd bricks-front-react
169 | $ npm install
170 | $ npm start
171 | ```
172 | Open `localhost:8080` in your browser.
173 |
174 |
175 | ## Tasks
176 |
177 |
178 | TODO: Add description of the components and state of the application.
179 |
--------------------------------------------------------------------------------
/src/utils/translationUtils.js:
--------------------------------------------------------------------------------
1 | const translations = {
2 | en: {
3 | addUnitTest: 'Add unit test',
4 | constants: 'Constants',
5 | delete: 'Delete',
6 | deleteUnitTest: 'Delete unit test',
7 | empty: 'None',
8 | functions: 'Functions',
9 | tutorial: 'Tutorial',
10 | library: 'Library',
11 | loading: 'Loading...',
12 | next: 'Next',
13 | noValue: '
81 |
97 | { step } / { totalSteps() }
86 | 91 | { getMessage(locale, `tutorialSteps.${nextStep}`) &&The library has 2 components:
- Constants
- Functions
- The numbers are constants. \ 43 |
- And the math operators are functions.
- concat a String\ 61 | with your first name and a String with your last name. \ 62 |
- reverse your name. \ 63 |
- Get the length of your name. \ 64 |
- Calculate the average of 2 numbers. \ 90 |
- Concat 3 strings. \ 91 |
- Can you figure out which functions you need to connect to calculate the\ 92 | number of digits in a number?
- First we need to add other functions & constants inside the function\ 104 | we are creating, and connect them with pipes. This is known in programming as\ 105 | defining the function. \ 106 |
- After we have defined the function, someone else (or ourselves) can use it\ 107 | by giving values to every input. This is known in programming as calling\ 108 | the function.
', 22 | 'joyrideSteps.constants': 23 | '
Clicking on "Number" will add a ballon to the workspace.
\ 24 |This ballon can hold a number.
', 25 | 'joyrideSteps.functions': 'Clicking on a math operation will add a brick to the workspace.', 26 | 'joyrideSteps.workspace': 27 | '2. Workspace\ 28 |The workspace is the playground where you can connect ballons and bricks.
\ 29 |Clicking on an element will show a dialog where you can change its properties.
\ 30 |Move the elements by drag & drop.
\ 31 |The elements are connected through pipes. To create a pipe click on an\ 32 | input and an output slot.', 33 | 'joyrideSteps.tutorial': 34 | '3. Tutorial\ 35 |
The instructions for following the tutorial
', 36 | 'tutorialSteps.1': 37 | "This is a small tutorial for learning the basics of programming.
\ 38 |All programs are composed of two primary components.\ 39 | It doesn't matter if it's a smartphone app, a web site, a game, or anything else.\ 40 | The two components are: constants and functions.
\ 41 |You have already used this components in your math lessons of elementary school.
\ 42 |In general functions process one or more inputs to give a result.\ 45 | For example in the sum 3 + 4, the function + has two inputs: the numbers\ 46 | 3 and 4. And it gives the result of 7.
\ 47 |In the workspace you can do this kind of operations by connecting the constants\ 48 | as inputs to the functions.
\ 49 |Try doing a couple of operations now\ 50 | (Here is a video showing\ 51 | how to do it if you have any doubts).
\ 52 |When you finish doing some operations click the button Next to continue.
", 53 | 'tutorialSteps.2': 54 | "We can manipulate not only numbers, we can also manipulate letters.\ 55 | Letters are usually referred as String in programming.\ 56 | And as well as the math operations, there are functions to transform them.
\ 57 |Try to guess what the functions in the right do. Then do some operations\ 58 | on the workspace to see if the results of the functions are what you expected.
\ 59 |Some things you can try:
\ 60 |When you finish click the button Next to continue.
", 66 | 'tutorialSteps.3': 67 | "We have seen two types of constants so far: Numbers & Letters (Strings).\ 68 | Most programs are composed by more than one type of data. And we can mix them\ 69 | according to what we want to achieve. We can even convert from one to the\ 70 | other in case we need it.
\ 71 |Have you noticed that constants have different colors depending on their type?\ 72 | Numbers are yellow and strings are orange.
\ 73 |The functions have definitions that tell us which type of data they need as input.\ 74 | Hover on the functions of the library and you will see this information.
\ 75 |As usual try doing a couple of operations now. See what happens when you connect\ 76 | an input of the wrong type to a function.
\ 77 |Try using the functions toNumber and\ 78 | toString to convert a constant\ 79 | from one type to another.
\ 80 |When you finish click the button Next to continue.
", 81 | 'tutorialSteps.4': 82 | "What we have done so far don't seem really useful. But one thing we haven't\ 83 | done, is using the output of a function as input for another function.
\ 84 |All programs are composed by series of transformations with a specific order.\ 85 | For example, to calculate the average of 2 numbers, first we need to sum the\ 86 | numbers and then divide the result by 2.
\ 87 |Try using the output of functions as input to other ones. Some ideas of\ 88 | things you can try:
\ 89 |We are near the end of the tutorial there is just one more step.
\ 94 |When you finish doing some of the exercises click the button Next.
", 95 | 'tutorialSteps.5': 96 | "Imagine we have a program that needs to calculate a lot of averages.\ 97 | It will be really boring to do all the connections every time.\ 98 | Luckily there is a way to avoid this. We can create our own functions!
\ 99 |The functions that we create are exactly the same as the functions we have used\ 100 | in the previous steps. Our functions will have inputs and outputs.\ 101 | We can receive data in the inputs, and we return a result as output.
\ 102 |There are two separate steps in creating a function:
\ 103 |Try to create your own function now. You can create a function that calculates\ 110 | the average of 2 numbers that we saw in the previous step, or any other function\ 111 | you want. You can call your function by giving values to the constants that are\ 112 | outside of it.
\ 113 |This is the end of this really short tutorial on the basics of programming.\ 114 | Hope you find it useful as a first step in your path to learn to program.
" 115 | } 116 | } 117 | 118 | export const getMessage = (locale, key) => { 119 | return translations[locale][key] 120 | } 121 | -------------------------------------------------------------------------------- /src/reducers/workspace/updateElementReducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | BRICK, 3 | MAIN_BRICK, 4 | PRIMITIVE, 5 | TEST_INPUT 6 | } from '../../utils/componentNames' 7 | 8 | const updateElementInAllUnitTests = (workspace, elementId, newProps) => { 9 | const { unitTests } = workspace 10 | 11 | return Object.assign({}, workspace, { 12 | ...workspace, 13 | unitTests: unitTests.map((unitTest) => 14 | updateElementValues(unitTest, elementId, newProps) 15 | ) 16 | }) 17 | } 18 | 19 | const updateElementInUnitTest = (workspace, elementId, workspaceIndex, newProps) => { 20 | const { unitTests } = workspace 21 | 22 | return Object.assign({}, workspace, { 23 | ...workspace, 24 | unitTests: [ 25 | ...unitTests.slice(0, workspaceIndex), 26 | updateElementValues(unitTests[workspaceIndex], elementId, newProps), 27 | ...unitTests.slice(workspaceIndex + 1) 28 | ] 29 | }) 30 | } 31 | 32 | const updateElementValues = (unitTest, elementId, newProps) => { 33 | return Object.assign({}, unitTest, { 34 | ...unitTest, 35 | values: { 36 | ...unitTest.values, 37 | [elementId]: { 38 | ...unitTest.values[elementId], 39 | ...newProps 40 | } 41 | } 42 | }) 43 | } 44 | 45 | export const changePrimitiveValue = (workspace, payload) => { 46 | const { 47 | elementId, 48 | newValue 49 | } = payload 50 | 51 | return updateElementInAllUnitTests( 52 | workspace, 53 | elementId, 54 | { 55 | componentName: PRIMITIVE, 56 | value: newValue 57 | } 58 | ) 59 | } 60 | 61 | export const changeTestNodeType = (workspace, payload) => { 62 | const { 63 | componentName, 64 | elementId, 65 | newType, 66 | workspaceIndex 67 | } = payload 68 | 69 | return updateElementInUnitTest( 70 | workspace, 71 | elementId, 72 | workspaceIndex, 73 | { 74 | componentName, 75 | type: newType 76 | } 77 | ) 78 | } 79 | 80 | export const changeTestNodeValue = (workspace, payload) => { 81 | const { 82 | componentName, 83 | elementId, 84 | newValue, 85 | workspaceIndex 86 | } = payload 87 | 88 | return updateElementInUnitTest( 89 | workspace, 90 | elementId, 91 | workspaceIndex, 92 | { 93 | componentName, 94 | value: newValue 95 | } 96 | ) 97 | } 98 | 99 | export const linkSlots = (workspace, payload) => { 100 | const { input, output } = payload 101 | const outputElement = workspace.entities[output.elementId] 102 | let newOutputElementSlots = {} 103 | let inputElement = workspace.entities[input.elementId] 104 | 105 | if(inputElement.componentName == MAIN_BRICK) { 106 | inputElement = workspace.entities[input.slotId] 107 | } 108 | 109 | const outputSlot = inputElement.outputSlots[input.slotId] 110 | 111 | const newInputElementSlots = { 112 | outputSlots: _addPropsToSlot( 113 | inputElement.outputSlots, 114 | input.slotId, 115 | { 116 | outputElementIds: [ 117 | ...outputSlot.outputElementIds, 118 | outputElement.id 119 | ] 120 | } 121 | ) 122 | } 123 | 124 | if(outputElement.componentName == BRICK) { 125 | const { inputSlots } = outputElement 126 | 127 | newOutputElementSlots = { 128 | inputSlots: addValueToSlots(inputSlots, input, output) 129 | } 130 | } 131 | if(outputElement.componentName == MAIN_BRICK) { 132 | const { outputSlots } = outputElement 133 | 134 | newOutputElementSlots = { 135 | outputSlots: addValueToSlots(outputSlots, input, output) 136 | } 137 | } 138 | 139 | return Object.assign({}, workspace, { 140 | entities: { 141 | ...workspace.entities, 142 | [outputElement.id]: { 143 | ...outputElement, 144 | ...newOutputElementSlots 145 | }, 146 | [inputElement.id]: { 147 | ...inputElement, 148 | ...newInputElementSlots 149 | } 150 | } 151 | }) 152 | } 153 | 154 | const addValueToSlots = (slots, input, output) => { 155 | return _addPropsToSlot(slots, output.slotId, { 156 | value: { 157 | slotId: input.slotId, 158 | elementId: input.elementId 159 | } 160 | }) 161 | } 162 | 163 | const _addPropsToSlot = (slots, slotId, newProps) => { 164 | return Object.assign({}, slots, { 165 | [slotId]: { 166 | ...slots[slotId], 167 | ...newProps 168 | } 169 | }) 170 | } 171 | 172 | export const unlinkSlots = (workspace, payload) => { 173 | const { input, output } = payload 174 | let inputElement = workspace.entities[input.elementId] 175 | 176 | if(inputElement.componentName == MAIN_BRICK) { 177 | inputElement = workspace.entities[input.slotId] 178 | } 179 | 180 | const outputSlot = inputElement.outputSlots[input.slotId] 181 | const index = outputSlot.outputElementIds.indexOf(output.elementId) 182 | 183 | const outputElement = workspace.entities[output.elementId] 184 | const newOutputElement = _removeSlotValue(outputElement, output) 185 | 186 | return Object.assign({}, workspace, { 187 | entities: { 188 | ...workspace.entities, 189 | [outputElement.id]: newOutputElement, 190 | [inputElement.id]: { 191 | ...inputElement, 192 | outputSlots: { 193 | ...inputElement.outputSlots, 194 | [input.slotId]: { 195 | ...outputSlot, 196 | outputElementIds: [ 197 | ...outputSlot.outputElementIds.slice(0, index), 198 | ...outputSlot.outputElementIds.slice(index + 1) 199 | ] 200 | } 201 | } 202 | } 203 | } 204 | }) 205 | } 206 | 207 | const _removeSlotValue = (element, output) => { 208 | var slots = {} 209 | 210 | if(output.slotId) { 211 | if(element.componentName == MAIN_BRICK) { 212 | Object.assign(slots, { outputSlots: element.outputSlots }) 213 | 214 | delete slots.outputSlots[output.slotId]['value'] 215 | } else { 216 | Object.assign(slots, { inputSlots: element.inputSlots }) 217 | 218 | delete slots.inputSlots[output.slotId]['value'] 219 | } 220 | } else if(output.sourceElementId) { 221 | if(element.componentName == MAIN_BRICK) { 222 | Object.assign(slots, { outputSlots: element.outputSlots }) 223 | 224 | Object.keys(element.outputSlots).forEach((slotId) => { 225 | const slot = element.outputSlots[slotId] 226 | 227 | if(slot.value && slot.value.elementId == output.sourceElementId) { 228 | delete slots.outputSlots[slotId]['value'] 229 | } 230 | }) 231 | } else { 232 | Object.assign(slots, { inputSlots: element.inputSlots }) 233 | 234 | Object.keys(element.inputSlots).forEach((slotId) => { 235 | const slot = element.inputSlots[slotId] 236 | 237 | if(slot.value && slot.value.elementId == output.sourceElementId) { 238 | delete slots.inputSlots[slotId]['value'] 239 | } 240 | }) 241 | } 242 | } 243 | 244 | return Object.assign(element, { ...slots }) 245 | } 246 | -------------------------------------------------------------------------------- /src/reducers/workspace/workspaceReducerUtils.js: -------------------------------------------------------------------------------- 1 | import { 2 | CLEAN, 3 | FUNCTION, 4 | UNIT_TEST 5 | } from '../../components/constants' 6 | 7 | import { 8 | inputSlotPosition, 9 | outputSlotPosition 10 | } from '../../utils' 11 | 12 | import { 13 | BRICK, 14 | MAIN_BRICK, 15 | PRIMITIVE, 16 | SELECTABLE_PIPE, 17 | TEST_INPUT, 18 | TEST_OUTPUT 19 | } from '../../utils/componentNames' 20 | 21 | const TestNodeDefaults = { 22 | size: { 23 | height: 30, 24 | width: 60 25 | } 26 | } 27 | 28 | const MainBrickDefaults = { 29 | position: { 30 | x: 50, 31 | y: 80 32 | }, 33 | size: { 34 | height: 400, 35 | width: 350 36 | } 37 | } 38 | 39 | const Defaults = { 40 | [BRICK]: { 41 | size: { 42 | height: 40, 43 | width: 100 44 | } 45 | }, 46 | [MAIN_BRICK]: { 47 | position: { 48 | [CLEAN]: { 49 | x: 50, 50 | y: 35 51 | }, 52 | [FUNCTION]: MainBrickDefaults.position, 53 | [UNIT_TEST]: MainBrickDefaults.position 54 | }, 55 | size: { 56 | [CLEAN]: { 57 | height: 500, 58 | width: 600 59 | }, 60 | [FUNCTION]: MainBrickDefaults.size, 61 | [UNIT_TEST]: MainBrickDefaults.size 62 | } 63 | }, 64 | [PRIMITIVE]: { 65 | size: { 66 | height: 30, 67 | width: 60 68 | } 69 | }, 70 | [TEST_INPUT]: { 71 | size: TestNodeDefaults.size 72 | }, 73 | [TEST_OUTPUT]: { 74 | size: TestNodeDefaults.size 75 | } 76 | } 77 | 78 | let id = 1 79 | // TODO: Generate id's with an UID function ?? 80 | const nextId = () => id++ 81 | 82 | export const newBrick = (brick, parentId) => { 83 | const { arity, moduleName, name } = brick 84 | let inputSlots = {} 85 | const elementId = nextId() 86 | const outputSlotId = nextId() 87 | 88 | for(var i=0; i < arity; i++) { 89 | const id = nextId() 90 | 91 | inputSlots[id] = { 92 | id, 93 | index: i 94 | } 95 | } 96 | 97 | return { 98 | componentName: BRICK, 99 | id: elementId, 100 | inputSlots, 101 | moduleName, 102 | name, 103 | outputSlots: { 104 | [outputSlotId]: { 105 | id: outputSlotId, 106 | index: 0, 107 | outputElementIds: [], 108 | value: { 109 | slotId: outputSlotId 110 | } 111 | } 112 | }, 113 | parentId, 114 | position: _shiftPosition(elementId), 115 | size: Defaults[BRICK].size, 116 | valueId: outputSlotId 117 | } 118 | } 119 | 120 | const newMainBrick = (mainBrickId, workspaceType = UNIT_TEST) => { 121 | let mainBrick = { 122 | componentName: MAIN_BRICK, 123 | id: mainBrickId, 124 | innerIds: [], 125 | inputSlots: { }, 126 | outputSlots: { }, 127 | position: Defaults[MAIN_BRICK].position[workspaceType], 128 | size: Defaults[MAIN_BRICK].size[workspaceType], 129 | workspaceType 130 | } 131 | 132 | if(workspaceType != CLEAN) { 133 | const inputSlotIds = [nextId(), nextId()] 134 | const outputSlotId = nextId() 135 | 136 | mainBrick.inputSlots = { 137 | [inputSlotIds[0]]: { 138 | id: inputSlotIds[0], 139 | index: 0 140 | }, 141 | [inputSlotIds[1]]: { 142 | id: inputSlotIds[1], 143 | index: 1 144 | } 145 | } 146 | 147 | mainBrick.outputSlots = { 148 | [outputSlotId]: { 149 | id: outputSlotId, 150 | index: 0 151 | } 152 | } 153 | } 154 | 155 | return mainBrick 156 | } 157 | 158 | export const newPrimitive = (type, parentId) => { 159 | const elementId = nextId() 160 | 161 | return { 162 | componentName: PRIMITIVE, 163 | id: elementId, 164 | outputSlots: { 165 | [elementId]: { 166 | id: elementId, 167 | index: 0, 168 | outputElementIds: [], 169 | valueId: elementId 170 | } 171 | }, 172 | parentId, 173 | position: _shiftPosition(elementId), 174 | size: Defaults[PRIMITIVE].size, 175 | valueId: elementId 176 | } 177 | } 178 | 179 | const _shiftPosition = (id) => { 180 | const xMultiplier = (id % 5) + 1 181 | const yMultiplier = Math.floor(id / 5) + 1 182 | 183 | return { 184 | x: 50 * xMultiplier, 185 | y: 30 * yMultiplier 186 | } 187 | } 188 | 189 | export const newPipe = (payload) => { 190 | const { input, output } = payload 191 | 192 | return { 193 | componentName: SELECTABLE_PIPE, 194 | id: nextId(), 195 | input, 196 | output, 197 | type: "null", 198 | valueId: input.slotId 199 | } 200 | } 201 | 202 | export const newTestInputs = (mainBrick) => { 203 | let testInputs = _newTestNodes( 204 | mainBrick, 205 | TEST_INPUT, 206 | mainBrick.inputSlots, 207 | inputSlotPosition 208 | ) 209 | 210 | for(var id in testInputs) { 211 | const testInput = testInputs[id] 212 | 213 | testInput.outputSlots = { 214 | [testInput.id]: { 215 | id: testInput.id, 216 | index: 0, 217 | outputElementIds: [] 218 | } 219 | } 220 | } 221 | 222 | return testInputs 223 | } 224 | 225 | export const newTestOutputs = (mainBrick) => { 226 | return _newTestNodes( 227 | mainBrick, 228 | TEST_OUTPUT, 229 | mainBrick.outputSlots, 230 | outputSlotPosition 231 | ) 232 | } 233 | 234 | const _newTestNodes = (mainBrick, componentName, slots, slotPosition) => { 235 | let testNodes = {} 236 | 237 | for(var id in slots) { 238 | const slot = slots[id] 239 | 240 | testNodes[id] = { 241 | componentName, 242 | id: slot.id, 243 | slotPosition: slotPosition(mainBrick, slot.id), 244 | size: Defaults[componentName].size, 245 | type: "null", 246 | valueId: slot.id 247 | } 248 | } 249 | 250 | return testNodes 251 | } 252 | 253 | export const newWorkspace = (type) => { 254 | const mainBrickId = nextId() 255 | const mainBrick = newMainBrick(mainBrickId, type) 256 | const testInputs = newTestInputs(mainBrick) 257 | const testOutputs = type == UNIT_TEST ? newTestOutputs(mainBrick) : [] 258 | 259 | const testInputIds = Object.keys(testInputs).map((testInput) => { 260 | return testInputs[testInput].id 261 | }) 262 | 263 | const testOutputIds = Object.keys(testOutputs).map((testOutput) => { 264 | return testOutputs[testOutput].id 265 | }) 266 | 267 | return { 268 | entities: { 269 | [mainBrickId]: { 270 | ...mainBrick, 271 | testInputIds, 272 | testOutputIds 273 | }, 274 | ...testInputs, 275 | ...testOutputs 276 | }, 277 | mainBrickId: mainBrickId, 278 | selectionState: { 279 | dragStarted: false, 280 | element: { }, 281 | pipe: { 282 | input: { }, 283 | output: { } 284 | } 285 | }, 286 | unitTests: [ 287 | { 288 | values: { } 289 | } 290 | ] 291 | } 292 | } 293 | 294 | export const pipeConnectedToElement = (element, elementId) => { 295 | return element.componentName == SELECTABLE_PIPE && 296 | (element.input.elementId == elementId || 297 | element.output.elementId == elementId) 298 | } 299 | -------------------------------------------------------------------------------- /docs/react-joyride-compiled.css: -------------------------------------------------------------------------------- 1 | .joyride-beacon { 2 | display: inline-block; 3 | height: 36px; 4 | position: relative; 5 | width: 36px; 6 | z-index: 1500; } 7 | .joyride-beacon__inner { 8 | -webkit-animation: joyride-beacon-inner 1.2s infinite ease-in-out; 9 | animation: joyride-beacon-inner 1.2s infinite ease-in-out; 10 | background-color: #404040; 11 | border-radius: 50%; 12 | display: block; 13 | height: 50%; 14 | left: 50%; 15 | opacity: 0.7; 16 | position: relative; 17 | top: 50%; 18 | -webkit-transform: translate(-50%, -50%); 19 | transform: translate(-50%, -50%); 20 | width: 50%; } 21 | .joyride-beacon__outer { 22 | -webkit-animation: joyride-beacon-outer 1.2s infinite ease-in-out; 23 | animation: joyride-beacon-outer 1.2s infinite ease-in-out; 24 | background-color: rgba(255, 0, 68, 0.2); 25 | border: 2px solid #404040; 26 | border-radius: 50%; 27 | display: block; 28 | height: 100%; 29 | left: 0; 30 | opacity: 0.9; 31 | position: absolute; 32 | top: 0; 33 | -webkit-transform: translateY(-50%); 34 | transform: translateY(-50%); 35 | -webkit-transform-origin: center; 36 | transform-origin: center; 37 | width: 100%; } 38 | 39 | .joyride-overlay { 40 | bottom: 0; 41 | cursor: pointer; 42 | left: 0; 43 | position: absolute; 44 | right: 0; 45 | top: 0; 46 | z-index: 1500; } 47 | 48 | .joyride-hole { 49 | border-radius: 4px; 50 | box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); 51 | position: absolute; } 52 | .joyride-hole.safari { 53 | box-shadow: 0 0 999px 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5); } 54 | 55 | .joyride-tooltip { 56 | background-color: #fff; 57 | border-radius: 4px; 58 | color: #333; 59 | cursor: default; 60 | -webkit-filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3)); 61 | filter: drop-shadow(-1px -2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3)); 62 | opacity: 0; 63 | padding: 20px; 64 | -webkit-transform: translate3d(0, 0, 0); 65 | transform: translate3d(0, 0, 0); 66 | width: 290px; 67 | z-index: 1510; } 68 | @media screen and (min-width: 480px) { 69 | .joyride-tooltip { 70 | width: 360px; } } 71 | @media screen and (min-width: 960px) { 72 | .joyride-tooltip { 73 | width: 450px; } } 74 | .joyride-tooltip--animate { 75 | -webkit-animation: joyride-tooltip 0.4s forwards; 76 | animation: joyride-tooltip 0.4s forwards; 77 | -webkit-animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18); 78 | animation-timing-function: cubic-bezier(0, 1.05, 0.55, 1.18); } 79 | .joyride-tooltip__triangle { 80 | background-repeat: no-repeat; 81 | overflow: hidden; 82 | position: absolute; } 83 | .joyride-tooltip.bottom, .joyride-tooltip.bottom-left, .joyride-tooltip.bottom-right { 84 | margin-top: 18px; } 85 | .joyride-tooltip.bottom .joyride-tooltip__triangle, .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.bottom-right .joyride-tooltip__triangle { 86 | background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28180 8 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); 87 | height: 18px; 88 | left: 50%; 89 | top: -16px; 90 | -webkit-transform: translateX(-50%); 91 | transform: translateX(-50%); 92 | width: 36px; } 93 | .joyride-tooltip.top, .joyride-tooltip.top-left, .joyride-tooltip.top-right { 94 | margin-bottom: 18px; } 95 | .joyride-tooltip.top .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { 96 | background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236px%22%20height%3D%2218px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%280%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); 97 | bottom: -16px; 98 | height: 18px; 99 | left: 50%; 100 | -webkit-transform: translateX(-50%); 101 | transform: translateX(-50%); 102 | width: 36px; } 103 | .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle { 104 | left: 3%; 105 | -webkit-transform: translateX(0); 106 | transform: translateX(0); } 107 | @media screen and (min-width: 480px) { 108 | .joyride-tooltip.bottom-left .joyride-tooltip__triangle, .joyride-tooltip.top-left .joyride-tooltip__triangle { 109 | left: 2%; } } 110 | .joyride-tooltip.bottom-right .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { 111 | left: auto; 112 | right: 3%; 113 | -webkit-transform: translateX(0); 114 | transform: translateX(0); } 115 | @media screen and (min-width: 480px) { 116 | .joyride-tooltip.bottom-right .joyride-tooltip__triangle, .joyride-tooltip.top-right .joyride-tooltip__triangle { 117 | right: 2%; } } 118 | .joyride-tooltip.left { 119 | margin-right: 18px; } 120 | .joyride-tooltip.left .joyride-tooltip__triangle { 121 | background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%28270 8 8%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); 122 | height: 36px; 123 | right: -16px; 124 | width: 18px; } 125 | .joyride-tooltip.right { 126 | margin-left: 18px; } 127 | .joyride-tooltip.right .joyride-tooltip__triangle { 128 | background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218px%22%20height%3D%2236px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23fff%22%20transform%3D%22scale%282.25%29%20rotate%2890 4 4%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); 129 | height: 36px; 130 | left: -16px; 131 | width: 18px; } 132 | .joyride-tooltip__close { 133 | color: rgba(85, 85, 85, 0.5); 134 | font-size: 30px; 135 | line-height: 12px; 136 | position: absolute; 137 | right: 10px; 138 | text-decoration: none; 139 | top: 10px; 140 | z-index: 10; 141 | display: block; } 142 | .joyride-tooltip__close:hover, .joyride-tooltip__close:focus { 143 | color: rgba(60, 60, 60, 0.5); 144 | outline: none; 145 | text-decoration: none; } 146 | .joyride-tooltip__close--header { 147 | right: 20px; 148 | top: 20px; } 149 | .joyride-tooltip__header { 150 | border-bottom: 1px solid #404040; 151 | color: #555; 152 | font-size: 20px; 153 | padding-bottom: 6px; 154 | position: relative; } 155 | .joyride-tooltip__main { 156 | font-size: 16px; 157 | padding: 12px 0 18px; } 158 | .joyride-tooltip__footer { 159 | text-align: right; } 160 | .joyride-tooltip__button--primary { 161 | background-color: #404040; 162 | border-radius: 4px; 163 | color: #fff; 164 | outline: none; 165 | padding: 6px 12px; 166 | text-decoration: none; 167 | -webkit-transition: background-color 0.2s ease-in-out; 168 | transition: background-color 0.2s ease-in-out; } 169 | .joyride-tooltip__button--primary:active, .joyride-tooltip__button--primary:focus, .joyride-tooltip__button--primary:hover { 170 | background-color: #666666; 171 | color: #fff; 172 | text-decoration: none; } 173 | .joyride-tooltip__button--secondary { 174 | color: #404040; 175 | margin-right: 10px; 176 | outline: none; } 177 | .joyride-tooltip__button--skip { 178 | color: #ccc; 179 | float: left; 180 | margin-right: 10px; } 181 | .joyride-tooltip--standalone .joyride-tooltip__main { 182 | padding-bottom: 0; } 183 | .joyride-tooltip--standalone .joyride-tooltip__footer { 184 | display: none; } 185 | 186 | @-webkit-keyframes joyride-tooltip { 187 | 0% { 188 | -webkit-transform: scale(0.1); 189 | transform: scale(0.1); } 190 | 100% { 191 | opacity: 1; 192 | -webkit-transform: perspective(1px) scale(1); 193 | transform: perspective(1px) scale(1); } } 194 | 195 | @keyframes joyride-tooltip { 196 | 0% { 197 | -webkit-transform: scale(0.1); 198 | transform: scale(0.1); } 199 | 100% { 200 | opacity: 1; 201 | -webkit-transform: perspective(1px) scale(1); 202 | transform: perspective(1px) scale(1); } } 203 | 204 | @-webkit-keyframes joyride-beacon-inner { 205 | 20% { 206 | opacity: 0.9; } 207 | 90% { 208 | opacity: 0.7; } } 209 | 210 | @keyframes joyride-beacon-inner { 211 | 20% { 212 | opacity: 0.9; } 213 | 90% { 214 | opacity: 0.7; } } 215 | 216 | @-webkit-keyframes joyride-beacon-outer { 217 | 0% { 218 | -webkit-transform: scale(1); 219 | transform: scale(1); } 220 | 45% { 221 | opacity: 0.7; 222 | -webkit-transform: scale(0.75); 223 | transform: scale(0.75); } 224 | 100% { 225 | opacity: 0.9; 226 | -webkit-transform: scale(1); 227 | transform: scale(1); } } 228 | 229 | @keyframes joyride-beacon-outer { 230 | 0% { 231 | -webkit-transform: scale(1); 232 | transform: scale(1); } 233 | 45% { 234 | opacity: 0.7; 235 | -webkit-transform: scale(0.75); 236 | transform: scale(0.75); } 237 | 100% { 238 | opacity: 0.9; 239 | -webkit-transform: scale(1); 240 | transform: scale(1); } } 241 | -------------------------------------------------------------------------------- /src/actions/workspaceActions.js: -------------------------------------------------------------------------------- 1 | import { bothSlotsSelected } from '../utils' 2 | 3 | import { 4 | BRICK, 5 | PRIMITIVE, 6 | SELECTABLE_PIPE 7 | } from '../utils/componentNames' 8 | 9 | import { 10 | unique 11 | } from '../utils' 12 | 13 | import { 14 | doesAllInputsHaveValues, 15 | elementInputValueIds 16 | } from '../utils/evalUtils' 17 | 18 | export const ADD_BRICK = 'ADD_BRICK' 19 | export const ADD_PIPE = 'ADD_PIPE' 20 | export const ADD_PRIMITIVE = 'ADD_PRIMITIVE' 21 | export const ADD_UNIT_TEST = 'ADD_UNIT_TEST' 22 | export const CHANGE_PRIMITIVE_VALUE = 'CHANGE_PRIMITIVE_VALUE' 23 | export const CHANGE_TEST_NODE_TYPE = 'CHANGE_TEST_NODE_TYPE' 24 | export const CHANGE_TEST_NODE_VALUE = 'CHANGE_TEST_NODE_VALUE' 25 | export const CLEAR_SLOT_SELECTION = 'CLEAR_SLOT_SELECTION' 26 | export const EVALUATE = 'EVALUATE' 27 | export const INIT_WORKSPACE = 'INIT_WORKSPACE' 28 | export const LINK_SLOTS = 'LINK_SLOTS' 29 | export const MOVE_ELEMENT = 'MOVE_ELEMENT' 30 | export const REMOVE_ELEMENT = 'REMOVE_ELEMENT' 31 | export const REMOVE_SELECTED_ELEMENT = 'REMOVE_SELECTED_ELEMENT' 32 | export const REMOVE_UNIT_TEST = 'REMOVE_UNIT_TEST' 33 | export const START_DRAG = 'START_DRAG' 34 | export const STOP_DRAG = 'STOP_DRAG' 35 | export const SELECT_ELEMENT = 'SELECT_ELEMENT' 36 | export const SELECT_SLOT = 'SELECT_SLOT' 37 | export const UNEVALUATE = 'UNEVALUATE' 38 | export const UNLINK_SLOTS = 'UNLINK_SLOTS' 39 | 40 | export const initWorkspace = (type) => { 41 | return { 42 | type: INIT_WORKSPACE, 43 | payload: type 44 | } 45 | } 46 | 47 | export const addBrick = (brick) => { 48 | return (dispatch, getState) => { 49 | dispatch(removeSelectedElement()) 50 | dispatch(_addBrick(brick)) 51 | } 52 | } 53 | 54 | const _addBrick = (brick) => { 55 | return { 56 | type: ADD_BRICK, 57 | payload: brick 58 | } 59 | } 60 | 61 | export const addPrimitive = (type) => { 62 | return (dispatch, getState) => { 63 | dispatch(removeSelectedElement()) 64 | dispatch(_addPrimitive(type)) 65 | } 66 | } 67 | 68 | const _addPrimitive = (type) => { 69 | return { 70 | type: ADD_PRIMITIVE, 71 | payload: type 72 | } 73 | } 74 | 75 | export const startDrag = (elementId, mousePosition, elementPosition) => { 76 | return { 77 | type: START_DRAG, 78 | payload: { 79 | elementId, 80 | mousePosition, 81 | elementPosition 82 | } 83 | } 84 | } 85 | 86 | export const selectElementOrStopDrag = (mousePosition) => { 87 | return (dispatch, getState) => { 88 | const { element } = getState().workspace.selectionState 89 | 90 | dispatch(stopDrag()) 91 | 92 | if(element.mouseDownPosition.x === mousePosition.x && 93 | element.mouseDownPosition.y === mousePosition.y ) { 94 | dispatch(selectElement(element.id, mousePosition)) 95 | } else { 96 | dispatch(removeSelectedElement()) 97 | } 98 | } 99 | } 100 | 101 | export const stopDrag = () => { 102 | return { 103 | type: STOP_DRAG 104 | } 105 | } 106 | 107 | export const moveElement = (currentMousePosition) => { 108 | return { 109 | type: MOVE_ELEMENT, 110 | payload: { 111 | currentMousePosition 112 | } 113 | } 114 | } 115 | 116 | export const addPipeOrSelectSlot = (type, elementId, slotId) => { 117 | return (dispatch, getState) => { 118 | dispatch(removeSelectedElement()) 119 | dispatch(selectSlot(type, elementId, slotId)) 120 | dispatch(_addPipeIfBothSlotsSelected()) 121 | } 122 | } 123 | 124 | // type: 'input' or 'output' slot 125 | export const selectSlot = (type, elementId, slotId) => { 126 | return { 127 | type: SELECT_SLOT, 128 | payload: { 129 | elementId, 130 | slotId, 131 | type 132 | } 133 | } 134 | } 135 | 136 | const _addPipeIfBothSlotsSelected = () => { 137 | return (dispatch, getState) => { 138 | const { workspace } = getState() 139 | const { pipe } = workspace.selectionState 140 | 141 | if(bothSlotsSelected(pipe)) { 142 | dispatch(_addPipe(pipe)) 143 | dispatch(_clearSlotSelection()) 144 | dispatch(_linkSlots(pipe)) 145 | dispatch(_evalAllWorkspacesIfNeeded(pipe.output.elementId)) 146 | } 147 | } 148 | } 149 | 150 | const _evalAllWorkspacesIfNeeded = (elementId) => { 151 | return (dispatch, getState) => { 152 | const { workspace } = getState() 153 | 154 | if(_shouldEval(elementId, workspace)) { 155 | return dispatch(_evalWorkspaces(elementId)) 156 | } 157 | } 158 | } 159 | 160 | const _shouldEval = (elementId, workspace) => { 161 | const element = workspace.entities[elementId] 162 | 163 | if(element.componentName != BRICK) { 164 | return false 165 | } 166 | 167 | const valueIds = elementInputValueIds(element) 168 | const shouldEvalWorkspaces = workspace.unitTests.map((unitTest) => 169 | doesAllInputsHaveValues(element, valueIds, unitTest) 170 | ) 171 | 172 | return shouldEvalWorkspaces.filter((shouldEval) => shouldEval).length > 0 173 | } 174 | 175 | const _evalWorkspaces = (elementId) => { 176 | return { 177 | type: EVALUATE, 178 | payload: elementId 179 | } 180 | } 181 | 182 | const _addPipe = (pipe) => { 183 | return { 184 | type: ADD_PIPE, 185 | payload: pipe 186 | } 187 | } 188 | 189 | const _linkSlots = (pipe) => { 190 | return { 191 | type: LINK_SLOTS, 192 | payload: pipe 193 | } 194 | } 195 | 196 | const _clearSlotSelection = () => { 197 | return { 198 | type: CLEAR_SLOT_SELECTION 199 | } 200 | } 201 | 202 | export const selectElement = (elementId, mousePosition, workspaceIndex) => { 203 | return { 204 | type: SELECT_ELEMENT, 205 | payload: { 206 | elementId, 207 | mousePosition, 208 | workspaceIndex 209 | } 210 | } 211 | } 212 | 213 | export const removeElement = (elementId) => { 214 | return (dispatch, getState) => { 215 | const { workspace } = getState() 216 | const element = workspace.entities[elementId] 217 | 218 | if(element.componentName == SELECTABLE_PIPE) { 219 | dispatch(_unlinkSlots(element)) 220 | } 221 | 222 | if(element.componentName == PRIMITIVE || element.componentName == BRICK) { 223 | const slotId = Object.keys(element.outputSlots)[0] 224 | const slot = element.outputSlots[slotId] 225 | 226 | slot.outputElementIds.forEach((outputElementId) => { 227 | dispatch( 228 | _unlinkSlots({ 229 | input: { 230 | elementId: element.id, 231 | slotId 232 | }, 233 | output: { 234 | elementId: outputElementId, 235 | sourceElementId: element.id 236 | } 237 | }) 238 | ) 239 | }) 240 | } 241 | 242 | if(element.componentName == BRICK) { 243 | Object.keys(element.inputSlots).forEach((slotId) => { 244 | const slot = element.inputSlots[slotId] 245 | 246 | if(slot.value) { 247 | dispatch( 248 | _unlinkSlots({ 249 | input: slot.value, 250 | output: { 251 | elementId: element.id, 252 | slotId: slot.id 253 | }, 254 | }) 255 | ) 256 | } 257 | }) 258 | } 259 | 260 | dispatch(removeSelectedElement()) 261 | dispatch(_uneval(elementId)) 262 | dispatch(_removeElement(elementId)) 263 | } 264 | } 265 | 266 | const _removeElement = (elementId) => { 267 | return { 268 | type: REMOVE_ELEMENT, 269 | payload: { 270 | elementId 271 | } 272 | } 273 | } 274 | 275 | const _uneval = (elementId) => { 276 | return { 277 | type: UNEVALUATE, 278 | payload: elementId 279 | } 280 | } 281 | 282 | const _unlinkSlots = (element) => { 283 | return { 284 | type: UNLINK_SLOTS, 285 | payload: { 286 | input: element.input, 287 | output: element.output 288 | } 289 | } 290 | } 291 | 292 | export const removeSelectedElement = () => { 293 | return { 294 | type: REMOVE_SELECTED_ELEMENT 295 | } 296 | } 297 | 298 | export const addUnitTest = () => { 299 | return (dispatch, getState) => { 300 | dispatch(removeSelectedElement()) 301 | dispatch(_addUnitTest()) 302 | } 303 | } 304 | 305 | const _addUnitTest = () => { 306 | return { 307 | type: ADD_UNIT_TEST 308 | } 309 | } 310 | 311 | export const changePrimitiveValue = (elementId, newValue) => { 312 | return (dispatch, getState) => { 313 | const { workspace } = getState() 314 | const primitive = workspace.entities[elementId] 315 | const { outputElementIds } = primitive.outputSlots[elementId] 316 | 317 | dispatch(_changePrimitiveValue(elementId, newValue)) 318 | 319 | unique(outputElementIds).forEach((outputElementId) => 320 | dispatch(_evalAllWorkspacesIfNeeded(outputElementId)) 321 | ) 322 | } 323 | } 324 | 325 | const _changePrimitiveValue = (elementId, newValue) => { 326 | return { 327 | type: CHANGE_PRIMITIVE_VALUE, 328 | payload: { 329 | elementId, 330 | newValue 331 | } 332 | } 333 | } 334 | 335 | export const changeTestNodeType = (elementId, newType, workspaceIndex) => { 336 | return (dispatch, getState) => { 337 | const { workspace } = getState() 338 | const testNode = workspace.entities[elementId] 339 | 340 | dispatch(_changeTestNodeType(testNode, newType, workspaceIndex)) 341 | } 342 | } 343 | 344 | const _changeTestNodeType = (testNode, newType, workspaceIndex) => { 345 | return { 346 | type: CHANGE_TEST_NODE_TYPE, 347 | payload: { 348 | componentName: testNode.componentName, 349 | elementId: testNode.id, 350 | newType, 351 | workspaceIndex 352 | } 353 | } 354 | } 355 | 356 | export const changeTestNodeValue = (elementId, newValue, workspaceIndex) => { 357 | return (dispatch, getState) => { 358 | const { workspace } = getState() 359 | const testNode = workspace.entities[elementId] 360 | 361 | dispatch(_changeTestNodeValue(testNode, newValue, workspaceIndex)) 362 | 363 | if(testNode.outputSlots){ 364 | const { outputElementIds } = testNode.outputSlots[elementId] 365 | 366 | unique(outputElementIds).forEach((outputElementId) => 367 | dispatch(_evalAllWorkspacesIfNeeded(outputElementId)) 368 | ) 369 | } 370 | } 371 | } 372 | 373 | const _changeTestNodeValue = (testNode, newValue, workspaceIndex) => { 374 | return { 375 | type: CHANGE_TEST_NODE_VALUE, 376 | payload: { 377 | componentName: testNode.componentName, 378 | elementId: testNode.id, 379 | newValue, 380 | workspaceIndex 381 | } 382 | } 383 | } 384 | 385 | export const removeUnitTest = (workspaceIndex) => { 386 | return (dispatch, getState) => { 387 | dispatch(removeSelectedElement()) 388 | dispatch(_removeUnitTest(workspaceIndex)) 389 | } 390 | } 391 | 392 | const _removeUnitTest = (workspaceIndex) => { 393 | return { 394 | type: REMOVE_UNIT_TEST, 395 | payload: workspaceIndex 396 | } 397 | } 398 | -------------------------------------------------------------------------------- /LICENSE-AGPL: -------------------------------------------------------------------------------- 1 | GNU AFFERO GENERAL PUBLIC LICENSE 2 | Version 3, 19 November 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc.