0.4.1

Author: AndrewJSchoen

dist/components/Canvas.js

@@ -55,7 +55,7 @@ var CanvasNode = function CanvasNode(_ref) {
 
 var Canvas = function Canvas(_ref2) {
   var highlightColor = _ref2.highlightColor,
-      drawerWidth = _ref2.drawerWidth;
+      snapToGrid = _ref2.snapToGrid;
   var locked = (0, _ProgrammingContext.useProgrammingStore)(function (state) {
     return state.locked;
   });
@@ -173,7 +173,7 @@ var Canvas = function Canvas(_ref2) {
     onNodesChange: moveNode,
     defaultZoom: 1,
     fitView: true,
-    snapToGrid: true,
+    snapToGrid: snapToGrid,
     snapGrid: [30, 30]
   }, /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.MiniMap, {
     maskColor: "#1a192b44",

dist/components/Environment.js

@@ -35,7 +35,8 @@ function Environment(_ref) {
       highlightColor = _ref.highlightColor,
       height = _ref.height,
       width = _ref.width,
-      drawerWidth = _ref.drawerWidth;
+      drawerWidth = _ref.drawerWidth,
+      snapToGrid = _ref.snapToGrid;
   var theme = (0, _theme.getTheme)(highlightColor);
   return /*#__PURE__*/_react.default.createElement(_grommet.Grommet, {
     theme: theme
@@ -57,7 +58,7 @@ function Environment(_ref) {
     drawerWidth: drawerWidth ? drawerWidth : 235
   }), /*#__PURE__*/_react.default.createElement(_reactFlowRenderer.ReactFlowProvider, null, /*#__PURE__*/_react.default.createElement(_Canvas.Canvas, {
     highlightColor: highlightColor,
-    drawerWidth: drawerWidth ? drawerWidth : 235
+    snapToGrid: snapToGrid
   }))), /*#__PURE__*/_react.default.createElement(_DragLayer.DragLayer, {
     highlightColor: highlightColor
   }))));

dist/stories/Environment.stories.js

@@ -86,6 +86,7 @@ exports.Fullscreen = Fullscreen;
 Fullscreen.args = {
   highlightColor: '#ff00ff',
   drawerWidth: 235,
+  snapToGrid: true,
   drawers: [{
     title: "Structures",
     dataType: _components.DATA_TYPES.INSTANCE,

docs/iframe.html

@@ -345,4 +345,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.568ca8e6.iframe.bundle.js"></script><script src="939.71356641.iframe.bundle.js"></script><script src="main.01f1ae31.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.568ca8e6.iframe.bundle.js"></script><script src="939.71356641.iframe.bundle.js"></script><script src="main.1dcd8afd.iframe.bundle.js"></script></body></html>

docs/main.01f1ae31.iframe.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "simple-vp",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/index.js",
   "private": false,
   "files": [

docs/main.1dcd8afd.iframe.bundle.js

@@ -23,7 +23,7 @@ const CanvasNode = ({ data }) => {
   )
 };
 
-export const Canvas = ({ highlightColor, drawerWidth }) => {
+export const Canvas = ({ highlightColor, snapToGrid }) => {
   const locked = useProgrammingStore(state=>state.locked);
   const setLocked = useProgrammingStore(state=>state.setLocked);
   const nodes = useProgrammingStore((state) =>
@@ -103,7 +103,7 @@ export const Canvas = ({ highlightColor, drawerWidth }) => {
         onNodesChange={moveNode}
         defaultZoom={1}
         fitView
-        snapToGrid={true}
+        snapToGrid={snapToGrid}
         snapGrid={[30, 30]}
       >
         <MiniMap

package.json

@@ -11,7 +11,7 @@ import { Grommet } from "grommet";
 import {ReactFlowProvider} from "react-flow-renderer";
 import { getTheme } from './theme';
 
-export default function Environment({ store, highlightColor, height, width, drawerWidth }) {
+export default function Environment({ store, highlightColor, height, width, drawerWidth, snapToGrid }) {
 
   const theme = getTheme(highlightColor);
 
@@ -30,7 +30,7 @@ export default function Environment({ store, highlightColor, height, width, draw
           >
             <Drawer highlightColor={highlightColor} drawerWidth={drawerWidth ? drawerWidth : 235}/>
             <ReactFlowProvider>
-              <Canvas highlightColor={highlightColor} drawerWidth={drawerWidth ? drawerWidth : 235}/>
+              <Canvas highlightColor={highlightColor} snapToGrid={snapToGrid}/>
             </ReactFlowProvider>
           </div>
           <DragLayer highlightColor={highlightColor}/>

src/components/Canvas.jsx

@@ -36,6 +36,7 @@ export const Fullscreen = Template.bind({});
 Fullscreen.args = {
   highlightColor: '#ff00ff',
   drawerWidth: 235,
+  snapToGrid: true,
   drawers: [
     { title: "Structures", dataType: DATA_TYPES.INSTANCE, objectTypes: ["functionType", "operationType", "blockType"], icon: FiClipboard },
     { title: "Functions", dataType: DATA_TYPES.CALL, objectType: 'functionType', icon: FiLogOut },