antd-color-editor/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 theme = (0, import_antd_style.useTheme)();
  const ref = (0, import_react.useRef)();
  const { colorType, threeZoom, autoRotate, showFloor, hueZoom } = config;
  return /* @__PURE__ */ React.createElement(import_fiber.Canvas, { style: { background: isDarkMode ? "#222" : "#f1f1f1", height: "100%", width: "100%" } }, /* @__PURE__ */ React.createElement(import_react.Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(import_drei.Environment, { files: cube }), /* @__PURE__ */ React.createElement("ambientLight", null), /* @__PURE__ */ React.createElement(import_drei.Center, { scale: 0.02 }, 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: [25, 100, theme.colorBorderSecondary, theme.colorBorder],
      castShadow: false,
      position: [0, -1, 0],
      receiveShadow: false
    }
  ), /* @__PURE__ */ React.createElement(import_drei.OrbitControls, { autoRotate, makeDefault: true, ref }));
});
var ThreeView_default = ThreeView;