wangdequan/linuxcncWebWASM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support long G-code preview and virtualized execution display

Browse Source
This commit is contained in:
wangdequan
2026-08-29 22:27:01 +08:00
parent 819015924b
commit d87366eb75
7 changed files with 179 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/react/src/styles.css
View File

@@ -180,13 +180,16 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.diagnostic-row code { min-width: 160px; color: #26384a; }
.program-main-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; }
.program-editor-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; min-height: 0; }
.program-gutter { display: flex; flex-direction: column; align-items: end; padding: 6px 6px 6px 0; overflow: hidden; border-right: 1px solid #c2c2c2; color: #888; background: #e4e4e4; font: 12px/1.45 ui-monospace, monospace; user-select: none; }
.program-gutter span { height: 17px; }
.program-gutter { min-width: 0; padding: 6px 6px 6px 0; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #c2c2c2; color: #888; background: #e4e4e4; font: 12px/1.45 ui-monospace, monospace; user-select: none; scrollbar-width: none; }
.program-gutter::-webkit-scrollbar { width: 0; height: 0; }
.program-gutter-content { position: relative; width: 100%; }
.program-gutter span { position: absolute; right: 0; left: 0; height: 17.4px; text-align: right; }
.program-gutter span.current-line { color: #5a4100; background: #ffe066; font-weight: 700; }
.program-gutter span.completed-line { color: #666; background: #e6e6e6; }
.program-editor-input { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.program-line-highlights { position: absolute; inset: 0; z-index: 0; padding: 6px 8px; overflow: hidden; pointer-events: none; font: 12px/1.45 ui-monospace, monospace; }
.program-line-highlights span { display: block; height: 17px; margin: 0 -8px; }
.program-line-highlights { position: absolute; top: 0; right: 0; left: 0; z-index: 0; padding: 6px 8px; overflow: hidden; pointer-events: none; font: 12px/1.45 ui-monospace, monospace; }
.program-line-highlights span { position: absolute; right: 0; left: 0; display: block; height: 17.4px; margin: 0 -8px; }
.program-line-highlights span.program-highlights-spacer { position: static; height: 100%; margin: 0; }
.program-line-highlights span.completed-line { background: #eeeeee; }
.program-line-highlights span.current-line { background: #ffe066; }
.program-editor-input textarea { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 180px; padding: 6px 8px; overflow: auto; resize: none; border: 0; outline: none; background: transparent; color: #111; font: 12px/1.45 ui-monospace, monospace; tab-size: 4; white-space: pre; scrollbar-gutter: stable both-edges; }
@@ -196,17 +199,18 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.program-execution-line code { flex: 0 0 auto; min-width: max-content; overflow: visible; color: #111; white-space: pre; }
.program-execution-trace { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; padding: 7px 8px; overflow: hidden; border-bottom: 1px solid #9aa8b4; background: #f4f7fa; color: #253746; font: 11px/1.35 ui-monospace, monospace; }
.program-execution-trace strong { display: block; margin-bottom: 2px; font-size: 11px; }
.program-execution-trace ol { display: grid; align-content: start; gap: 2px; width: 100%; max-width: 100%; max-height: none; margin: 0; padding: 0; overflow: auto; list-style: none; scrollbar-gutter: stable both-edges; }
.program-execution-trace li { display: grid; grid-template-columns: 42px max-content; gap: 8px; width: max-content; min-width: max-content; }
.program-trace-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable both-edges; }
.program-execution-trace ol { position: relative; display: block; width: max-content; min-width: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: visible; list-style: none; }
.program-execution-trace li { display: grid; grid-template-columns: 42px max-content; gap: 8px; width: max-content; min-width: max-content; box-sizing: border-box; }
.program-execution-trace li span { color: #174d84; font-weight: 700; }
.program-execution-trace li code { min-width: max-content; overflow: visible; white-space: pre; }
.program-execution-trace li.completed-line { padding: 3px 6px; border-left: 3px solid #b8b8b8; background: #e8e8e8; color: #666; }
.program-execution-trace li.executing-line { padding: 3px 6px; border-left: 3px solid #d09b00; background: #ffe066; color: #111; font-weight: 700; }
.program-execution-trace li.executing-line span { color: #6b4b00; }
.program-execution-trace strong span { color: #60717e; font-weight: 400; }
.program-editor-input textarea::-webkit-scrollbar, .program-execution-line::-webkit-scrollbar, .program-execution-trace ol::-webkit-scrollbar { width: 11px; height: 11px; }
.program-editor-input textarea::-webkit-scrollbar-track, .program-execution-line::-webkit-scrollbar-track, .program-execution-trace ol::-webkit-scrollbar-track { background: #d7dde2; }
.program-editor-input textarea::-webkit-scrollbar-thumb, .program-execution-line::-webkit-scrollbar-thumb, .program-execution-trace ol::-webkit-scrollbar-thumb { border: 2px solid #d7dde2; background: #7f8d98; }
.program-editor-input textarea::-webkit-scrollbar, .program-execution-line::-webkit-scrollbar, .program-trace-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.program-editor-input textarea::-webkit-scrollbar-track, .program-execution-line::-webkit-scrollbar-track, .program-trace-scroll::-webkit-scrollbar-track { background: #d7dde2; }
.program-editor-input textarea::-webkit-scrollbar-thumb, .program-execution-line::-webkit-scrollbar-thumb, .program-trace-scroll::-webkit-scrollbar-thumb { border: 2px solid #d7dde2; background: #7f8d98; }
.program-side { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 8px; border-left: 1px solid #aaa; background: #d9d9d9; }
.program-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.active-gcodes-label { display: grid; gap: 5px; color: #333; }