Skip to content

Commit

Permalink
Upgrade to mafs 0.15.1, prep for release (#1)
Browse files Browse the repository at this point in the history
  • Loading branch information
sritchie authored Jan 26, 2023
1 parent 5f6002f commit 97c3eb1
Show file tree
Hide file tree
Showing 15 changed files with 591 additions and 243 deletions.
2 changes: 1 addition & 1 deletion .clj-kondo/config.edn
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
{reagent.core/with-let clojure.core/let}

:config-paths
["../resources/clj-kondo.exports/mentat-collective/mafs.cljs"]}
["../resources/clj-kondo.exports/org.mentat/mafs.cljs"]}
22 changes: 0 additions & 22 deletions .clj-kondo/mentat-collective/mafs.cljs/hooks/mafs/macros.clj

This file was deleted.

3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
## 0.1.0

First real release! Mafs.cljs has compatibility with almost everything in Mafs,
as explored in the interactive documentation notebook at https://mafs.mentat.org.
as explored in the interactive documentation notebook at
https://mafs.mentat.org.
110 changes: 61 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
# mafs.cljs
# Mafs.cljs

[![Build Status](https://github.com/mentat-collective/mafs.cljs/actions/workflows/kondo.yml/badge.svg?branch=main)](https://github.com/mentat-collective/mafs.cljs/actions/workflows/kondo.yml)
[![License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/mentat-collective/mafs.cljs/blob/main/LICENSE)
[![cljdoc badge](https://cljdoc.org/badge/org.mentat/mafs.cljs)](https://cljdoc.org/d/org.mentat/mafs.cljs/CURRENT)
[![Clojars Project](https://img.shields.io/clojars/v/org.mentat/mafs.cljs.svg)](https://clojars.org/org.mentat/mafs.cljs)
A [Reagent][reagent-url] interface to the [Mafs][mafs-url] interactive 2d
math visualization library.

[Mafs][MAFS] is a JavaScript library for building declarative GUIs with many
different input types, like the one hovering on the right side of this page.
Supported inputs range from numeric sliders and color pickers to complex plugins
like this [Bezier curve
example](https://mafs.pmnd.rs/?path=/story/plugins-bezier--default-bezier).
[![Build Status][build-status]][build-status-url]
[![License][license]][license-url]
[![cljdoc badge][cljdoc]][cljdoc-url]
[![Clojars Project][clojars]][clojars-url]
[![Discord Shield][discord]][discord-url]

[Mafs.cljs](https://github.com/mentat-collective/mafs.cljs) extends Mafs with a
set of [React][REACT] / [Reagent][REAGENT] components that make it easy to
synchronize the state of the GUI with a [ClojureScript
atom](https://clojure.org/reference/atoms).
[Mafs][mafs-url] is a JavaScript library for building declarative, interactive
2d mathematical scenes.

<p align="center">
<img width="283" alt="image" src="https://user-images.githubusercontent.com/69635/211684081-b28bb03e-c6fe-43a3-ad9b-f802901667bb.png">
</p>

Think of your GUI like an interactive, beautiful view onto your page's state.
[Mafs.cljs][github-url] extends Mafs with a set of [Reagent][reagent-url]
components that make it easy to define Mafs constructions inside of a user
interface built with ClojureScript.

## Quickstart

Install `Mafs.cljs` into your Clojurescript project using the instructions at
its Clojars page:

[![Clojars Project](https://img.shields.io/clojars/v/org.mentat/mafs.cljs.svg)](https://clojars.org/org.mentat/mafs.cljs)
[![Clojars Project][clojars]][clojars-url]

Or grab the most recent code using a Git dependency:

Expand All @@ -37,42 +31,50 @@ Or grab the most recent code using a Git dependency:
{:git/sha "$GIT_SHA"}}
```

Require `mafs.core` in your namespace:
Require `mafs` and any of the component namespaces that you'd like to use in
your ClojureScript namespace:

```clj
(ns my-app
(:require [mafs.core :as mafs]
(:require [mafs]
[mafs.coordinates]
[mafs.plot]
[mafs.line]
[mafs.debug]
[mafs.vec]
[reagent.core :as reagent]))
```

Declare some state that you'd like to control with a GUI. Each entry's key
becomes its label, and Mafs infers the correct input from the value's type.

```clj
(defonce !synced
(reagent/atom
{:number 10
:color {:r 10 :g 12 :b 4}
:string "Hi!"
:point {:x 1 :y 1}}))
```

Pass the atom to the `mafs/Controls` component via the `:atom` key to add its
entries to the Mafs panel hovering on the right, and bidirectionally bind its
state to the interactive state in the panel:
Construct a Mafs scene with a Cartesian coordinate plane, a plot of `Math/sin`
and a movable point constrained to the `x` axis that allows you to interactively
phase-shift the plot:

```clj
[mafs/Controls
{:folder {:name "Quickstart"}
:atom !synced}]
(reagent/with-let [!phase (reagent/atom [0 0])]
[:<>
[mafs/Mafs
{:view-box {:x [-10 10] :y [-2 2]}
:preserve-aspect-ratio false}
[mafs.coordinates/Cartesian
{:subdivisions 4
:x-axis
{:lines Math/PI
:labels mafs/labelPi}}]
[mafs.plot/OfX
{:y (fn [x]
(let [shift (first @!phase)]
(Math/sin (- x shift))))}]
[mafs/MovablePoint
{:atom !phase
:constrain "horizontal"}]]
[:pre
(str "Phase shift: " (first @!phase))]])
```

<p align="center">
<img width="500" alt="image" src="https://user-images.githubusercontent.com/69635/211684473-cb933085-4a33-41c6-aeab-d95051257501.gif">
</p>
![2023-01-26 10 56 58](https://user-images.githubusercontent.com/69635/214912521-11db5419-8271-46dc-8444-91438ab32948.gif)

See the project's [interactive documentation notebook](https://mafs.mentat.org)
for more guides and examples.
for many more guides and examples.

## Interactive Documentation via Clerk

Expand Down Expand Up @@ -114,11 +116,21 @@ projects like it.

## License

Copyright © 2022 Sam Ritchie.
Copyright © 2022-2023 Sam Ritchie.

Distributed under the [MIT License](LICENSE). See [LICENSE](LICENSE).

[CLJS]: https://clojurescript.org/
[MAFS]: https://github.com/pmndrs/mafs
[REACT]: https://reactjs.org/
[REAGENT]: https://reagent-project.github.io/
[build-status-url]: https://github.com/mentat-collective/mafs.cljs/actions/workflows/kondo.yml
[build-status]: https://github.com/mentat-collective/mafs.cljs/actions/workflows/kondo.yml/badge.svg?branch=main
[cljdoc-url]: https://cljdoc.org/d/org.mentat/mafs.cljs/CURRENT
[cljdoc]: https://cljdoc.org/badge/org.mentat/mafs.cljs
[clojars-url]: https://clojars.org/org.mentat/mafs.cljs
[clojars]: https://img.shields.io/clojars/v/org.mentat/mafs.cljs.svg
[discord-url]: https://discord.gg/hsRBqGEeQ4
[discord]: https://img.shields.io/discord/731131562002743336?style=flat&colorA=000000&colorB=000000&label=&logo=discord
[license-url]: LICENSE
[license]: https://img.shields.io/badge/license-MIT-brightgreen.svg
[mentat-slack-url]: https://clojurians.slack.com/archives/C041G9B1AAK
[github-url]: https://github.com/mentat-collective/mafs.cljs
[reagent-url]: https://reagent-project.github.io/
[mafs-url]: https://mafs.deb
2 changes: 1 addition & 1 deletion bb.edn
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{:pods {clj-kondo/clj-kondo {:version "2022.12.10"}}
{:pods {clj-kondo/clj-kondo {:version "2023.01.20"}}
:tasks
{:requires ([pod.borkdude.clj-kondo :as clj-kondo])

Expand Down
7 changes: 5 additions & 2 deletions dev/mafs/clerk_ui.cljs
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
(ns mafs.clerk-ui
(:require [mafs]
[mafs.coordinates]
[mafs.debug]
[mafs.line]
[mafs.plot]
Expand All @@ -12,12 +13,14 @@

(sci.ctx-store/swap-ctx!
sci/merge-opts
{:classes {'Math js/Math}
:aliases {'mafs 'mafs}
{:classes {'Math js/Math}
:namespaces
{'mafs
(sci/copy-ns mafs (sci/create-ns 'mafs))

'mafs.coordinates
(sci/copy-ns mafs.coordinates (sci/create-ns 'mafs.coordinates))

'mafs.plot
(sci/copy-ns mafs.plot (sci/create-ns 'mafs.plot))

Expand Down
Loading

0 comments on commit 97c3eb1

Please sign in to comment.