scale factor

[muhammadumeer]

how to implement scale on direct graph, i want to zoom in and zoom out.

InteractiveViewer(
                  scaleEnabled: true,
                  scaleFactor: 3,
                  constrained: false,
                  child: IntrinsicHeight(
                    child: IntrinsicWidth(
                      child: AbsorbPointer(
                        child: Container(
                          padding: EdgeInsets.only(left: 2.w,right: 2.w,bottom: 7.w),
                          child: DirectGraph(
                              list: list,
                              cellWidth: 100.0,
                              cellPadding: 8.0,
                              minScale: 0.25,
                              maxScale: 3.5,
                              onNodeTapUp: (details,node){

                                print("tapped");
                              },
                              orientation: MatrixOrientation.Vertical,
                              builder: (ctx, node) {
 return Container(
                             child:Text("node");
                              },
                              paintBuilder: (edge) {
                                var p = Paint()
                                  ..color = Colors.blueAccent
                                  ..style = PaintingStyle.stroke
                                  ..strokeCap = StrokeCap.round
                                  ..strokeJoin = StrokeJoin.round
                                  ..strokeWidth = 3;
                                return p;
                              },
                            ),
                        ),
                      ),
                    ),
                  ),
                ),

you can see i am using absorb pointer to allow intereactiveViewer to function otherwise interactiveViewer dont function and if i use absorb pointer onNodeTapUp dont function.

[Anton Lempiy]

You don't need to wrap DirectGraph in InteractiveViewer. DirectGraph internally uses InteractiveViewer and Stack layers to control Gesture propagation.
DirectGraph supports scaling with pan gestures by default if minScale != maxScale

[Sohaib Baig]

wouldn't it be better to leave interactive viewer creation to the users? It would allow users greater control. Currently I can zoom in on Flutter for Linux, but not out.

import 'package:flutter/material.dart';
import 'package:graphite/graphite.dart';

class Flowchart extends StatelessWidget {
  const Flowchart({super.key});
  static List<NodeInput> list = [
    NodeInput(id: '?0', next: [
      EdgeInput(outcome: '1'),
      EdgeInput(outcome: '2'),
    ]),
    NodeInput(id: '1', next: []),
    NodeInput(id: '2', next: []),
  ];
  @override
  Widget build(BuildContext context) => Scaffold(
    body: DirectGraph(
          list: list,
          centered: true,
          nodeBuilder: (context, node) => Container(
            decoration: BoxDecoration(
              borderRadius:
                  BorderRadius.circular(node.id.contains('?') ? 100 : 0),
              border: Border.all(),
            ),
          ),
          contactEdgesDistance: 0,
          minScale: 0.5,
          maxScale: 4,
          onNodeTapDown: (details, node, rect) => print(node.toJson()),
          defaultCellSize: const Size(100.0, 100.0),
          cellPadding: const EdgeInsets.all(20),
          orientation: MatrixOrientation.Vertical,
        ),
  );
}

[Anton Lempiy]

Using InteractiveViewer inside of DirectGraph is a forced measure related with impossibly to correctly propagate multitouch gestures from outside of InteractiveViewer to children TouchDetectionController. In order to make it work, graphite programatically transfers touch handlers from outside of InteractiveViewer to its children.
https://github.com/lempiy/flutter_graphite/blob/master/lib/graphite_canvas.dart#L555
I've tried to get rid of inner InteractiveViewer many times, but currently it looks impossible. More about this issue, here:
nateshmbhat/touchable#18

If scale is not working on some specific platform, it might be the problem or bug of flutter itself. Graphite just uses native gesture's libs and flutter should guaranty multi-platform transferability.

Anyways, I'll look into your issue and let you know.

[Anton Lempiy]

New property of touchable library gesturesToOverride 34 now allows to whitelist gestures to propagate to parent Widget. Thanks to this, InteractiveViewer was removed from internal dependancies and now it may be freely used as DirectGraph's parent widget in your application.

Upgrade lib to 1.1.0. And check out new examples.