techttiru
commented
2 years ago here is the code that i am using.
import 'dart:js';
import 'package:gojs/gojs.dart';
import 'dart:html' as html;
void main() {
var diagram = html.document.getElementById('diagram');
var palette = html.document.getElementById('palette');
try {
var god = Diagram(diagram!)
..linkDrawn = allowInterop(showLinkLabel)
..linkRelinked = allowInterop(showLinkLabel);
god.nodeTemplateMap.add(
'', // the default category
nodeStyle()
..type = Panel.table
..addAll([
Panel()
..type = Panel.auto
..addAll([
Shape()
..figure = 'Rectangle'
..fill = '#282c34'
..stroke = '#00A9C9'
..strokeWidth = 3.5
..bind(Binding('figure', 'figure')),
textStyle()
..margin = 8
..maxSize = Size(160, nan)
..wrap = TextBlock.wrapFit
..editable = true
..bind(Binding('text').makeTwoWay())
]),
makePort('T', Spot.top, Spot.topSide, false, true),
makePort('L', Spot.left, Spot.leftSide, true, true),
makePort('R', Spot.right, Spot.rightSide, true, true),
makePort('B', Spot.bottom, Spot.bottomSide, true, false)
]));
god.nodeTemplateMap.add(
'Conditional',
nodeStyle()
..type = Panel.table
..addAll([
Panel()
..type = Panel.auto
..addAll([
Shape()
..figure = 'Diamond'
..fill = '#282c34'
..stroke = '#00A9C9'
..strokeWidth = 3.5
..bind(Binding('figure', 'figure')),
textStyle()
..margin = 8
..maxSize = Size(160, nan)
..wrap = TextBlock.wrapFit
..editable = true
..bind(Binding('text').makeTwoWay())
]),
makePort('T', Spot.top, Spot.top, false, true),
makePort('L', Spot.left, Spot.left, true, true),
makePort('R', Spot.right, Spot.right, true, true),
makePort('B', Spot.bottom, Spot.bottom, true, false)
]));
god.nodeTemplateMap.add(
'Start',
nodeStyle()
..type = Panel.table
..addAll([
Panel()
..type = Panel.auto
..addAll([
Shape()
..figure = 'Circle'
..fill = '#282c34'
..stroke = '#09d3ac'
..strokeWidth = 3.5
..desiredSize = Size(70, 70),
textStyle('Start')..bind(Binding('text'))
]),
makePort('L', Spot.left, Spot.left, true, false),
makePort('R', Spot.right, Spot.right, true, false),
makePort('B', Spot.bottom, Spot.bottom, true, false)
]));
god.nodeTemplateMap.add(
'End',
nodeStyle()
..type = Panel.table
..addAll([
(Panel()
..type = Panel.auto
..addAll([
Shape()
..figure = 'Circle'
..fill = '#282c34'
..stroke = '#DC3C00'
..strokeWidth = 3.5
..desiredSize = Size(70, 70),
textStyle('End')..bind(Binding('text'))
])),
makePort('T', Spot.top, Spot.top, false, true),
makePort('L', Spot.left, Spot.left, false, true),
makePort('R', Spot.right, Spot.right, false, true)
]));
Shape.defineFigureGenerator('File', allowInterop((shape, w, h) {
var geo = Geometry();
var fig = PathFigure(0, 0, true); // starting point
geo.add(fig);
fig.addAll([
PathSegment(PathSegment.line, .75 * w, 0),
PathSegment(PathSegment.line, w, .25 * h),
PathSegment(PathSegment.line, w, h),
PathSegment(PathSegment.line, 0, h).close()
]);
var fig2 = PathFigure(.75 * w, 0, false);
geo.add(fig2);
// The Fold
fig2.addAll([
PathSegment(PathSegment.line, .75 * w, .25 * h),
PathSegment(PathSegment.line, w, .25 * h)
]);
geo
..spot1 = Spot(0, .25)
..spot2 = Spot.bottomRight;
return geo;
}));
god.nodeTemplateMap.add(
'Comment',
nodeStyle()
..type = Panel.auto
..addAll([
Shape()
..figure = 'File'
..fill = '#282c34'
..stroke = '#DEE0A3'
..strokeWidth = 3,
textStyle()
..margin = 8
..maxSize = Size(200, nan)
..wrap = TextBlock.wrapFit
..textAlign = 'center'
..editable = true
..bind(Binding('text').makeTwoWay())
]));
god.linkTemplate = Link()
..routing = Link.avoidsNodes
..curve = Link.jumpOver
..corner = 5
..toShortLength = 4
..relinkableFrom = true
..relinkableTo = true
..reshapable = true
..resegmentable = true
// mouse-overs subtly highlight links:
..mouseEnter = allowInterop(([e, link, k]) {
(link.findObject('HIGHLIGHT') as Shape).stroke = 'rgba(30,144,255,0.2)';
})
..mouseLeave = allowInterop(([e, link, k]) {
(link.findObject('HIGHLIGHT') as Shape).stroke = 'transparent';
})
..selectionAdorned = false
..bind(Binding('points').makeTwoWay())
..addAll([
Shape() // the highlight shape, normally transparent
..isPanelMain = true
..strokeWidth = 8
..stroke = 'transparent'
..name = 'HIGHLIGHT',
Shape() // the link path shape
..isPanelMain = true
..strokeWidth = 2
..stroke = 'gray'
..bind(Binding('stroke', 'isSelected', allowInterop((sel, [k]) {
// return 'string';
return sel ? 'dodgerblue' : 'gray';
})).ofObject()),
Shape() // the arrowhead
..toArrow = 'standard'
..strokeWidth = 0
..fill = 'gray',
Panel()
..type = Panel.auto
..visible = false
..name = 'LABEL'
..segmentIndex = 2
..segmentFraction = 0.5
..bind(Binding('visible', 'visible').makeTwoWay())
..addAll([
Shape()
..figure = 'RoundedRectangle' // the label shape
..fill = '#F8F8F8'
..strokeWidth = 0,
TextBlock()
..text = 'Yes'
..textAlign = 'center'
..font = '10pt helvetica, arial, sans-serif'
..stroke = '#333333'
..editable = true
..bind(Binding('text').makeTwoWay())
])
]);
god.toolManager.linkingTool.temporaryLink.routing = Link.orthogonal;
god.toolManager.relinkingTool.temporaryLink.routing = Link.orthogonal;
// load
var load = '''
{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "loc":"-5 75", "text":"Preheat oven to 375 F"},
{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
{"key":2, "loc":"175 200", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":3, "loc":"175 290", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
{"key":4, "loc":"175 380", "text":"Press evenly into ungreased 15x10x1 pan"},
{"key":5, "loc":"355 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
{"key":6, "loc":"175 450", "text":"Sprinkle nuts on top"},
{"key":7, "loc":"175 515", "text":"Bake for 25 minutes and let cool"},
{"key":8, "loc":"175 585", "text":"Cut into rectangular grid"},
{"key":-2, "category":"End", "loc":"175 660", "text":"Enjoy!"}
],
"linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
{"from":3, "to":4, "fromPort":"B", "toPort":"T"},
{"from":4, "to":6, "fromPort":"B", "toPort":"T"},
{"from":6, "to":7, "fromPort":"B", "toPort":"T"},
{"from":7, "to":8, "fromPort":"B", "toPort":"T"},
{"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
{"from":5, "to":4, "fromPort":"B", "toPort":"T"},
{"from":0, "to":4, "fromPort":"B", "toPort":"T"}
]}
''';
god.model = Model.fromJson(load);
var buf = '''
{ "class": "go.GraphLinksModel",
"nodeDataArray": [{"category": "Start", "text": "Start"},
{"text": "Step"},
{"category": "Conditional", "text": "???"},
{"category": "End", "text": "End"},
{"category": "Comment", "text": "Comment"}]
}
''';
Palette(palette!)
..nodeTemplateMap = god.nodeTemplateMap
//..model = LinksModel(lm)
..model = Model.fromJson(buf)
..initialAnimationStarting = allowInterop(animateFadeDown)
..animationManager.initialAnimationStyle = AnimationManager.none;
} catch (e) {
print('FlowChart example error: $e');
html.window.console.error(e);
} finally {
print('Done! :D');
}
}
void animateFadeDown(e) {
var diagram = e.diagram;
var animation = Animation();
animation.isViewportUnconstrained =
true; // So Diagram positioning rules let the animation start off-screen
animation.easing = Animation.easeOutExpo;
animation.duration = 900;
// Fade "down", in other words, fade in from above
animation.add(diagram, 'position', diagram.position.copy().offset(0, 200),
diagram.position);
animation.add(diagram, 'opacity', 0, 1);
animation.start();
}
void showLinkLabel(e) {
var label = e.subject.findObject('LABEL');
if (label == null) {
label.visible = (e.subject.fromNode.data.category == 'Conditional');
}
}
Node nodeStyle() => Node()
..locationSpot = Spot.center
..bind(Binding('location', 'loc', Point.parse).makeTwoWay(Point.stringify));
TextBlock textStyle([String? text]) => TextBlock()
..font = 'bold 11pt Lato, Helvetica, Arial, sans-serif'
..stroke = '#F8F8F8'
..text = text ?? undefined;
Shape makePort(
String name, Spot align, Spot spot, dynamic output, dynamic input) {
var horizontal = align.equals(Spot.top) || align.equals(Spot.bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return Shape()
..fill = 'transparent' // changed to a color in the mouseEnter event handler
..strokeWidth = 0 // no stroke
..width =
horizontal ? nan : 8 // if not stretching horizontally, just 8 wide
..height =
!horizontal ? nan : 8 // if not stretching vertically, just 8 tall
..alignment = align // align the port on the main Shape
..stretch = (horizontal ? GraphObject.horizontal : GraphObject.vertical)
..portId = name // declare this object to be a "port"
..fromSpot = spot // declare where links may connect at this port
..fromLinkable = output // declare whether the user may draw links from here
..toSpot = spot // declare where links may connect at this port
..toLinkable = input // declare whether the user may draw links to here
..cursor =
'pointer' // show a different cursor to indicate potential link point
..mouseEnter = allowInterop(([e, port, k]) {
// the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.5)';
})
..mouseLeave = allowInterop(([e, port, k]) {
port.fill = 'transparent';
});
}
my index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="sample_gojs_project">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<!-- <div style="width: 100%; display: flex; justify-content: space-between"> -->
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="palette"
style="width: 100px; margin-right: 2px; background-color: #282c34;"></div>
<div id="diagram"
style="flex-grow: 1; height: 750px; background-color: #282c34;"></div>
</div>
<div>
<!-- </div> -->
<div>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
i also tried
<script src="https://unpkg.com/gojs/release/go.js"></script>
here is the output that i see.
I am also seeing the below message in console.
Flutter Web Bootstrap: Programmatic
FlowChart example error: Expected a value of type 'String', but got one of type 'Null'
null
Done! :D
A message on the flutter/keyevent channel was discarded before it could be handled.
This happens when a plugin sends messages to the framework side before the framework has had an opportunity to register a listener. See the ChannelBuffers API documentation for details on how to configure the channel to expect more messages, or to expect messages to get discarded:
https://api.flutter.dev/flutter/dart-ui/ChannelBuffers-class.htmlthe below error comes, when i debug the below code.
god.nodeTemplateMap.add(
FlowChart example error: Expected a value of type 'String', but got one of type 'Null'
Please share your comments if i am doing something wrong.
Hi,
i followed the below steps in flutter web but gets the error.
Created new flutter web project.
Delete all the code in main.dart
add gojs dependency (2.0.0)
added go.js in index.html under header section as below.
added div section as below in index.html
went to this location and copied the entire code from main.dart and replaced in my project main.dart
https://github.com/jodinathan/gojs_dart/blob/master/example/flowchart/web/main.dartthen run main.
first time i get null error and second time i get expected String but got one of type 'Null'.
note: full code example that was given in the below link is not working. because it shows error in GoJSDiagram, GoJSPanel as these are not available classes.
https://pub.dev/packages/gojscan you please check and share your comments that what i am doing wrong here?