Skip to content

Commit

Permalink
Fix data translation (#22)
Browse files Browse the repository at this point in the history
Fixed some translation bugs.

## Passing edges as a prop to Reagent-flow component

It should be possible to pass a kebab-cased list of edges from Clojure
to reagent-flow, and the latter should be in charge of making any
translations needed. Currently, this works fine unless the edge maps
employ handles, the expected translation should be:

Expected: (CLJS) :source-handle -> (JS) sourceHandle
Currently: Simple Clojure to JS translation (clj-js function). No casing
translation.

### Solution
Use the clj->flowjs function to translate the list of edges.
{:edges (clj->flowjs (:edges params))}

## Translation back to ClojureScript

When translating lists back to Clojure, the flowjs->clj function doesn't
carry out any translation if the argument passed is a vector. This is
because Seq? only returns true if the parameter is a Clojure list.
However, the translation from JS arrays to Clojure is in the form of
Vectors, therefore when a vector is passed to seq? it returns false.

## Case translation to JS React-flow

React-flow uses camel casing for the list of nodes and edges. However,
the case translation employed by reagent flow right now is to
snake_case, which causes React-flow to not work as intended.
  • Loading branch information
Jorgelmh authored Jul 21, 2023
1 parent c028ecf commit ec0b4cf
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions index.org
Original file line number Diff line number Diff line change
Expand Up @@ -802,7 +802,7 @@ these processed lists.
(ns reagent-flow.core
"A ClojureScript library that wraps ReactFlow"
(:require
[camel-snake-kebab.core :refer [->kebab-case ->snake_case]]
[camel-snake-kebab.core :refer [->kebab-case ->camelCase]]
[clojure.set :refer [rename-keys]]
[clojure.string :as str]
[clojure.walk :refer [postwalk]]
Expand Down Expand Up @@ -843,14 +843,14 @@ helper-functions:
(let [obj (js->clj o :keywordize-keys true)]
(if (map? obj)
(change-keys obj ->kebab-case)
(if (seq? obj)
(if (vector? obj)
(map flowjs->clj obj)
obj))))

(defn- clj->flowjs
"Convert Clojure map into a JavaScript object with snake_cased keys."
"Convert Clojure map into a JavaScript object with camelCased keys."
[o]
(->> (change-keys o ->snake_case)
(->> (change-keys o ->camelCase)
(clj->js)))

(defn- apply-changes [f delta src]
Expand Down Expand Up @@ -891,8 +891,9 @@ the other state directly via atoms.
params (dissoc params :node-types :edge-types)]
(fn [[on-viewport-change on-viewport-start on-viewport-end & args]]
(let [[params & children] (->params args)
params (merge (dissoc params :node-types :edge-types)
params (merge (dissoc params :node-types :edge-types :edges)
(map-vals clj->js params)
{:edges (clj->flowjs (:edges params))}
(when node-types {:node-types node-types})
(when edge-types {:edge-types edge-types})
(when on-init {:on-init on-init})
Expand Down Expand Up @@ -986,7 +987,7 @@ client-code.
(defn- custom-node [{:keys [id]}]
(let [node (flow/get-node-by-id @nodes id)
data (:data node)]
[:p (:label data)])"
[:p (:label data)]))"
[params & children]
(let [on-viewport-change (:on-viewport-change params)
on-viewport-start (:on-viewport-start params)
Expand Down

0 comments on commit ec0b4cf

Please sign in to comment.