@difizen/libro-core 0.1.1 → 0.1.2

package/src/components/dnd-cell-item-render.tsx

@@ -1,15 +1,19 @@
-import { useConfigurationValue } from '@difizen/mana-app';
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  useConfigurationValue,
+  CommandRegistry,
+  equals,
   ToolbarRender,
   useInject,
   useObserve,
   ViewInstance,
   ViewRender,
 } from '@difizen/mana-app';
+import { Tooltip } from 'antd';
 import classnames from 'classnames';
-import React, { useMemo, useRef, memo, forwardRef } from 'react';
+import type { FC } from 'react';
+import React, { forwardRef, memo, useLayoutEffect, useMemo, useRef } from 'react';
 
-import '../index.less';
 import {
   EditorCellView,
   ExecutableCellModel,
@@ -17,26 +21,36 @@ import {
   isLibroCellModel,
 } from '../cell/index.js';
 import { CellCollapsible } from '../collapse-service.js';
+import { NotebookCommands } from '../command/index.js';
+import '../index.less';
+import type { CellView, DndItemProps } from '../libro-protocol.js';
+import { isCellView, LibroToolbarArea } from '../libro-protocol.js';
 import {
   CellSideToolbarVisible,
   CellTopToolbarSetting,
-  CollapserActive,
-} from '../configuration/libro-configuration.js';
-import type { CellView, DndItemProps } from '../libro-protocol.js';
-import { LibroToolbarArea, isCellView } from '../libro-protocol.js';
+  CollapserClickActive,
+  OutputScrollBtnVisiable,
+} from '../libro-setting.js';
 import type { LibroView } from '../libro-view.js';
-import { ArrowDown, ArrowRight, ContentMore } from '../material-from-designer.js';
+import {
+  ArrowDown,
+  ArrowRight,
+  ContentMore,
+  DisableOutputScroll,
+  EnableOutputScroll,
+} from '../material-from-designer.js';
 import { hasErrorOutput } from '../output/index.js';
 
 import {
-  CellInputBottonBlankProvider,
   CellExecutionTimeProvider,
+  CellInputBottonBlankProvider,
   CellOutputVisulizationProvider,
 } from './cell-protocol.js';
 
 const CellInputContent = memo(function CellInputContent(props: { cell: CellView }) {
   const { cell } = props;
   const observableCell = useObserve(cell);
+
   const CellExecutionTime = useInject<CellExecutionTimeProvider>(
     CellExecutionTimeProvider,
   );
@@ -63,39 +77,54 @@ const CellInputContent = memo(function CellInputContent(props: { cell: CellView
     </div>
   );
 });
-const CellInput: React.FC<{ cell: CellView }> = forwardRef(function CellInput(
-  props: {
-    cell: CellView;
-  },
+
+interface CellInputProps {
+  cell: CellView;
+}
+const CellInputInnner = forwardRef(function CellInput(
+  props: CellInputProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { cell } = props;
+  const observableCell = useObserve(cell);
   const inputCollapserRef = useRef<HTMLDivElement>(null);
-  const [collapserClickActive] = useConfigurationValue(CollapserActive);
+  const [collapserClickActive] = useConfigurationValue(CollapserClickActive);
   const handleCellInputCollapser = () => {
     if (collapserClickActive) {
-      cell.hasInputHidden = !cell.hasInputHidden;
+      observableCell.hasInputHidden = !observableCell.hasInputHidden;
     }
   };
-  const hasErrorOutputs = EditorCellView.is(cell) ? hasErrorOutput(cell) : false;
-  const isFirstCell = cell.parent.model.cells.indexOf(cell) === 0 ? true : false;
+  const hasErrorOutputs = EditorCellView.is(observableCell)
+    ? hasErrorOutput(observableCell)
+    : false;
+  // TODO: 性能！
+  // const isFirstCell = cell.parent.model.cells.indexOf(cell) === 0 ? true : false;
+  const isFirstCell = useMemo(() => {
+    return observableCell.parent.model.cells[0] &&
+      equals(observableCell.parent.model.cells[0], observableCell)
+      ? true
+      : false;
+  }, [observableCell]);
+
   return (
     <div className="libro-cell-container" tabIndex={10} ref={ref}>
       <div
-        className={`libro-cell-input-collapser ${isFirstCell ? 'firtCell' : ''} ${
+        className={`libro-cell-input-collapser ${isFirstCell ? 'firstCell' : ''} ${
           hasErrorOutputs ? 'error' : ''
         } `}
         ref={inputCollapserRef}
         onClick={handleCellInputCollapser}
       />
-      <CellInputContent cell={cell} />
+      <CellInputContent cell={observableCell} />
     </div>
   );
 });
+const CellInput: FC<CellInputProps> = memo<CellInputProps>(CellInputInnner);
 
 export const CellOutputContent: React.FC<{ cell: CellView }> = memo(
   function CellOutputContent(props: { cell: CellView }) {
     const { cell } = props;
+
     const observableCell = useObserve(cell);
     const CellOutputVisulization = useInject<CellOutputVisulizationProvider>(
       CellOutputVisulizationProvider,
@@ -112,7 +141,7 @@ export const CellOutputContent: React.FC<{ cell: CellView }> = memo(
     const hasOutputsScrolled = observableCell.model.hasOutputsScrolled;
 
     const isHidden = observableCell.model.hasOutputHidden;
-    if (isHidden && observableCell?.outputArea?.length) {
+    if (isHidden) {
       return (
         <div className="libro-cell-output-hidden">
           <ContentMore />
@@ -155,8 +184,47 @@ const CellOutput: React.FC<{ cell: CellView }> = forwardRef(function CellOutput(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { cell } = props;
+  const outputRef = useRef<HTMLDivElement>(null);
   const outputCollapserRef = useRef<HTMLDivElement>(null);
-  const [collapserActive] = useConfigurationValue(CollapserActive);
+  const [collapserClickActive] = useConfigurationValue(CollapserClickActive);
+  const [outputScrollBtnVisiable] = useConfigurationValue(OutputScrollBtnVisiable);
+  const command = useInject(CommandRegistry);
+
+  const isExecutingRef = useRef<boolean | null>(null);
+
+  let executing = false;
+  if (ExecutableCellModel.is(cell.model)) {
+    executing = cell.model.executing;
+  }
+
+  useLayoutEffect(() => {
+    isExecutingRef.current = !!executing;
+  }, [executing]);
+
+  useLayoutEffect(() => {
+    if (!outputRef || !isExecutingRef || !outputRef?.current) {
+      return () => {
+        //
+      };
+    }
+    const el = outputRef?.current;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        const outputAreaHeight = outputRef?.current?.clientHeight || 0;
+        if (isExecutingRef.current && outputAreaHeight > 495) {
+          command.executeCommand(NotebookCommands['EnableOutputScrolling'].id);
+        }
+      });
+    });
+
+    resizeObserver.observe(el as HTMLElement);
+    return () => {
+      resizeObserver.unobserve(el as HTMLElement);
+      resizeObserver.disconnect();
+    };
+  }, [outputRef.current, cell, isExecutingRef]);
+
   if (!ExecutableCellView.is(cell)) {
     return null;
   }
@@ -168,19 +236,53 @@ const CellOutput: React.FC<{ cell: CellView }> = forwardRef(function CellOutput(
     return null;
   }
   const handleCellOutputCollapser = () => {
-    if (ExecutableCellModel.is(cell.model) && collapserActive) {
+    if (ExecutableCellModel.is(cell.model) && collapserClickActive) {
       cell.model.hasOutputHidden = !cell.model.hasOutputHidden;
     }
   };
-  const hasErrorOutputs = hasErrorOutput(cell);
+
+  const handleOutputScroll = () => {
+    if (!ExecutableCellModel.is(cell.model)) {
+      return;
+    }
+    if (cell.model.hasOutputsScrolled) {
+      command.executeCommand(NotebookCommands['DisableOutputScrolling'].id);
+    } else {
+      command.executeCommand(NotebookCommands['EnableOutputScrolling'].id);
+    }
+  };
   return (
     <div className="libro-cell-output-container" ref={ref}>
-      <div
-        className={`libro-cell-output-collapser ${hasErrorOutputs ? 'error' : ''} `}
-        ref={outputCollapserRef}
-        onClick={handleCellOutputCollapser}
-      />
-      <CellOutputContent cell={cell} />
+      <div ref={outputRef}>
+        <div
+          className={'libro-cell-output-collapser'}
+          ref={outputCollapserRef}
+          onClick={handleCellOutputCollapser}
+        />
+        {outputScrollBtnVisiable && (
+          <div className="libro-cell-output-scroll">
+            <Tooltip
+              title={`${
+                cell.model.hasOutputsScrolled
+                  ? '取消固定 Output 高度'
+                  : '固定 Output 高度'
+              }`}
+            >
+              <div
+                className="libro-cell-output-scroll-button "
+                onClick={handleOutputScroll}
+              >
+                {cell.model.hasOutputsScrolled ? (
+                  <DisableOutputScroll />
+                ) : (
+                  <EnableOutputScroll />
+                )}
+              </div>
+            </Tooltip>
+          </div>
+        )}
+        <CellOutputContent cell={cell} />
+      </div>
     </div>
   );
 });
@@ -188,7 +290,7 @@ const CellOutput: React.FC<{ cell: CellView }> = forwardRef(function CellOutput(
 const HideCellContent: React.FC<{ cell: CellView }> = (props: { cell: CellView }) => {
   const { cell } = props;
   const cellCollapserRef = useRef<HTMLDivElement>(null);
-  const [collapserClickActive] = useConfigurationValue(CollapserActive);
+  const [collapserClickActive] = useConfigurationValue(CollapserClickActive);
 
   const handleCellCollapser = () => {
     if (collapserClickActive) {
@@ -209,26 +311,74 @@ const HideCellContent: React.FC<{ cell: CellView }> = (props: { cell: CellView }
     </>
   );
 };
-export const DndCellItemRender = forwardRef(function DndCellItemRender(
+
+const ExecuteTooltipArea = memo(function ExecuteTooltipArea(props: {
+  isMouseOverDragArea: boolean | undefined;
+  cell: CellView;
+}) {
+  const { isMouseOverDragArea, cell } = props;
+  const observableCell = useObserve(cell);
+
+  const executable = ExecutableCellModel.is(observableCell.model);
+  const executeState =
+    ExecutableCellModel.is(observableCell.model) && !observableCell.model.executing
+      ? observableCell.model.executeCount || ' '
+      : '*';
+  return (
+    <>
+      {executable && !isMouseOverDragArea && (
+        <div className="libro-execute-tooltip-area">
+          <pre className="libro-execute-state-tip">{`[${executeState}]:`}</pre>
+        </div>
+      )}
+    </>
+  );
+});
+
+export const DndCellItemContent = memo(function DndCellItemContent(props: {
+  cell: CellView;
+}) {
+  const instance = useInject<LibroView>(ViewInstance);
+  const { cell } = props;
+  const observableCell = useObserve(cell);
+  const isCollapsible = CellCollapsible.is(observableCell);
+  const hasCellHidden = useMemo(() => {
+    return observableCell.hasCellHidden();
+  }, [observableCell]);
+
+  return (
+    <>
+      {hasCellHidden && <HideCellContent cell={observableCell} />}
+      {!hasCellHidden && (
+        <>
+          {instance.collapserVisible && isCollapsible && (
+            <div
+              className="libro-markdown-collapser"
+              onClick={() => {
+                instance.collapseCell(observableCell, !observableCell.headingCollapsed);
+              }}
+            >
+              {observableCell.headingCollapsed ? <ArrowRight /> : <ArrowDown />}
+            </div>
+          )}
+          <CellInput cell={observableCell} />
+          <CellOutput cell={observableCell} />
+        </>
+      )}
+    </>
+  );
+});
+
+export const DndCellItemContainer = memo(function DndCellItemContainer(
   props: DndItemProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { isDrag, isMouseOverDragArea, cell } = props;
+
   const [topToolbarVisible] = useConfigurationValue(CellTopToolbarSetting);
   const [sideToolbarVisible] = useConfigurationValue(CellSideToolbarVisible);
 
   const instance = useInject<LibroView>(ViewInstance);
   const isActive = instance.activeCell?.id === cell.id;
-  const executable = ExecutableCellModel.is(cell.model);
-  const isCollapsible = CellCollapsible.is(cell);
-  const executeState =
-    ExecutableCellModel.is(cell.model) && !cell.model.executing
-      ? cell.model.executeCount || ' '
-      : '*';
-  // const hasExecuteCount =
-  //   ExecutableCellModel.is(cell.model) &&
-  //   typeof cell.model.executeCount === 'number' &&
-  //   cell.model.executeCount > 0;
   const topToolbarArgs = useMemo(() => {
     return [cell, instance, LibroToolbarArea.CellTop];
   }, [cell, instance]);
@@ -236,12 +386,44 @@ export const DndCellItemRender = forwardRef(function DndCellItemRender(
   const rightToolbarArgs = useMemo(() => {
     return [cell, instance, LibroToolbarArea.CellRight];
   }, [cell, instance]);
-
   if (!isLibroCellModel(cell.model)) {
     return null;
   }
-  const hasCellHidden = cell.hasCellHidden();
-  const hasErrorOutputs = hasErrorOutput(cell);
+
+  return (
+    <>
+      {topToolbarVisible && isActive && (
+        <div className="libro-cell-top-toolbar">
+          <ToolbarRender data={topToolbarArgs} />
+        </div>
+      )}
+      <ExecuteTooltipArea cell={cell} isMouseOverDragArea={isMouseOverDragArea} />
+      <DndCellItemContent cell={cell} />
+      {sideToolbarVisible && (
+        <div className="libro-cell-right-toolbar">
+          {isActive && !isDrag && instance.model.readOnly !== true && (
+            <ToolbarRender
+              data={rightToolbarArgs}
+              tooltip={{ placement: LibroToolbarArea.CellRight }}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
+const DndCellItemRenderInner = forwardRef(function DndCellItemRender(
+  props: DndItemProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { isDrag, isMouseOverDragArea, cell, isDragOver } = props;
+  const observableCell = useObserve(cell);
+  const instance = useInject<LibroView>(ViewInstance);
+  const isActive = instance.activeCell?.id === observableCell.id;
+  const hasErrorOutputs = hasErrorOutput(observableCell);
+  const hasCellHidden = useMemo(() => {
+    return observableCell.hasCellHidden();
+  }, [observableCell]);
 
   const classNames = [
     'libro-dnd-cell',
@@ -253,56 +435,21 @@ export const DndCellItemRender = forwardRef(function DndCellItemRender(
       hidden: hasCellHidden,
     },
   ];
-  if (cell.wrapperCls) {
-    classNames.push(cell.wrapperCls);
+  if (observableCell.wrapperCls) {
+    classNames.push(observableCell.wrapperCls);
   }
-
   return (
-    <div
-      className={`libro-dnd-cell-border ${isActive ? 'active' : ''} ${
-        instance.model.commandMode ? 'command-mode' : ''
-      } ${hasErrorOutputs ? 'error' : ''}`}
-    >
-      <div className={classnames(classNames)}>
-        {topToolbarVisible && isActive && (
-          <div className="libro-cell-top-toolbar">
-            <ToolbarRender data={topToolbarArgs} />
-          </div>
-        )}
-        {executable && !isMouseOverDragArea && (
-          <div className="libro-execute-tooltip-area">
-            <pre className="libro-execute-state-tip">{`[${executeState}]:`}</pre>
-          </div>
-        )}
-        <div className="libro-dnd-cell-preview" ref={ref} />
-        {cell.hasCellHidden() && <HideCellContent cell={cell} />}
-        {!cell.hasCellHidden() && (
-          <>
-            {instance.collapserVisible && isCollapsible && (
-              <div
-                className="libro-markdown-collapser"
-                onClick={() => {
-                  instance.collapseCell(cell, !cell.headingCollapsed);
-                }}
-              >
-                {cell.headingCollapsed ? <ArrowRight /> : <ArrowDown />}
-              </div>
-            )}
-            <CellInput cell={cell} />
-            <CellOutput cell={cell} />
-          </>
-        )}
-        {sideToolbarVisible && (
-          <div className="libro-cell-right-toolbar">
-            {isActive && !isDrag && instance.model.readOnly !== true && (
-              <ToolbarRender
-                data={rightToolbarArgs}
-                tooltip={{ placement: LibroToolbarArea.CellRight }}
-              />
-            )}
-          </div>
-        )}
+    <div className="libro-dnd-cell-border">
+      <div className={classnames(classNames)} ref={ref}>
+        <DndCellItemContainer
+          cell={observableCell}
+          isDrag={isDrag}
+          isDragOver={isDragOver}
+          isMouseOverDragArea={isMouseOverDragArea}
+          // ref={ref}
+        />
       </div>
     </div>
   );
 });
+export const DndCellItemRender = memo(DndCellItemRenderInner);

package/src/components/dnd-component/custom-drag-layer.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useInject, ViewInstance } from '@difizen/mana-app';
 import { ViewRender } from '@difizen/mana-app';
-import type { CSSProperties, FC } from 'react';
+import type { FC, CSSProperties } from 'react';
 import { useState, useEffect, memo } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDragLayer } from 'react-dnd';
@@ -49,10 +50,9 @@ const MultipleSelectionPreview: FC<{ activeCell: CellView }> = ({ activeCell })
         setMultipleSelectionPreview(view);
         return;
       })
-      .catch(() => {
+      .catch((e) => {
         //
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -86,10 +86,9 @@ const SingleSelectionDragPreview: FC<{ activeCell: CellView }> = ({ activeCell }
         setSingleSelectionPreview(view);
         return;
       })
-      .catch(() => {
+      .catch((e) => {
         //
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -103,7 +102,7 @@ export const SingleSelectionPreviewMemo: FC<SelectionPreviewProps> = memo(
   SingleSelectionDragPreview,
 );
 
-export const CustomDragLayer: FC = () => {
+export const CustomDragLayer = () => {
   const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
     item: monitor.getItem(),
     itemType: monitor.getItemType(),