voronoi lol

Merge pull request #70 from cdriesler/voronoi-lol
nodepen · May 14, 2021 · b19e656 · b19e656
2 parents 9b595f6 + 5bd8685
commit b19e656
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 81 deletions.
diff --git a/api/src/gql/resolvers/Query/getComputeConfiguration.ts b/api/src/gql/resolvers/Query/getComputeConfiguration.ts
@@ -2,5 +2,6 @@ import { Grasshopper } from 'glib'
 import { serverConfig } from '../../../store'
 
 export const getComputeConfiguration = (): Grasshopper.Component[] => {
+  console.log('Delivering server config.')
   return serverConfig
 }
diff --git a/api/src/store.ts b/api/src/store.ts
@@ -58,6 +58,12 @@ export const allowedComponents = {
     ],
   },
   maths: {
+    domain: [
+      'f44b92b0-3b5b-493a-86f4-fd7408c3daf3', // Bounds (Bnd)
+      'd1a28e95-cf96-4936-bf34-8bf142d731bf', // Construct Domain (Dom)
+      '825ea536-aebb-41e9-af32-8baeb2ecb590', // Deconstruct Domain (DeDomain)
+      '2fcc2743-8339-4cdf-a046-a1f17439191d', // Remap Numbers (ReMap)
+    ],
     operators: [
       'a0d62394-a118-422d-abb3-6af115c75b25', // Addition (A+B)
       '9c85271f-89fa-4e9f-9f4a-d75802120ccc', // Division (A/B)
@@ -77,8 +83,10 @@ export const allowedComponents = {
   sets: {
     list: [
       '59daf374-bc21-4a5e-8282-5504fb7ae9ae', // List Item (Item)
+      '1817fd29-20ae-4503-b542-f0fb651e67d7', // List Length (Lng)
       '6ec97ea8-c559-47a2-8d0f-ce80c794d1f4', // Reverse List (Rev)
       '6f93d366-919f-4dda-a35e-ba03dd62799b', // Sort List (Sort)
+      '9ab93e1a-ebdf-4090-9296-b000cff7b202', // Split List (Split)
     ],
     sequence: [
       // '01640871-69ea-40ac-9380-4660d6d28bd2', // Char Sequence (CharSeq)
@@ -94,6 +102,7 @@ export const allowedComponents = {
   vector: {
     grid: [
       '125dc122-8544-4617-945e-bb9a0c101c50', // Hexagonal (HexGrid)
+      'e2d958e8-9f08-44f7-bf47-a684882d0b2a', // Populate 2D (Pop2D)
       '66eedc35-187d-4dab-b49b-408491b1255f', // Radial (RadGrid)
       '1a25aae0-0b56-497a-85b2-cc5bf7e4b96b', // Rectangular (RecGrid)
       '717a1e25-a075-4530-bc80-d43ecc2500d9', // Square (SqGrid)
@@ -158,6 +167,22 @@ export const allowedComponents = {
       '71b5b089-500a-4ea6-81c5-2f960441a0e8', // PolyLine (PLine)
     ],
   },
+  mesh: {
+    triangulation: [
+      'a4011be0-1c91-45bd-8280-17dd3a9f46f1', // Voronoi (Voronoi)
+    ],
+  },
+  intersect: {
+    physical: [
+      '84627490-0fb2-4498-8138-ad134ee4cb36', // Curve | Curve (CCX)
+      '0991ac99-6a0b-47a9-b07d-dd510ca57f0f', // Curve | Self (CX)
+    ],
+    shape: [
+      'f72c480b-7ee6-42ef-9821-c371e9203b44', // Region Difference (RDiff)
+      '477c2e7b-c5e5-421e-b8b2-ba60cdf5398b', // Region Intersection (RInt)
+      '1222394f-0d33-4f31-9101-7281bde89fe5', // Region Union (RUnion)
+    ],
+  },
   transform: {
     affine: [
       '4d2a06bd-4b0f-4c65-9ee0-4220e4c01703', // Scale (Scale)

diff --git a/app/components/graph/GraphContainer.tsx b/app/components/graph/GraphContainer.tsx
@@ -11,13 +11,11 @@ export const GraphContainer = (): React.ReactElement => {
 
   return (
     <main className="w-full flex-grow overflow-hidden" id="graph-container">
-      <LoadingOverlay>
-        <div className="w-full h-full bg-pale flex flex-col items-center" style={{ height: minHeight }}>
-          <Header />
-          <Canvas />
-          <Controls />
-        </div>
-      </LoadingOverlay>
+      <div className="w-full h-full bg-pale flex flex-col items-center" style={{ height: minHeight }}>
+        <Header />
+        <Canvas />
+        <Controls />
+      </div>
     </main>
   )
 }
diff --git a/app/components/layout/RootLayout.tsx b/app/components/layout/RootLayout.tsx
@@ -62,7 +62,7 @@ export const RootLayout = ({ children }: RootLayoutProps): JSX.Element => {
                 A limited (but growing!) list of standard Grasshopper components are available.
               </li>
               <li className="leading-5 mb-1">
-                You may randomly experience breakages, performance issues, or other inexplicable behavior.
+                This was meant for a weekend infrastructure test. You will experience performance issues.
               </li>
               <li className="leading-5 mb-1">
                 The database can be wiped at any time, clearing anything that might persist today.

diff --git a/app/components/scene/Scene.tsx b/app/components/scene/Scene.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Canvas, extend } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 import * as MeshLine from 'threejs-meshline'
 import { Glasshopper } from 'glib'
 import { useGraphManager } from '@/context/graph'
 import { useSceneManager } from './lib/context'
-import { SceneElementId as Id } from './lib/types'
+import { DrawMode, SceneElementId as Id } from './lib/types'
 import { SceneGrid as Grid } from './SceneGrid'
 import * as Geometry from './lib/geometry'
 
@@ -20,6 +20,8 @@ const Scene = (): React.ReactElement => {
     store: { selection },
   } = useSceneManager()
 
+  const [mode, setMode] = useState<DrawMode>('default')
+
   const getElementTrees = (element: Glasshopper.Element.Base): [string, Glasshopper.Data.DataTree][] => {
     switch (element.template.type) {
       case 'static-component': {
@@ -72,37 +74,82 @@ const Scene = (): React.ReactElement => {
   }
 
   return (
-    <Canvas orthographic camera={{ zoom: 50, position: [0, 20, 0], near: -5 }}>
-      <OrbitControls />
-      <Grid />
-      <>
-        {elementsToValues(Object.values(elements)).map(([id, value]) => {
-          const selected = selection.includes(id.element)
-
-          switch (value.type) {
-            case 'point': {
-              const { data } = value as Glasshopper.Data.DataTreeValue<'point'>
-
-              return <Geometry.Point key={idToKey(id)} point={data} selected={selected} />
-            }
-            case 'curve': {
-              const { data } = value as Glasshopper.Data.DataTreeValue<'curve'>
-
-              return <Geometry.Curve key={idToKey(id)} curve={data} />
-            }
-            case 'line': {
-              const { data } = value as Glasshopper.Data.DataTreeValue<'line'>
-
-              return <Geometry.Line key={idToKey(id)} line={data} />
-            }
-            default: {
-              return null
+    <>
+      <div className="w-full h-12 p-2 pl-8 pr-8 flex flex-row justify-start items-center bg-green z-10">
+        <button
+          onClick={() => setMode((current) => (current === 'default' ? 'selection' : 'default'))}
+          className={`${
+            mode === 'selection' ? 'bg-swampgreen' : ''
+          } p-2 h-6 mr-2 rounded-full border-2 border-swampgreen flex flex-row items-center justify-center font-display text-sm`}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+            />
+          </svg>
+          <p className="ml-2 hidden md:block">Only show selected</p>
+        </button>
+      </div>
+      <Canvas orthographic camera={{ zoom: 50, position: [0, 20, 0], near: -5 }} style={{ height: '100%' }}>
+        <OrbitControls />
+        <Grid />
+        <>
+          {elementsToValues(Object.values(elements)).map(([id, value]) => {
+            const selected = selection.includes(id.element)
+
+            switch (value.type) {
+              case 'point': {
+                const { data } = value as Glasshopper.Data.DataTreeValue<'point'>
+
+                const material = {
+                  size: 0.5,
+                  color: selected ? 'green' : 'darkred',
+                  opacity: mode === 'selection' ? (selected ? 0.6 : 0) : 0.6,
+                }
+
+                return <Geometry.Point key={idToKey(id)} point={data} material={material} />
+              }
+              case 'curve': {
+                const { data } = value as Glasshopper.Data.DataTreeValue<'curve'>
+
+                const material = {
+                  size: 0.1,
+                  color: selected ? 'green' : 'darkred',
+                  opacity: mode === 'selection' ? (selected ? 0.9 : 0) : 0.9,
+                }
+
+                return <Geometry.Curve key={idToKey(id)} curve={data} material={material} />
+              }
+              case 'line': {
+                const { data } = value as Glasshopper.Data.DataTreeValue<'line'>
+
+                const material = {
+                  size: 0.1,
+                  color: selected ? 'green' : 'darkred',
+                  opacity: mode === 'selection' ? (selected ? 0.9 : 0) : 0.9,
+                }
+
+                return <Geometry.Line key={idToKey(id)} line={data} material={material} />
+              }
+              default: {
+                return null
+              }
             }
-          }
-        })}
-      </>
-      {/* </OrthographicCamera> */}
-    </Canvas>
+          })}
+        </>
+        {/* </OrthographicCamera> */}
+      </Canvas>
+    </>
   )
 }
 

diff --git a/app/components/scene/SceneContainer.tsx b/app/components/scene/SceneContainer.tsx
@@ -1,20 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import dynamic from 'next/dynamic'
 import { LoadingOverlay } from '../common'
 import { SceneManager } from './lib/context'
 
 export const SceneContainer = (): React.ReactElement => {
   const Scene = dynamic(import('./Scene'), { ssr: false })
 
+  const config = useMemo(() => ({ draw: 'default' as 'default' | 'selection' }), [])
+
   return (
     <SceneManager>
-      <main className="w-full flex-grow overflow-hidden">
-        <LoadingOverlay>
-          <div className="w-full h-full bg-pale flex flex-col items-center">
-            <div className="w-full h-12 bg-green z-10" />
-            <Scene />
-          </div>
-        </LoadingOverlay>
+      <main className="w-full overflow-hidden" style={{ height: '100vh' }}>
+        <div className="w-full h-full bg-pale flex flex-col items-center">
+          <Scene />
+        </div>
       </main>
     </SceneManager>
   )

diff --git a/app/components/scene/SceneGrid.tsx b/app/components/scene/SceneGrid.tsx
@@ -1,26 +1,33 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Curve } from './lib/geometry'
 
 export const SceneGrid = (): React.ReactElement => {
   const extents = 20
   const steps = Array.from('x'.repeat(extents * 2 + 1))
 
-  return (
-    <>
-      {steps.map((x, i) => {
-        return (
-          <>
-            <Curve
-              curve={{ degree: 1, segments: [[i - extents, -extents, 0, 0, 0, 0, 0, 0, 0, i - extents, extents, 0]] }}
-              material={{ width: 0.04, color: '#98E2C6' }}
-            />
-            <Curve
-              curve={{ degree: 1, segments: [[-extents, i - extents, 0, 0, 0, 0, 0, 0, 0, extents, i - extents, 0]] }}
-              material={{ width: 0.04, color: '#98E2C6' }}
-            />
-          </>
-        )
-      })}
-    </>
+  const grid = useMemo(
+    () => (
+      <>
+        {steps.map((x, i) => {
+          return (
+            <>
+              <Curve
+                curve={{ degree: 1, segments: [[i - extents, -extents, 0, 0, 0, 0, 0, 0, 0, i - extents, extents, 0]] }}
+                material={{ size: 0.04, color: '#98E2C6', opacity: 1 }}
+                key={`grid-a-${i}`}
+              />
+              <Curve
+                curve={{ degree: 1, segments: [[-extents, i - extents, 0, 0, 0, 0, 0, 0, 0, extents, i - extents, 0]] }}
+                material={{ size: 0.04, color: '#98E2C6', opacity: 1 }}
+                key={`grid-b-${i}`}
+              />
+            </>
+          )
+        })}
+      </>
+    ),
+    []
   )
+
+  return grid
 }
diff --git a/app/components/scene/lib/geometry/CurveGeometry.tsx b/app/components/scene/lib/geometry/CurveGeometry.tsx
@@ -1,13 +1,11 @@
 import React, { useRef } from 'react'
 import { Glasshopper } from 'glib'
 import { Vector3 } from 'three'
+import { DrawMaterial } from '../types'
 
 type CurveProps = {
   curve: Glasshopper.Geometry.Curve
-  material?: {
-    color?: string
-    width?: number
-  }
+  material: DrawMaterial
 }
 
 export const CurveGeometry = ({ curve, material }: CurveProps): React.ReactElement => {
@@ -34,8 +32,10 @@ export const CurveGeometry = ({ curve, material }: CurveProps): React.ReactEleme
         attach="material"
         ref={mat}
         depthTest={false}
-        lineWidth={material?.width ?? 0.1}
-        color={material?.color ?? 'darkred'}
+        opacity={material.opacity}
+        transparent={material.opacity < 1}
+        lineWidth={material.size ?? 0.1}
+        color={material.color ?? 'darkred'}
       />
     </mesh>
   )

diff --git a/app/components/scene/lib/geometry/LineGeometry.tsx b/app/components/scene/lib/geometry/LineGeometry.tsx
@@ -1,13 +1,11 @@
 import { React } from '@ungap/global-this'
 import { Glasshopper } from 'glib'
 import { Vector3 } from 'three'
+import { DrawMaterial } from '../types'
 
 type LineProps = {
   line: Glasshopper.Geometry.Line
-  material?: {
-    color?: string
-    width?: number
-  }
+  material: DrawMaterial
 }
 
 export const LineGeometry = ({ line, material }: LineProps): React.ReactElement => {
@@ -23,8 +21,10 @@ export const LineGeometry = ({ line, material }: LineProps): React.ReactElement
       <meshLineMaterial
         attach="material"
         depthTest={false}
-        lineWidth={material?.width ?? 0.06}
+        lineWidth={material?.size ?? 0.06}
         color={material?.color ?? 'darkred'}
+        opacity={material.opacity}
+        transparent={material.opacity < 1}
       />
     </mesh>
   )

diff --git a/app/components/scene/lib/geometry/PointGeometry.tsx b/app/components/scene/lib/geometry/PointGeometry.tsx
@@ -1,18 +1,24 @@
 import React from 'react'
 import { Sphere } from '@react-three/drei'
 import { Glasshopper } from 'glib'
+import { DrawMaterial } from '../types'
 
 type PointProps = {
   point: Glasshopper.Geometry.Point
-  selected: boolean
+  material: DrawMaterial
 }
 
-export const PointGeometry = ({ point, selected }: PointProps): React.ReactElement => {
+export const PointGeometry = ({ point, material }: PointProps): React.ReactElement => {
   const { x, y, z } = point
 
   return (
     <Sphere visible args={[0.1, 10, 10]} position={[x, z, -y]}>
-      <meshBasicMaterial attach="material" color={selected ? 'green' : 'darkred'} opacity={0.6} transparent={true} />
+      <meshBasicMaterial
+        attach="material"
+        color={material.color}
+        opacity={material.opacity}
+        transparent={material.opacity < 1}
+      />
     </Sphere>
   )
 }
diff --git a/app/components/scene/lib/types/DrawMaterial.ts b/app/components/scene/lib/types/DrawMaterial.ts
@@ -0,0 +1,5 @@
+export type DrawMaterial = {
+  opacity: number
+  color: string
+  size: number
+}
diff --git a/app/components/scene/lib/types/DrawMode.ts b/app/components/scene/lib/types/DrawMode.ts
@@ -0,0 +1 @@
+export type DrawMode = 'default' | 'selection'