This file only serves auxiliary purposes, like how the documentation should be published, what license to use, etc.
(defun react->reagent (name)
(s-dashed-words
(if (not (equal name "ReactFlow"))
(s-replace "React" "Reagent" name)
name)))
(defonce root (atom nil))
(defn error-boundary [& children]
(let [error (r/atom nil)]
(r/create-class
{:display-name "ErrorBoundary"
:get-derived-state-from-error (fn [e] #js {})
:component-did-catch (fn [err info] (reset! error [err info]))
:reagent-render
(fn [& children]
(if (nil? @error)
(into [:<>] children)
(let [[_ info] @error]
[:pre.error
[:code (pr-str info)]
[:br]
[:button {:on-click #(.error js/console info)} "Output stacktrace"]])))})))
(defn ^:export init [element]
(when (nil? @root)
(reset! root (rdom/create-root element))
(rdom/render @root [error-boundary [main]])))
(defn ^:export unload [element]
(when (not (nil? @root))
(rdom/unmount @root)
(reset! root nil)))
;;
;; This program is written in a literate style. That means; this
;; source-file is generated and you should not make direct edits. You
;; should instead make your contributions in `index.org` and tangle it.
;; Please have a look at https://orgmode.org/ for more information.
;;
;; --------------------------------------------------------------------
;;
;; <<license>>
;;
(format-time-string "%Y")
MIT License
Copyright (C) <<year()>> DNV GL
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Documentation can be published with M-x org-publish-project
.
This will also tangle this setup-file which contain all the styles etc
for the documentation-page.
(unless (boundp 'org-publish-project-alist)
(setq org-publish-project-alist nil))
(add-to-list 'org-publish-project-alist
`("reagent-flow-static"
:base-directory ,default-directory
:base-extension "png\\|jpg\\|gif\\|svg"
:publishing-directory ,(expand-file-name "docs" default-directory)
:publishing-function org-publish-attachment))
(add-to-list 'org-publish-project-alist
`("reagent-flow-html-docs"
:base-directory ,default-directory
:publishing-directory ,(expand-file-name "docs" default-directory)
:publishing-function org-html-publish-to-html
:section-numbers nil
:html-head-include-default-style nil
:html-head-include-scripts nil
:html-postamble nil
:htmlize-output-type "css"
:htmlized-source t
:exclude "README\\.org\\|Setup\\.org"
:with-toc t))
(add-to-list 'org-publish-project-alist
`("reagent-flow"
:components ("reagent-flow-static" "reagent-flow-html-docs")))
(add-hook 'org-publish-after-publishing-hook
(lambda (orig out) (org-babel-tangle-file orig)))
:root {
--identity-hs: 218, 100%;
--identity-hsl: var(--identity-hs), 28%;
--inactive-hsl: 0, 0%, 60%;
--primary-hsl: var(--identity-hs), 40%;
--face-hs: 0, 0%;
--face-hsl: var(--face-hs), 20%;
--background-hs: 0, 0%;
--background-hsl: var(--background-hs), 100%;
--warning-hs: 331, 74%;
--warning-hsl: var(--warning-hs), 30%;
--function-name-hs: 20, 50%;
--function-name-hsl: var(--function-name-hs), 40%;
--variable-name-hs: 40, 50%;
--variable-name-hsl: var(--variable-name-hs), 40%;
--type-hs: 100, 30%;
--type-hsl: var(--type-hs), 40%;
--string-hs: 0, 30%;
--string-hsl: var(--string-hs), 50%;
--constant-hs: 40, 60%;
--constant-hsl: var(--constant-hs), 50%;
--keyword-hs: 250, 40%;
--keyword-hsl: var(--keyword-hs), 50%;
--todo-hs: 0, 80%;
--todo-hsl: var(--todo-hs), 80%;
--dots-hex: #ddd;
--easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
--radius: 0.5em;
--shadow: 0 .1em .2em hsla(var(--identity-hsl), 0.3);
}
@media (prefers-color-scheme: dark) {
:root {
--background-hsl: var(--background-hs), 10%;
--face-hsl: var(--face-hs), 70%;
--inactive-hsl: 0, 0%, 85%;
--dots-hex: #333;
}
}
*,
::before,
::after {
box-sizing: border-box;
}
html,
body {
background: hsl(var(--background-hsl));
color: hsl(var(--face-hsl));
margin: 0;
}
*:not(input) {
user-select: none;
}
#content {
margin: 0 auto;
max-width: 110em;
padding: 3vw;
}
.error {
background: hsl(var(--warning-hsl));
border: .5em solid hsl(var(--warning-hs), 20%);
color: white;
overflow: auto;
padding: 2em;
}
.error button {
--webkit-appearance: none;
background: hsl(var(--warning-hs), 20%);
border: none;
color: white;
margin: 1em 0;
padding: 0.5em 1em;
transition: background .2s ease;
}
.error button:hover {
background: hsl(var(--warning-hs), 15%);
}
.error button:active {
background: hsl(var(--warning-hs), 10%);
}
:root {
--sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif;
--monospace: JetBrains Mono, Roboto Mono, Courier, Courier New;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
font-family: var(--sans-serif);
}
.title {
font-size: calc(3em + 4vw);
line-height: .9em;
margin: 29vh 0;
}
.title .subtitle {
font-size: 5vw;
font-weight: 100;
}
h2 {
margin-top: 20vh;
font-size: calc(2em + 2vw);
font-weight: 100;
}
h3 {
font-size: calc(1.5em + 1.25vw);
font-weight: 100;
}
p {
font-size: 1.3em;
line-height: 1.5em;
max-width: 30em;
}
p > code {
background: var(--dots-hex);
border-radius: .2em;
padding: .1em .5em;
display: inline-block;
}
pre,
code {
font-family: var(--monospace);
}
.react-flow {
direction: ltr;
--xy-edge-stroke-default: #b1b1b7;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #555;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
--xy-minimap-background-color-default: #fff;
--xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #e2e2e2;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: transparent;
--xy-background-pattern-dots-color-default: #91919a;
--xy-background-pattern-lines-color-default: #eee;
--xy-background-pattern-cross-color-default: #e2e2e2;
}
.react-flow.dark {
--xy-edge-stroke-default: #3e3e3e;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #727272;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
--xy-minimap-background-color-default: #141414;
--xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: #141414;
--xy-background-pattern-dots-color-default: #777;
--xy-background-pattern-lines-color-default: #777;
--xy-background-pattern-cross-color-default: #777;
}
.react-flow {
background-color: var(--xy-background-color, var(--xy-background-color-default));
}
.react-flow__background {
background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__pane {
z-index: 1;
&.draggable {
cursor: grab;
}
&.dragging {
cursor: grabbing;
}
&.selection {
cursor: pointer;
}
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selection {
z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
outline: none;
}
.react-flow__edge-path {
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
fill: none;
}
.react-flow__connection-path {
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
fill: none;
}
.react-flow .react-flow__edges {
position: absolute;
svg {
overflow: visible;
position: absolute;
pointer-events: none;
}
}
.react-flow__edge {
pointer-events: visibleStroke;
&.selectable {
cursor: pointer;
}
&.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
&.animated path.react-flow__edge-interaction {
stroke-dasharray: none;
animation: none;
}
&.inactive {
pointer-events: none;
}
&.selected,
&:focus,
&:focus-visible {
outline: none;
}
&.selected .react-flow__edge-path,
&.selectable:focus .react-flow__edge-path,
&.selectable:focus-visible .react-flow__edge-path {
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}
&-textwrapper {
pointer-events: all;
}
.react-flow__edge-text {
pointer-events: none;
user-select: none;
}
}
.react-flow__connection {
pointer-events: none;
.animated {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
}
svg.react-flow__connectionline {
z-index: 1001;
overflow: visible;
position: absolute;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: default;
&.selectable {
cursor: pointer;
}
&.draggable {
cursor: grab;
pointer-events: all;
&.dragging {
cursor: grabbing;
}
}
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
&-rect {
position: absolute;
pointer-events: all;
cursor: grab;
}
}
.react-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
&.connectingfrom {
pointer-events: all;
}
&.connectionindicator {
pointer-events: all;
cursor: crosshair;
}
&-bottom {
top: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
&-top {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
&-left {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
&-right {
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
&.top {
top: 0;
}
&.bottom {
bottom: 0;
}
&.left {
left: 0;
}
&.right {
right: 0;
}
&.center {
left: 50%;
transform: translateX(-50%);
}
}
.react-flow__attribution {
font-size: 10px;
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
padding: 2px 3px;
margin: 0;
a {
text-decoration: none;
color: #999;
}
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
left: 0;
top: 0;
}
.react-flow__viewport-portal {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
user-select: none;
}
.react-flow__minimap {
background: var(
--xy-minimap-background-color-props,
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
);
&-svg {
display: block;
}
&-mask {
fill: var(
--xy-minimap-mask-background-color-props,
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
);
stroke: var(
--xy-minimap-mask-stroke-color-props,
var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
);
stroke-width: var(
--xy-minimap-mask-stroke-width-props,
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
);
}
&-node {
fill: var(
--xy-minimap-node-background-color-props,
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
);
stroke: var(
--xy-minimap-node-stroke-color-props,
var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
);
stroke-width: var(
--xy-minimap-node-stroke-width-props,
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
);
}
}
.react-flow__background {
pointer-events: none;
z-index: -1;
}
.react-flow__background-pattern {
&.dots {
fill: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
);
}
&.lines {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
);
}
&.cross {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
);
}
}
.react-flow__controls {
display: flex;
flex-direction: column;
&.horizontal {
flex-direction: row;
}
&-button {
display: flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
padding: 4px;
svg {
width: 100%;
max-width: 12px;
max-height: 12px;
fill: currentColor;
}
}
}
.react-flow {
--xy-node-color-default: inherit;
--xy-node-border-default: 1px solid #1a192b;
--xy-node-background-color-default: #fff;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--xy-node-border-radius-default: 3px;
--xy-handle-background-color-default: #1a192b;
--xy-handle-border-color-default: #fff;
--xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--xy-controls-button-background-color-default: #fefefe;
--xy-controls-button-background-color-hover-default: #f4f4f4;
--xy-controls-button-color-default: inherit;
--xy-controls-button-color-hover-default: inherit;
--xy-controls-button-border-color-default: #eee;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #ffffff;
--xy-edge-label-color-default: inherit;
}
.react-flow.dark {
--xy-node-color-default: #f8f8f8;
--xy-node-border-default: 1px solid #3c3c3c;
--xy-node-background-color-default: #1e1e1e;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
--xy-handle-background-color-default: #bebebe;
--xy-handle-border-color-default: #1e1e1e;
--xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
--xy-controls-button-background-color-default: #2b2b2b;
--xy-controls-button-background-color-hover-default: #3e3e3e;
--xy-controls-button-color-default: #f8f8f8;
--xy-controls-button-color-hover-default: #fff;
--xy-controls-button-border-color-default: #5b5b5b;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #141414;
--xy-edge-label-color-default: #f8f8f8;
}
.react-flow__edge {
&.updating {
.react-flow__edge-path {
stroke: #777;
}
}
&-text {
font-size: 10px;
}
}
.react-flow__node.selectable {
&:focus,
&:focus-visible {
outline: none;
}
}
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
width: 150px;
font-size: 12px;
color: var(--xy-node-color, var(--xy-node-color-default));
text-align: center;
border: var(--xy-node-border, var(--xy-node-border-default));
background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
&.selectable {
&:hover {
box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
}
&.selected,
&:focus,
&:focus-visible {
box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
}
}
}
.react-flow__node-group {
background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--xy-selection-border, var(--xy-selection-border-default));
&:focus,
&:focus-visible {
outline: none;
}
}
.react-flow__handle {
width: 6px;
height: 6px;
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
border-radius: 100%;
}
.react-flow__controls {
box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
&-button {
border: none;
background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
border-bottom: 1px solid
var(
--xy-controls-button-border-color-props,
var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
);
color: var(
--xy-controls-button-color-props,
var(--xy-controls-button-color, var(--xy-controls-button-color-default))
);
cursor: pointer;
user-select: none;
&:hover {
background: var(
--xy-controls-button-background-color-hover-props,
var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
);
color: var(
--xy-controls-button-color-hover-props,
var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
);
}
&:disabled {
pointer-events: none;
svg {
fill-opacity: 0.4;
}
}
}
&-button:last-child {
border-bottom: none;
}
}
.react-flow {
--xy-resize-background-color-default: #3367d9;
}
.react-flow__resize-control {
position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
width: 4px;
height: 4px;
border: 1px solid #fff;
border-radius: 1px;
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.react-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.react-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.react-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.react-flow__resize-control.handle.top.left {
left: 0;
}
.react-flow__resize-control.handle.bottom.left {
left: 0;
}
.react-flow__resize-control.handle.top.right {
left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
border-width: 0;
border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.react-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.react-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.react-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__container svg {
overflow: visible;
position: absolute;
pointer-events: none;
}
.react-flow__pane {
z-index: 1;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__pane.selection {
cursor: pointer;
}
.react-flow__pane.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selection {
z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
outline: none;
}
.react-flow .react-flow__edges {
pointer-events: none;
overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
fill: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
cursor: pointer;
}
.react-flow__edge.animated path {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__edge.animated path.react-flow__edge-interaction {
stroke-dasharray: none;
-webkit-animation: none;
animation: none;
}
.react-flow__edge.inactive {
pointer-events: none;
}
.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
outline: none;
}
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path,
.react-flow__edge:focus-visible .react-flow__edge-path {
stroke: #555;
}
.react-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge-textbg {
fill: white;
}
.react-flow__edge .react-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__connection {
pointer-events: none;
}
.react-flow__connection.animated {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__connectionline {
z-index: 1001;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__node.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.react-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
width: 6px;
height: 6px;
background: #1a192b;
border: 1px solid white;
border-radius: 100%;
}
.react-flow__handle.connectable {
pointer-events: all;
cursor: crosshair;
}
.react-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.react-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.react-flow__panel.top {
top: 0;
}
.react-flow__panel.bottom {
bottom: 0;
}
.react-flow__panel.left {
left: 0;
}
.react-flow__panel.right {
right: 0;
}
.react-flow__panel.center {
left: 50%;
transform: translateX(-50%);
}
.react-flow__attribution {
font-size: 10px;
background: rgba(255, 255, 255, 0.5);
padding: 2px 3px;
margin: 0;
}
.react-flow__attribution a {
text-decoration: none;
color: #999;
}
@-webkit-keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.react-flow__edge.updating .react-flow__edge-path {
stroke: #777;
}
.react-flow__edge-text {
font-size: 10px;
}
.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
outline: none;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #1a192b;
background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
box-shadow: 0 0 0 0.5px #1a192b;
outline: 1px solid rgba(0, 89, 220, 0.8);
}
.react-flow__node-group {
background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible,
.react-flow__selection:focus,
.react-flow__selection:focus-visible {
outline: none;
}
.react-flow__background {
background-color: hsl(var(--background-hs), 98%);
}
.react-flow .react-flow__background pattern {
stroke: var(--dots-hex);
}
.react-flow .react-flow__handle {
--size: .5em;
background: hsl(var(--background-hs), 60%);
border-width: .1em;
box-shadow: 0 0.1em 0.2em hsla(0, 30%, 10%, 0.2);
height: var(--size);
width: var(--size);
}
.react-flow .react-flow__node-input.selectable,
.react-flow .react-flow__node-default.selectable,
.react-flow .react-flow__node div:first-child {
border: none !important;
box-shadow: 0 0.1em 0.2em hsla(0, 30%, 10%, 0.2);
}
.org-function-name {
color: hsl(var(--function-name-hsl));
}
.org-variable-name {
color: hsl(var(--variable-name-hsl));
}
.org-type {
color: hsl(var(--type-hsl));
}
.org-comment,
.org-comment-delimiter,
.org-string {
color: hsl(var(--string-hsl));
}
.org-constant {
color: hsl(var(--constant-hsl));
}
.org-clojure-keyword {
color: hsl(var(--keyword-hsl));
}
a {
color: hsl(var(--primary-hsl));
}
.outline-text-2 {
max-width: 50em;
}
.example {
display: grid;
grid-template-columns: [documentation] 1fr [example] 1fr;
grid-auto-flow: row;
gap: 2.5vw;
}
.outline-3:nth-child(odd) .example {
grid-template-columns: [example] 1fr [documentation] 1fr;
}
.example > :not(.output) {
grid-column-start: documentation;
}
.output {
background-color: hsl(var(--background-hsl));
grid-column-start: example;
grid-row: 1/10;
min-height: 10vh;
max-height: min(800px, 90vh);
width: 100%;
position: sticky;
top: 5vh;
overflow: hidden;
}
@media only screen and (max-width: 1024px) {
.example {
display: block;
}
}
.org-src-container {
overflow: auto;
}
.src {
color: hsl(var(--face-hs), 70%);
font-size: 1.3rem;
line-height: 1.5;
}
/* The version-number */
.src-text {
background: hsl(var(--identity-hsl));
border-radius: .2em;
color: white;
display: inline-block;
font-size: 1.5em;
padding: .2em .5em;
}
.todo {
color: hsl(var(--todo-hsl));
font-size: 1.35rem;
font-weight: 100;
}
[data-id="explanation"] {
background: transparent;
border: none;
color: gray;
font-size: 12px;
}
[data-id="explanation"] * {
display: none;
}
[data-src=stress] .react-flow__edge.react-flow__edge-smoothstep.animated path {
stroke: hsl(150, 60%, 65%);
stroke-linecap: round;
}
[data-src=stress] .react-flow__edge.react-flow__edge-smoothstep.animated.selected path {
stroke-width: 3;
}
.react-flow__node-sum-node {
background: hsl(241, 84%, 65%);
border-radius: 2em;
color: white;
min-width: 10em;
padding: 0 1.5em;
}
.react-flow__node-sum-node pre {
text-align: center;
}
.react-flow__node-color-node {
background: transparent;
border: none;
}
.color-picker {
--radius: 0.5em;
--size: 2.5em;
-webkit-appearance: none;
border-radius: var(--radius);
border: none;
height: var(--size);
margin: 0;
margin-top: .45em;
outline: none;
padding: 0;
width: var(--size);
}
.color-picker::-moz-color-swatch,
.color-picker::-webkit-color-swatch,
.color-picker::-webkit-color-swatch-wrapper {
border: none;
border-radius: var(--radius);
padding: 0;
}
.node-palette {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 1em;
top: 1em;
left: 1em;
}
.node-palette .node {
background: white;
border-radius: 0.5em;
box-shadow: 0 0.1em 0.2em hsla(0, 30%, 10%, 0.2);
cursor: grab;
display: flex;
justify-content: center;
align-items: center;
min-width: 15em;
padding: 1em;
}
We observe the code-blocks to see when it’s in the viewport. When a code-block is visible, the code associated will be initialized.
const main = (w, d) => {
const examples = [].slice.call(d.querySelectorAll('[data-src]'));
examples.map(example => {
const observer = new IntersectionObserver(observed => {
const exampleName = example.getAttribute('data-src');
if (observed[0].isIntersecting) {
w[`${exampleName}`].core.init(example);
} else {
w[`${exampleName}`].core.unload(example);
}
});
observer.observe(example);
});
}
main(window, document);