Git Product home page Git Product logo

Comments (14)

rodydavis avatar rodydavis commented on September 26, 2024 1

The nice thing about a spec, is that there can be multiple implementations that all work together! 👍🏻

from jsoncanvas.

nileshtrivedi avatar nileshtrivedi commented on September 26, 2024 1

I had built a SVG-based graph dataset editor: https://codeberg.org/nilesh/grapher . Here is a demo site.

image

The design constraints were ability to import and export clean data, not requiring a server or accounts etc.

Will it be useful to add support for JSONCanvas format in this tool?

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024
node-demo.mov

from jsoncanvas.

nqthqn avatar nqthqn commented on September 26, 2024

@rodydavis — Could you render an edge's label property inside the nodes? Maybe with the use of a delimiter to accommodate labels in fromNode and toNode?

io.canvas —

{
  "nodes": [
    {
      "id": "A"
    },
    {
      "id": "B"
    },
    {
      "id": "C"
    }
  ],
  "edges": [
    {
      "id": "e1",
      "fromNode": "A",
      "toNode": "C",
      "label": "A side label :: C side label, from A"
    },
    {
      "id": "e2",
      "fromNode": "B",
      "toNode": "C",
      "label": "B side label :: C side label, from B"
    }
  ]
}

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

Specifically the extra information is needed to connect not just to a side, but to a specific input/output.

If I used the existing schema I could probably do the following:

{
  "nodes": [
    {
      "id": "node-1",
      "type": "number-value",
      "x": 36,
      "y": 48,
      "width": 176,
      "height": 68,
      "inputs": {
          "source": {
             "type": "number",
             "value": "1"
          }
      },
      "outputs": {
          "result": {
             "type": "number",
             "value": "#source"
          }
      }
    },
    {
      "id": "node-2",
      "type": "number-value",
      "x": 36,
      "y": 48,
      "width": 176,
      "height": 68,
      "inputs": {
          "source": {
             "type": "number",
             "value": "2"
          }
      },
      "outputs": {
          "result": {
             "type": "number",
             "value": "#source"
          }
      }
    },
    {
      "id": "node-3",
      "type": "number-add",
      "x": 36,
      "y": 48,
      "width": 176,
      "height": 68,
      "inputs": {
          "left": {
             "type": "number",
             "value": "0"
          },
          "right": {
             "type": "number",
             "value": "0"
          }
      },
      "outputs": {
          "result": {
             "type": "number",
             "value": "#left + #right"
          }
      }
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "fromNode": "node-1#result",
      "fromSide": "right",
      "fromEnd": "none",
      "toNode": "node-3#left",
      "toSide": "left",
      "toEnd": "arrow"
    },
    {
      "id": "edge-2",
      "fromNode": "node-2#result",
      "fromSide": "right",
      "fromEnd": "none",
      "toNode": "node-3#right",
      "toSide": "left",
      "toEnd": "arrow"
    }
  ]
}

This would required renderers to ignore everything after the # for fromNode and toNode, but would totally work

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

This would be a custom node type, with default edge rendering that if the editor supported it could map the edges directly to the inputs/outputs.

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

Could also be useful for projects like unit too:
https://github.com/samuelmtimbo/unit

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

Also good progress on flutter renderer:

Screenshot 2024-03-11 at 11 21 49 PM

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

Also found this interesting, might be asking for ports:
https://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/JSON+Graph+Format

from jsoncanvas.

jg-l avatar jg-l commented on September 26, 2024

node-demo.mov

This is super neat btw.

Can easily make custom Node, (obviously wouldn't be fully compliant to JSON Canvas spec by @kepano) with my library https://github.com/jg-l/json_canvas

The Node class is sealed right now, but easy to amend it as just an abstract class for more extensibility

class NumberNode extends Node {
  final num inValue;
  final num outValue;
  NumberNode({
    required this.inValue,
    required this.outValue,
    required super.id,
    required super.type,
    required super.x,
    required super.y,
    required super.width,
    required super.height,
    super.color,
  });
}

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

Here is the schema I created with dart_mappable:

https://gist.github.com/rodydavis/17a0a19c8d91a08e2674a57b93ba5259

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

I used a discriminatorKey to be able to add custom nodes in the future and support a know good fallback too

from jsoncanvas.

jg-l avatar jg-l commented on September 26, 2024

Your implementation is clean! I was hesitant to leverage a 3rd party package or build_runner in my implementation, at the cost of of more boilerplate though!

from jsoncanvas.

rodydavis avatar rodydavis commented on September 26, 2024

I think dart_mappable is a awesome compromise because it is easy to extend and adjust overtime!

from jsoncanvas.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.