Skip to content

Commit 8f7fed1

Browse files
AndrewJSchoenAndrewJSchoen
committed
v0.1.4
1 parent c13057d commit 8f7fed1

26 files changed

+1919
-86
lines changed

‎dist/components/Block/ExtraBar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ var FunctionButtonExtra = function FunctionButtonExtra(_ref2) {
5858
focusIndicator: false,
5959
hoverIndicator: false,
6060
disabled: interactionDisabled,
61-
plain: !inTopLevel,
61+
plain: true,
6262
style: {
6363
padding: inTopLevel ? null : '5pt 10pt 5pt 10pt'
6464
},

‎dist/components/Block/VisualBlock.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,25 @@ var VisualBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
117117
display: 'flex',
118118
alignItems: 'center'
119119
}
120+
}, /*#__PURE__*/_react.default.createElement(_grommet.ThemeContext.Extend, {
121+
value: {
122+
global: {
123+
edgeSize: {
124+
large: '20pt'
125+
}
126+
}
127+
}
120128
}, /*#__PURE__*/_react.default.createElement(_grommet.TextInput, {
121129
size: "small",
122130
icon: /*#__PURE__*/_react.default.createElement(Icon, null),
123131
value: name,
132+
textAlign: "start",
124133
focusIndicator: false,
125134
disabled: interactionDisabled || !data.editing,
126135
onChange: function onChange(e) {
127136
return updateItemName(data.id, e.target.value);
128137
}
129-
}), (blockSpec === null || blockSpec === void 0 ? void 0 : blockSpec.extras) && /*#__PURE__*/_react.default.createElement(_ExtraBar.ExtraBar, {
138+
})), (blockSpec === null || blockSpec === void 0 ? void 0 : blockSpec.extras) && /*#__PURE__*/_react.default.createElement(_ExtraBar.ExtraBar, {
130139
fieldInfo: fieldInfo,
131140
parentId: parentId,
132141
interactionDisabled: interactionDisabled,

‎dist/components/Canvas.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ var _Constants = require("./Constants");
2929

3030
var _Generators = require("./Generators");
3131

32+
var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));
33+
3234
var _excluded = ["highlightColor"];
3335

3436
var CanvasNode = function CanvasNode(_ref) {
@@ -47,7 +49,8 @@ var CanvasNode = function CanvasNode(_ref) {
4749
};
4850

4951
var Canvas = function Canvas(_ref2) {
50-
var highlightColor = _ref2.highlightColor;
52+
var highlightColor = _ref2.highlightColor,
53+
drawerWidth = _ref2.drawerWidth;
5154
var nodes = (0, _ProgrammingContext.useProgrammingStore)(function (state) {
5255
return Object.values(state.programData).map(function (data) {
5356
var _state$programSpec$ob, _state$programSpec$ob2;
@@ -108,7 +111,13 @@ var Canvas = function Canvas(_ref2) {
108111
});
109112

110113
var _useReactFlow = (0, _reactFlowRenderer.useReactFlow)(),
111-
project = _useReactFlow.project;
114+
project = _useReactFlow.project,
115+
getZoom = _useReactFlow.getZoom;
116+
117+
var _useMeasure = (0, _reactUseMeasure.default)(),
118+
_useMeasure2 = (0, _slicedToArray2.default)(_useMeasure, 2),
119+
ref = _useMeasure2[0],
120+
bounds = _useMeasure2[1];
112121

113122
var drop = (0, _reactDnd.useDrop)({
114123
accept: acceptTypes,
@@ -117,14 +126,17 @@ var Canvas = function Canvas(_ref2) {
117126
},
118127
drop: function drop(item, monitor) {
119128
var clientOffset = monitor.getClientOffset();
129+
console.log(monitor); // const zoom = getZoom();
130+
120131
var position = project({
121-
x: clientOffset.x - 350,
122-
y: clientOffset.y
132+
x: clientOffset.x - bounds.left - 50,
133+
y: clientOffset.y - bounds.top
123134
});
124135
createPlacedNode(item.data, position.x, position.y);
125136
}
126137
})[1];
127138
return /*#__PURE__*/_react.default.createElement("div", {
139+
ref: ref,
128140
style: {
129141
backgroundColor: "black",
130142
display: 'flex',
@@ -145,7 +157,7 @@ var Canvas = function Canvas(_ref2) {
145157
nodes: nodes,
146158
onConnect: function onConnect(_) {},
147159
onNodesChange: moveNode,
148-
defaultZoom: 0.5,
160+
defaultZoom: 1,
149161
fitView: true,
150162
snapToGrid: true,
151163
snapGrid: [30, 30]

‎dist/components/Drawer.js‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ var _Constants = require("./Constants");
3131

3232
var _Generators = require("./Generators");
3333

34+
var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));
35+
3436
var TipContent = function TipContent(_ref) {
3537
var message = _ref.message;
3638
return /*#__PURE__*/_react.default.createElement(_grommet.Box, {
@@ -56,13 +58,24 @@ var TipContent = function TipContent(_ref) {
5658
};
5759

5860
var Drawer = function Drawer(_ref2) {
59-
var highlightColor = _ref2.highlightColor;
61+
var highlightColor = _ref2.highlightColor,
62+
drawerWidth = _ref2.drawerWidth;
6063

6164
var _useState = (0, _react.useState)(''),
6265
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
6366
searchTerm = _useState2[0],
6467
setSearchTerm = _useState2[1];
6568

69+
var _useMeasure = (0, _reactUseMeasure.default)(),
70+
_useMeasure2 = (0, _slicedToArray2.default)(_useMeasure, 2),
71+
drawerRef = _useMeasure2[0],
72+
drawerBounds = _useMeasure2[1];
73+
74+
var _useMeasure3 = (0, _reactUseMeasure.default)(),
75+
_useMeasure4 = (0, _slicedToArray2.default)(_useMeasure3, 2),
76+
headerRef = _useMeasure4[0],
77+
headerBounds = _useMeasure4[1];
78+
6679
var blocks = (0, _ProgrammingContext.useProgrammingStore)(function (store) {
6780
var blocks = [];
6881

@@ -103,11 +116,11 @@ var Drawer = function Drawer(_ref2) {
103116
return store.setActiveDrawer;
104117
});
105118
var drawerStyle = (0, _web.useSpring)({
106-
width: activeDrawer !== null ? 235 : 0,
119+
width: activeDrawer !== null ? drawerWidth : 0,
107120
config: _reactSpring.config.stiff
108121
});
109122
var sidebarStyle = (0, _web.useSpring)({
110-
width: activeDrawer !== null ? 285 : 50,
123+
width: activeDrawer !== null ? drawerWidth + 50 : 50,
111124
config: _reactSpring.config.stiff
112125
});
113126
return /*#__PURE__*/_react.default.createElement(_web.animated.div, {
@@ -163,12 +176,14 @@ var Drawer = function Drawer(_ref2) {
163176
icon: /*#__PURE__*/_react.default.createElement(Icon, null)
164177
});
165178
})), /*#__PURE__*/_react.default.createElement(_web.animated.div, {
179+
ref: drawerRef,
166180
style: (0, _objectSpread2.default)({
167181
height: '100%',
168182
backgroundColor: '#2f2f2f',
169183
overflow: 'hidden'
170184
}, drawerStyle)
171185
}, activeDrawer !== null && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_grommet.Box, {
186+
ref: headerRef,
172187
background: "#444444",
173188
direction: "column",
174189
pad: "small",
@@ -195,24 +210,29 @@ var Drawer = function Drawer(_ref2) {
195210
onChange: function onChange(e) {
196211
return setSearchTerm(e.target.value);
197212
}
198-
})), /*#__PURE__*/_react.default.createElement(_grommet.List, {
213+
})), /*#__PURE__*/_react.default.createElement(_grommet.Box, {
214+
style: {
215+
height: drawerBounds.height - headerBounds.height,
216+
overflowY: 'scroll'
217+
}
218+
}, /*#__PURE__*/_react.default.createElement(_grommet.List, {
199219
data: blocks,
200220
border: false,
201221
style: {
202-
padding: 5,
203-
width: 235
222+
padding: 5
204223
},
205224
margin: "none",
206225
pad: "none"
207226
}, function (block, idx) {
208227
return /*#__PURE__*/_react.default.createElement(_grommet.Box, {
228+
key: idx,
209229
animation: {
210230
type: 'fadeIn',
211231
delay: idx * 100
212232
},
213233
style: {
214234
marginBottom: 5,
215-
width: 225
235+
width: drawerWidth - 10
216236
}
217237
}, /*#__PURE__*/_react.default.createElement(_Block.Block, {
218238
staticData: block,
@@ -228,7 +248,7 @@ var Drawer = function Drawer(_ref2) {
228248
isSpawner: true
229249
}
230250
}));
231-
}))));
251+
})))));
232252
};
233253

234254
exports.Drawer = Drawer;

‎dist/components/Environment.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ var _Drawer = require("./Drawer");
1515

1616
var _DragLayer = require("./DragLayer");
1717

18-
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
18+
var _rdndmbHtml5ToTouch = require("rdndmb-html5-to-touch");
19+
20+
var _reactDndMultiBackend = require("react-dnd-multi-backend");
1921

2022
var _reactDnd = require("react-dnd");
2123

@@ -25,9 +27,13 @@ var _grommet = require("grommet");
2527

2628
var _reactFlowRenderer = require("react-flow-renderer");
2729

30+
// import { HTML5Backend } from "react-dnd-html5-backend";
2831
function Environment(_ref) {
2932
var store = _ref.store,
30-
highlightColor = _ref.highlightColor;
33+
highlightColor = _ref.highlightColor,
34+
height = _ref.height,
35+
width = _ref.width,
36+
drawerWidth = _ref.drawerWidth;
3137
var theme = {
3238
name: 'SimpleVP',
3339
rounding: 4,
@@ -51,7 +57,8 @@ function Environment(_ref) {
5157
extend: {
5258
backgroundColor: '#FFFFFF55'
5359
}
54-
}
60+
} // edgeSize: {large: 50, small: 10, medium: 15}
61+
5562
},
5663
button: {
5764
border: {
@@ -87,21 +94,22 @@ function Environment(_ref) {
8794
}, /*#__PURE__*/_react.default.createElement(_ProgrammingContext.ProgrammingProvider, {
8895
store: store
8996
}, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
90-
backend: _reactDndHtml5Backend.HTML5Backend
97+
backend: _reactDndMultiBackend.MultiBackend,
98+
options: _rdndmbHtml5ToTouch.HTML5toTouch
9199
}, /*#__PURE__*/_react.default.createElement("div", {
92100
style: {
93-
position: "absolute",
94101
padding: 0,
95102
margin: 0,
96-
height: "100%",
97-
width: "100%",
98-
display: "flex",
99-
flexDirection: "row"
103+
display: 'flex',
104+
height: height,
105+
width: width
100106
}
101107
}, /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
102-
highlightColor: highlightColor
108+
highlightColor: highlightColor,
109+
drawerWidth: drawerWidth ? drawerWidth : 235
103110
}), /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.ReactFlowProvider, null, /*#__PURE__*/_react.default.createElement(_Canvas.Canvas, {
104-
highlightColor: highlightColor
111+
highlightColor: highlightColor,
112+
drawerWidth: drawerWidth ? drawerWidth : 235
105113
}))), /*#__PURE__*/_react.default.createElement(_DragLayer.DragLayer, {
106114
highlightColor: highlightColor
107115
}))));

‎dist/components/Generators.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ var instanceTemplateFromSpec = function instanceTemplateFromSpec(type, objectSpe
1919
type: type,
2020
dataType: _Constants.DATA_TYPES.INSTANCE,
2121
properties: {},
22-
name: "New ".concat(objectSpec.name).concat(isArg ? ' Argument' : ''),
22+
name: "".concat(objectSpec.instanceBlock.hideNewPrefix ? '' : 'New ').concat(objectSpec.name).concat(isArg ? ' Argument' : ''),
2323
canDelete: true,
2424
canEdit: true,
2525
editing: false,

‎dist/components/defaultStore.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,8 @@ var ProgrammingSlice = function ProgrammingSlice(set, get) {
353353
set(function (state) {
354354
var id = generateUuid(argumentType);
355355
var template = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _Generators.instanceTemplateFromSpec)(argumentType, state.programSpec.objectTypes[argumentType], true)), {}, {
356-
id: id
356+
id: id,
357+
dataType: _.DATA_TYPES.REFERENCE
357358
});
358359
state.programData[id] = template;
359360
state.programData[parentFunctionId].arguments.push(id);

0 commit comments

Comments
 (0)