text: import { createElement, useState, useMemo } from 'react';
  import { Vector3, CanvasTexture } from 'three';
  import { useGizmoContext } from './GizmoHelper.js';
  
  const faces = ['right', 'left', 'top', 'bottom', 'front', 'back'];
  
  const makePositionVector = xyz => new Vector3(...xyz).multiplyScalar(0.38);
  
  const corners = [[1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1], [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]].map(makePositionVector);
  const cornerDimensions = [0.25, 0.25, 0.25];
  const edges = [[1, 1, 0], [1, 0, 1], [1, 0, -1], [1, -1, 0], [0, 1, 1], [0, 1, -1], [0, -1, 1], [0, -1, -1], [-1, 1, 0], [-1, 0, 1], [-1, 0, -1], [-1, -1, 0]].map(makePositionVector);
  const edgeDimensions = edges.map(edge => edge.toArray().map(axis => axis == 0 ? 0.5 : 0.25));
  
  const FaceMaterial = ({
    hover,
    index
  }) => {
    const texture = useMemo(() => {
      const canvas = document.createElement('canvas');
      canvas.width = 128;
      canvas.height = 128;
      const context = canvas.getContext('2d');
      context.fillStyle = '#eee';
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.strokeStyle = '#444';
      context.strokeRect(0, 0, canvas.width, canvas.height);
      context.font = '28px Arial';
      context.textAlign = 'center';
      context.fillStyle = '#222';
      context.fillText(faces[index].toUpperCase(), 64, 76);
      return new CanvasTexture(canvas);
    }, [index]);
    return /*#__PURE__*/createElement("meshLambertMaterial", {
      map: texture,
      attachArray: "material",
      color: hover ? 'hotpink' : 'white'
    });
  };
  
  const FaceCube = () => {
    const {
      tweenCamera,
      raycast
    } = useGizmoContext();
    const [hover, setHover] = useState(null);
  
    const handlePointerOut = e => {
      setHover(null);
      e.stopPropagation();
    };
  
    const handlePointerDown = e => {
      tweenCamera(e.face.normal);
      e.stopPropagation();
    };
  
    const handlePointerMove = e => {
      setHover(Math.floor(e.faceIndex / 2));
      e.stopPropagation();
    };
  
    return /*#__PURE__*/createElement("mesh", {
      raycast: raycast,
      onPointerOut: handlePointerOut,
      onPointerMove: handlePointerMove,
      onPointerDown: handlePointerDown
    }, [...Array(6)].map((_, index) => /*#__PURE__*/createElement(FaceMaterial, {
      key: index,
      index: index,
      hover: hover === index
    })), /*#__PURE__*/createElement("boxBufferGeometry", {
      attach: "geometry",
      args: [1, 1, 1]
    }));
  };
  
  const EdgeCube = ({
    dimensions,
    position
  }) => {
    const {
      tweenCamera,
      raycast
    } = useGizmoContext();
    const [hover, setHover] = useState(false);
  
    const handlePointerOut = e => {
      setHover(false);
      e.stopPropagation();
    };
  
    const handlePointerOver = e => {
      setHover(true);
      e.stopPropagation();
    };
  
    const handlePointerDown = e => {
      tweenCamera(position);
      e.stopPropagation();
    };
  
    return /*#__PURE__*/createElement("mesh", {
      position: position,
      raycast: raycast,
      onPointerOver: handlePointerOver,
      onPointerOut: handlePointerOut,
      onPointerDown: handlePointerDown
    }, /*#__PURE__*/createElement("meshBasicMaterial", {
      color: hover ? 'hotpink' : 'white',
      transparent: true,
      opacity: 0.75,
      visible: hover
    }), /*#__PURE__*/createElement("boxBufferGeometry", {
      attach: "geometry",
      args: dimensions
    }));
  };
  
  const GizmoViewcube = () => {
    return /*#__PURE__*/createElement("group", {
      scale: [60, 60, 60]
    }, /*#__PURE__*/createElement(FaceCube, null), edges.map((edge, index) => /*#__PURE__*/createElement(EdgeCube, {
      key: index,
      position: edge,
      dimensions: edgeDimensions[index]
    })), corners.map((corner, index) => /*#__PURE__*/createElement(EdgeCube, {
      key: index,
      position: corner,
      dimensions: cornerDimensions
    })), /*#__PURE__*/createElement("ambientLight", {
      intensity: 0.5
    }), /*#__PURE__*/createElement("pointLight", {
      position: [10, 10, 10],
      intensity: 0.5
    }));
  };
  
  export { GizmoViewcube };
  