kitchen-color-studio/lib/ColorStudio/components/ThreeView.js

an open-source color editor for designing color system

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/ColorStudio/components/ThreeView.tsx
var ThreeView_exports = {};
__export(ThreeView_exports, {
  default: () => ThreeView_default
});
module.exports = __toCommonJS(ThreeView_exports);
var import_drei = require("@react-three/drei");
var import_fiber = require("@react-three/fiber");
var import_antd_style = require("antd-style");
var import_react = require("react");
var import__ = require("../../index");
var cube = [
  "https://gw.alipayobjects.com/zos/antfincdn/A2UP6WYMLw/px.png",
  "https://gw.alipayobjects.com/zos/antfincdn/YrnP3LArEC/nx.png",
  "https://gw.alipayobjects.com/zos/antfincdn/TFxGCynnr3/py.png",
  "https://gw.alipayobjects.com/zos/antfincdn/0xv2XBW3oq/ny.png",
  "https://gw.alipayobjects.com/zos/antfincdn/wbdSuRHSRo/pz.png",
  "https://gw.alipayobjects.com/zos/antfincdn/pzB8izsxKd/nz.png"
];
var ThreeView = (0, import_react.memo)(({ config, data }) => {
  const { isDarkMode } = (0, import_antd_style.useThemeMode)();
  const ref = (0, import_react.useRef)();
  const { colorType, threeZoom, autoRotate, showFloor, hueZoom } = config;
  return /* @__PURE__ */ React.createElement(
    import_fiber.Canvas,
    {
      camera: { position: [0, 0, 0], fov: 55 },
      gl: { preserveDrawingBuffer: true },
      shadows: true,
      style: { width: "100%", height: "100%", background: isDarkMode ? "#222" : "#f1f1f1" }
    },
    /* @__PURE__ */ React.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
      import_drei.Stage,
      {
        adjustCamera: true,
        controls: ref,
        environment: void 0,
        shadows: true
      },
      /* @__PURE__ */ React.createElement(import_drei.Environment, { files: cube }),
      data.map((item) => /* @__PURE__ */ React.createElement(
        import__.GenColor3D,
        {
          colorType,
          hueZoom,
          key: item.name,
          name: item.name,
          scale: isDarkMode ? item.scales.dark : item.scales.light,
          zoom: threeZoom
        }
      ))
    )),
    showFloor && /* @__PURE__ */ React.createElement(
      "gridHelper",
      {
        args: [1e3, 50, isDarkMode ? "#444" : "#ccc", isDarkMode ? "#333" : "#ddd"],
        castShadow: false,
        position: [0, -1, 0],
        receiveShadow: false
      }
    ),
    /* @__PURE__ */ React.createElement(import_drei.OrbitControls, { autoRotate, makeDefault: true, ref })
  );
});
var ThreeView_default = ThreeView;