ui: new judge config (#533)

Co-authored-by: panda <panda_dtdyy@outlook.com>

packages/ui-default/components/problemconfig/tree/SelectionManager.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../reducer';
+import { TestcaseGroup } from './Testcase';
+
+interface SelectionManagerProps {
+  subtaskId: number;
+  subtaskIds: number[];
+}
+
+function collide(rect1: any, rect2: any): boolean {
+  if ('getBoundingClientRect' in rect1) rect1 = rect1.getBoundingClientRect();
+  if ('getBoundingClientRect' in rect2) rect2 = rect2.getBoundingClientRect();
+  const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
+  const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
+  const minX = Math.min(rect1.x, rect2.x);
+  const minY = Math.min(rect1.y, rect2.y);
+  return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;
+}
+
+export function SelectionManager(props: SelectionManagerProps) {
+  const { subtaskIds, subtaskId } = props;
+  const cases = useSelector((state: RootState) => (subtaskId === -1
+    ? state.config.__cases || []
+    : state.config.subtasks.find((i) => i.id === subtaskId).cases || []));
+  // Don't need to trigger a re-render for this property change
+  const pos = React.useMemo(() => ({
+    x: 0, y: 0, endX: 0, endY: 0,
+  }), []);
+  const [start, setStart] = React.useState(0);
+  const [end, setEnd] = React.useState(0);
+  React.useEffect(() => {
+    setStart(0);
+    setEnd(0);
+  }, [JSON.stringify(cases)]);
+
+  const handleMouseDown = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    pos.x = event.pageX;
+    pos.y = event.pageY;
+    // Check if clicking on a selected testcase
+    const selected = Array.from($('[data-selected="true"]'));
+    for (const el of selected) {
+      if (collide(el, { ...pos, width: 1, height: 1 })) return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    document.body.addEventListener('mousemove', handleMouseMove);
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    document.body.addEventListener('mouseup', handleMouseUp);
+    $('body').css('cursor', 'crosshair')
+      .append('<div id="divSelectArea" style="position:absolute;background-color:#e073d4;"></div>');
+    $('#divSelectArea').css({
+      top: event.pageY,
+      left: event.pageX,
+      zIndex: 9999999,
+    }).fadeTo(12, 0.2);
+  }, [JSON.stringify(cases)]);
+  const handleMouseMove = React.useCallback((event) => {
+    pos.endX = event.pageX;
+    pos.endY = event.pageY;
+    $('#divSelectArea').css({
+      top: Math.min(event.pageY, pos.y),
+      left: Math.min(event.pageX, pos.x),
+      height: Math.abs(event.pageY - pos.y),
+      width: Math.abs(event.pageX - pos.x),
+    });
+  }, [JSON.stringify(cases)]);
+  const handleMouseUp = React.useCallback(() => {
+    document.body.removeEventListener('mousemove', handleMouseMove);
+    document.body.removeEventListener('mouseup', handleMouseUp);
+    const caseEntries = Array.from($(`[data-subtaskid="${subtaskId}"]`));
+    const selected = [];
+    for (let i = 0; i < caseEntries.length; i += 1) {
+      if (collide(caseEntries[i], $('#divSelectArea')[0])) {
+        selected.push(cases.indexOf(cases.find((c) => c.input === caseEntries[i].dataset.index)));
+      }
+    }
+    const sorted = selected.sort((a, b) => a - b);
+    $('#divSelectArea').remove();
+    $('body').css('cursor', 'default');
+    pos.x = pos.y = pos.endX = pos.endY = 0;
+    if (!sorted.length) return;
+    setStart(sorted[0]);
+    setEnd(sorted[selected.length - 1] + 1);
+  }, [JSON.stringify(cases)]);
+
+  return (
+    <>
+      {end > start && cases.slice(0, start).map((c, id) => (
+        <TestcaseGroup
+          subtaskId={subtaskId}
+          cases={[c]}
+          key={`${c.input}@${id}`}
+          selected={false}
+          subtaskIds={subtaskIds}
+          index={id}
+          onMouseDown={handleMouseDown}
+          onClick={() => {
+            setStart(id);
+            setEnd(id + 1);
+          }}
+        />
+      ))}
+      {start <= end && (
+        <TestcaseGroup
+          cases={cases.slice(start, end)}
+          subtaskId={subtaskId}
+          subtaskIds={subtaskIds}
+          onMouseDown={handleMouseDown}
+          selected={true}
+          index={start}
+        />
+      )}
+      {end < cases.length && cases.slice(end).map((c, id) => (
+        <TestcaseGroup
+          subtaskId={subtaskId}
+          cases={[c]}
+          key={`${c.input}@${id}`}
+          subtaskIds={subtaskIds}
+          selected={false}
+          onMouseDown={handleMouseDown}
+          index={id + end}
+          onClick={() => {
+            setStart(id + end);
+            setEnd(id + end + 1);
+          }}
+        />
+      ))}
+    </>
+  );
+}