From 8b4ab47f223d99be34d8016c74045d8c3147b614 Mon Sep 17 00:00:00 2001 From: Stefan Rimaila Date: Fri, 4 Oct 2019 10:57:41 +0300 Subject: [PATCH] feat(canvas): implement canvas-data as data source --- src/App.js | 6 +++--- src/components/Canvas.js | 25 ++++++++++++------------- src/core/canvas-data.js | 2 ++ src/global.d.ts | 2 ++ src/index.js | 10 +++++++++- src/meta.js | 14 ++++++++++++++ src/shared.js | 14 ++++++++++++++ 7 files changed, 56 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index 379c222..2e4e854 100644 --- a/src/App.js +++ b/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 }) { />
- +
); @@ -39,4 +38,5 @@ export default App; /** * @typedef {object} Props * @prop {typeof state} state + * @prop {typeof canvasData} canvasData */ diff --git a/src/components/Canvas.js b/src/components/Canvas.js index cde13e4..0403fbf 100644 --- a/src/components/Canvas.js +++ b/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])); // diff --git a/src/core/canvas-data.js b/src/core/canvas-data.js index 4949abb..ca593fe 100644 --- a/src/core/canvas-data.js +++ b/src/core/canvas-data.js @@ -18,6 +18,8 @@ import { COLOR_CHANNELS } from '../constants'; */ const state = U.atom(); +export default state; + // /** diff --git a/src/global.d.ts b/src/global.d.ts index bb20465..74b78df 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,3 +1,5 @@ +import { O } from 'ts-toolbelt'; + declare global { /** * Interface for color palettes diff --git a/src/index.js b/src/index.js index 218fa70..f3448c0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,7 @@ 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'; @@ -6,10 +9,15 @@ import './index.scss'; import App from './App'; import state from './core/state'; +import canvasData from './core/canvas-data'; import * as serviceWorker from './serviceWorker'; -render(, document.getElementById('root')); +if (process.env.NODE_ENV !== 'production') { + Object.assign(window, { U, R, L }); +} + +render(, 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. diff --git a/src/meta.js b/src/meta.js index 226acd1..08cea12 100644 --- a/src/meta.js +++ b/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('#'), + ]), +); diff --git a/src/shared.js b/src/shared.js index 74bfaad..d67e71c 100644 --- a/src/shared.js +++ b/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(); +}; + // /**