@shzlx/ui-default 4.58.2

package/components/problemconfig/index.tsx

@@ -0,0 +1,91 @@
+import { Button, Tabs } from '@mantine/core';
+import { Allotment } from 'allotment';
+import { ContextMenuProvider } from 'mantine-contextmenu';
+import React from 'react';
+import { useSelector, useStore } from 'react-redux';
+import { confirm } from 'vj/components/dialog/index';
+import { i18n } from 'vj/utils';
+import ProblemConfigEditor from './ProblemConfigEditor';
+import ProblemConfigForm from './ProblemConfigForm';
+import { ProblemConfigTree } from './ProblemConfigTree';
+import { RootState } from './reducer';
+
+interface Props {
+  onSave: () => void;
+}
+
+export default function ProblemConfig(props: Props) {
+  const [selected, setSelected] = React.useState('basic');
+  const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
+  const [tabs, setTabs] = React.useState<HTMLDivElement | null>(null);
+  const [editor, setEditor] = React.useState<any>(null);
+  const store = useStore<RootState>();
+  const valid = useSelector((state: RootState) => state.config.__valid);
+  const errors = useSelector((state: RootState) => state.config.__errors, (a, b) => JSON.stringify(a) === JSON.stringify(b));
+
+  const handleSave = React.useCallback(async () => {
+    if (valid) props.onSave();
+    else if (await confirm(i18n('Errors detected in the config. Confirm save?'))) props.onSave();
+  }, [valid, props.onSave]);
+
+  React.useEffect(() => {
+    if (!container) return () => { };
+    container.style.height ||= '600px';
+    const callback = () => {
+      setTimeout(() => {
+        const target = Math.max(container.clientHeight, tabs?.clientHeight || 0);
+        container.style.height = `${target}px`;
+        if (editor) editor.layout();
+      }, 50);
+    };
+    const dispose = store.subscribe(callback);
+    window.addEventListener('resize', callback);
+    return () => {
+      dispose();
+      window.removeEventListener('resize', callback);
+    };
+  }, [container, tabs, store]);
+
+  return <ContextMenuProvider>
+    <div ref={setContainer}>
+      <Allotment
+        defaultSizes={[2, 3]}
+        className="problem-config-allotment">
+        <Allotment.Pane>
+          <div style={{ height: '100%', overflow: 'auto' }}>
+            <ProblemConfigEditor ref={setEditor} />
+          </div>
+        </Allotment.Pane>
+        <Allotment.Pane>
+          <Tabs
+            ref={setTabs}
+            value={valid ? selected : 'errors'}
+            keepMounted={false}
+            style={{ paddingLeft: 20 }}
+            onChange={(t) => (t !== 'errors' && t && setSelected(t.toString()))}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Tabs.List>
+                <Tabs.Tab value="basic" disabled={!valid}>{i18n('Basic')}</Tabs.Tab>
+                <Tabs.Tab value="subtasks" disabled={!valid}>{i18n('Subtasks')}</Tabs.Tab>
+                <Tabs.Tab value="errors" disabled={valid}>{errors.length ? `Errors(${errors.length})` : 'No Errors'}</Tabs.Tab>
+              </Tabs.List>
+              <Button onClick={handleSave}>
+                {i18n('Save')}
+              </Button>
+            </div>
+            <Tabs.Panel value="basic">
+              <ProblemConfigForm />
+            </Tabs.Panel>
+            <Tabs.Panel value="subtasks">
+              <ProblemConfigTree />
+            </Tabs.Panel>
+            <Tabs.Panel value="errors">
+              <div>{errors.map((i) => (<pre key={i}>{i}</pre>))}</div>
+            </Tabs.Panel>
+          </Tabs>
+        </Allotment.Pane>
+      </Allotment>
+    </div>
+  </ContextMenuProvider>;
+}

package/components/problemconfig/reducer/config.ts

@@ -0,0 +1,173 @@
+import { parseMemoryMB, parseTimeMS, sortFiles } from '@hydrooj/utils/lib/common';
+import type { ProblemConfigFile, TestCaseConfig } from 'hydrooj/src/interface';
+import Ajv from 'ajv';
+import yaml from 'js-yaml';
+import { cloneDeep } from 'lodash';
+import schema from '../../monaco/schema/problemconfig';
+
+type State = ProblemConfigFile & {
+  __loaded: boolean;
+  __valid: boolean;
+  __errors: string[];
+  __cases: TestCaseConfig[];
+};
+const ajv = new Ajv();
+const validate = ajv.compile(schema);
+
+export default function reducer(state = {
+  type: 'default', __loaded: false, __valid: false, __errors: [], __cases: [], subtasks: [],
+} as State, action: any = {}): State {
+  switch (action.type) {
+    case 'CONFIG_LOAD_FULFILLED': {
+      const c = { ...state, __loaded: true };
+      try {
+        let data = yaml.load(action.payload.config) as any;
+        if (typeof data !== 'object') data = { subtasks: [] };
+        else data.subtasks ||= [];
+        if (!validate(data)) {
+          Object.assign(c, data);
+          c.__errors = validate.errors.map((i) => `${i.instancePath}: ${i.message}`);
+          return c;
+        }
+        const subtasks = (data as any).subtasks;
+        for (const subtask of subtasks) {
+          if (typeof subtask.id !== 'number') {
+            for (let i = 1; ; i++) {
+              if (!subtasks.find((s) => s.id === i)) {
+                subtask.id = i;
+                break;
+              }
+            }
+          }
+        }
+        Object.assign(c, data);
+        c.__valid = true;
+      } catch (e) {
+        c.__errors.push(e.message);
+      }
+      return c;
+    }
+    case 'CONFIG_FORM_UPDATE': {
+      const next = { ...state, [action.key]: action.value };
+      if (action.key === 'score' && action.value) next.score = +next.score;
+      if (action.key === 'checker_type' && action.value === 'other') next.checker_type = 'syzoj';
+      if (!action.value || (action.value instanceof Array && !action.value.join(''))) delete next[action.key];
+      return next;
+    }
+    case 'CONFIG_CODE_UPDATE': {
+      try {
+        const data = yaml.load(action.payload);
+        if (!validate(data)) {
+          return {
+            ...state,
+            __valid: false,
+            __errors: validate.errors.map((i) => `${i.instancePath}: ${i.message}`),
+            __loaded: true,
+          };
+        }
+        return {
+          ...state, ...data as object, __valid: true, __errors: [], __loaded: true,
+        };
+      } catch (e) {
+        return {
+          ...state, __valid: false, __errors: [e.message], __loaded: true,
+        };
+      }
+    }
+    case 'CONFIG_AUTOCASES_UPDATE': {
+      const next = { ...state };
+      const { subtasks } = action;
+      for (const subtask of subtasks) {
+        if (subtask.time === parseTimeMS(state.time || '1s')) delete subtask.time;
+        if (subtask.memory === parseMemoryMB(state.memory || '256m')) delete subtask.memory;
+        if (subtask.time) subtask.time += 'ms';
+        if (subtask.memory) subtask.memory += 'MB';
+        if (typeof subtask.id !== 'number') {
+          for (let i = 1; ; i++) {
+            if (!subtasks.find((s) => s.id === s)) {
+              subtask.id = i;
+              break;
+            }
+          }
+        }
+      }
+      if (subtasks.length === 0) next.subtasks = [];
+      else {
+        next.subtasks = subtasks.map((subtask) => (
+          { ...subtask, ...{ cases: subtask.cases.map((i) => ({ input: i.input, output: i.output })) } }));
+      }
+      return next;
+    }
+    case 'problemconfig/updateFileIO': {
+      const n = { ...state, filename: action.filename };
+      if (!n.filename) delete n.filename;
+      return n;
+    }
+    case 'problemconfig/updateGlobalConfig': {
+      const n = { ...state, time: action.time, memory: action.memory };
+      if (!n.time) delete n.time;
+      if (!n.memory) delete n.memory;
+      return n;
+    }
+    case 'problemconfig/addSubtask': {
+      const subtasks = cloneDeep(state.subtasks);
+      subtasks.push({
+        cases: [],
+        score: 0,
+        id: Object.keys(subtasks).map((i) => subtasks[i].id).reduce((a, b) => Math.max(+a, +b), 0) + 1,
+      });
+      return { ...state, subtasks };
+    }
+    case 'problemconfig/updateSubtaskConfig': {
+      if (!state.subtasks.find((i) => i.id === action.id)) return state;
+      const subtask = { ...state.subtasks.find((i) => i.id === action.id) };
+      const subtasks = [...state.subtasks];
+      subtasks.splice(state.subtasks.findIndex((i) => i.id === action.id), 1, subtask);
+      if (action.payload.time) subtask.time = action.payload.time;
+      if (action.payload.memory) subtask.memory = action.payload.memory;
+      if (action.payload.score) subtask.score = +action.payload.score || 0;
+      if (action.payload.if) subtask.if = action.payload.if;
+      if (action.payload.type) subtask.type = action.payload.type;
+      if (!subtask.time) delete subtask.time;
+      if (!subtask.memory) delete subtask.memory;
+      return { ...state, subtasks };
+    }
+    case 'problemconfig/addTestcases': {
+      return { ...state, __cases: sortFiles([...state.__cases, ...action.cases], 'input') };
+    }
+    case 'problemconfig/moveTestcases': {
+      const testcases = action.payload.cases;
+      const subtasks = cloneDeep(state.subtasks);
+      const targetCases = action.payload.target === -1
+        ? state.__cases
+        : (subtasks.find((s) => s.id === action.payload.target)?.cases || []);
+      const toAdd = testcases.filter((tc) => !targetCases.find((j) => j.input === tc.input && j.output === tc.output));
+      const __cases = action.payload.source === -1
+        ? state.__cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output))
+        : action.payload.target === -1
+          ? sortFiles([...state.__cases, ...toAdd], 'input')
+          : state.__cases;
+      for (const key in subtasks) {
+        const subtask = subtasks[key];
+        if (subtask.id === action.payload.source) {
+          subtask.cases = subtask.cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output));
+        } else if (subtask.id === action.payload.target) {
+          subtask.cases = sortFiles([...subtask.cases, ...toAdd], 'input');
+        }
+      }
+      return { ...state, subtasks, __cases };
+    }
+    case 'problemconfig/delTestcases': {
+      const testcases = action.cases;
+      return { ...state, __cases: state.__cases.filter((i) => !testcases.find((j) => i.input === j.input && i.output === j.output)) };
+    }
+    case 'problemconfig/deleteSubtask': {
+      const currentCases = state.subtasks.find((i) => i.id === action.id)?.cases || [];
+      const subtasks = state.subtasks.filter((i) => i.id !== action.id);
+      const add = currentCases.filter((i) => !subtasks.find((j) => j.cases.find((k) => k.input === i.input && k.output === i.output)));
+      return { ...state, subtasks, __cases: sortFiles([...state.__cases, ...add], 'input') };
+    }
+    default:
+      return state;
+  }
+}

package/components/problemconfig/reducer/index.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import config from './config';
+import testdata from './testdata';
+
+const reducer = combineReducers({
+  config,
+  testdata,
+});
+
+export default reducer;
+export type RootState = ReturnType<typeof reducer>;

package/components/problemconfig/reducer/testdata.ts

@@ -0,0 +1,16 @@
+export default function reducer(state = [], action: any = {}) {
+  switch (action.type) {
+    case 'CONFIG_LOAD_FULFILLED': {
+      return state.concat(action.payload.testdata);
+    }
+    case 'CONFIG_DELETE_TESTDATA': {
+      const next = state.filter((i) => i.name !== action.value[0]);
+      return next;
+    }
+    case 'CONFIG_ADD_TESTDATA': {
+      return state.concat([action.value]);
+    }
+    default:
+      return state;
+  }
+}

package/components/problemconfig/tree/AddTestcase.tsx

@@ -0,0 +1,137 @@
+import { readSubtasksFromFiles } from '@hydrooj/common';
+import { Button, Modal, Text } from '@mantine/core';
+import React, { useEffect, useRef } from 'react';
+import { useSelector, useStore } from 'react-redux';
+import { i18n } from 'vj/utils';
+import FileSelectAutoComplete from '../../autocomplete/components/FileSelectAutoComplete';
+import { RootState } from '../reducer';
+
+export function AddTestcase() {
+  const [open, setOpen] = React.useState(false);
+  const [input, setInput] = React.useState('');
+  const [output, setOutput] = React.useState('');
+  const [valid, setValid] = React.useState(false);
+  const [autoInput, setAutoInput] = React.useState(true);
+  const [autoOutput, setAutoOutput] = React.useState(true);
+  const testdata = useSelector((state: RootState) => state.testdata);
+  const store = useStore<RootState>();
+  const refInput = useRef(null);
+  const refOutput = useRef(null);
+
+  useEffect(() => {
+    const inputValid = testdata.find((i) => i.name === input);
+    if (input) setAutoInput(false);
+    else setAutoInput(true);
+    setValid(inputValid);
+    if (inputValid && autoOutput) {
+      const filename = input.substring(0, input.lastIndexOf('.'));
+      let outputFile = '';
+      if (testdata.find((i) => i.name === `${filename}.out`)) outputFile = `${filename}.out`;
+      else if (testdata.find((i) => i.name === `${filename}.ans`)) outputFile = `${filename}.ans`;
+      if (outputFile) {
+        // @ts-ignore
+        refOutput.current!.setSelectedItems([outputFile]);
+        setOutput(outputFile);
+        setAutoOutput(true);
+      }
+    }
+  }, [input]);
+
+  useEffect(() => {
+    const outputValid = testdata.find((i) => i.name === output);
+    if (output) setAutoOutput(false);
+    else setAutoOutput(true);
+    setValid(outputValid);
+    if (outputValid && autoInput) {
+      const filename = output.substring(0, output.lastIndexOf('.'));
+      if (testdata.find((i) => i.name === `${filename}.in`)) {
+        // @ts-ignore
+        refInput.current!.setSelectedItems([`${filename}.in`]);
+        setInput(`${filename}.in`);
+        setAutoInput(true);
+      }
+    }
+  }, [output]);
+
+  function onConfirm() {
+    store.dispatch({
+      type: 'problemconfig/addTestcases',
+      cases: [{ input, output }],
+    });
+    setOpen(false);
+  }
+
+  function auto() {
+    const state = store.getState();
+    const subtasks = readSubtasksFromFiles(state.testdata.map((i) => i.name), {});
+    const current = state.config.subtasks.flatMap((i) => i.cases).concat(state.config.__cases);
+    const pending = [];
+    for (const c of subtasks.flatMap((s) => s.cases)) {
+      if (!current.find((i) => i.input === c.input && i.output === c.output)) {
+        pending.push({
+          input: c.input,
+          output: c.output,
+        });
+      }
+    }
+    store.dispatch({
+      type: 'problemconfig/addTestcases',
+      cases: pending,
+    });
+  }
+
+  return (<>
+    <div
+      style={{ cursor: 'pointer', padding: '6px 0' }}
+      onClick={auto}
+    >
+      <Text><i className="icon icon-wrench" /> {i18n('Auto detect')}</Text>
+    </div>
+    <div
+      style={{ cursor: 'pointer', padding: '6px 0' }}
+      onClick={() => {
+        setInput('');
+        setOutput('');
+        setAutoInput(true);
+        setAutoOutput(true);
+        setOpen(true);
+      }}
+    >
+      <Text><i className="icon icon-add" /> {i18n('Add testcase')}</Text>
+    </div>
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      title={i18n('Add testcase')}
+      styles={{ body: { overflow: 'visible' }, content: { overflow: 'visible' } }}
+    >
+      <div className="row" style={{ overflow: 'visible' }}>
+        <div className="columns medium-6" style={{ overflow: 'visible' }}>
+          <FileSelectAutoComplete
+            ref={refInput}
+            data={testdata}
+            label="Input"
+            width="100%"
+            onChange={(e) => setInput(e)}
+            placeholder={i18n('Input')}
+            value={input || ''}
+          />
+        </div>
+        <div className="columns medium-6" style={{ overflow: 'visible' }}>
+          <FileSelectAutoComplete
+            ref={refOutput}
+            data={testdata}
+            label="Output"
+            width="100%"
+            onChange={(e) => setOutput(e)}
+            placeholder={i18n('Output')}
+            value={output || ''}
+          />
+        </div>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+        <Button onClick={onConfirm} disabled={!valid}> {i18n('Save')}</Button>
+      </div>
+    </Modal>
+  </>);
+}

package/components/problemconfig/tree/SelectionManager.tsx

@@ -0,0 +1,140 @@
+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 selecting = React.useRef(false);
+
+  const handleMouseDown = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    pos.x = event.pageX;
+    pos.y = event.pageY;
+    // Check if clicking on a selected testcase (let drag handle it)
+    if ((event.target as HTMLElement).closest?.('[data-selected="true"]')) return;
+    selecting.current = true;
+    // eslint-disable-next-line ts/no-use-before-define
+    document.body.addEventListener('mousemove', handleMouseMove);
+    // eslint-disable-next-line ts/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) => {
+    if (!selecting.current) return;
+    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 cleanupSelection = React.useCallback(() => {
+    selecting.current = false;
+    document.body.removeEventListener('mousemove', handleMouseMove);
+    // eslint-disable-next-line ts/no-use-before-define
+    document.body.removeEventListener('mouseup', handleMouseUp);
+    $('#divSelectArea').remove();
+    $('body').css('cursor', 'default');
+    pos.x = pos.y = pos.endX = pos.endY = 0;
+  }, [JSON.stringify(cases)]);
+  const handleMouseUp = React.useCallback(() => {
+    if (!selecting.current) {
+      cleanupSelection();
+      return;
+    }
+    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);
+    cleanupSelection();
+    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);
+          }}
+        />
+      ))}
+    </>
+  );
+}