@nocobase/flow-engine/lib/components/dnd/index.js

A standalone flow engine for NocoBase, managing workflows, models, and actions.

/**
 * This file is part of the NocoBase (R) project.
 * Copyright (c) 2020-2024 NocoBase Co., Ltd.
 * Authors: NocoBase Team.
 *
 * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
 * For more information, please refer to: https://www.nocobase.com/agreement.
 */

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var dnd_exports = {};
__export(dnd_exports, {
  DndProvider: () => DndProvider,
  DragHandler: () => DragHandler,
  Droppable: () => Droppable,
  EMPTY_COLUMN_UID: () => EMPTY_COLUMN_UID
});
module.exports = __toCommonJS(dnd_exports);
var import_icons = require("@ant-design/icons");
var import_core = require("@dnd-kit/core");
var import_react = __toESM(require("react"));
var import_react_dom = require("react-dom");
var import_provider = require("../../provider");
__reExport(dnd_exports, require("./getMousePositionOnElement"), module.exports);
__reExport(dnd_exports, require("./moveBlock"), module.exports);
const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
const DragHandler = /* @__PURE__ */ __name(({
  model,
  children = /* @__PURE__ */ import_react.default.createElement(import_icons.DragOutlined, null)
}) => {
  const { attributes, listeners, setNodeRef, isDragging } = (0, import_core.useDraggable)({ id: model.uid });
  return /* @__PURE__ */ import_react.default.createElement(
    "span",
    {
      ref: setNodeRef,
      ...listeners,
      ...attributes,
      style: {
        cursor: "grab"
      }
    },
    children
  );
}, "DragHandler");
const Droppable = /* @__PURE__ */ __name(({ model, children }) => {
  const { setNodeRef, isOver, active } = (0, import_core.useDroppable)({ id: model.uid });
  const isActiveDroppable = (active == null ? void 0 : active.id) === model.uid;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: setNodeRef,
      style: {
        position: "relative",
        opacity: isActiveDroppable ? 0.3 : 1,
        outline: isActiveDroppable ? "2px solid var(--colorBorderSettingsHover)" : "none",
        borderRadius: isActiveDroppable ? model.context.themeToken.borderRadiusLG : "none"
      }
    },
    children,
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: isOver ? "var(--colorBgSettingsHover)" : "transparent",
          pointerEvents: "none"
        }
      }
    )
  );
}, "Droppable");
const DndProvider = /* @__PURE__ */ __name(({
  persist = true,
  children,
  onDragEnd,
  ...restProps
}) => {
  const [activeId, setActiveId] = (0, import_react.useState)(null);
  const flowEngine = (0, import_provider.useFlowEngine)();
  return /* @__PURE__ */ import_react.default.createElement(
    import_core.DndContext,
    {
      onDragStart: (event) => {
        var _a;
        setActiveId(event.active.id);
        (_a = restProps.onDragStart) == null ? void 0 : _a.call(restProps, event);
      },
      onDragEnd: (event) => {
        setActiveId(null);
        if (!onDragEnd) {
          if (event.over) {
            flowEngine.moveModel(event.active.id, event.over.id, { persist });
          }
        } else {
          onDragEnd(event);
        }
      },
      ...restProps
    },
    children,
    (0, import_react_dom.createPortal)(
      /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, { dropAnimation: null, zIndex: 2e3 }, activeId && /* @__PURE__ */ import_react.default.createElement(
        "span",
        {
          style: {
            display: "inline-flex",
            alignItems: "center",
            whiteSpace: "nowrap",
            background: "#fff",
            border: "1px solid #1890ff",
            borderRadius: 4,
            padding: "4px 12px",
            color: "#1890ff",
            // fontSize: 18,
            boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
          }
        },
        flowEngine.translate("Dragging")
      )),
      document.body
    )
  );
}, "DndProvider");
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  DndProvider,
  DragHandler,
  Droppable,
  EMPTY_COLUMN_UID,
  ...require("./getMousePositionOnElement"),
  ...require("./moveBlock")
});