first commit

Author: tzhu2001

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+lib
+storybook-static

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../src/stories/component/*.stories.@(js|jsx|ts|tsx)",
+    "../src/stories/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-knobs",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

LICENSE

@@ -0,0 +1,5 @@
+# Component library for open review tool
+The base storybook/jest/typescript component template was based from vijayt, see below.
+
+# @vijayt/counter
+This is just a demo component, part of the boilerplate for putting together a project that publishes components to the NPM registry. Features of the boilerplate include: Compilation using Rollup and TypeScript, Unit / Functional testing using Jest and React Testing library, Visual testing using Storybook. There is a [tutorial](https://vijayt.com/post/boilerplate-for-publishing-components-with-a-storybook/) that explains how the project was put together.

README.md

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
+};

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  testEnvironment: "jsdom",
+};

jest.config.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

jest.setup.ts

@@ -0,0 +1,41 @@
+{
+  "name": "@vijayt/counter",
+  "version": "1.0.2",
+  "main": "lib/index.js",
+  "repository": "[email protected]:vijayst/react-package-boilerplate.git",
+  "author": "Vijay T <[email protected]>",
+  "license": "MIT",
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@babel/preset-env": "^7.14.9",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/react": "^6.3.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/fabric": "^4.5.3",
+    "@types/jest": "^26.0.24",
+    "@types/react": "^17.0.15",
+    "@types/uuid": "^8.3.1",
+    "babel-loader": "^8.2.2",
+    "fabric": "^4.6.0",
+    "jest": "^27.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.55.1",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.3.5",
+    "uuid": "^8.3.2"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --verbose --watch",
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook"
+  }
+}

package.json

@@ -0,0 +1,12 @@
+import Ts from "rollup-plugin-typescript2";
+
+export default {
+  input: ["src/index.ts"],
+  output: {
+    dir: "lib",
+    format: "esm",
+    sourcemap: true,
+  },
+  plugins: [Ts()],
+  external: ["react"],
+};

rollup.config.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+interface ButtonProps {
+  onClick: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick }) => {
+  return <button onClick={onClick}>+1</button>;
+};
+
+export default Button;

src/Button.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+interface CountProps {
+  count: number;
+}
+
+const Count: React.FC<CountProps> = ({ count }) => {
+  return <span>{count}</span>;
+};
+
+export default Count;

src/Count.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Counter, { CounterProps } from "./Counter";
+
+export default {
+  title: "Counter",
+  component: Counter,
+};
+
+const Template = (args: CounterProps) => <Counter {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {};
+export const WithDefaultCounter = Template.bind({});
+WithDefaultCounter.args = { defaultCount: 1000 };

src/Counter.stories.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Counter from "./Counter";
+
+test("displays a button", () => {
+  render(<Counter />);
+  const button = screen.getByRole("button", { name: /\+1/i });
+  expect(button).toBeInTheDocument();
+});

src/Counter.test.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+import Button from "./Button";
+import Count from "./Count";
+
+export interface CounterProps {
+  defaultCount?: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ defaultCount = 0 }) => {
+  const [count, setCount] = useState<number>(defaultCount);
+  useEffect(() => {
+    setCount(defaultCount);
+  }, [defaultCount]);
+  function handleClick() {
+    setCount((count) => count + 1);
+  }
+  return (
+    <div>
+      <Button onClick={handleClick} />
+      <Count count={count} />
+    </div>
+  );
+};
+
+export default Counter;

src/Counter.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { fabric } from 'fabric';
+import { v4 as uuidv4 } from 'uuid';
+
+const DEFAULT_CANVAS_ATTRS: Record<string, number | string | boolean> = {
+  uniformScaling: false,
+  preserveObjectStacking: true,
+  targetFindTolerance: 10,
+  // note: currently, canvas group selection only the selection rect with shape bounds.
+  // ref: https://github.com/fabricjs/fabric.js/issues/3773
+  // So next best thing is to require user's selection rect to contain the entire object.
+  selectionFullyContained: true,
+};
+
+interface FabricCanvasProps {
+  fabricCanvasRef: React.MutableRefObject<fabric.Canvas>;
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  attrs?: Record<string, number | string | boolean>;
+}
+
+const FabricCanvas: React.FC<FabricCanvasProps> = ({
+  width = 100,
+  height = 100,
+  backgroundColor = 'green',
+  attrs = DEFAULT_CANVAS_ATTRS,
+  ...props
+}) => {
+  const nativeCanvasRef = React.useRef<HTMLCanvasElement | null>(null);
+
+  // canvas resize
+  React.useEffect(() => {
+    props.fabricCanvasRef.current.setWidth(width);
+    props.fabricCanvasRef.current.setHeight(height);
+  }, [width, height]);
+
+  React.useEffect(() => {
+    props.fabricCanvasRef.current.backgroundColor = backgroundColor;
+  }, [backgroundColor]);
+
+  /**
+   * use effect
+   */
+  // mount object modify handle
+  useEffect(() => {
+    if (nativeCanvasRef.current !== null) {
+      props.fabricCanvasRef.current = new fabric.Canvas(
+        nativeCanvasRef.current.id,
+        {
+          width,
+          height,
+          backgroundColor,
+          ...attrs,
+        },
+      );
+    }
+
+    return () => {
+      props.fabricCanvasRef.current?.dispose();
+    };
+  }, []);
+
+  return <canvas ref={nativeCanvasRef} id={`canvas_${uuidv4()}`} />;
+};
+
+export default FabricCanvas;

src/component/AnnotateCanvas/FabricCanvas.tsx

@@ -0,0 +1,46 @@
+import { ElementsAction, AnnotateElement } from './types';
+
+/**
+ * The reducers captures all the element events, with the aim to sync to another user.
+ * @param state All the elements on the canvas
+ * @param action The action.
+ * @returns Updated set of elements on the canvas
+ */
+export default function elementsActionReducer(
+  state: AnnotateElement[],
+  action: ElementsAction,
+): AnnotateElement[] {
+  switch (action.type) {
+    case 'addElement':
+      if (!action.newElement.id) {
+        throw Error(
+          `Unexpected add element with no new id: ${action.newElement}`,
+        );
+      }
+      return [...state, action.newElement];
+
+    case 'changeElement':
+      return state.map((element) => {
+        if (element.id === action.elementUpdates.id) {
+          return { ...element, ...action.elementUpdates };
+        } else {
+          return element;
+        }
+      });
+
+    case 'removeElement':
+      const removeIndex = state.reduce((a, c, index) => {
+        if (action.removeIds.indexOf(c.id) !== -1) {
+          a.push(index);
+        }
+        return a;
+      }, [] as number[]);
+
+      const updatedElements = [...state];
+      removeIndex.reverse().forEach((removeIndex) => {
+        updatedElements.splice(removeIndex, 1);
+      });
+
+      return updatedElements;
+  }
+}

src/component/AnnotateCanvas/elementActionReducer.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { fabric } from 'fabric';
+
+import {
+  AnnotateElementType,
+  AnnotateElement,
+  UserControllerInputs,
+  uiDefaults,
+} from './types';
+import { useCanvasDebugger } from './utils';
+import useDrawShapeHandler from './useDrawShapeHandler';
+import useCustomSelectCorners from './useCustomSelectCorners';
+import useModifyHandler from './useModifyHandler';
+import useSyncSelection from './useSyncSelection';
+import useApplyAttrsToSelection from './useApplyAttrsToSelection';
+import FabricCanvas from './FabricCanvas';
+import useRedrawElements from './useRedrawElements';
+
+const REDRAW_ON_ELEMENT_MODIFY = true;
+
+interface AnnotateCanvasProps {
+  elements: AnnotateElement[];
+  selection?: string[];
+  uiState?: UserControllerInputs;
+
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+
+  onAddElement?: (etype: AnnotateElementType, element: fabric.Object) => void;
+  onChangeElement?: (element: Partial<AnnotateElement>) => void;
+  onSelection?: (
+    selected: string[],
+    added: string[],
+    removed: string[],
+  ) => void;
+}
+
+const AnnotateCanvas: React.FC<AnnotateCanvasProps> = ({
+  elements = [],
+  selection = [],
+  
+  width = 100,
+  height = 100,
+  backgroundColor = '',
+  
+  uiState = uiDefaults,
+
+  ...props
+}) => {
+  const fabricCanvasRef = React.useRef<fabric.Canvas>(new fabric.Canvas(''));
+
+  useRedrawElements(
+    fabricCanvasRef,
+    backgroundColor,
+    elements,
+    REDRAW_ON_ELEMENT_MODIFY,
+  );
+  useSyncSelection(fabricCanvasRef, props.onSelection);
+  useCustomSelectCorners(fabricCanvasRef);
+  useDrawShapeHandler(fabricCanvasRef, uiState, props.onAddElement);
+  useModifyHandler(fabricCanvasRef, props.onChangeElement);
+  useApplyAttrsToSelection(
+    fabricCanvasRef,
+    uiState,
+    selection,
+    elements,
+    props.onChangeElement,
+  );
+  useCanvasDebugger(elements, selection);
+
+  return (
+    <FabricCanvas
+      fabricCanvasRef={fabricCanvasRef}
+      width={width}
+      height={height}
+      backgroundColor={backgroundColor}
+    />
+  );
+};
+
+export default AnnotateCanvas;