@difizen/libro-core 0.0.2-alpha.0

package/es/components/dnd-component/default-dnd-content.js

@@ -0,0 +1,257 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useConfigurationValue } from '@difizen/mana-app';
+import { getOrigin, useInject, ViewInstance } from '@difizen/mana-app';
+import React, { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { useDrag, useDragDropManager, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { CellService } from "../../cell/index.js";
+import { CellCollapsible } from "../../collapse-service.js";
+import { isCellView, DragAreaKey } from "../../libro-protocol.js";
+import { MultiSelectionWhenShiftClick } from "../../configuration/libro-configuration.js";
+import { HolderOutlined, PlusOutlined } from "../../material-from-designer.js";
+import { hasErrorOutput } from "../../output/index.js";
+import { BetweenCellProvider } from "../cell-protocol.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DefaultDndContent = function DefaultDndContent(_ref) {
+  var _instance$container, _instance$container$c;
+  var cell = _ref.cell,
+    index = _ref.index;
+  var ref = useRef(null);
+  var instance = useInject(ViewInstance);
+  var _useConfigurationValu = useConfigurationValue(MultiSelectionWhenShiftClick),
+    _useConfigurationValu2 = _slicedToArray(_useConfigurationValu, 1),
+    multiSelectionWhenShiftClick = _useConfigurationValu2[0];
+  var BetweenCellContent = useInject(BetweenCellProvider);
+  var cellService = useInject(CellService);
+  var dragDropManager = useDragDropManager();
+  var dragDropMonitor = dragDropManager.getMonitor();
+  var ItemRender = getOrigin(instance.dndItemRender);
+  var handleFocus = useCallback(function (e) {
+    var className = e.target.className;
+    if (e.target.tagName === 'svg' || className && className && typeof className === 'string' && (className.includes('mana-toolbar-item') || className.includes('mana-toolbar'))) {
+      return;
+    }
+    instance.model.selectCell(cell);
+    instance.model.selections = [];
+    if (cell.shouldEnterEditorMode(e)) {
+      instance.enterEditMode();
+    }
+  }, [instance, cell]);
+  var handleMouseDown = useCallback(function (e) {
+    if (e.shiftKey && multiSelectionWhenShiftClick) {
+      //按shift键时为多选cell
+      instance.extendContiguousSelectionTo(index);
+      instance.model.mouseMode = 'multipleSelection';
+      return;
+    }
+    instance.model.mouseMode = 'mouseDown';
+  }, [multiSelectionWhenShiftClick, instance, index]);
+  var handleMouseUp = useCallback(function () {
+    if (instance.model.mouseMode === 'multipleSelection' || instance.model.mouseMode === 'drag') {
+      return;
+    }
+    instance.model.selectCell(cell);
+    instance.model.selections = [];
+  }, [instance, cell]);
+  var _useDrag = useDrag({
+      type: DragAreaKey,
+      item: {
+        cell: cell,
+        index: index
+      },
+      collect: function collect(monitor) {
+        return {
+          isDrag: monitor.isDragging()
+        };
+      },
+      end: function end() {
+        instance.isDragging = false;
+      }
+    }, [cell, index]),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDrag = _useDrag2[0].isDrag,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
+  dragDropMonitor.subscribeToStateChange(function () {
+    instance.isDragging = dragDropMonitor.isDragging();
+  });
+  var libroViewContent = (_instance$container = instance.container) === null || _instance$container === void 0 ? void 0 : (_instance$container$c = _instance$container.current) === null || _instance$container$c === void 0 ? void 0 : _instance$container$c.getElementsByClassName('libro-view-content')[0];
+  var scrollTimer = useRef(null);
+  useEffect(function () {
+    scrollTimer.current = setInterval(function () {
+      var currentOffset = dragDropMonitor.getClientOffset();
+      if (libroViewContent && instance.isDragging && currentOffset) {
+        var libroViewClientRect = libroViewContent.getBoundingClientRect();
+        var top = libroViewClientRect.top,
+          bottom = libroViewClientRect.bottom;
+        var y = currentOffset.y;
+        var topLimit = top + 30;
+        var bottomLimit = bottom - 50;
+        if (y < topLimit) {
+          libroViewContent.scrollTop -= 0.5;
+        } else if (y > bottomLimit) {
+          libroViewContent.scrollTop += 0.5;
+        }
+      }
+    }, 10);
+    return function () {
+      if (scrollTimer.current) {
+        clearInterval(scrollTimer.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    // This gets called after every render, by default
+    // (the first one, and every one after that)
+
+    // Use empty image as a drag preview so browsers don't draw it
+    // and we can draw whatever we want on the custom drag layer instead.
+    preview(getEmptyImage(), {
+      // IE fallback: specify that we'd rather screenshot the node
+      // when it already knows it's being dragged so we can hide it with CSS.
+      captureDraggingState: true
+    });
+  }, [preview]);
+  var _useDrop = useDrop({
+      accept: DragAreaKey,
+      drop: function drop(item, monitor) {
+        cellService.getOrCreateView(_objectSpread(_objectSpread({}, item.cell.model.options), {}, {
+          modelId: item.cell.model.id,
+          singleSelectionDragPreview: true
+        }), item.cell.parent.id).then(function (view) {
+          view.dispose();
+          return;
+        }).catch(function () {
+          //
+        });
+        if (isCellView(item.cell)) {
+          var didDrop = monitor.didDrop();
+          if (didDrop) {
+            return;
+          }
+          var dragIndex = instance.findCellIndex(item.cell);
+          var dropIndex = instance.findCellIndex(cell);
+          if (instance.model.selections.length > 0) {
+            var isDragInSelections = instance.model.selections.findIndex(function (selection) {
+              return selection.id === item.cell.id;
+            }) > -1 ? true : false;
+            var isDropInSelections = instance.model.selections.findIndex(function (selection) {
+              return selection.id === cell.id;
+            }) > -1 ? true : false;
+            if (isDragInSelections && isDropInSelections) {
+              return;
+            }
+            if (isDragInSelections) {
+              instance.model.exchangeCells(instance.model.selections, dropIndex);
+              instance.model.scrollToView(cell);
+              return;
+            }
+          }
+          if (dragIndex < dropIndex) {
+            instance.model.exchangeCell(dragIndex, dropIndex - 1);
+            instance.model.scrollToView(cell);
+          }
+          if (dragIndex > dropIndex) {
+            instance.model.exchangeCell(dragIndex, dropIndex);
+            instance.model.scrollToView(cell);
+          }
+        }
+        return;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragOver: monitor.isOver(),
+          canDrop: monitor.canDrop(),
+          handlerId: monitor.getHandlerId()
+        };
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    handlerId = _useDrop2$.handlerId,
+    isDragOver = _useDrop2$.isDragOver,
+    drop = _useDrop2[1];
+  var opacity = isDrag ? 0.4 : 1;
+  if (!instance.model.readOnly) {
+    drop(ref);
+  }
+  if (isDrag) {
+    instance.model.mouseMode = 'drag';
+  }
+  var isSelected = instance.isSelected(cell);
+  // let isMouseOver = false;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMouseOverDragArea = _useState2[0],
+    setIsMouseOverDragArea = _useState2[1];
+  var hasCellHidden = cell.hasCellHidden();
+  var hasErrorOutputs = hasErrorOutput(cell);
+  var isCollapsible = CellCollapsible.is(cell);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "libro-dnd-cell-container ".concat(isSelected ? 'selected' : '', " ").concat(hasCellHidden ? 'hidden' : ''),
+    "data-handler-id": handlerId,
+    style: {
+      opacity: opacity
+    },
+    ref: ref,
+    id: cell.id,
+    children: [/*#__PURE__*/_jsx(BetweenCellContent, {
+      index: index,
+      addCell: cell.parent.addCellAbove
+    }), isDragOver && /*#__PURE__*/_jsx("div", {
+      className: "libro-drag-hoverline"
+    }), isMouseOverDragArea && /*#__PURE__*/_jsx(HolderOutlined, {
+      className: "libro-handle-style"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "libro-drag-area",
+      ref: drag,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      onMouseOver: function onMouseOver() {
+        return setIsMouseOverDragArea(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsMouseOverDragArea(false);
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      tabIndex: -1,
+      onFocus: handleFocus
+      // onClick={e => e.preventDefault()}
+      ,
+      className: "libro-dnd-cell-content ".concat(hasErrorOutputs ? 'error' : ''),
+      children: /*#__PURE__*/_jsx(ItemRender, {
+        isDragOver: !!isDragOver,
+        isDrag: !!isDrag,
+        cell: cell,
+        isMouseOverDragArea: isMouseOverDragArea
+      })
+    }), isCollapsible && cell.headingCollapsed && cell.collapsibleChildNumber > 0 && /*#__PURE__*/_jsx("div", {
+      className: "libro-cell-collapsed-expander",
+      children: /*#__PURE__*/_jsxs("button", {
+        className: "libro-cell-expand-button",
+        onClick: function onClick() {
+          return instance.collapseCell(cell, false);
+        },
+        children: [/*#__PURE__*/_jsx(PlusOutlined, {
+          className: ""
+        }), " ", cell.collapsibleChildNumber, " cell hidden"]
+      })
+    })]
+  });
+};
+export var LibroBetweenCellContent = /*#__PURE__*/forwardRef(function LibroBetweenCellContent() {
+  return null;
+});

package/es/components/dnd-component/dnd-context.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+export declare const DndContext: FC<any>;
+//# sourceMappingURL=dnd-context.d.ts.map

package/es/components/dnd-component/dnd-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-context.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/dnd-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,GAAG,CAmB9B,CAAC"}

package/es/components/dnd-component/dnd-context.js

@@ -0,0 +1,20 @@
+import { ViewInstance } from '@difizen/mana-app';
+import { getOrigin, useInject } from '@difizen/mana-app';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DndContext = function DndContext(_ref) {
+  var _getOrigin$container;
+  var children = _ref.children;
+  var instance = useInject(ViewInstance);
+  if (!instance.isVisible && !instance.model.dndAreaNullEnable) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(DndProvider, {
+    backend: HTML5Backend,
+    options: {
+      rootElement: instance.isVisible || !instance.model.dndAreaNullEnable ? (_getOrigin$container = getOrigin(instance).container) === null || _getOrigin$container === void 0 ? void 0 : _getOrigin$container.current : null
+    },
+    children: children
+  });
+};

package/es/components/dnd-component/dnd-list.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { LibroView } from '../../libro-view.js';
+export declare const DndCellContent: import("react").ForwardRefExoticComponent<{
+    libroView: LibroView;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DndList: import("react").ForwardRefExoticComponent<{
+    libroView: LibroView;
+    children: any;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=dnd-list.d.ts.map

package/es/components/dnd-component/dnd-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-list.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/dnd-list.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAcrD,eAAO,MAAM,cAAc;eAA2C,SAAS;kDAqB9E,CAAC;AAEF,eAAO,MAAM,OAAO;eAEL,SAAS;cAAY,GAAG;kDAkErC,CAAC"}

package/es/components/dnd-component/dnd-list.js

@@ -0,0 +1,115 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["cell", "index"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { getOrigin, useInject, useObserve, ViewInstance } from '@difizen/mana-app';
+import { forwardRef, memo } from 'react';
+import { useDrop } from 'react-dnd';
+import { LibroCellService } from "../../cell/index.js";
+import { DragAreaKey, isCellView } from "../../libro-protocol.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DndContent = function DndContent(_ref) {
+  var cell = _ref.cell,
+    index = _ref.index,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var observableCell = useObserve(cell);
+  var instance = useInject(ViewInstance);
+  var DndContentRender = instance.dndContentRender;
+  return /*#__PURE__*/_jsx(DndContentRender, _objectSpread({
+    cell: observableCell,
+    index: index
+  }, props), cell.id);
+};
+var DndContentMemo = /*#__PURE__*/memo(DndContent);
+export var DndCellContent = /*#__PURE__*/forwardRef(function DndCellContent(_ref2, ref) {
+  var libroView = _ref2.libroView;
+  var LoadingRender = getOrigin(libroView.loadingRender);
+  var cells = libroView.model.getCells().reduce(function (a, b) {
+    if (a.indexOf(b) < 0) {
+      a.push(b);
+    }
+    return a;
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "libro-dnd-cells-container",
+    ref: ref,
+    children: [!libroView.model.isInitialized && /*#__PURE__*/_jsx(LoadingRender, {}), libroView.model.isInitialized && cells.filter(function (cell) {
+      return cell.collapsedHidden === false;
+    }).map(function (cell, index) {
+      return /*#__PURE__*/_jsx(DndContentMemo, {
+        cell: cell,
+        index: index
+      }, cell.id);
+    })]
+  });
+});
+export var DndList = /*#__PURE__*/forwardRef(function DndList(_ref3) {
+  var libroView = _ref3.libroView,
+    children = _ref3.children;
+  var cellService = useInject(LibroCellService);
+  var _useDrop = useDrop(function () {
+      return {
+        accept: DragAreaKey,
+        drop: function drop(item, dropMonitor) {
+          cellService.getOrCreateView(_objectSpread(_objectSpread({}, item.cell.model.options), {}, {
+            modelId: item.cell.model.id,
+            singleSelectionDragPreview: true
+          }), item.cell.parent.id).then(function (view) {
+            return view.dispose();
+          }).catch(function () {
+            //
+          });
+          if (isCellView(item.cell)) {
+            var _lastCell$container, _lastCell$container$c;
+            var didDrop = dropMonitor.didDrop();
+            if (didDrop) {
+              return;
+            }
+            // Determine mouse position
+            var clientOffset = dropMonitor.getClientOffset();
+            var clientOffsetY = clientOffset.y;
+            var dragIndex = libroView.findCellIndex(item.cell);
+            // Determine rectangle on screen
+            var lastCell = libroView.model.getCells()[libroView.model.getCells().length - 1];
+            var lastCellOffsetY = (_lastCell$container = lastCell.container) === null || _lastCell$container === void 0 ? void 0 : (_lastCell$container$c = _lastCell$container.current) === null || _lastCell$container$c === void 0 ? void 0 : _lastCell$container$c.getBoundingClientRect().y;
+            if (lastCellOffsetY && clientOffsetY >= lastCellOffsetY) {
+              if (libroView.model.selections.length > 0) {
+                var isDragInSelections = libroView.model.selections.findIndex(function (selection) {
+                  return selection.id === item.cell.id;
+                }) > -1 ? true : false;
+                if (isDragInSelections) {
+                  libroView.model.exchangeCells(libroView.model.selections, libroView.model.cells.length);
+                  return;
+                }
+              }
+              libroView.model.exchangeCell(dragIndex, libroView.model.cells.length - 1);
+            }
+          }
+          // Determine mouse position
+
+          return;
+        }
+      };
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    drop = _useDrop2[1];
+  return /*#__PURE__*/_jsxs("div", {
+    className: "libro-dnd-list-container",
+    ref: drop,
+    children: [/*#__PURE__*/_jsx(DndCellContent, {
+      libroView: libroView
+    }), children]
+  });
+});

package/es/components/dnd-component/index.d.ts

@@ -0,0 +1,5 @@
+export * from './default-dnd-content.js';
+export * from './dnd-context.js';
+export * from './dnd-list.js';
+export * from './custom-drag-layer.js';
+//# sourceMappingURL=index.d.ts.map

package/es/components/dnd-component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dnd-component/index.tsx"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}

package/es/components/dnd-component/index.js

@@ -0,0 +1,4 @@
+export * from "./default-dnd-content.js";
+export * from "./dnd-context.js";
+export * from "./dnd-list.js";
+export * from "./custom-drag-layer.js";

package/es/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './libro-component.js';
+export * from './dnd-component/index.js';
+export * from './cell-protocol.js';
+export * from './dnd-cell-item-render.js';
+export * from './libro-side-toolbar-menu.js';
+//# sourceMappingURL=index.d.ts.map

package/es/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC"}

package/es/components/index.js

@@ -0,0 +1,5 @@
+export * from "./libro-component.js";
+export * from "./dnd-component/index.js";
+export * from "./cell-protocol.js";
+export * from "./dnd-cell-item-render.js";
+export * from "./libro-side-toolbar-menu.js";

package/es/components/libro-component.d.ts

@@ -0,0 +1,5 @@
+import type { NotebookOption } from '../libro-protocol.js';
+export declare function LibroComponent(props: {
+    options: NotebookOption;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=libro-component.d.ts.map

package/es/components/libro-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"libro-component.d.ts","sourceRoot":"","sources":["../../src/components/libro-component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,sBAAsB,CAAC;AAGzE,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,kDAsBhE"}

package/es/components/libro-component.js

@@ -0,0 +1,35 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ViewRender } from '@difizen/mana-app';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+import { LibroService } from "../libro-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LibroComponent(props) {
+  var libroService = useInject(LibroService);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    libroView = _useState2[0],
+    setLibroView = _useState2[1];
+  useEffect(function () {
+    libroService.getOrCreateView(props.options).then(function (view) {
+      if (!view) {
+        return;
+      }
+      setLibroView(view);
+      return;
+    }).catch(function () {
+      //
+    });
+  }, [props.options, libroService]);
+  if (!libroView || !libroView.view) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ViewRender, {
+    view: libroView
+  });
+}

package/es/components/libro-side-toolbar-menu.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export type LibroSideToolbarMenuItemType = {
+    id: string;
+    label: ReactNode;
+    /**
+     * When extra, group means that the item will be located in a submenu(s) of the `...` dropdown.
+     * The submenu's title is named by the name in group, e.g. ['menu', 'submenu'].
+     */
+    readonly group?: string | string[];
+    disabled?: boolean;
+};
+interface LibroSideToolbarMenuInlinesProps {
+    items: LibroSideToolbarMenuItemType[];
+}
+export declare const LibroSideToolbarMenuInlines: React.FC<LibroSideToolbarMenuInlinesProps>;
+interface LibroSideToolbarMenuProps {
+    items: LibroSideToolbarMenuItemType[];
+}
+export declare const LibroSideToolbarMenu: React.FC<LibroSideToolbarMenuProps>;
+export {};
+//# sourceMappingURL=libro-side-toolbar-menu.d.ts.map

package/es/components/libro-side-toolbar-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"libro-side-toolbar-menu.d.ts","sourceRoot":"","sources":["../../src/components/libro-side-toolbar-menu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,4BAA4B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,gCAAgC;IACxC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CAwCjC,CAAC;AAEF,UAAU,yBAAyB;IACjC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAQpE,CAAC"}

package/es/components/libro-side-toolbar-menu.js

@@ -0,0 +1,58 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { CommandRegistry, getOrigin, ToolbarInstance, useInject } from '@difizen/mana-app';
+import { Menu, MenuContext } from '@difizen/mana-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var LibroSideToolbarMenuInlines = function LibroSideToolbarMenuInlines(_ref) {
+  var items = _ref.items;
+  var command = useInject(CommandRegistry);
+  var toolbar = useInject(ToolbarInstance);
+  var data = toolbar.currentArgs;
+  var args = getOrigin(data) || [];
+  if (!items.length) {
+    return null;
+  }
+  var nodes = [];
+  var group = undefined;
+  var baseCls = 'mana-menu';
+  var contextValue = {
+    prefixCls: baseCls
+  };
+  items.forEach(function (item) {
+    var itemGroup = item.group;
+    if (itemGroup) {
+      itemGroup = typeof itemGroup === 'string' ? itemGroup : itemGroup[0];
+    }
+    if (nodes.length && itemGroup !== group) {
+      nodes.push(itemGroup && /*#__PURE__*/_jsx(Menu.Divider, {}, "".concat(item.id, "-divider")));
+    }
+    group = itemGroup;
+    nodes.push( /*#__PURE__*/_jsx(Menu.Item, {
+      onClick: function onClick() {
+        command.executeCommand.apply(command, [item.id].concat(_toConsumableArray(args)));
+      },
+      children: item.label
+    }, item.id));
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: "libro-toolbar-menu-inlines",
+    children: /*#__PURE__*/_jsxs(MenuContext.Provider, {
+      value: contextValue,
+      children: [nodes, " "]
+    })
+  });
+};
+export var LibroSideToolbarMenu = function LibroSideToolbarMenu(_ref2) {
+  var items = _ref2.items;
+  return /*#__PURE__*/_jsx("div", {
+    className: "libro-side-toolbar-menu",
+    children: /*#__PURE__*/_jsx(LibroSideToolbarMenuInlines, {
+      items: items
+    })
+  });
+};

package/es/components/libro-view-header.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+export declare const LibroViewHeader: FC;
+//# sourceMappingURL=libro-view-header.d.ts.map

package/es/components/libro-view-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"libro-view-header.d.ts","sourceRoot":"","sources":["../../src/components/libro-view-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,eAAe,EAAE,EAwB7B,CAAC"}

package/es/components/libro-view-header.js

@@ -0,0 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ToolbarRender, useInject, ViewInstance } from '@difizen/mana-app';
+import { useMemo } from 'react';
+import { LibroToolbarArea } from "../libro-protocol.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var LibroViewHeader = function LibroViewHeader() {
+  var instance = useInject(ViewInstance);
+  var headerLeftArgs = useMemo(function () {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderLeft];
+  }, [instance.model.active, instance]);
+  var headerCenterArgs = useMemo(function () {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderCenter];
+  }, [instance.model.active, instance]);
+  var headerRightArgs = useMemo(function () {
+    return [instance.model.active, instance, LibroToolbarArea.HeaderRight];
+  }, [instance.model.active, instance]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "libro-header-left",
+      children: /*#__PURE__*/_jsx(ToolbarRender, {
+        data: headerLeftArgs
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "libro-header-center",
+      children: /*#__PURE__*/_jsx(ToolbarRender, {
+        data: headerCenterArgs
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "libro-header-right",
+      children: /*#__PURE__*/_jsx(ToolbarRender, {
+        data: headerRightArgs
+      })
+    })]
+  });
+};

package/es/configuration/libro-configuration-contribution.d.ts

@@ -0,0 +1,5 @@
+import { ConfigurationContribution } from '@difizen/mana-app';
+export declare class LibroConfigurationContribution implements ConfigurationContribution {
+    registerConfigurations(): import("@difizen/mana-app").ConfigurationNode<boolean>[];
+}
+//# sourceMappingURL=libro-configuration-contribution.d.ts.map

package/es/configuration/libro-configuration-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"libro-configuration-contribution.d.ts","sourceRoot":"","sources":["../../src/configuration/libro-configuration-contribution.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAc9D,qBACa,8BAA+B,YAAW,yBAAyB;IAC9E,sBAAsB;CAYvB"}