// edubox-mem:style.css var css = `/* --- CSS Variables --- */ :root { --bg-main: #111827; --bg-sidebar: #1f2937; --bg-panel: #374151; --bg-input: #111827; --border-color: #4b5563; --text-main: #f3f4f6; --text-muted: #9ca3af; --primary: #059669; --primary-hover: #10b981; --primary-text: #34d399; --danger: #dc2626; --danger-hover: #ef4444; --danger-text: #f87171; } /* --- Reset & Base --- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-main); color: var(--text-main); height: 100vh; display: flex; overflow: hidden; font-size: 14px; } /* --- Switch --- */ .switch { position: relative; display: inline-block; width: 40px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(20px); } .slider.round { border-radius: 20px; } .slider.round:before { border-radius: 50%; } /* --- Scrollbars --- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-sidebar); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* --- Layout --- */ .sidebar { width: 340px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; z-index: 20; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); } .canvas-area { flex: 1; position: relative; background-color: #1a1a1a; background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a), linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a); background-size: 20px 20px; background-position: 0 0, 10px 10px; user-select: none; overflow: hidden; } .canvas-area.light-mode { background-color: #ffffff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%, #e5e7eb), linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%, #e5e7eb); } /* --- UI Components --- */ .section { padding: 16px; border-bottom: 1px solid var(--border-color); } .section-title { font-size: 16px; font-weight: bold; color: var(--primary-text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .section-subtitle { font-size: 12px; color: var(--text-muted); } /* Bild-Info Truncate */ .image-info-text { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Buttons */ .btn { display: inline-block; background-color: var(--primary); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; text-align: center; transition: background-color 0.2s; width: 100%; } .btn:hover { background-color: var(--primary-hover); } .btn.danger { background-color: var(--danger); } .btn.danger:hover { background-color: var(--danger-hover); } .btn.outline { background: transparent; border: 1px solid var(--primary); color: var(--primary-text); } .btn.outline:hover { background: var(--bg-panel); } .btn-small { padding: 4px 8px; font-size: 12px; width: auto; } /* Inputs */ .input-group { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .row { display: flex; gap: 8px; align-items: center; } .row > * { flex: 1; } .label-inline { flex: 0 0 auto !important; color: var(--text-muted); font-size: 12px; } input[type='number'], input[type='text'] { background-color: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); padding: 6px; border-radius: 4px; font-size: 12px; width: 100%; } input:focus { outline: none; border-color: var(--primary); } .file-upload-wrapper { display: flex; gap: 8px; } .file-upload-wrapper > label { flex: 1; } input[type='file'] { display: none; } input[type='range'] { accent-color: var(--primary); width: 100%; } /* List Area & Groups */ .list-container { padding: 16px; display: flex; flex-direction: column; } .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: bold; } .list-group { margin-bottom: 8px; } .list-group-header { background-color: var(--bg-panel); padding: 6px 8px; font-weight: bold; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 4px; border: 1px solid var(--border-color); transition: background-color 0.2s; } .list-group-header:hover { border-color: var(--primary-text); } .list-group-header.active { border-color: var(--primary); background-color: #064e3b; color: white; } .list-group-items { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; margin-top: 4px; border-left: 1px solid var(--border-color); margin-left: 8px; } .list-item { background-color: transparent; padding: 6px 8px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: 1px solid transparent; } .list-item:hover { background-color: var(--border-color); } .list-item.active { border-color: var(--primary); background-color: rgba(5, 150, 105, 0.2); } .list-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .list-item-dims { font-size: 10px; color: var(--text-muted); margin: 0 8px; } .btn-delete-icon { background: none; border: none; color: var(--danger-text); cursor: pointer; opacity: 0; } .list-item:hover .btn-delete-icon { opacity: 1; } /* Toggle Arrow */ .group-toggle { display: inline-block; width: 14px; text-align: center; color: var(--text-muted); transition: color 0.2s; } .group-toggle:hover { color: var(--text-main); } .list-group-header.active .group-toggle { color: white; } /* Live Editor Panel */ #liveEditorPanel { padding: 16px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .editor-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 8px; } /* Floating Elements */ .floating-info { position: absolute; top: 16px; right: 16px; background: rgba(31, 41, 55, 0.8); backdrop-filter: blur(4px); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); display: flex; gap: 16px; font-size: 12px; z-index: 10; pointer-events: none; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; } /* Modals */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); z-index: 50; align-items: center; justify-content: center; } .modal-overlay.active { display: flex; } .modal-content { background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 8px; padding: 24px; width: 100%; max-width: 800px; height: 80vh; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } textarea { flex: 1; background: var(--bg-main); color: var(--primary-text); font-family: monospace; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px; resize: none; } textarea:focus { outline: none; border-color: var(--primary); } .creation-modal { display: none; position: absolute; background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); z-index: 30; width: 260px; overflow: hidden; } .creation-modal.active { display: block; } /* Modal Drag Header */ .modal-drag-header { background-color: var(--bg-panel); padding: 8px 12px; cursor: grab; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); user-select: none; } .modal-drag-header:active { cursor: grabbing; } .modal-drag-header h3 { font-size: 13px; color: var(--text-main); margin: 0; } .modal-close-icon { color: var(--text-muted); cursor: pointer; padding: 0 4px; } .modal-close-icon:hover { color: var(--danger-text); } .modal-body { padding: 12px; } .hidden { display: none !important; } .text-center { text-align: center; } .mt-2 { margin-top: 8px; } .mb-2 { margin-bottom: 8px; } /* Preview Canvas */ .preview-canvas-container { background-color: #1a1a1a; border-radius: 4px; border: 1px solid var(--border-color); padding: 8px; display: flex; justify-content: center; align-items: center; margin-top: 12px; background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a), linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a); background-size: 10px 10px; background-position: 0 0, 5px 5px; } /* Collapsible Sections */ .collapsible-header { cursor: pointer; user-select: none; transition: opacity 0.2s; } .collapsible-header:hover { opacity: 0.8; } .collapse-icon { font-size: 10px; transition: transform 0.2s; color: var(--text-muted); display: inline-block; } .collapsible-header.collapsed .collapse-icon { transform: rotate(-90deg); } .collapsible-content { overflow: hidden; } .collapsible-content.collapsed { display: none !important; } `; var style = document.createElement("style"); style.setAttribute("data-edubox-file", "style.css"); style.textContent = css; document.head.appendChild(style); // edubox-mem:__edubox_entry__.jsx var startDestDraw; try { Object.defineProperty(window, "mainContainer", { configurable: true, get: function() { return mainContainer; } }); } catch (e) { } try { Object.defineProperty(window, "mainCanvas", { configurable: true, get: function() { return mainCanvas; } }); } catch (e) { } try { Object.defineProperty(window, "mCtx", { configurable: true, get: function() { return mCtx; } }); } catch (e) { } try { Object.defineProperty(window, "srcContainer", { configurable: true, get: function() { return srcContainer; } }); } catch (e) { } try { Object.defineProperty(window, "srcCanvas", { configurable: true, get: function() { return srcCanvas; } }); } catch (e) { } try { Object.defineProperty(window, "sCtx", { configurable: true, get: function() { return sCtx; } }); } catch (e) { } try { Object.defineProperty(window, "activeCanvas", { configurable: true, get: function() { return activeCanvas; }, set: function(v) { activeCanvas = v; } }); } catch (e) { } try { Object.defineProperty(window, "activeContainer", { configurable: true, get: function() { return activeContainer; }, set: function(v) { activeContainer = v; } }); } catch (e) { } try { Object.defineProperty(window, "ctx", { configurable: true, get: function() { return ctx; }, set: function(v) { ctx = v; } }); } catch (e) { } try { Object.defineProperty(window, "isBuilderMode", { configurable: true, get: function() { return isBuilderMode; }, set: function(v) { isBuilderMode = v; } }); } catch (e) { } try { Object.defineProperty(window, "destContainer", { configurable: true, get: function() { return destContainer; } }); } catch (e) { } try { Object.defineProperty(window, "destCanvas", { configurable: true, get: function() { return destCanvas; } }); } catch (e) { } try { Object.defineProperty(window, "dCtx", { configurable: true, get: function() { return dCtx; } }); } catch (e) { } try { Object.defineProperty(window, "previewCanvas", { configurable: true, get: function() { return previewCanvas; } }); } catch (e) { } try { Object.defineProperty(window, "pCtx", { configurable: true, get: function() { return pCtx; } }); } catch (e) { } try { Object.defineProperty(window, "snapToGridCheckbox", { configurable: true, get: function() { return snapToGridCheckbox; } }); } catch (e) { } try { Object.defineProperty(window, "showGridCheckbox", { configurable: true, get: function() { return showGridCheckbox; } }); } catch (e) { } try { Object.defineProperty(window, "bgThemeToggle", { configurable: true, get: function() { return bgThemeToggle; } }); } catch (e) { } try { Object.defineProperty(window, "gridWidthInput", { configurable: true, get: function() { return gridWidthInput; } }); } catch (e) { } try { Object.defineProperty(window, "gridHeightInput", { configurable: true, get: function() { return gridHeightInput; } }); } catch (e) { } try { Object.defineProperty(window, "gridOffsetXInput", { configurable: true, get: function() { return gridOffsetXInput; } }); } catch (e) { } try { Object.defineProperty(window, "gridOffsetYInput", { configurable: true, get: function() { return gridOffsetYInput; } }); } catch (e) { } try { Object.defineProperty(window, "gridSpaceXInput", { configurable: true, get: function() { return gridSpaceXInput; } }); } catch (e) { } try { Object.defineProperty(window, "gridSpaceYInput", { configurable: true, get: function() { return gridSpaceYInput; } }); } catch (e) { } try { Object.defineProperty(window, "liveEditorPanel", { configurable: true, get: function() { return liveEditorPanel; } }); } catch (e) { } try { Object.defineProperty(window, "frameEditor", { configurable: true, get: function() { return frameEditor; } }); } catch (e) { } try { Object.defineProperty(window, "groupEditor", { configurable: true, get: function() { return groupEditor; } }); } catch (e) { } try { Object.defineProperty(window, "editName", { configurable: true, get: function() { return editName; } }); } catch (e) { } try { Object.defineProperty(window, "editX", { configurable: true, get: function() { return editX; } }); } catch (e) { } try { Object.defineProperty(window, "editY", { configurable: true, get: function() { return editY; } }); } catch (e) { } try { Object.defineProperty(window, "editW", { configurable: true, get: function() { return editW; } }); } catch (e) { } try { Object.defineProperty(window, "editH", { configurable: true, get: function() { return editH; } }); } catch (e) { } try { Object.defineProperty(window, "editGroupName", { configurable: true, get: function() { return editGroupName; } }); } catch (e) { } try { Object.defineProperty(window, "groupShiftX", { configurable: true, get: function() { return groupShiftX; } }); } catch (e) { } try { Object.defineProperty(window, "groupShiftY", { configurable: true, get: function() { return groupShiftY; } }); } catch (e) { } try { Object.defineProperty(window, "groupSetW", { configurable: true, get: function() { return groupSetW; } }); } catch (e) { } try { Object.defineProperty(window, "groupSetH", { configurable: true, get: function() { return groupSetH; } }); } catch (e) { } try { Object.defineProperty(window, "spriteModal", { configurable: true, get: function() { return spriteModal; } }); } catch (e) { } try { Object.defineProperty(window, "modalDragHandle", { configurable: true, get: function() { return modalDragHandle; } }); } catch (e) { } try { Object.defineProperty(window, "modalGroupSelect", { configurable: true, get: function() { return modalGroupSelect; } }); } catch (e) { } try { Object.defineProperty(window, "modalPrefix", { configurable: true, get: function() { return modalPrefix; } }); } catch (e) { } try { Object.defineProperty(window, "modalCols", { configurable: true, get: function() { return modalCols; } }); } catch (e) { } try { Object.defineProperty(window, "modalRows", { configurable: true, get: function() { return modalRows; } }); } catch (e) { } try { Object.defineProperty(window, "animPreviewSection", { configurable: true, get: function() { return animPreviewSection; } }); } catch (e) { } try { Object.defineProperty(window, "animFps", { configurable: true, get: function() { return animFps; } }); } catch (e) { } try { Object.defineProperty(window, "fpsDisplay", { configurable: true, get: function() { return fpsDisplay; } }); } catch (e) { } try { Object.defineProperty(window, "img", { configurable: true, get: function() { return img; }, set: function(v) { img = v; } }); } catch (e) { } try { Object.defineProperty(window, "fileName", { configurable: true, get: function() { return fileName; }, set: function(v) { fileName = v; } }); } catch (e) { } try { Object.defineProperty(window, "scale", { configurable: true, get: function() { return scale; }, set: function(v) { scale = v; } }); } catch (e) { } try { Object.defineProperty(window, "panX", { configurable: true, get: function() { return panX; }, set: function(v) { panX = v; } }); } catch (e) { } try { Object.defineProperty(window, "panY", { configurable: true, get: function() { return panY; }, set: function(v) { panY = v; } }); } catch (e) { } try { Object.defineProperty(window, "isPanning", { configurable: true, get: function() { return isPanning; }, set: function(v) { isPanning = v; } }); } catch (e) { } try { Object.defineProperty(window, "isDrawing", { configurable: true, get: function() { return isDrawing; }, set: function(v) { isDrawing = v; } }); } catch (e) { } try { Object.defineProperty(window, "isDraggingModal", { configurable: true, get: function() { return isDraggingModal; }, set: function(v) { isDraggingModal = v; } }); } catch (e) { } try { Object.defineProperty(window, "startPan", { configurable: true, get: function() { return startPan; }, set: function(v) { startPan = v; } }); } catch (e) { } try { Object.defineProperty(window, "startDraw", { configurable: true, get: function() { return startDraw; }, set: function(v) { startDraw = v; } }); } catch (e) { } try { Object.defineProperty(window, "modalOffset", { configurable: true, get: function() { return modalOffset; }, set: function(v) { modalOffset = v; } }); } catch (e) { } try { Object.defineProperty(window, "currentDrawRect", { configurable: true, get: function() { return currentDrawRect; }, set: function(v) { currentDrawRect = v; } }); } catch (e) { } try { Object.defineProperty(window, "destSprites", { configurable: true, get: function() { return destSprites; }, set: function(v) { destSprites = v; } }); } catch (e) { } try { Object.defineProperty(window, "destScale", { configurable: true, get: function() { return destScale; }, set: function(v) { destScale = v; } }); } catch (e) { } try { Object.defineProperty(window, "destPanX", { configurable: true, get: function() { return destPanX; }, set: function(v) { destPanX = v; } }); } catch (e) { } try { Object.defineProperty(window, "destPanY", { configurable: true, get: function() { return destPanY; }, set: function(v) { destPanY = v; } }); } catch (e) { } try { Object.defineProperty(window, "isPanningDest", { configurable: true, get: function() { return isPanningDest; }, set: function(v) { isPanningDest = v; } }); } catch (e) { } try { Object.defineProperty(window, "startPanDest", { configurable: true, get: function() { return startPanDest; }, set: function(v) { startPanDest = v; } }); } catch (e) { } try { Object.defineProperty(window, "destHoverRect", { configurable: true, get: function() { return destHoverRect; }, set: function(v) { destHoverRect = v; } }); } catch (e) { } try { Object.defineProperty(window, "destWidthInput", { configurable: true, get: function() { return destWidthInput; } }); } catch (e) { } try { Object.defineProperty(window, "destHeightInput", { configurable: true, get: function() { return destHeightInput; } }); } catch (e) { } try { Object.defineProperty(window, "stateNormal", { configurable: true, get: function() { return stateNormal; }, set: function(v) { stateNormal = v; } }); } catch (e) { } try { Object.defineProperty(window, "stateBuilder", { configurable: true, get: function() { return stateBuilder; }, set: function(v) { stateBuilder = v; } }); } catch (e) { } try { Object.defineProperty(window, "saveState", { configurable: true, get: function() { return saveState; }, set: function(v) { saveState = v; } }); } catch (e) { } try { Object.defineProperty(window, "loadState", { configurable: true, get: function() { return loadState; }, set: function(v) { loadState = v; } }); } catch (e) { } try { Object.defineProperty(window, "modeSwitch", { configurable: true, get: function() { return modeSwitch; } }); } catch (e) { } try { Object.defineProperty(window, "normalUploadSection", { configurable: true, get: function() { return normalUploadSection; } }); } catch (e) { } try { Object.defineProperty(window, "builderUploadSection", { configurable: true, get: function() { return builderUploadSection; } }); } catch (e) { } try { Object.defineProperty(window, "destSettingsSection", { configurable: true, get: function() { return destSettingsSection; } }); } catch (e) { } try { Object.defineProperty(window, "regions", { configurable: true, get: function() { return regions; }, set: function(v) { regions = v; } }); } catch (e) { } try { Object.defineProperty(window, "expandedGroups", { configurable: true, get: function() { return expandedGroups; }, set: function(v) { expandedGroups = v; } }); } catch (e) { } try { Object.defineProperty(window, "selectedRegionId", { configurable: true, get: function() { return selectedRegionId; }, set: function(v) { selectedRegionId = v; } }); } catch (e) { } try { Object.defineProperty(window, "selectedGroupId", { configurable: true, get: function() { return selectedGroupId; }, set: function(v) { selectedGroupId = v; } }); } catch (e) { } try { Object.defineProperty(window, "hoverRegionId", { configurable: true, get: function() { return hoverRegionId; }, set: function(v) { hoverRegionId = v; } }); } catch (e) { } try { Object.defineProperty(window, "destBuffer", { configurable: true, get: function() { return destBuffer; }, set: function(v) { destBuffer = v; } }); } catch (e) { } try { Object.defineProperty(window, "destCtxBuffer", { configurable: true, get: function() { return destCtxBuffer; }, set: function(v) { destCtxBuffer = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderClipboard", { configurable: true, get: function() { return builderClipboard; }, set: function(v) { builderClipboard = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderSrcSelection", { configurable: true, get: function() { return builderSrcSelection; }, set: function(v) { builderSrcSelection = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderDestSelection", { configurable: true, get: function() { return builderDestSelection; }, set: function(v) { builderDestSelection = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderFloatingCanvas", { configurable: true, get: function() { return builderFloatingCanvas; }, set: function(v) { builderFloatingCanvas = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderFloatingPos", { configurable: true, get: function() { return builderFloatingPos; }, set: function(v) { builderFloatingPos = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderIsDraggingFloating", { configurable: true, get: function() { return builderIsDraggingFloating; }, set: function(v) { builderIsDraggingFloating = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderDragOffset", { configurable: true, get: function() { return builderDragOffset; }, set: function(v) { builderDragOffset = v; } }); } catch (e) { } try { Object.defineProperty(window, "resizeCanvas", { configurable: true, get: function() { return resizeCanvas; }, set: function(v) { resizeCanvas = v; } }); } catch (e) { } try { Object.defineProperty(window, "getGridWidth", { configurable: true, get: function() { return getGridWidth; }, set: function(v) { getGridWidth = v; } }); } catch (e) { } try { Object.defineProperty(window, "getGridHeight", { configurable: true, get: function() { return getGridHeight; }, set: function(v) { getGridHeight = v; } }); } catch (e) { } try { Object.defineProperty(window, "snap", { configurable: true, get: function() { return snap; }, set: function(v) { snap = v; } }); } catch (e) { } try { Object.defineProperty(window, "draw", { configurable: true, get: function() { return draw; }, set: function(v) { draw = v; } }); } catch (e) { } try { Object.defineProperty(window, "lastFrameTime", { configurable: true, get: function() { return lastFrameTime; }, set: function(v) { lastFrameTime = v; } }); } catch (e) { } try { Object.defineProperty(window, "previewIndex", { configurable: true, get: function() { return previewIndex; }, set: function(v) { previewIndex = v; } }); } catch (e) { } try { Object.defineProperty(window, "previewLoop", { configurable: true, get: function() { return previewLoop; }, set: function(v) { previewLoop = v; } }); } catch (e) { } try { Object.defineProperty(window, "drawDest", { configurable: true, get: function() { return drawDest; }, set: function(v) { drawDest = v; } }); } catch (e) { } try { Object.defineProperty(window, "shiftBaseX", { configurable: true, get: function() { return shiftBaseX; }, set: function(v) { shiftBaseX = v; } }); } catch (e) { } try { Object.defineProperty(window, "shiftBaseY", { configurable: true, get: function() { return shiftBaseY; }, set: function(v) { shiftBaseY = v; } }); } catch (e) { } try { Object.defineProperty(window, "selectRegion", { configurable: true, get: function() { return selectRegion; }, set: function(v) { selectRegion = v; } }); } catch (e) { } try { Object.defineProperty(window, "selectGroup", { configurable: true, get: function() { return selectGroup; }, set: function(v) { selectGroup = v; } }); } catch (e) { } try { Object.defineProperty(window, "deselectAll", { configurable: true, get: function() { return deselectAll; }, set: function(v) { deselectAll = v; } }); } catch (e) { } try { Object.defineProperty(window, "updateRegionsList", { configurable: true, get: function() { return updateRegionsList; }, set: function(v) { updateRegionsList = v; } }); } catch (e) { } try { Object.defineProperty(window, "updateDeleteBtn", { configurable: true, get: function() { return updateDeleteBtn; }, set: function(v) { updateDeleteBtn = v; } }); } catch (e) { } try { Object.defineProperty(window, "builderResizer", { configurable: true, get: function() { return builderResizer; } }); } catch (e) { } try { Object.defineProperty(window, "exportImgBtn", { configurable: true, get: function() { return exportImgBtn; } }); } catch (e) { } try { Object.defineProperty(window, "startDestDraw", { configurable: true, get: function() { return startDestDraw; }, set: function(v) { startDestDraw = v; } }); } catch (e) { } var mainContainer = document.getElementById("mainContainer"); var mainCanvas = document.getElementById("mainCanvas"); var mCtx = mainCanvas.getContext("2d"); var srcContainer = document.getElementById("srcContainer"); var srcCanvas = document.getElementById("srcCanvas"); var sCtx = srcCanvas.getContext("2d"); var activeCanvas = mainCanvas; var activeContainer = mainContainer; var ctx = mCtx; var isBuilderMode = false; var destContainer = document.getElementById("destContainer"); var destCanvas = document.getElementById("destCanvas"); var dCtx = destCanvas.getContext("2d"); var previewCanvas = document.getElementById("previewCanvas"); var pCtx = previewCanvas.getContext("2d"); var snapToGridCheckbox = document.getElementById("snapToGrid"); var showGridCheckbox = document.getElementById("showGrid"); var bgThemeToggle = document.getElementById("bgThemeToggle"); var gridWidthInput = document.getElementById("gridWidth"); var gridHeightInput = document.getElementById("gridHeight"); var gridOffsetXInput = document.getElementById("gridOffsetX"); var gridOffsetYInput = document.getElementById("gridOffsetY"); var gridSpaceXInput = document.getElementById("gridSpaceX"); var gridSpaceYInput = document.getElementById("gridSpaceY"); var liveEditorPanel = document.getElementById("liveEditorPanel"); var frameEditor = document.getElementById("frameEditor"); var groupEditor = document.getElementById("groupEditor"); var editName = document.getElementById("editName"); var editX = document.getElementById("editX"); var editY = document.getElementById("editY"); var editW = document.getElementById("editW"); var editH = document.getElementById("editH"); var editGroupName = document.getElementById("editGroupName"); var groupShiftX = document.getElementById("groupShiftX"); var groupShiftY = document.getElementById("groupShiftY"); var groupSetW = document.getElementById("groupSetW"); var groupSetH = document.getElementById("groupSetH"); var spriteModal = document.getElementById("spriteModal"); var modalDragHandle = document.getElementById("modalDragHandle"); var modalGroupSelect = document.getElementById("modalGroupSelect"); var modalPrefix = document.getElementById("modalPrefix"); var modalCols = document.getElementById("modalCols"); var modalRows = document.getElementById("modalRows"); var animPreviewSection = document.getElementById("animPreviewSection"); var animFps = document.getElementById("animFps"); var fpsDisplay = document.getElementById("fpsDisplay"); var img = null; var fileName = "spritesheet"; var scale = 2; var panX = 50; var panY = 50; var isPanning = false; var isDrawing = false; var isDraggingModal = false; var startPan = { x: 0, y: 0 }; var startDraw = { x: 0, y: 0 }; var modalOffset = { x: 0, y: 0 }; var currentDrawRect = null; var destSprites = []; var destScale = 1; var destPanX = 50; var destPanY = 50; var isPanningDest = false; var startPanDest = { x: 0, y: 0 }; var destHoverRect = null; var destWidthInput = document.getElementById("destWidth"); var destHeightInput = document.getElementById("destHeight"); var stateNormal = { img: null, scale: 2, panX: 50, panY: 50, regions: [] }; var stateBuilder = { img: null, scale: 2, panX: 50, panY: 50, regions: [] }; function saveState() { if (isBuilderMode) { stateBuilder = { img, scale, panX, panY, regions }; } else { stateNormal = { img, scale, panX, panY, regions }; } } function loadState() { const s = isBuilderMode ? stateBuilder : stateNormal; img = s.img; scale = s.scale; panX = s.panX; panY = s.panY; regions = s.regions; activeCanvas = isBuilderMode ? srcCanvas : mainCanvas; activeContainer = isBuilderMode ? srcContainer : mainContainer; ctx = activeCanvas.getContext("2d"); } var modeSwitch = document.getElementById("modeSwitch"); var normalUploadSection = document.getElementById("normalUploadSection"); var builderUploadSection = document.getElementById("builderUploadSection"); var destSettingsSection = document.getElementById("destSettingsSection"); if (modeSwitch) { modeSwitch.addEventListener("change", (e) => { saveState(); isBuilderMode = e.target.checked; const modeLabel = document.getElementById("modeLabel"); if (modeLabel) { modeLabel.textContent = isBuilderMode ? "Create Modus" : "Frame Modus"; } if (isBuilderMode && stateNormal.img && window._lastImportedNormalImg !== stateNormal.img) { destWidthInput.value = stateNormal.img.width; destHeightInput.value = stateNormal.img.height; destBuffer.width = stateNormal.img.width; destBuffer.height = stateNormal.img.height; destCtxBuffer.clearRect(0, 0, destBuffer.width, destBuffer.height); destCtxBuffer.drawImage(stateNormal.img, 0, 0); window._lastImportedNormalImg = stateNormal.img; } loadState(); if (isBuilderMode) { normalUploadSection.classList.add("hidden"); builderUploadSection.classList.remove("hidden"); destSettingsSection.classList.remove("hidden"); mainContainer.classList.add("hidden"); destContainer.classList.remove("hidden"); destContainer.style.flex = "0 0 50%"; document.getElementById("builderResizer")?.classList.remove("hidden"); srcContainer.classList.remove("hidden"); srcContainer.style.flex = "1 1 0%"; document.getElementById("destCollapsedBtn")?.classList.add("hidden"); document.getElementById("srcCollapsedBtn")?.classList.add("hidden"); document.getElementById("snapSettings")?.classList.add("hidden"); document.getElementById("framesListPanel")?.classList.add("hidden"); document.getElementById("liveEditorPanel")?.classList.add("hidden"); document.getElementById("exportSection")?.classList.add("hidden"); } else { normalUploadSection.classList.remove("hidden"); builderUploadSection.classList.add("hidden"); destSettingsSection.classList.add("hidden"); mainContainer.classList.remove("hidden"); destContainer.classList.add("hidden"); document.getElementById("builderResizer")?.classList.add("hidden"); srcContainer.classList.add("hidden"); document.getElementById("snapSettings")?.classList.remove("hidden"); document.getElementById("framesListPanel")?.classList.remove("hidden"); document.getElementById("liveEditorPanel")?.classList.remove("hidden"); document.getElementById("exportSection")?.classList.remove("hidden"); const dw = parseInt(destWidthInput.value) || 512; const dh = parseInt(destHeightInput.value) || 512; const off = document.createElement("canvas"); off.width = dw; off.height = dh; const oCtx = off.getContext("2d"); oCtx.imageSmoothingEnabled = false; oCtx.drawImage(destBuffer, 0, 0, dw, dh, 0, 0, dw, dh); const newImg = new Image(); newImg.onload = () => { img = newImg; updateRegionsList(); resizeCanvas(); document.getElementById("imageInfo").textContent = `Neues Spritesheet | Bild: ${img.width}x${img.height} px`; document.getElementById("imageInfo").classList.remove("hidden"); }; newImg.src = off.toDataURL(); } requestAnimationFrame(() => { updateRegionsList(); resizeCanvas(); }); }); } var regions = []; var expandedGroups = /* @__PURE__ */ new Set(); var selectedRegionId = null; var selectedGroupId = null; var hoverRegionId = null; var destBuffer = document.createElement("canvas"); destBuffer.width = 4096; destBuffer.height = 4096; var destCtxBuffer = destBuffer.getContext("2d"); var builderClipboard = null; var builderSrcSelection = null; var builderDestSelection = null; var builderFloatingCanvas = null; var builderFloatingPos = null; var builderIsDraggingFloating = false; var builderDragOffset = { x: 0, y: 0 }; function resizeCanvas() { const dpr = window.devicePixelRatio || 1; if (mainContainer && mainCanvas) { mainCanvas.width = mainContainer.clientWidth * dpr; mainCanvas.height = mainContainer.clientHeight * dpr; mainCanvas.style.width = mainContainer.clientWidth + "px"; mainCanvas.style.height = mainContainer.clientHeight + "px"; } if (srcContainer && destContainer) { srcCanvas.width = srcContainer.clientWidth * dpr; srcCanvas.height = srcContainer.clientHeight * dpr; srcCanvas.style.width = srcContainer.clientWidth + "px"; srcCanvas.style.height = srcContainer.clientHeight + "px"; destCanvas.width = destContainer.clientWidth * dpr; destCanvas.height = destContainer.clientHeight * dpr; destCanvas.style.width = destContainer.clientWidth + "px"; destCanvas.style.height = destContainer.clientHeight + "px"; } if (typeof draw === "function") draw(); if (typeof drawDest === "function") drawDest(); } window.addEventListener("resize", resizeCanvas); function getGridWidth() { return parseInt(gridWidthInput.value) || 1; } function getGridHeight() { return parseInt(gridHeightInput.value) || 1; } function snap(val, size, offset = 0) { return Math.floor((val - offset) / size) * size + offset; } function draw() { const dpr = window.devicePixelRatio || 1; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, activeCanvas.width, activeCanvas.height); ctx.save(); ctx.scale(dpr, dpr); ctx.translate(Math.round(panX), Math.round(panY)); ctx.scale(scale, scale); if (img) { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0); if (showGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, sx = parseInt(gridSpaceXInput.value) || 0, sy = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + sx; const stepY = gh + sy; ctx.strokeStyle = bgThemeToggle && bgThemeToggle.checked ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.1)"; ctx.lineWidth = 1 / scale; ctx.beginPath(); var _ebxloop_1 = Date.now(); for (let x = ox; x <= img.width; x += stepX) { if (Date.now() - _ebxloop_1 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } ctx.moveTo(x, 0); ctx.lineTo(x, img.height); if (sx > 0 && x + gw <= img.width) { ctx.moveTo(x + gw, 0); ctx.lineTo(x + gw, img.height); } } var _ebxloop_2 = Date.now(); for (let x = ox - stepX; x >= 0; x -= stepX) { if (Date.now() - _ebxloop_2 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } ctx.moveTo(x + gw, 0); ctx.lineTo(x + gw, img.height); if (sx > 0 && x >= 0) { ctx.moveTo(x, 0); ctx.lineTo(x, img.height); } } var _ebxloop_3 = Date.now(); for (let y = oy; y <= img.height; y += stepY) { if (Date.now() - _ebxloop_3 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } ctx.moveTo(0, y); ctx.lineTo(img.width, y); if (sy > 0 && y + gh <= img.height) { ctx.moveTo(0, y + gh); ctx.lineTo(img.width, y + gh); } } var _ebxloop_4 = Date.now(); for (let y = oy - stepY; y >= 0; y -= stepY) { if (Date.now() - _ebxloop_4 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } ctx.moveTo(0, y + gh); ctx.lineTo(img.width, y + gh); if (sy > 0 && y >= 0) { ctx.moveTo(0, y); ctx.lineTo(img.width, y); } } ctx.stroke(); } } ctx.lineWidth = 2 / scale; var _ebxloop_5 = Date.now(); for (const r of regions) { if (Date.now() - _ebxloop_5 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } const isSel = r.id === selectedRegionId || r.group === selectedGroupId; const isHov = r.id === hoverRegionId; ctx.fillStyle = isSel ? "rgba(5, 150, 105, 0.5)" : isHov ? "rgba(255, 255, 0, 0.3)" : "rgba(5, 150, 105, 0.2)"; ctx.strokeStyle = isSel ? "#34d399" : isHov ? "#ffff00" : "#059669"; ctx.fillRect(r.x, r.y, r.w, r.h); ctx.strokeRect(r.x, r.y, r.w, r.h); ctx.fillStyle = "rgba(31, 41, 55, 0.8)"; const ts = Math.max(0.5, 12 / scale); ctx.font = `${ts}px sans-serif`; ctx.fillRect(r.x, r.y, ctx.measureText(r.name).width + 4 / scale, ts + 4 / scale); ctx.fillStyle = isSel || isHov ? "#ffffff" : "#34d399"; ctx.fillText(r.name, r.x + 2 / scale, r.y + ts); } if (currentDrawRect && (isDrawing || isBuilderMode && activeCanvas === srcCanvas)) { if (!isBuilderMode || activeCanvas !== srcCanvas) { ctx.fillStyle = "rgba(59, 130, 246, 0.3)"; ctx.fillRect(currentDrawRect.x, currentDrawRect.y, currentDrawRect.w, currentDrawRect.h); } ctx.strokeStyle = "#3b82f6"; ctx.setLineDash([4 / scale, 4 / scale]); ctx.strokeRect(currentDrawRect.x, currentDrawRect.y, currentDrawRect.w, currentDrawRect.h); ctx.setLineDash([]); if (isBuilderMode && activeCanvas === srcCanvas) { const selC = document.getElementById("srcInfoSelContainer"); if (selC) { selC.style.display = "block"; document.getElementById("srcInfoSelection").textContent = Math.round(currentDrawRect.w) + " x " + Math.round(currentDrawRect.h); } } } else { const selC = document.getElementById("srcInfoSelContainer"); if (selC) selC.style.display = "none"; } ctx.restore(); const zoomEl = document.getElementById(isBuilderMode ? "srcInfoZoom" : "mainInfoZoom"); if (zoomEl) zoomEl.textContent = Math.round(scale * 100) + "%"; } var lastFrameTime = performance.now(); var previewIndex = 0; function previewLoop(time) { requestAnimationFrame(previewLoop); if (!img || !selectedGroupId && !selectedRegionId) return; const fps = parseInt(animFps.value) || 10; fpsDisplay.textContent = `${fps} FPS`; const interval = 1e3 / fps; if (time - lastFrameTime > interval) { lastFrameTime = time - (time - lastFrameTime) % interval; let framesToPlay = []; if (selectedGroupId) framesToPlay = regions.filter((r) => r.group === selectedGroupId); else if (selectedRegionId) framesToPlay = regions.filter((r) => r.id === selectedRegionId); if (framesToPlay.length > 0) { previewIndex = (previewIndex + 1) % framesToPlay.length; const frame = framesToPlay[previewIndex]; pCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); const sc = Math.min( 3, Math.min(previewCanvas.width / frame.w, previewCanvas.height / frame.h) ); const dw = frame.w * sc; const dh = frame.h * sc; const dx = (previewCanvas.width - dw) / 2; const dy = (previewCanvas.height - dh) / 2; pCtx.imageSmoothingEnabled = false; pCtx.drawImage(img, frame.x, frame.y, frame.w, frame.h, dx, dy, dw, dh); } } } requestAnimationFrame(previewLoop); function drawDest() { if (!dCtx) return; const dpr = window.devicePixelRatio || 1; dCtx.setTransform(1, 0, 0, 1, 0, 0); dCtx.clearRect(0, 0, destCanvas.width, destCanvas.height); dCtx.save(); dCtx.scale(dpr, dpr); dCtx.translate(Math.round(destPanX), Math.round(destPanY)); dCtx.scale(destScale, destScale); const dw = parseInt(destWidthInput.value) || 512; const dh = parseInt(destHeightInput.value) || 512; if (bgThemeToggle && bgThemeToggle.checked) { dCtx.fillStyle = "rgba(0,0,0,0.05)"; } else { dCtx.fillStyle = "rgba(255,255,255,0.05)"; } dCtx.fillRect(0, 0, dw, dh); dCtx.imageSmoothingEnabled = false; if (isBuilderMode && typeof destBuffer !== "undefined" && destBuffer) { dCtx.drawImage(destBuffer, 0, 0); if (stateNormal && stateNormal.regions) { dCtx.lineWidth = 2 / destScale; var _ebxloop_6 = Date.now(); for (const r of stateNormal.regions) { if (Date.now() - _ebxloop_6 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } dCtx.strokeStyle = "rgba(5, 150, 105, 0.8)"; dCtx.strokeRect(r.x, r.y, r.w, r.h); } } } else if (!isBuilderMode) { var _ebxloop_7 = Date.now(); for (const s of destSprites) { if (Date.now() - _ebxloop_7 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } if (s.img) { dCtx.drawImage(s.img, s.sx, s.sy, s.sw, s.sh, s.dx, s.dy, s.dw, s.dh); dCtx.strokeStyle = "rgba(5, 150, 105, 0.5)"; dCtx.lineWidth = 1 / destScale; dCtx.strokeRect(s.dx, s.dy, s.dw, s.dh); } } } if (isBuilderMode && builderFloatingCanvas && builderFloatingPos) { dCtx.drawImage(builderFloatingCanvas, builderFloatingPos.x, builderFloatingPos.y); } else if (isBuilderMode && builderClipboard && destHoverRect) { dCtx.globalAlpha = 0.5; dCtx.drawImage(builderClipboard, destHoverRect.x, destHoverRect.y); dCtx.globalAlpha = 1; dCtx.strokeStyle = "#3b82f6"; dCtx.lineWidth = 2 / destScale; dCtx.setLineDash([4 / destScale, 4 / destScale]); dCtx.strokeRect(destHoverRect.x, destHoverRect.y, builderClipboard.width, builderClipboard.height); dCtx.setLineDash([]); } else if (!isBuilderMode && destHoverRect && (selectedRegionId || selectedGroupId)) { let r = null; if (selectedRegionId) r = regions.find((reg) => reg.id === selectedRegionId); else if (selectedGroupId) r = regions.find((reg) => reg.group === selectedGroupId); if (r && img) { dCtx.globalAlpha = 0.5; dCtx.drawImage(img, r.x, r.y, r.w, r.h, destHoverRect.x, destHoverRect.y, r.w, r.h); dCtx.globalAlpha = 1; dCtx.strokeStyle = "#3b82f6"; dCtx.lineWidth = 2 / destScale; dCtx.strokeRect(destHoverRect.x, destHoverRect.y, r.w, r.h); } } if (showGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, sx = parseInt(gridSpaceXInput.value) || 0, sy = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + sx; const stepY = gh + sy; dCtx.strokeStyle = bgThemeToggle && bgThemeToggle.checked ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.1)"; dCtx.lineWidth = 1 / destScale; dCtx.beginPath(); var _ebxloop_8 = Date.now(); for (let x = ox; x <= dw; x += stepX) { if (Date.now() - _ebxloop_8 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } dCtx.moveTo(x, 0); dCtx.lineTo(x, dh); if (sx > 0 && x + gw <= dw) { dCtx.moveTo(x + gw, 0); dCtx.lineTo(x + gw, dh); } } var _ebxloop_9 = Date.now(); for (let y = oy; y <= dh; y += stepY) { if (Date.now() - _ebxloop_9 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } dCtx.moveTo(0, y); dCtx.lineTo(dw, y); if (sy > 0 && y + gh <= dh) { dCtx.moveTo(0, y + gh); dCtx.lineTo(dw, y + gh); } } dCtx.stroke(); } else { dCtx.strokeStyle = bgThemeToggle && bgThemeToggle.checked ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"; dCtx.strokeRect(0, 0, dw, dh); } if (isBuilderMode && builderDestSelection) { dCtx.fillStyle = "rgba(59, 130, 246, 0.3)"; dCtx.fillRect(builderDestSelection.x, builderDestSelection.y, builderDestSelection.w, builderDestSelection.h); dCtx.strokeStyle = "#3b82f6"; dCtx.lineWidth = 2 / destScale; dCtx.setLineDash([4 / destScale, 4 / destScale]); dCtx.strokeRect(builderDestSelection.x, builderDestSelection.y, builderDestSelection.w, builderDestSelection.h); dCtx.setLineDash([]); } dCtx.restore(); const zEl = document.getElementById("destInfoZoom"); if (zEl) zEl.textContent = Math.round(destScale * 100) + "%"; } [editName, editX, editY, editW, editH].forEach((input) => { input.addEventListener("input", () => { if (!selectedRegionId) return; const r = regions.find((r2) => r2.id === selectedRegionId); if (r) { r.name = editName.value; r.x = parseInt(editX.value) || 0; r.y = parseInt(editY.value) || 0; r.w = Math.max(1, parseInt(editW.value) || 1); r.h = Math.max(1, parseInt(editH.value) || 1); updateRegionsList(false); draw(); } }); }); var shiftBaseX = 0; var shiftBaseY = 0; groupShiftX.addEventListener( "focus", (e) => shiftBaseX = parseInt(e.target.value) || 0 ); groupShiftX.addEventListener("input", (e) => { const current = parseInt(e.target.value) || 0; const delta = current - shiftBaseX; if (selectedGroupId && delta !== 0) { regions.filter((r) => r.group === selectedGroupId).forEach((r) => r.x += delta); shiftBaseX = current; updateRegionsList(false); draw(); } }); groupShiftY.addEventListener( "focus", (e) => shiftBaseY = parseInt(e.target.value) || 0 ); groupShiftY.addEventListener("input", (e) => { const current = parseInt(e.target.value) || 0; const delta = current - shiftBaseY; if (selectedGroupId && delta !== 0) { regions.filter((r) => r.group === selectedGroupId).forEach((r) => r.y += delta); shiftBaseY = current; updateRegionsList(false); draw(); } }); groupSetW.addEventListener("input", (e) => { const val = parseInt(e.target.value); if (selectedGroupId && val > 0) { regions.filter((r) => r.group === selectedGroupId).forEach((r) => r.w = val); updateRegionsList(false); draw(); } }); groupSetH.addEventListener("input", (e) => { const val = parseInt(e.target.value); if (selectedGroupId && val > 0) { regions.filter((r) => r.group === selectedGroupId).forEach((r) => r.h = val); updateRegionsList(false); draw(); } }); editGroupName.addEventListener("input", (e) => { if (!selectedGroupId) return; const newName = e.target.value.trim() || "group"; if (expandedGroups.has(selectedGroupId)) { expandedGroups.delete(selectedGroupId); expandedGroups.add(newName); } const groupFrames = regions.filter((r) => r.group === selectedGroupId); groupFrames.forEach((r, idx) => { r.group = newName; if (r.name.startsWith(selectedGroupId)) { r.name = newName + r.name.substring(selectedGroupId.length); } else { r.name = groupFrames.length > 1 ? `${newName}${idx}` : newName; } }); selectedGroupId = newName; updateRegionsList(true); draw(); }); [ gridWidthInput, gridHeightInput, gridOffsetXInput, gridOffsetYInput, gridSpaceXInput, gridSpaceYInput, snapToGridCheckbox, showGridCheckbox ].forEach((el) => { el.addEventListener("input", () => { draw(); if (typeof drawDest === "function") drawDest(); }); el.addEventListener("change", () => { draw(); if (typeof drawDest === "function") drawDest(); }); }); if (bgThemeToggle) { bgThemeToggle.addEventListener("change", (e) => { document.querySelectorAll(".canvas-area").forEach((el) => { if (e.target.checked) { el.classList.add("light-mode"); } else { el.classList.remove("light-mode"); } }); draw(); if (typeof drawDest === "function") drawDest(); }); } function selectRegion(id) { selectedRegionId = id; selectedGroupId = null; const r = regions.find((reg) => reg.id === id); if (r) { expandedGroups.add(r.group); liveEditorPanel.classList.add("active"); document.getElementById("editorEmptyState").classList.add("hidden"); frameEditor.classList.remove("hidden"); groupEditor.classList.add("hidden"); editName.value = r.name; editX.value = r.x; editY.value = r.y; editW.value = r.w; editH.value = r.h; } animPreviewSection.classList.remove("hidden"); updateRegionsList(true); draw(); } function selectGroup(gName) { selectedGroupId = gName; selectedRegionId = null; shiftBaseX = 0; shiftBaseY = 0; groupShiftX.value = 0; groupShiftY.value = 0; const firstChild = regions.find((r) => r.group === gName); if (firstChild) { groupSetW.value = firstChild.w; groupSetH.value = firstChild.h; } liveEditorPanel.classList.add("active"); document.getElementById("editorEmptyState").classList.add("hidden"); frameEditor.classList.add("hidden"); groupEditor.classList.remove("hidden"); editGroupName.value = gName; animPreviewSection.classList.remove("hidden"); updateRegionsList(false); draw(); } function deselectAll() { selectedRegionId = null; selectedGroupId = null; liveEditorPanel.classList.remove("active"); document.getElementById("editorEmptyState").classList.remove("hidden"); frameEditor.classList.add("hidden"); groupEditor.classList.add("hidden"); animPreviewSection.classList.add("hidden"); updateRegionsList(false); draw(); } function updateRegionsList(rebuild = true) { document.getElementById("frameCount").textContent = regions.length; const emptyStateText = document.getElementById("emptyStateText"); if (emptyStateText) emptyStateText.classList.toggle("hidden", regions.length > 0); if (rebuild) { regions.sort((a, b) => { if (a.group === b.group) { return a.name.localeCompare(b.name, void 0, { numeric: true, sensitivity: "base" }); } return a.group.localeCompare(b.group, void 0, { numeric: true, sensitivity: "base" }); }); const regionsList = document.getElementById("regionsList"); regionsList.innerHTML = ""; const groups = {}; regions.forEach((r) => { if (!groups[r.group]) groups[r.group] = []; groups[r.group].push(r); }); Object.keys(groups).forEach((gName) => { const gFrames = groups[gName]; const gDiv = document.createElement("div"); gDiv.className = "list-group"; const isExpanded = expandedGroups.has(gName); const gHead = document.createElement("div"); gHead.className = `list-group-header ${selectedGroupId === gName ? "active" : ""}`; gHead.dataset.group = gName; gHead.innerHTML = `

${isExpanded ? "\u25BC" : "\u25B6"} \u{1F4C1} ${gName}

${gFrames.length} Frames `; gHead.querySelector(".group-toggle").onclick = (e) => { e.stopPropagation(); if (expandedGroups.has(gName)) expandedGroups.delete(gName); else expandedGroups.add(gName); updateRegionsList(true); }; gHead.onclick = () => { if (selectedGroupId !== gName) selectGroup(gName); }; gDiv.appendChild(gHead); const gItems = document.createElement("div"); gItems.className = "list-group-items"; if (!isExpanded) gItems.style.display = "none"; gFrames.forEach((reg) => { const d = document.createElement("div"); d.className = `list-item ${reg.id === selectedRegionId ? "active" : ""}`; d.id = `list-item-${reg.id}`; d.innerHTML = `${reg.name}${reg.w}x${reg.h}`; d.querySelector("button").onclick = (e) => { e.stopPropagation(); regions = regions.filter((r) => r.id !== reg.id); if (selectedRegionId === reg.id || regions.filter((r) => r.group === gName).length === 0) deselectAll(); updateRegionsList(); draw(); }; d.onclick = (e) => { e.stopPropagation(); selectedRegionId === reg.id ? deselectAll() : selectRegion(reg.id); }; d.onmouseenter = () => { hoverRegionId = reg.id; draw(); }; d.onmouseleave = () => { hoverRegionId = null; draw(); }; gItems.appendChild(d); }); gDiv.appendChild(gItems); regionsList.appendChild(gDiv); }); } else { document.querySelectorAll(".list-group-header").forEach( (el) => el.classList.toggle("active", el.dataset.group === selectedGroupId) ); document.querySelectorAll(".list-item").forEach((el) => { const id = el.id.replace("list-item-", ""); el.classList.toggle("active", id === selectedRegionId); const r = regions.find((reg) => reg.id === id); if (r) { el.querySelector(".list-item-name").textContent = r.name; el.querySelector(".list-item-dims").textContent = `${r.w}x${r.h}`; } }); } } document.getElementById("clearAllBtn").onclick = () => { if (confirm("Alle Frames l\xF6schen?")) { regions = []; expandedGroups.clear(); deselectAll(); updateRegionsList(); draw(); } }; if (destCanvas) { let destDidPan = false; let isDestDrawingSelection = false; let destStartDraw = null; if (!destCanvas._eventsAttached) { destCanvas.addEventListener("mousemove", (e) => { const r = destCanvas.getBoundingClientRect(); const cX = (e.clientX - r.left - destPanX) / destScale; const cY = (e.clientY - r.top - destPanY) / destScale; document.getElementById("destInfoMouse").textContent = `${Math.floor(cX)}, ${Math.floor(cY)}`; if (isPanningDest) { destPanX = e.clientX - startPanDest.x; destPanY = e.clientY - startPanDest.y; destDidPan = true; if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); return; } if (builderIsDraggingFloating && builderFloatingPos) { let nx = Math.round(cX - builderDragOffset.x); let ny = Math.round(cY - builderDragOffset.y); if (snapToGridCheckbox.checked) { nx = snap(nx, getGridWidth(), parseInt(gridOffsetXInput.value) || 0); ny = snap(ny, getGridHeight(), parseInt(gridOffsetYInput.value) || 0); } builderFloatingPos.x = nx; builderFloatingPos.y = ny; if (builderDestSelection) { builderDestSelection.x = builderFloatingPos.x; builderDestSelection.y = builderFloatingPos.y; } if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); return; } if (isDestDrawingSelection && builderDestSelection) { if (snapToGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, gSpaceX = parseInt(gridSpaceXInput.value) || 0, gSpaceY = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + gSpaceX, stepY = gh + gSpaceY; const currCellX = Math.floor((cX - ox) / stepX); const currCellY = Math.floor((cY - oy) / stepY); const minCellX = Math.min(startDestDraw.cellX, currCellX); const maxCellX = Math.max(startDestDraw.cellX, currCellX); const minCellY = Math.min(startDestDraw.cellY, currCellY); const maxCellY = Math.max(startDestDraw.cellY, currCellY); builderDestSelection.x = ox + minCellX * stepX; builderDestSelection.y = oy + minCellY * stepY; builderDestSelection.w = (maxCellX - minCellX) * stepX + gw; builderDestSelection.h = (maxCellY - minCellY) * stepY + gh; } else { const cx = Math.round(cX); const cy = Math.round(cY); if (e.ctrlKey) { if (window._lastDestDrawCx !== void 0) { startDestDraw.x += cx - window._lastDestDrawCx; startDestDraw.y += cy - window._lastDestDrawCy; } } window._lastDestDrawCx = cx; window._lastDestDrawCy = cy; builderDestSelection.x = Math.min(startDestDraw.x, cx); builderDestSelection.y = Math.min(startDestDraw.y, cy); builderDestSelection.w = Math.abs(cx - startDestDraw.x); builderDestSelection.h = Math.abs(cy - startDestDraw.y); } if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); return; } if (builderClipboard) { let nx = Math.round(cX); let ny = Math.round(cY); if (snapToGridCheckbox.checked) { nx = snap(nx, getGridWidth(), parseInt(gridOffsetXInput.value) || 0); ny = snap(ny, getGridHeight(), parseInt(gridOffsetYInput.value) || 0); } destHoverRect = { x: nx, y: ny }; drawDest(); return; } if (builderDestSelection) { let selX = builderDestSelection.w < 0 ? builderDestSelection.x + builderDestSelection.w : builderDestSelection.x; let selY = builderDestSelection.h < 0 ? builderDestSelection.y + builderDestSelection.h : builderDestSelection.y; let selW = Math.abs(builderDestSelection.w); let selH = Math.abs(builderDestSelection.h); if (cX >= selX && cX <= selX + selW && cY >= selY && cY <= selY + selH) { destCanvas.style.cursor = "grab"; } else { destCanvas.style.cursor = "crosshair"; } } else if (!isPanningDest && !isDestDrawingSelection) { destCanvas.style.cursor = "crosshair"; } }); destCanvas.addEventListener("mousedown", (e) => { if (e.button === 2 || e.button === 0 && e.altKey) { isPanningDest = true; destDidPan = false; startPanDest = { x: e.clientX - destPanX, y: e.clientY - destPanY }; destCanvas.style.cursor = "grabbing"; return; } const r = destCanvas.getBoundingClientRect(); const cX = (e.clientX - r.left - destPanX) / destScale; const cY = (e.clientY - r.top - destPanY) / destScale; if (e.button === 0) { if (builderClipboard && destHoverRect) { destCtxBuffer.drawImage( builderClipboard, destHoverRect.x, destHoverRect.y ); destHoverRect = null; drawDest(); return; } if (builderDestSelection) { let selX = builderDestSelection.w < 0 ? builderDestSelection.x + builderDestSelection.w : builderDestSelection.x; let selY = builderDestSelection.h < 0 ? builderDestSelection.y + builderDestSelection.h : builderDestSelection.y; let selW = Math.abs(builderDestSelection.w); let selH = Math.abs(builderDestSelection.h); if (selW > 0 && selH > 0 && cX >= selX && cX <= selX + selW && cY >= selY && cY <= selY + selH) { if (!builderFloatingCanvas) { builderFloatingCanvas = document.createElement("canvas"); builderFloatingCanvas.width = selW; builderFloatingCanvas.height = selH; const fCtx = builderFloatingCanvas.getContext("2d"); fCtx.drawImage( destBuffer, selX, selY, selW, selH, 0, 0, selW, selH ); destCtxBuffer.clearRect(selX, selY, selW, selH); builderFloatingPos = { x: selX, y: selY }; } builderDragOffset = { x: cX - builderFloatingPos.x, y: cY - builderFloatingPos.y }; builderIsDraggingFloating = true; destCanvas.style.cursor = "grabbing"; return; } else { if (builderFloatingCanvas && builderFloatingPos) { destCtxBuffer.drawImage( builderFloatingCanvas, builderFloatingPos.x, builderFloatingPos.y ); builderFloatingCanvas = null; builderFloatingPos = null; } builderDestSelection = null; if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); } } isDestDrawingSelection = true; let sx = Math.round(cX); let sy = Math.round(cY); if (snapToGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, gSpaceX = parseInt(gridSpaceXInput.value) || 0, gSpaceY = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + gSpaceX, stepY = gh + gSpaceY; const cellX = Math.floor((cX - ox) / stepX); const cellY = Math.floor((cY - oy) / stepY); startDestDraw = { x: cX, y: cY, cellX, cellY }; let cxSnap = ox + cellX * stepX; let cySnap = oy + cellY * stepY; builderDestSelection = { x: cxSnap, y: cySnap, w: gw, h: gh }; } else { startDestDraw = { x: sx, y: sy }; window._lastDestDrawCx = sx; window._lastDestDrawCy = sy; builderDestSelection = { x: sx, y: sy, w: 0, h: 0 }; } if (typeof updateDeleteBtn === "function") updateDeleteBtn(); } }); destCanvas.addEventListener("mouseup", () => { isPanningDest = false; isDestDrawingSelection = false; if (builderIsDraggingFloating) { builderIsDraggingFloating = false; destCanvas.style.cursor = "grab"; } if (builderDestSelection && (Math.abs(builderDestSelection.w) <= 0 || Math.abs(builderDestSelection.h) <= 0)) { builderDestSelection = null; } if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); }); destCanvas.addEventListener("mouseleave", () => { destHoverRect = null; drawDest(); }); destCanvas.addEventListener("wheel", (e) => { e.preventDefault(); const mX = e.clientX - destCanvas.getBoundingClientRect().left, mY = e.clientY - destCanvas.getBoundingClientRect().top; const wX = (mX - destPanX) / destScale, wY = (mY - destPanY) / destScale; destScale = Math.max( 0.2, Math.min(destScale * Math.exp(-e.deltaY * 1e-3), 20) ); destPanX = mX - wX * destScale; destPanY = mY - wY * destScale; if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); }); destCanvas.addEventListener("contextmenu", (e) => { e.preventDefault(); if (!destDidPan) { builderClipboard = null; if (builderFloatingCanvas && builderFloatingPos) { destCtxBuffer.drawImage( builderFloatingCanvas, builderFloatingPos.x, builderFloatingPos.y ); builderFloatingCanvas = null; builderFloatingPos = null; } builderDestSelection = null; if (typeof updateDeleteBtn === "function") updateDeleteBtn(); drawDest(); } destDidPan = false; }); destCanvas._eventsAttached = true; } } if (destWidthInput) destWidthInput.addEventListener("input", drawDest); if (destHeightInput) destHeightInput.addEventListener("input", drawDest); document.getElementById("clearDestBtn")?.addEventListener("click", () => { if (confirm("Ziel Spritesheet wirklich leeren?")) { destSprites = []; drawDest(); } }); document.getElementById("exportDestBtn")?.addEventListener("click", () => { const dw = parseInt(destWidthInput.value) || 512; const dh = parseInt(destHeightInput.value) || 512; const offCanvas = document.createElement("canvas"); offCanvas.width = dw; offCanvas.height = dh; const offCtx = offCanvas.getContext("2d"); offCtx.imageSmoothingEnabled = false; offCtx.drawImage(destBuffer, 0, 0, dw, dh, 0, 0, dw, dh); const link = document.createElement("a"); const baseName = document.getElementById("exportNameInput").value || fileName || "spritesheet"; link.download = baseName + "_atlas.png"; link.href = offCanvas.toDataURL("image/png"); link.click(); }); function updateDeleteBtn() { const btn = document.getElementById("destDeleteBtn"); const copyBtn = document.getElementById("destCopyBtn"); const selContainer = document.getElementById("destInfoSelContainer"); const selText = document.getElementById("destInfoSelection"); if (!btn) return; if (builderDestSelection && (Math.abs(builderDestSelection.w) > 0 || Math.abs(builderDestSelection.h) > 0)) { btn.style.display = "flex"; if (copyBtn) copyBtn.style.display = "flex"; if (selContainer) { selContainer.style.display = "block"; selText.textContent = Math.abs(builderDestSelection.w) + " x " + Math.abs(builderDestSelection.h); } } else { btn.style.display = "none"; if (copyBtn) copyBtn.style.display = "none"; if (selContainer) selContainer.style.display = "none"; } } document.getElementById("destDeleteBtn")?.addEventListener("click", () => { if (builderDestSelection && !builderFloatingCanvas) { destCtxBuffer.clearRect( builderDestSelection.x, builderDestSelection.y, builderDestSelection.w, builderDestSelection.h ); } builderFloatingCanvas = null; builderFloatingPos = null; builderDestSelection = null; updateDeleteBtn(); drawDest(); }); document.getElementById("destCopyBtn")?.addEventListener("click", () => { if (builderDestSelection && !builderFloatingCanvas) { let selX = builderDestSelection.w < 0 ? builderDestSelection.x + builderDestSelection.w : builderDestSelection.x; let selY = builderDestSelection.h < 0 ? builderDestSelection.y + builderDestSelection.h : builderDestSelection.y; let selW = Math.abs(builderDestSelection.w); let selH = Math.abs(builderDestSelection.h); if (selW > 0 && selH > 0) { const cvs = document.createElement("canvas"); cvs.width = selW; cvs.height = selH; const ctx2 = cvs.getContext("2d"); ctx2.drawImage(destBuffer, selX, selY, selW, selH, 0, 0, selW, selH); builderClipboard = cvs; builderDestSelection = null; updateDeleteBtn(); drawDest(); } } else if (builderFloatingCanvas && builderFloatingPos) { const cvs = document.createElement("canvas"); cvs.width = builderFloatingCanvas.width; cvs.height = builderFloatingCanvas.height; const ctx2 = cvs.getContext("2d"); ctx2.drawImage(builderFloatingCanvas, 0, 0); builderClipboard = cvs; destCtxBuffer.drawImage( builderFloatingCanvas, builderFloatingPos.x, builderFloatingPos.y ); builderFloatingCanvas = null; builderFloatingPos = null; builderDestSelection = null; updateDeleteBtn(); drawDest(); } }); document.querySelectorAll(".collapsible-header").forEach((header) => { header.addEventListener("click", (e) => { if (e.target.tagName.toLowerCase() === "button" || e.target.closest("button")) { return; } const targetId = header.getAttribute("data-target"); const content = document.getElementById(targetId); if (content) { header.classList.toggle("collapsed"); content.classList.toggle("collapsed"); } }); }); draw(); var builderResizer = document.getElementById("builderResizer"); if (builderResizer) { let isResizingLayout = false; builderResizer.addEventListener("mousedown", (e) => { isResizingLayout = true; document.body.style.cursor = "col-resize"; e.preventDefault(); }); window.addEventListener("mousemove", (e) => { if (!isResizingLayout) return; const workspaceArea = document.querySelector(".workspace-area"); if (!workspaceArea) return; const workspaceRect = workspaceArea.getBoundingClientRect(); const relativeX = e.clientX - workspaceRect.left; let percentage = Math.max(0, Math.min(100, relativeX / workspaceRect.width * 100)); const destContainer2 = document.getElementById("destContainer"); const srcContainer2 = document.getElementById("srcContainer"); if (destContainer2 && srcContainer2) { destContainer2.style.flex = `0 0 ${percentage}%`; srcContainer2.style.flex = `1 1 0%`; if (typeof resizeCanvas === "function") resizeCanvas(); } }); window.addEventListener("mouseup", (e) => { if (isResizingLayout) { isResizingLayout = false; document.body.style.cursor = ""; const workspaceArea = document.querySelector(".workspace-area"); if (workspaceArea) { const workspaceRect = workspaceArea.getBoundingClientRect(); const relativeX = e.clientX - workspaceRect.left; const destContainer2 = document.getElementById("destContainer"); const srcContainer2 = document.getElementById("srcContainer"); const destBtn = document.getElementById("destCollapsedBtn"); const srcBtn = document.getElementById("srcCollapsedBtn"); const resizer = document.getElementById("builderResizer"); if (destContainer2 && srcContainer2) { const snapThreshold = 100; if (relativeX < snapThreshold) { destContainer2.classList.add("hidden"); destBtn.classList.remove("hidden"); resizer.classList.add("hidden"); srcContainer2.style.flex = "1 1 0%"; } else if (relativeX > workspaceRect.width - snapThreshold) { srcContainer2.classList.add("hidden"); srcBtn.classList.remove("hidden"); resizer.classList.add("hidden"); destContainer2.style.flex = "1 1 0%"; } } } if (typeof resizeCanvas === "function") resizeCanvas(); } }); document.getElementById("destCollapsedBtn")?.addEventListener("click", () => { const destContainer2 = document.getElementById("destContainer"); const srcContainer2 = document.getElementById("srcContainer"); const resizer = document.getElementById("builderResizer"); const destBtn = document.getElementById("destCollapsedBtn"); destContainer2.classList.remove("hidden"); destBtn.classList.add("hidden"); resizer.classList.remove("hidden"); destContainer2.style.flex = `0 0 50%`; srcContainer2.style.flex = `1 1 0%`; if (typeof resizeCanvas === "function") resizeCanvas(); }); document.getElementById("srcCollapsedBtn")?.addEventListener("click", () => { const destContainer2 = document.getElementById("destContainer"); const srcContainer2 = document.getElementById("srcContainer"); const resizer = document.getElementById("builderResizer"); const srcBtn = document.getElementById("srcCollapsedBtn"); srcContainer2.classList.remove("hidden"); srcBtn.classList.add("hidden"); resizer.classList.remove("hidden"); destContainer2.style.flex = `0 0 50%`; srcContainer2.style.flex = `1 1 0%`; if (typeof resizeCanvas === "function") resizeCanvas(); }); } document.getElementById("builderFileInput").addEventListener("change", (e) => { const f = e.target.files[0]; if (!f) return; const originalName = f.name; const r = new FileReader(); r.onload = (ev) => { const i = new Image(); i.onload = () => { img = i; document.getElementById("builderImageInfo").textContent = `${originalName} | Bild: ${img.width}x${img.height} px`; document.getElementById("builderImageInfo").classList.remove("hidden"); scale = Math.max(1, Math.min(5, Math.min((activeContainer.clientWidth - 100) / img.width, (activeContainer.clientHeight - 100) / img.height))); panX = (activeContainer.clientWidth - img.width * scale) / 2; panY = (activeContainer.clientHeight - img.height * scale) / 2; resizeCanvas(); }; i.src = ev.target.result; }; r.readAsDataURL(f); e.target.value = ""; }); document.getElementById("fileInput").addEventListener("change", (e) => { const f = e.target.files[0]; if (!f) return; fileName = f.name.split(".")[0]; const exportInput = document.getElementById("exportNameInput"); if (exportInput) exportInput.value = fileName; const originalName = f.name; const r = new FileReader(); r.onload = (ev) => { const i = new Image(); i.onload = () => { img = i; document.getElementById("imageInfo").textContent = `${originalName} | Bild: ${img.width}x${img.height} px`; document.getElementById("imageInfo").classList.remove("hidden"); document.getElementById("imageInfo").title = `${originalName} | Bild: ${img.width}x${img.height} px`; scale = Math.max( 1, Math.min( 5, Math.min( (activeContainer.clientWidth - 100) / img.width, (activeContainer.clientHeight - 100) / img.height ) ) ); panX = (activeContainer.clientWidth - img.width * scale) / 2; panY = (activeContainer.clientHeight - img.height * scale) / 2; resizeCanvas(); }; i.src = ev.target.result; }; r.readAsDataURL(f); e.target.value = ""; }); document.getElementById("jsonInput").addEventListener("change", (e) => { const f = e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = (ev) => { try { const d = JSON.parse(ev.target.result); if (d.textures?.[0]?.frames) { regions = [ ...regions, ...d.textures[0].frames.map((fr) => ({ id: Date.now() + Math.random().toString(36).substr(2), group: fr.filename.replace(/[0-9]+$/, ""), name: fr.filename, x: fr.frame.x, y: fr.frame.y, w: fr.frame.w, h: fr.frame.h })) ]; updateRegionsList(); draw(); } } catch (err) { } e.target.value = ""; }; r.readAsText(f); }); [srcCanvas, mainCanvas].forEach((c) => c.addEventListener("contextmenu", (e) => e.preventDefault())); modalDragHandle.addEventListener("mousedown", (e) => { isDraggingModal = true; modalOffset.x = e.clientX - spriteModal.offsetLeft; modalOffset.y = e.clientY - spriteModal.offsetTop; e.stopPropagation(); }); [srcCanvas, mainCanvas].forEach((c) => c.addEventListener("mousedown", (e) => { if (e.target !== activeCanvas || !img || spriteModal.classList.contains("active")) return; if (e.button === 2 || e.button === 0 && e.altKey) { isPanning = true; startPan = { x: e.clientX - panX, y: e.clientY - panY }; activeCanvas.style.cursor = "grabbing"; } else if (e.button === 0) { isDrawing = true; const cTarget = e.target; const r = activeCanvas.getBoundingClientRect(); let wx = (e.clientX - r.left - panX) / scale, wy = (e.clientY - r.top - panY) / scale; if (snapToGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, sx = parseInt(gridSpaceXInput.value) || 0, sy = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + sx, stepY = gh + sy; const cellX = Math.floor((wx - ox) / stepX); const cellY = Math.floor((wy - oy) / stepY); startDraw = { x: wx, y: wy, cellX, cellY }; wx = ox + cellX * stepX; wy = oy + cellY * stepY; currentDrawRect = { x: wx, y: wy, w: gw, h: gh }; } else { wx = Math.round(wx); wy = Math.round(wy); startDraw = { x: Math.round(wx), y: Math.round(wy) }; window._lastDrawCx = startDraw.x; window._lastDrawCy = startDraw.y; currentDrawRect = { x: startDraw.x, y: startDraw.y, w: 0, h: 0 }; } } })); window.addEventListener("mousemove", (e) => { if (isDraggingModal) { spriteModal.style.left = `${e.clientX - modalOffset.x}px`; spriteModal.style.top = `${e.clientY - modalOffset.y}px`; return; } const cTarget = e.target; const r = activeCanvas.getBoundingClientRect(); if (img) { const mouseEl = document.getElementById(isBuilderMode ? "srcInfoMouse" : "mainInfoMouse"); if (mouseEl) mouseEl.textContent = `${Math.floor((e.clientX - r.left - panX) / scale)}, ${Math.floor((e.clientY - r.top - panY) / scale)}`; } if (isPanning) { panX = e.clientX - startPan.x; panY = e.clientY - startPan.y; draw(); } else if (isDrawing && currentDrawRect) { let cx = (e.clientX - r.left - panX) / scale, cy = (e.clientY - r.top - panY) / scale; if (snapToGridCheckbox.checked) { const gw = getGridWidth(), gh = getGridHeight(), ox = parseInt(gridOffsetXInput.value) || 0, oy = parseInt(gridOffsetYInput.value) || 0, sx = parseInt(gridSpaceXInput.value) || 0, sy = parseInt(gridSpaceYInput.value) || 0; const stepX = gw + sx, stepY = gh + sy; const currCellX = Math.floor((cx - ox) / stepX); const currCellY = Math.floor((cy - oy) / stepY); const minCellX = Math.min(startDraw.cellX, currCellX); const maxCellX = Math.max(startDraw.cellX, currCellX); const minCellY = Math.min(startDraw.cellY, currCellY); const maxCellY = Math.max(startDraw.cellY, currCellY); currentDrawRect.x = ox + minCellX * stepX; currentDrawRect.y = oy + minCellY * stepY; currentDrawRect.w = (maxCellX - minCellX) * stepX + gw; currentDrawRect.h = (maxCellY - minCellY) * stepY + gh; } else { cx = Math.round(cx); cy = Math.round(cy); if (e.ctrlKey && isBuilderMode && activeCanvas === srcCanvas) { if (window._lastDrawCx !== void 0) { startDraw.x += cx - window._lastDrawCx; startDraw.y += cy - window._lastDrawCy; } } window._lastDrawCx = cx; window._lastDrawCy = cy; currentDrawRect.x = Math.min(startDraw.x, cx); currentDrawRect.y = Math.min(startDraw.y, cy); currentDrawRect.w = Math.abs(cx - startDraw.x); currentDrawRect.h = Math.abs(cy - startDraw.y); } draw(); } }); window.addEventListener("mouseup", (e) => { if (isDraggingModal) { isDraggingModal = false; return; } if (isPanning) { isPanning = false; activeCanvas.style.cursor = "crosshair"; } else if (isDrawing) { isDrawing = false; if (currentDrawRect && currentDrawRect.w > 0 && currentDrawRect.h > 0) { if (isBuilderMode && activeCanvas === srcCanvas) { if (currentDrawRect && currentDrawRect.w > 0 && currentDrawRect.h > 0) { const cvs = document.createElement("canvas"); cvs.width = currentDrawRect.w; cvs.height = currentDrawRect.h; const ctx2 = cvs.getContext("2d"); ctx2.drawImage(img, currentDrawRect.x, currentDrawRect.y, currentDrawRect.w, currentDrawRect.h, 0, 0, currentDrawRect.w, currentDrawRect.h); builderClipboard = cvs; const notif = document.createElement("div"); notif.textContent = "Ausschnitt kopiert"; notif.style.position = "absolute"; notif.style.top = "50%"; notif.style.left = "50%"; notif.style.transform = "translate(-50%, -50%)"; notif.style.background = "rgba(16, 185, 129, 0.9)"; notif.style.color = "#fff"; notif.style.padding = "8px 16px"; notif.style.borderRadius = "6px"; notif.style.fontWeight = "bold"; notif.style.pointerEvents = "none"; notif.style.zIndex = "1000"; notif.style.transition = "opacity 0.5s ease-out"; document.getElementById("srcContainer").appendChild(notif); setTimeout(() => notif.style.opacity = "0", 1e3); setTimeout(() => notif.remove(), 1500); } draw(); } else { if (typeof modalGroupSelect !== "undefined" && modalGroupSelect) { modalGroupSelect.innerHTML = ''; const uniqueGroups = [...new Set(regions.map((r) => r.group))].sort(); uniqueGroups.forEach((g) => { const opt = document.createElement("option"); opt.value = g; opt.textContent = `\u{1F4C1} ${g}`; modalGroupSelect.appendChild(opt); }); if (typeof selectedGroupId !== "undefined" && selectedGroupId && uniqueGroups.includes(selectedGroupId)) { modalGroupSelect.value = selectedGroupId; } else { modalGroupSelect.value = "NEW"; } } spriteModal.classList.add("active"); const mw = spriteModal.offsetWidth || 260, mh = spriteModal.offsetHeight || 220; spriteModal.style.left = `${window.innerWidth / 2 - mw / 2}px`; spriteModal.style.top = `${window.innerHeight / 2 - mh / 2}px`; if (snapToGridCheckbox.checked) { const sx = parseInt(gridSpaceXInput.value) || 0, sy = parseInt(gridSpaceYInput.value) || 0; const stepX = getGridWidth() + sx; const stepY = getGridHeight() + sy; modalCols.value = Math.max(1, Math.round((currentDrawRect.w + sx) / stepX)); modalRows.value = Math.max(1, Math.round((currentDrawRect.h + sy) / stepY)); } else { modalCols.value = 1; modalRows.value = 1; } document.getElementById("modalPreviewText").textContent = `Erstellt ${(parseInt(modalCols.value) || 1) * (parseInt(modalRows.value) || 1)} Frame(s).`; setTimeout(() => modalPrefix.focus(), 50); } } else { if (isBuilderMode && activeCanvas === srcCanvas) { } currentDrawRect = null; draw(); const r = activeCanvas.getBoundingClientRect(), cX = (e.clientX - r.left - panX) / scale, cY = (e.clientY - r.top - panY) / scale; let clicked = null; var _ebxloop_10 = Date.now(); for (let i = regions.length - 1; i >= 0; i--) { if (Date.now() - _ebxloop_10 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } if (cX >= regions[i].x && cX <= regions[i].x + regions[i].w && cY >= regions[i].y && cY <= regions[i].y + regions[i].h) { clicked = regions[i]; break; } } if (clicked) selectRegion(clicked.id); else deselectAll(); } } }); [srcCanvas, mainCanvas].forEach((c) => { if (!c._eventsAttached) { c.addEventListener("wheel", (e) => { if (e.target !== activeCanvas || !img) return; e.preventDefault(); const mX = e.clientX - activeCanvas.getBoundingClientRect().left, mY = e.clientY - activeCanvas.getBoundingClientRect().top; const wX = (mX - panX) / scale, wY = (mY - panY) / scale; scale = Math.max(0.2, Math.min(scale * Math.exp(-e.deltaY * 1e-3), 20)); panX = mX - wX * scale; panY = mY - wY * scale; draw(); }); c.addEventListener("mousemove", (e) => { if (isDraggingModal || isPanning) return; if (!img || !selectedRegionId || activeCanvas !== srcCanvas) { c.style.cursor = "crosshair"; return; } const rBox = activeCanvas.getBoundingClientRect(); const cX = (e.clientX - rBox.left - panX) / scale; const cY = (e.clientY - rBox.top - panY) / scale; const reg = regions.find((r) => r.id === selectedRegionId); if (reg) { const handle = getHandleAt(cX, cY, reg); if (handle) { c.style.cursor = getCursorForHandle(handle); return; } } c.style.cursor = "crosshair"; }); c._eventsAttached = true; } }); document.getElementById("modalCloseIcon").onclick = () => { spriteModal.classList.remove("active"); currentDrawRect = null; draw(); }; document.getElementById("modalCancel").onclick = () => { spriteModal.classList.remove("active"); currentDrawRect = null; draw(); }; [modalCols, modalRows].forEach( (el) => el.addEventListener( "input", () => document.getElementById("modalPreviewText").textContent = `Erstellt ${(parseInt(modalCols.value) || 1) * (parseInt(modalRows.value) || 1)} Frame(s).` ) ); document.getElementById("modalSave").addEventListener("click", () => { if (!currentDrawRect) return; const p = modalPrefix.value.trim() || "sprite_"; let targetGroup = p; if (typeof modalGroupSelect !== "undefined" && modalGroupSelect && modalGroupSelect.value !== "NEW") { targetGroup = modalGroupSelect.value; } const c = parseInt(modalCols.value) || 1, r = parseInt(modalRows.value) || 1; let fw, fh, stepX, stepY; if (snapToGridCheckbox.checked) { fw = getGridWidth(); fh = getGridHeight(); const sx = parseInt(gridSpaceXInput.value) || 0; const sy = parseInt(gridSpaceYInput.value) || 0; stepX = fw + sx; stepY = fh + sy; } else { fw = currentDrawRect.w / c; fh = currentDrawRect.h / r; stepX = fw; stepY = fh; } let lastId = null; let count = 0; regions.forEach((reg) => { if (reg.group === targetGroup && reg.name.startsWith(p)) { const numStr = reg.name.substring(p.length); if (numStr === "") { if (count === 0) count = 1; } else { const num = parseInt(numStr); if (!isNaN(num) && num >= count) count = num + 1; } } }); var _ebxloop_12 = Date.now(); for (let row = 0; row < r; row++) { if (Date.now() - _ebxloop_12 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } var _ebxloop_11 = Date.now(); for (let col = 0; col < c; col++) { if (Date.now() - _ebxloop_11 > 500) { throw new Error("Endlosschleife erkannt (Abbruch nach 500 ms)"); } lastId = Date.now().toString() + Math.random().toString(36).substr(2, 9); regions.push({ id: lastId, group: targetGroup, name: c === 1 && r === 1 && count === 0 ? p : `${p}${count++}`, x: Math.round(currentDrawRect.x + col * stepX), y: Math.round(currentDrawRect.y + row * stepY), w: Math.round(fw), h: Math.round(fh) }); } } spriteModal.classList.remove("active"); currentDrawRect = null; if (c > 1 || r > 1) selectGroup(targetGroup); else selectRegion(lastId); expandedGroups.delete(targetGroup); updateRegionsList(true); }); var exportImgBtn = document.getElementById("exportImgBtn"); if (exportImgBtn) { exportImgBtn.onclick = () => { if (!img) return alert("Kein Bild vorhanden."); const baseName = document.getElementById("exportNameInput").value || fileName || "spritesheet"; const link = document.createElement("a"); link.download = baseName + ".png"; link.href = img.src; const c = document.createElement("canvas"); c.width = img.width; c.height = img.height; c.getContext("2d").drawImage(img, 0, 0); link.href = c.toDataURL("image/png"); link.click(); }; } document.getElementById("exportBtn").onclick = () => { if (!img) return alert("Bild laden."); if (regions.length === 0) return alert("Bereiche markieren."); document.getElementById("jsonOutput").value = JSON.stringify( { textures: [ { image: (document.getElementById("exportNameInput").value || fileName || "spritesheet") + ".png", format: "RGBA8888", size: { w: img.width, h: img.height }, scale: 1, frames: regions.map((r) => ({ filename: r.name, rotated: false, trimmed: false, sourceSize: { w: r.w, h: r.h }, spriteSourceSize: { x: 0, y: 0, w: r.w, h: r.h }, frame: { x: r.x, y: r.y, w: r.w, h: r.h } })) } ], meta: { app: "Sprite Atlas", version: "3.2" } }, null, 2 ); document.getElementById("exportOverlay").classList.add("active"); }; document.getElementById("btnCloseExport").onclick = () => document.getElementById("exportOverlay").classList.remove("active"); document.getElementById("btnCopyJson").onclick = (e) => { document.getElementById("jsonOutput").select(); document.execCommand("copy"); const b = e.target, o = b.textContent; b.textContent = "Kopiert!"; setTimeout(() => b.textContent = o, 2e3); }; document.getElementById("btnDownloadJson").onclick = () => { const a = document.createElement("a"); a.href = "data:text/json;charset=utf-8," + encodeURIComponent(document.getElementById("jsonOutput").value); const baseName = document.getElementById("exportNameInput").value || fileName || "spritesheet"; a.download = baseName + "_atlas.json"; document.body.appendChild(a); a.click(); a.remove(); }; resizeCanvas();

Sprite Atlas

Schreibe einen Kommentar Antwort abbrechen