feat(core-components): canvas: implement new Canvas

src/components/core/Canvas/_/PixelGrid.module.scss

@@ -1,14 +1,14 @@
 $grid-line-color: rgba(0, 0, 0, 0.2) !default;
 
 .root {
+  pointer-events: none;
 }
 
 .svg {
   position: absolute;
   left: 0;
   top: 0;
   pointer-events: none;
-  border: solid 1px $grid-line-color;
   z-index: 1;
   shape-rendering: crispEdges;
 

src/components/core/Canvas/_/__snapshots__/PixelGrid.test.js.snap

@@ -236,13 +236,6 @@ exports[`matches snapshot 1`] = `
         y1={495.5}
         y2={495.5}
       />
-      <line
-        key="y-32"
-        x1={0}
-        x2="100%"
-        y1={511.5}
-        y2={511.5}
-      />
     </g>
     <g
       className="x-range"
@@ -471,13 +464,6 @@ exports[`matches snapshot 1`] = `
         y1={0}
         y2="100%"
       />
-      <line
-        key="x-32"
-        x1={511.5}
-        x2={511.5}
-        y1={0}
-        y2="100%"
-      />
     </g>
   </svg>
 </div>

src/components/core/Canvas/index.js

@@ -1,29 +1,64 @@
 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 * as K from 'kefir';
-import { mouseEventsFor } from 'core/mouse';
 
 import styles from './index.module.scss';
 
-import { offsetIn, fstIn, sndIn } from 'common/meta';
-import { elementOffsetFor } from 'common/position';
-import { scaleSize } from 'common/canvas';
+import { layerPos, pagePos } from 'common/events';
+import { fstIn, sndIn } from 'common/meta';
+import {
+  elementOffsetFor,
+  offsetPositionWith,
+  scalePositionWith,
+} from 'common/position';
+import {
+  scaleSize,
+  drawingEvents,
+  getContext,
+  getIxRange,
+  rgbFromHex,
+} from 'common/canvas';
+import { reciprocal } from 'common/util';
+import { fromHex } from 'shared';
 
 import Bitmap from 'components/ui/Bitmap';
-import Drawable from './_/Drawable';
 import PixelGrid from './_/PixelGrid';
+import OffsetGuide from './_/OffsetGuide';
 
-export default function Canvas({ size, scale, data, drawable }) {
-  /** @type {ObsElement>} */
+export default function Canvas({ size, color, scale, data, drawable }) {
+  /** @type {ObsElement} */
   const dom = U.variable();
+  const ctx = getContext(dom);
+  const rgba = L.get([L.dropPrefix('#'), L.reread(fromHex)], color);
 
-  const { offset, bbox } = U.destructure(drawable);
+  data.log();
 
-  const domOffset = elementOffsetFor(dom);
   const scaledSize = scaleSize(size, scale);
 
-  const bus = U.bus();
+  const pixelXY = drawingEvents(dom);
+  const offset = elementOffsetFor(dom);
+  const offsetXY = offsetPositionWith(elementOffsetFor(dom), pagePos(pixelXY));
+  const scaledXY = scalePositionWith(reciprocal(scale), offsetXY);
+
+  const posIx = U.thru(
+    getIxRange(scaledXY, fstIn(size)),
+    U.skipDuplicates(R.equals),
+  );
+
+  const colorXY = K.combine([posIx], [rgba]);
+
+  //
+
+  const updateData = U.thru(
+    colorXY,
+    U.consume(([[ia, ib], c]) => {
+      data.view(L.slice(ia, ib)).set(c);
+    }),
+  );
+
+  //
 
   return (
     <div
@@ -34,9 +69,15 @@ export default function Canvas({ size, scale, data, drawable }) {
         height: sndIn(scaledSize),
       }}
     >
-      <Drawable offset={offset} bbox={bbox} bus={bus} />
+      <>{U.sink(updateData)}</>
       <PixelGrid size={size} scale={scale} />
-      <Bitmap size={size} scale={scale} data={data} />
+      <OffsetGuide offset={offset} size={scaledSize} />
+      <Bitmap
+        className={styles.ignorePointerEvents}
+        size={size}
+        scale={scale}
+        data={data}
+      />
     </div>
   );
 }

src/components/core/Canvas/index.module.scss

@@ -3,10 +3,12 @@
   height: 100%;
   position: relative;
 
-  width: 420px;
-  height: 240px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
+
+.ignorePointerEvents {
+  pointer-events: none;
+}