FlowChart example error: Expected a value of type 'String', but got one of type 'Null' #2

techttiru · 2022-10-27T02:19:48Z

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.

  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
  <script src="https://unpkg.com/gojs/release/go.js"></script>

added div section as below in index.html

<body>
  <div id="diagram"></div>
  <script>
    window.addEventListener('load', function(ev) {

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.dart
then 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/gojs

can you please check and share your comments that what i am doing wrong here?

The text was updated successfully, but these errors were encountered:

techttiru · 2022-10-29T06:00:58Z

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.html

the 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.

techttiru mentioned this issue Oct 29, 2022

Error: Cannot read property 'Diagram' of undefined #1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FlowChart example error: Expected a value of type 'String', but got one of type 'Null' #2

FlowChart example error: Expected a value of type 'String', but got one of type 'Null' #2

techttiru commented Oct 27, 2022

techttiru commented Oct 29, 2022

FlowChart example error: Expected a value of type 'String', but got one of type 'Null' #2

FlowChart example error: Expected a value of type 'String', but got one of type 'Null' #2

Comments

techttiru commented Oct 27, 2022

techttiru commented Oct 29, 2022