online-compiler-widget 0.0.1

package/src/components/CompilerWidget.tsx

@@ -0,0 +1,279 @@
+// src/components/CompilerWidget.tsx
+import React, { memo, useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { Handle, Position, NodeResizer, useReactFlow } from '@xyflow/react';
+import { FileExplorer } from './FileExplorer';
+import { MonacoEditorWrapper } from './MonacoEditorWrapper';
+import { OutputPanel } from './OutputPanel';
+import cls from './CompilerWidget.module.scss';
+import { useCompiler } from '../hooks/useCompiler';
+
+import ShieldIcon from "../assets/shield.svg?react";
+import BadgeIcon from "../assets/Badge.svg?react";
+import CloseIcon from "../assets/closeIcon.svg?react";
+
+import type { EditorDocument } from '../types/EditorDocument';
+import { RunContainer } from "./RunContainer.tsx";
+
+interface GetInfoModel {
+  "widgetId": number,
+  "userId": number,
+  "role": string,
+  "config": string, // json
+  "board": {
+    "id": number,
+    "name": string,
+    "parentId": number
+  }
+}
+
+interface ConfigModel {
+    // ... то, как мы будем общаться с потребителем
+}
+
+interface CompilerWidgetProps {
+    id: string;
+    data?: {
+        initialFiles?: Record<string, string>;
+        language?: 'csharp' | 'js';
+    };
+    setNodeHeight?: (id: string, height: number) => void;
+    getInfo?: (info: GetInfoModel) => void; 
+}
+
+const CompilerWidget: React.FC<CompilerWidgetProps> = ({ id, data, setNodeHeight }) => {
+    const {
+        documents,
+        selectedDocument,
+        selectedId,
+        setSelectedId,
+        setDocumentContent,
+        addDocument,
+        deleteDocument,
+        updateDocument,
+        output,
+        history,
+        run,
+        stop,
+        saveAll
+    } = useCompiler(
+        data?.initialFiles || {
+            'Program.cs': '// Write your code here\nConsole.WriteLine("Hello, World!");',
+        }
+    );
+
+    // useReactFlow мы оставляем, но НЕ полагаемся на updateNodeDimensions — вызываем опционально
+    const rf = useReactFlow();
+    const maybeUpdateNodeDimensions = (nodeId: string) => {
+        if (rf && typeof (rf as any).updateNodeDimensions === 'function') {
+            try {
+                (rf as any).updateNodeDimensions(nodeId);
+            } catch {
+                // игнорируем ошибки — основной механизм через setNodeHeight
+            }
+        }
+    };
+
+    const currentDocument: EditorDocument | null = selectedDocument ?? (documents[0] ?? null);
+    const currentCode = currentDocument?.content ?? '';
+    const currentLanguage =
+        currentDocument?.language ??
+        (data?.language === 'js' ? 'javascript' : 'csharp');
+
+    // panel widths
+    const [leftWidth, setLeftWidth] = useState(180);
+    const [rightWidth, setRightWidth] = useState(220);
+
+    const [collapsed, setCollapsed] = useState(false);
+
+    const handleCodeChange = (newCode: string) => {
+        if (currentDocument) {
+            setDocumentContent(currentDocument.id, newCode);
+        }
+    };
+
+    // Обработчик переименования файла
+   const handleRename = (id: string, newName: string) => {
+        const doc = documents.find(d => d.id === id);
+        if (!doc || newName === doc.name) return;
+        
+        updateDocument(id, {
+            name: newName
+        });
+    };
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+    // Синхронизировать высоту ноды при изменении контейнера
+    useLayoutEffect(() => {
+        if (!containerRef.current || !setNodeHeight) return;
+
+        // initial set
+        const rect = containerRef.current.getBoundingClientRect();
+        const initialHeight = collapsed ? 42 : Math.round(rect.height);
+        setNodeHeight(id, initialHeight);
+        maybeUpdateNodeDimensions(id);
+
+        // Создаём ResizeObserver, если доступен
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === containerRef.current) {
+                    const h = collapsed ? 42 : Math.round(entry.contentRect.height);
+                    setNodeHeight(id, h);
+                    // опционально форсируем перерисовку XYFlow (если API доступен)
+                    maybeUpdateNodeDimensions(id);
+                }
+            }
+        });
+
+        resizeObserverRef.current = ro;
+        ro.observe(containerRef.current);
+
+        return () => {
+            ro.disconnect();
+            resizeObserverRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, setNodeHeight, collapsed]);
+
+    useEffect(() => {
+        // при смене collapsed форсируем одноразовый пересчёт (на случай, если ResizeObserver не сработал моментально)
+        if (!containerRef.current || !setNodeHeight) return;
+        const h = collapsed ? 42 : Math.round(containerRef.current.getBoundingClientRect().height);
+        setNodeHeight(id, h);
+        maybeUpdateNodeDimensions(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [collapsed]);
+
+    const toggleCollapsed = () => setCollapsed(prev => !prev);
+
+    // Manual panel resizing: убираем прямые вызовы updateNodeDimensions, теперь ResizeObserver всё подхватит
+    const startResizing = (
+        e: React.MouseEvent,
+        setter: (v: number) => void,
+        startWidth: number,
+        direction: "left" | "right",
+        min = 120,
+        max = 1000
+    ) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const startX = e.clientX;
+
+        const onMove = (ev: MouseEvent) => {
+            const dx = ev.clientX - startX;
+            const newWidth = direction === "left" ? startWidth + dx : startWidth - dx;
+            setter(Math.min(Math.max(newWidth, min), max));
+            // НЕ вызываем updateNodeDimensions здесь — ResizeObserver увидит изменение размеров DOM и обновит ноду
+        };
+
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            className={`${cls.widget} ${collapsed ? cls.collapsed : ''}`}
+        >
+            <Handle type="target" position={Position.Top} />
+
+            {/* GLOBAL NodeResizer (xyflow) — виден только если не collapsed */}
+            {!collapsed && (
+                <NodeResizer
+                    minWidth={600}
+                    minHeight={300}
+                    // Некоторые версии NodeResizer поддержуют onResize/onResizeEnd, некоторые — нет.
+                    // Мы полагаемся на ResizeObserver для синхронизации высоты, так что не обязаны использовать коллбэки.
+                />
+            )}
+
+            {/* HEADER */}
+            <div className="drag-handle__custom">
+                <div className={cls.header}>
+                    <h4>Code Block</h4>
+
+                    <div className={cls.shieldContainer}>
+                        <ShieldIcon className={cls.shield} />
+                        <BadgeIcon className={cls.badge} />
+                    </div>
+
+                    <button className={cls.closeButton} onClick={toggleCollapsed}>
+                        {collapsed ? (
+                            <svg width="16" height="16" viewBox="0 0 16 16">
+                                <path d="M4 8h8M8 4v8" stroke="currentColor" strokeWidth="2" />
+                            </svg>
+                        ) : (
+                            <CloseIcon className={cls.close} />
+                        )}
+                    </button>
+                </div>
+            </div>
+
+            {/* BODY */}
+            {!collapsed && (
+                <div className={cls.body}>
+                    {/* LEFT PANEL */}
+                    <div className={cls.panel} style={{ width: leftWidth }}>
+                        <FileExplorer
+                            documents={documents}
+                            selectedId={selectedId}
+                            onSelect={setSelectedId}
+                            onAdd={addDocument}
+                            onRename={handleRename} // Используем inline-редактирование
+                            onDelete={deleteDocument}
+                        />
+
+                        <div
+                            className={cls.resizer}
+                            onMouseDown={(e) =>
+                                startResizing(e, setLeftWidth, leftWidth, "left")
+                            }
+                        />
+                    </div>
+
+                    {/* CENTER */}
+                    <div className={cls.centerPanel}>
+                        {currentDocument ? (
+                            <div className={cls.editCont}>
+                                <MonacoEditorWrapper
+                                    code={currentCode}
+                                    language={currentLanguage}
+                                    onChange={handleCodeChange}
+                                    theme="vs-light"
+                                />
+                                <RunContainer run={run} stop={stop} save={saveAll}/>
+                            </div>
+                        ) : (
+                            <div style={{ padding: 16, color: '#666' }}>
+                                Нет открытого документа
+                            </div>
+                        )}
+                    </div>
+
+                    {/* RIGHT */}
+                    <div className={cls.panel} style={{ width: rightWidth }}>
+                        <OutputPanel output={output} history={history} />
+
+                        <div
+                            className={cls.resizer}
+                            onMouseDown={(e) =>
+                                startResizing(e, setRightWidth, rightWidth, "right")
+                            }
+                        />
+                    </div>
+                </div>
+            )}
+
+            <Handle type="source" position={Position.Bottom} />
+        </div>
+    );
+};
+
+export default memo(CompilerWidget);

package/src/components/FileExplorer.module.scss

@@ -0,0 +1,372 @@
+$file-bg: #f5f5f5;
+$file-border: #ddd;
+$file-selected: #d0eaff;
+
+.fileExplorer {
+  width: auto;
+  background: #F8FAFC;
+  border-right: 1px solid $file-border;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: auto;
+
+  .header {
+    padding: 6px 7px;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    background: #F1F5F9;
+    border-bottom: 1px solid #E2E8F0;
+    min-height: 21px;
+
+    span {
+      font-family: Arial;
+      font-weight: 400;
+      font-size: 6.18px;
+      margin-right: 1.7px;
+      align-items: center;
+    }
+
+    .documentIcon{
+      height: 12px;
+      margin-right: 1.5px;
+
+      svg {
+        height: 100%;
+        width: auto;
+        display: block;
+      }
+    }
+
+    button {
+      all: unset;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      outline: none;
+    }
+
+    .addButton {
+      height: auto;
+      margin-left: auto;
+      .plusIcon {
+        height: 13px;
+      }
+      
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .fileList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    flex-grow: 1;
+    padding: 4.12px;
+
+    .fileItem {
+      padding: 3.74px 4.12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4.12px;
+      transition: background 0.1s;
+      position: relative;
+      border-radius: 2px;
+
+      &:hover {
+        background: #e9e9e9;
+      }
+
+      &.selected {
+        background: #DBEAFE;
+      }
+      
+      &.modified {
+        .modifiedDot {
+          display: inline-block;
+        }
+      }
+
+      .fileIcon {
+        font-size: 7px;
+        margin-right: 3px;
+        flex-shrink: 0;
+      }
+
+      .nameContainer {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .itemText {
+        font-size: 7px;
+        font-family: sans-serif;
+        color: #1C398E;
+        align-items: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        line-height: 14px;
+        padding: 0;
+        margin: 0;
+      }
+
+      .modifiedDot {
+        display: none;
+        color: #ff6b6b;
+        font-size: 12px;
+        flex-shrink: 0;
+        animation: pulse 2s infinite;
+        
+        &:hover {
+          color: #ff5252;
+        }
+      }
+
+      .editContainer {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.moreBtn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  font-size: 12px;
+  padding: 2px 6px;
+  cursor: pointer;
+  opacity: 0.6;
+  outline: none;
+  border-radius: 3px;
+  flex-shrink: 0;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+  }
+}
+
+.clickZone {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  gap: 4px;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.contextMenu {
+  position: absolute;
+  right: 4px;
+  top: 28px;
+  background: #F1F5F9;
+  border: 1px solid #444;
+  border-radius: 4px;
+  padding: 4px 0;
+  min-width: 140px;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.menuItem {
+  padding: 6px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 14px;
+
+  &:hover {
+    background: #DBEAFE;
+  }
+}
+
+// СТИЛИ ДЛЯ INPUT ПРИ РЕДАКТИРОВАНИИ
+.editInput {
+  flex: 1;
+  min-width: 0;
+  background: #ffffff;
+  border: 1px solid #0078d4;
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0;
+  font-size: 7px;
+  font-family: sans-serif;
+  color: #1C398E;
+  outline: none;
+  height: 14px;
+  line-height: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  
+  &:focus {
+    border-color: #0078d4;
+    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
+  }
+}
+
+// Состояние редактирования - скрываем кнопку меню
+.fileItem:has(.editInput) {
+  .moreBtn {
+    display: none;
+  }
+  
+  &:hover {
+    background: transparent;
+  }
+  
+  .clickZone {
+    cursor: default;
+  }
+}
+
+// СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  min-width: 320px;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  
+  h3 {
+    margin: 0 0 20px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+  }
+}
+
+.formGroup {
+  margin-bottom: 16px;
+  
+  label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #555;
+  }
+  
+  input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    box-sizing: border-box;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    
+    &:focus {
+      outline: none;
+      border-color: #0078d4;
+      box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+    }
+    
+    &.error {
+      border-color: #d32f2f;
+      
+      &:focus {
+        border-color: #d32f2f;
+        box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
+      }
+    }
+  }
+  
+  .helpText {
+    font-size: 12px;
+    color: #666;
+    margin-top: 4px;
+    margin-bottom: 8px;
+  }
+  
+  .errorMessage {
+    color: #d32f2f;
+    font-size: 12px;
+    margin-top: 4px;
+    font-weight: 500;
+  }
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  
+  button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+    min-width: 80px;
+    
+    &.cancelBtn {
+      background: #f5f5f5;
+      color: #333;
+      
+      &:hover {
+        background: #e9e9e9;
+      }
+    }
+    
+    &.confirmBtn {
+      background: #0078d4;
+      color: white;
+      
+      &:hover:not(:disabled) {
+        background: #106ebe;
+      }
+      
+      &:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+  }
+}