mathbox-react 0.0.10 → 0.0.12

package/src/components/types.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react"
-import type { MathboxSelection, NodeType } from "mathbox"
-import React from "react"
-
-export type WithChildren<T> = {
-  children?: ReactNode | ReactNode[]
-} & T
-
-export type MathboxRef<T extends NodeType> = React.Ref<MathboxSelection<T>>

package/src/components/util.ts

@@ -1,106 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { isEqual } from "lodash"
-import { useRef, useMemo } from "react"
-import { MathboxSelection, NodeType } from "mathbox"
-
-type WithPrivateUp = MathboxSelection & { _up?: WithPrivateUp }
-
-/**
- * Get root node given any node in Mathbox tree
- */
-const getRoot = (selection: MathboxSelection) => {
-  let current = selection as WithPrivateUp
-  while (current._up) {
-    current = current._up
-  }
-  return current
-}
-
-export const isRootDestroyed = (selection: MathboxSelection) => {
-  const root = getRoot(selection)
-  return root.three === undefined
-}
-
-/**
- * Check that parent is actually the selection's parent.
- * The mathbox components occasionally render with a selection value whose
- * parent does not match the parent specified in MathboxContext.
- *
- * I believe this fundamentally this is happening because
- * - we store parent value in context...
- * - we update the context parent value using useEffect hooks..
- * - useEffect hooks are called children before parents.
- *
- * One wonders whether we really need to be using useEffect hooks for the
- * mathbox components, or if we can just put all the node creation/removal stuff
- * in a render function. Hooks seem nice for dependencies, but mathbox is pretty
- * smart about diffing out the actual changes.
- */
-export const isSelectionParent = (
-  selection: MathboxSelection,
-  parent: MathboxSelection
-) => {
-  const selectionParentNode = (selection as WithPrivateUp)._up?.[0]
-  return selectionParentNode === parent[0]
-}
-
-const CAN_HAVE_CHILDREN = [
-  "view",
-  "cartesian",
-  "cartesian4",
-  "polar",
-  "spherical",
-  "stereographic",
-  "stereographic4",
-  "transform",
-  "transform4",
-  "vertex",
-  "fragment",
-  "layer",
-  "mask",
-  "group",
-  "inherit",
-  "root",
-  "unit",
-  "rtt",
-  "clock",
-  "now",
-  "move",
-  "present",
-  "reveal",
-  "slide",
-] as const
-
-export type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number]
-
-export const canNodeHaveChildren = (type: NodeType) =>
-  (CAN_HAVE_CHILDREN as readonly string[]).includes(type)
-
-export const capitalize = (s: string) => {
-  if (!s) return ""
-  return s[0].toLocaleUpperCase() + s.slice(1)
-}
-
-/**
- * Returns the same reference to `value` as long as the the given values are
- * deep equal.
- *
- * This is, in general, not a great idea. See
- * https://github.com/facebook/react/issues/14476#issuecomment-471199055
- *
- * This should work OK for mathbox options because the objects in question are
- * either shallow, or are deep equal at a fairly shallow level.
- * E.g., OrbitControls may not be a shall object, but if it's not, it will at
- * least be deep equal between renders.
- *
- * But should work OK for mathbox options.
- */
-export const useDeepCompareMemo = <T>(value: T, initial: T): T => {
-  const oldValue = useRef<T>(initial)
-  const memoOptions = useMemo(() => {
-    if (isEqual(value, oldValue.current)) return oldValue.current
-    oldValue.current = value
-    return value
-  }, [value])
-  return memoOptions
-}

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components"

package/src/stories/Cartesian.stories.tsx

@@ -1,36 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { CustomMathbox as Mathbox } from "./utils"
-import { Cartesian, Grid } from "../components/components"
-
-export default {
-  title: "Cartesian",
-  component: Cartesian,
-  argTypes: {
-    range: {
-      type: "array",
-      default: [
-        [-1, 1],
-        [-1, 1],
-        [-1, 1],
-        [-1, 1],
-      ],
-    },
-    scale: {
-      type: "array",
-      default: [1, 1, 1],
-    },
-  },
-} as Meta<typeof Cartesian>
-
-const Template: Story<React.ComponentProps<typeof Cartesian>> = (args) => (
-  <Mathbox containerStyle={{ height: 450 }}>
-    <Cartesian {...args}>
-      <Grid />
-    </Cartesian>
-  </Mathbox>
-)
-
-export const DefaultCartesian = Template.bind({})
-DefaultCartesian.args = {}

package/src/stories/Grid.stories.tsx

@@ -1,38 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { CustomMathbox as Mathbox } from "./utils"
-import { Grid } from "../components"
-
-export default {
-  title: "Grid",
-  component: Grid,
-  argTypes: {
-    color: {
-      type: "string",
-      default: "rgb(128, 128, 128)",
-    },
-    axes: {
-      type: "string",
-      default: "xy",
-    },
-  },
-} as Meta<typeof Grid>
-
-const Template: Story<React.ComponentProps<typeof Grid>> = (args) => (
-  <Mathbox containerStyle={{ height: 450 }}>
-    <Grid {...args} />
-  </Mathbox>
-)
-
-export const DefaultGrid = Template.bind({})
-DefaultGrid.args = {}
-
-export const GridXY = Template.bind({})
-GridXY.args = { axes: "xy" }
-
-export const GridYZ = Template.bind({})
-GridYZ.args = { axes: "yz" }
-
-export const GridZX = Template.bind({})
-GridZX.args = { axes: "zx" }

package/src/stories/Mathbox.stories.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react"
-
-import { ContainedMathbox } from "../components"
-
-export default {
-  title: "Mathbox",
-  component: ContainedMathbox,
-  argTypes: {},
-} as Meta<typeof ContainedMathbox>
-
-const Template: Story<React.ComponentProps<typeof ContainedMathbox>> = () => (
-  <ContainedMathbox />
-)
-
-export const HelloWorld = Template.bind({})

package/src/stories/Point.stories.tsx

@@ -1,68 +0,0 @@
-import React, { useState } from "react"
-import { Story, Meta } from "@storybook/react"
-import { MathboxSelection } from "mathbox"
-import { CustomMathbox as Mathbox } from "./utils"
-import { Cartesian, Grid, Point, Array as MBArray } from "../components"
-
-export default {
-  title: "Point",
-  component: Point,
-  argTypes: {
-    color: {
-      type: "string",
-      default: "rgb(128, 128, 128)",
-    },
-    opacity: {
-      type: "number",
-      default: 1,
-    },
-    points: {
-      type: "array",
-      default: [[1, 1, 1]],
-    },
-    size: {
-      type: "number",
-      default: 4,
-    },
-  },
-} as Meta<typeof Grid>
-
-const Template: Story<React.ComponentProps<typeof Point>> = (args) => {
-  const { points, ...otherArgs } = args
-  const [data, setData] = useState<MathboxSelection<"array">>()
-  return (
-    <Mathbox containerStyle={{ height: 450 }}>
-      <Cartesian
-        range={[
-          [-5, 5],
-          [-5, 5],
-          [-5, 5],
-        ]}
-      >
-        <Grid axes="xy" />
-        <Grid axes="xz" />
-        <MBArray
-          ref={setData}
-          items={1}
-          channels={3}
-          data={[
-            [1, 1, 2],
-            [1, 1, 3],
-          ]}
-        />
-        <MBArray
-          items={1}
-          channels={3}
-          data={[
-            [1, 1, -2],
-            [1, 1, -3],
-          ]}
-        />
-        <Point points={data} {...otherArgs} />
-      </Cartesian>
-    </Mathbox>
-  )
-}
-
-export const DefaultPoint = Template.bind({})
-DefaultPoint.args = {}

package/src/stories/utils.tsx

@@ -1,33 +0,0 @@
-import React, { useMemo, useCallback } from "react"
-import { MathboxSelection } from "mathbox"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
-import { ContainedMathbox } from "../components"
-
-type MathboxProps = React.ComponentProps<typeof ContainedMathbox>
-
-const storybookDefaultMathboxOptions = {
-  plugins: ["core", "controls", "cursor"],
-  controls: {
-    klass: OrbitControls,
-  },
-}
-
-export const CustomMathbox = (props: MathboxProps) => {
-  const { options: overrides, ...others } = props
-  const options = useMemo(
-    () => ({
-      ...storybookDefaultMathboxOptions,
-      ...(overrides ?? {}),
-    }),
-    [overrides]
-  )
-  const setup = useCallback((mathbox: MathboxSelection<"root"> | null) => {
-    if (mathbox === null) return
-    mathbox.three.camera.position.set(1, 1, 2)
-  }, [])
-  return (
-    <ContainedMathbox ref={setup} options={options} {...others}>
-      {props.children}
-    </ContainedMathbox>
-  )
-}

package/src/testSetup.ts

@@ -1,3 +0,0 @@
-import { getMockContext } from "./testUtils"
-
-HTMLCanvasElement.prototype.getContext = getMockContext

package/src/testUtils.ts

@@ -1,46 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Automock = any
-
-/**
- * A mock that uses proxies to create properties as they are accessed. Supports
- * function calls and toPrimitive.
- *
- * @param specifics Allows specifying specific values for properties. If a prop
- *  exists on `specifics`, then that value will be used when the property is
- * accessed on automock.
- * @returns
- */
-const getAutomock = <T extends Record<string | symbol, unknown>>(
-  specifics?: T
-): Automock => {
-  const autmockSeed = jest.fn()
-  const handler = {
-    get(target: Automock, prop: string | symbol) {
-      if (prop === Symbol.toPrimitive) {
-        return () => `Automock: ${JSON.stringify(specifics)}`
-      }
-      if (specifics && Reflect.has(specifics, prop)) {
-        const value = Reflect.get(specifics, prop)
-        return value
-      }
-      if (!Reflect.has(target, prop)) {
-        Reflect.set(target, prop, getAutomock())
-      }
-      return Reflect.get(target, prop)
-    },
-    apply() {
-      return getAutomock()
-    },
-  }
-  return new Proxy(autmockSeed, handler)
-}
-
-export const getMockContext = () => {
-  const mockContext = getAutomock({
-    getParameter: jest.fn((name) => {
-      if (name === mockContext.VERSION) return "Fake version!"
-      return getAutomock()
-    }),
-  })
-  return mockContext
-}

package/tsconfig.base.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "strict": true,
-    "jsx": "react",
-    "module": "ESNext",
-    "declaration": true,
-    "declarationDir": "types",
-    "sourceMap": true,
-    "outDir": "build",
-    "moduleResolution": "node",
-    "emitDeclarationOnly": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "exclude": ["dist", "node_modules"]
-}

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "./tsconfig.base.json",
-  "include": ["src/"],
-  "exclude": ["src/**/*.test.tsx", "src/**/*.stories.tsx"]
-}