jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.65k stars 722 forks source link

drawflow data format and cannot read property 'offsetWidth' of undefined #669

Closed ChrisKHil closed 1 year ago

ChrisKHil commented 1 year ago

Hello,

i am having a problem with the editor. It throws "drawflow data format and cannot read property 'offsetWidth' of undefined" when importing the data and when moving certain nodes. Ive worked out that it is probably related to connections between certain nodes in the importet data being faulty.

note that most of the connectors dont make any sense since they connect to inputs/outputs that dont exist and most input and output arrays dont start at input_1 or output_1 respectively. Yet most of the connectors work. Only the connection between nodes 4 and 7 is causing the error. Ive tried editing some of the node connections to connect to inputs/outputs that actually exist but that just caused more errors to appear. This really confuses me.

input: "{"result":"{\"drawflow\":{\"Home\":{\"data\":{\"1\":{\"typenode\":false,\"outputs\":{\"output_2\":{\"connections\":[{\"output\":\"input_1\",\"node\":\"2\"}]}},\"data\":{\"kind\":\"SOURCE_SERVICE\",\"ivmlVar\":\"driveBeckhoffOpc\",\"type\":\"OpcUaV1Connector\"},\"inputs\":{},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"1\",\"class\":\"node\"},\"2\":{\"typenode\":false,\"outputs\":{},\"data\":{\"kind\":\"SINK_SERVICE\",\"ivmlVar\":\"driveAppAasSink\",\"type\":\"JavaService\"},\"inputs\":{\"input_2\":{\"connections\":[{\"input\":\"output_1\",\"node\":\"1\"}]},\"input_3\":{\"connections\":[{\"input\":\"output_2\",\"node\":\"4\"}]}},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"2\",\"class\":\"node\"},\"3\":{\"typenode\":false,\"outputs\":{\"output_2\":{\"connections\":[{\"output\":\"input_1\",\"node\":\"4\"}]}},\"data\":{\"kind\":\"SOURCE_SERVICE\",\"ivmlVar\":\"driveLenzeMqtt\",\"type\":\"MqttV3Connector\"},\"inputs\":{},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"3\",\"class\":\"node\"},\"4\":{\"typenode\":false,\"outputs\":{\"output_2\":{\"connections\":[{\"output\":\"input_1\",\"node\":\"2\"}]},\"output_3\":{\"connections\":[{\"output\":\"input_2\",\"node\":\"5\"}]}},\"data\":{\"kind\":\"TRANSFORMATION_SERVICE\",\"ivmlVar\":\"driveLenzePythonAi\",\"type\":\"PythonService\"},\"inputs\":{\"input_2\":{\"connections\":[{\"input\":\"output_1\",\"node\":\"3\"}]},\"input_3\":{\"connections\":[{\"input\":\"output_2\",\"node\":\"7\"}]}},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"4\",\"class\":\"node\"},\"5\":{\"typenode\":false,\"outputs\":{},\"data\":{\"kind\":\"SINK_SERVICE\",\"ivmlVar\":\"driveDashboardMqtt\",\"type\":\"MqttV3Connector\"},\"inputs\":{\"input_2\":{\"connections\":[{\"input\":\"output_1\",\"node\":\"4\"}]}},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"5\",\"class\":\"node\"},\"6\":{\"typenode\":false,\"outputs\":{\"output_2\":{\"connections\":[{\"output\":\"input_1\",\"node\":\"7\"}]}},\"data\":{\"kind\":\"SOURCE_SERVICE\",\"ivmlVar\":\"driveMqttEnergy\",\"type\":\"MqttV3Connector\"},\"inputs\":{},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"6\",\"class\":\"node\"},\"7\":{\"typenode\":false,\"outputs\":{\"output_2\":{\"connections\":[{\"output\":\"input_1\",\"node\":\"4\"}]}},\"data\":{\"kind\":\"TRANSFORMATION_SERVICE\",\"ivmlVar\":\"driveEnergyAggregator\",\"type\":\"JavaService\"},\"inputs\":{\"input_2\":{\"connections\":[{\"input\":\"output_1\",\"node\":\"6\"}]}},\"name\":\"\",\"html\":\"<div><\\/div>\",\"id\":\"7\",\"class\":\"node\"}}},\"Other\":{\"data\":{}}}}"}"

jerosoler commented 1 year ago

How have you generated this JSON?

The inputs/outputs have to be in order, they always start with the number 1.

Cannot start at "input_2" or "output_2"

ChrisKHil commented 1 year ago

The JSON is from a colleague and i am not sure how it was generated.

Putting the inputs/outputs in order fixed the Problem. Interesting how most connections with faulty in- and outputs still worked tho, really threw me off. Anyways, Thank you mate