feat(canvas): implement canvas-data as data source

src/App.js

@@ -7,10 +7,9 @@ import Palette from './components/Palette';
 import styles from './App.module.scss';
 
 /**
- *
  * @param {Props} props
  */
-function App({ state }) {
+function App({ state, canvasData }) {
   const { canvas, color } = U.destructure(state);
   const { size, scale } = U.destructure(canvas);
   const { currentColor, currentPalette } = U.destructure(color);
@@ -26,7 +25,7 @@ function App({ state }) {
         />
       </div>
       <div className="relative-pos">
-        <Canvas {...{ size, scale, color }} />
+        <Canvas {...{ size, scale, color, canvasData }} />
       </div>
     </main>
   );
@@ -39,4 +38,5 @@ export default App;
 /**
  * @typedef {object} Props
  * @prop {typeof state} state
+ * @prop {typeof canvasData} canvasData
  */

src/components/Canvas.js

@@ -1,12 +1,14 @@
 /* eslint no-unused-vars: [1, {"varsIgnorePattern": "[K]"}] */
 import * as React from 'karet';
+import * as L from 'partial.lenses';
 import * as U from 'karet.util';
 import * as R from 'ramda';
-import * as L from 'partial.lenses';
 import * as K from 'kefir';
 
-import * as H from '../shared';
+import * as M from '../meta';
 import * as E from '../core/mouse';
+import * as H from '../shared';
+
 import PixelGrid from './_/PixelGrid';
 
 import styles from './Canvas.module.scss';
@@ -29,6 +31,10 @@ const drawEff = ([[dx, dy], ctx, color]) => {
 function Canvas({ size, scale, color }) {
   const scaleInverse = scale.map(R.divide(1));
 
+  const actions = U.serializer(null);
+
+  actions.log();
+
   const dom = U.variable();
   const ctx = H.getContext(dom);
   const scaledSize = H.scaleSize(size, scale);
@@ -45,25 +51,18 @@ function Canvas({ size, scale, color }) {
     height: H.sndOf(scaledSize),
   };
 
-  const currentColor = U.view(
-    L.choose(x => [
-      'palettes',
-      x.currentPalette,
-      'items',
-      x.currentColor,
-      L.dropPrefix('#'),
-    ]),
-    color,
-  ).log();
+  const currentColor = M.selectedColorIn(color);
 
   //
 
   const draw = U.thru(
     K.combine([scaledXY, ctx], [currentColor], H.takeAll),
+    U.toProperty,
+    R.tap(H.logObsType('draw')),
     U.consume(drawEff),
   );
 
-  const effSink = U.sink(U.parallel([draw]));
+  const effSink = U.sink(U.parallel([draw, actions]));
 
   //
 

src/core/canvas-data.js

@@ -18,6 +18,8 @@ import { COLOR_CHANNELS } from '../constants';
  */
 const state = U.atom();
 
+export default state;
+
 //
 
 /**

src/global.d.ts

@@ -1,3 +1,5 @@
+import { O } from 'ts-toolbelt';
+
 declare global {
   /**
    * Interface for color palettes

src/index.js

@@ -1,15 +1,23 @@
 import * as React from 'karet';
+import * as U from 'karet.util';
+import * as R from 'kefir.ramda';
+import * as L from 'kefir.partial.lenses';
 import { render } from 'react-dom';
 
 import 'normalize.css';
 import './index.scss';
 
 import App from './App';
 import state from './core/state';
+import canvasData from './core/canvas-data';
 
 import * as serviceWorker from './serviceWorker';
 
-render(<App {...{ state }} />, document.getElementById('root'));
+if (process.env.NODE_ENV !== 'production') {
+  Object.assign(window, { U, R, L });
+}
+
+render(<App {...{ state, canvasData }} />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/meta.js

@@ -1,2 +1,16 @@
 import * as U from 'karet.util';
 import * as L from 'partial.lenses';
+
+/**
+ * Given a view of `color` from state, return a `LensedAtom` that will always
+ * refer to the currently selected color from the current color palette.
+ */
+export const selectedColorIn = U.view(
+  L.choose(x => [
+    'palettes',
+    x.currentPalette,
+    'items',
+    x.currentColor,
+    L.dropPrefix('#'),
+  ]),
+);

src/shared.js

@@ -91,6 +91,20 @@ const yiq_ = (opts = {}) => c => yiq(c, opts);
 
 export const yiqFor = c => U.thru(c, U.mapValue(yiq_()));
 
+// DEBUG
+
+export const logObsType = name => obs => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.group(name);
+  console.log('instanceof Stream =>', obs instanceof K.Stream);
+  console.log('instanceof Property =>', obs instanceof K.Property);
+  console.log('instanceof Observable =>', obs instanceof K.Observable);
+  console.groupEnd();
+};
+
 //
 
 /**