\u0414\u043e\u0441\u043a\u0430 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: Arial, sans-serif;\n background: #f0f0f0;\n }\n #canvas {\n border: 2px solid #333;\n background: white;\n cursor: crosshair;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n .controls {\n margin-bottom: 15px;\n display: flex;\n gap: 15px;\n align-items: center;\n flex-wrap: wrap;\n }\n button {\n padding: 8px 16px;\n font-size: 14px;\n cursor: pointer;\n border: none;\n background: #4CAF50;\n color: white;\n border-radius: 4px;\n }\n button:hover {\n background: #45a049;\n }\n button:disabled {\n background: #ccc;\n cursor: not-allowed;\n }\n .layer-btn {\n background: #2196F3;\n }\n .layer-btn:hover:not(:disabled) {\n background: #0b7dda;\n }\n .menu-btn {\n background: #FF9800;\n }\n .menu-btn:hover {\n background: #e68900;\n }\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n input[type=\"color\"] {\n cursor: pointer;\n width: 40px;\n height: 30px;\n border: none;\n }\n input[type=\"range\"], input[type=\"number\"] {\n cursor: pointer;\n }\n input[type=\"number\"] {\n width: 60px;\n padding: 4px;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n .layer-controls {\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 10px;\n background: #e0e0e0;\n border-radius: 4px;\n }\n .layer-info {\n font-weight: bold;\n min-width: 100px;\n }\n .shortcut {\n font-size: 11px;\n color: #666;\n margin-left: 5px;\n }\n .arrow-btn {\n font-size: 18px;\n padding: 8px 12px;\n min-width: 40px;\n }\n \/* \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a *\/\n .info-panel {\n margin-top: 15px;\n padding: 15px;\n background: #fff;\n border: 2px solid #2196F3;\n border-radius: 8px;\n width: 800px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .info-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n .info-title {\n font-weight: bold;\n font-size: 16px;\n color: #2196F3;\n }\n .clear-sequence-btn {\n background: #f44336;\n padding: 6px 14px;\n font-size: 13px;\n }\n .clear-sequence-btn:hover {\n background: #d32f2f;\n }\n .sequence-container {\n border: 1px solid #ddd;\n border-radius: 4px;\n background: #f9f9f9;\n max-height: 200px;\n overflow-y: auto;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n }\n .sequence-header {\n display: grid;\n grid-template-columns: 100px 80px 100px 120px 120px 60px 80px;\n gap: 10px;\n padding: 8px 10px;\n background: #2196F3;\n color: white;\n font-weight: bold;\n position: sticky;\n top: 0;\n border-bottom: 2px solid #1976D2;\n }\n .sequence-row {\n display: grid;\n grid-template-columns: 100px 80px 100px 120px 120px 60px 80px;\n gap: 10px;\n padding: 8px 10px;\n border-bottom: 1px solid #eee;\n align-items: center;\n }\n .sequence-row:hover {\n background: #f0f0f0;\n }\n .sequence-row:last-child {\n border-bottom: none;\n }\n .color-indicator {\n width: 30px;\n height: 20px;\n border-radius: 3px;\n border: 1px solid #ccc;\n display: inline-block;\n }\n .sequence-empty {\n padding: 20px;\n text-align: center;\n color: #999;\n font-style: italic;\n }\n .sequence-highlight {\n background: #e3f2fd;\n font-weight: bold;\n }\n \/* \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n animation: fadeIn 0.3s;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .modal-content {\n position: absolute;\n background-color: #fff;\n padding: 30px;\n border-radius: 8px;\n width: 500px;\n max-width: 90%;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n animation: slideDown 0.3s;\n cursor: move;\n left: 50%;\n top: 10%;\n transform: translateX(-50%);\n }\n @keyframes slideDown {\n from {\n transform: translateX(-50%) translateY(-50px);\n opacity: 0;\n }\n to {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n }\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 2px solid #e0e0e0;\n cursor: move;\n }\n .modal-title {\n font-size: 20px;\n font-weight: bold;\n color: #333;\n user-select: none;\n }\n .close-btn {\n background: #f44336;\n color: white;\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n }\n .close-btn:hover {\n background: #d32f2f;\n }\n .settings-options {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n .checkbox-label {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n padding: 10px;\n border-radius: 4px;\n transition: background 0.2s;\n }\n .checkbox-label:hover {\n background: #f5f5f5;\n }\n .checkbox-label input[type=\"checkbox\"] {\n cursor: pointer;\n width: 20px;\n height: 20px;\n }\n .checkbox-label span {\n font-size: 15px;\n }\n .setting-group {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px;\n border-radius: 4px;\n }\n .setting-group:hover {\n background: #f5f5f5;\n }\n .menu-dropdown {\n position: relative;\n display: inline-block;\n }\n .menu-content {\n display: none;\n position: absolute;\n background-color: white;\n min-width: 200px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n z-index: 100;\n border-radius: 4px;\n overflow: hidden;\n }\n .menu-content.show {\n display: block;\n }\n .menu-item {\n padding: 12px 16px;\n cursor: pointer;\n border: none;\n background: white;\n color: #333;\n text-align: left;\n width: 100%;\n font-size: 14px;\n }\n .menu-item:hover {\n background: #f0f0f0;\n }\n \/* \u0421\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n .collapsible-section {\n margin-bottom: 10px;\n }\n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 15px;\n background: #2196F3;\n color: white;\n cursor: pointer;\n border-radius: 4px;\n user-select: none;\n font-weight: bold;\n font-size: 16px;\n }\n .section-header:hover {\n background: #1976D2;\n }\n .section-header::after {\n content: '\u25bc';\n font-size: 12px;\n transition: transform 0.3s;\n }\n .section-header.collapsed::after {\n transform: rotate(-90deg);\n }\n .section-content {\n max-height: 1000px;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n }\n .section-content.collapsed {\n max-height: 0;\n }\n .section-body {\n padding: 15px 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"controls\">\n <div class=\"menu-dropdown\">\n <button id=\"menuBtn\" class=\"menu-btn\">\u2630 \u041c\u0435\u043d\u044e<\/button>\n <div id=\"menuContent\" class=\"menu-content\">\n <button class=\"menu-item\" id=\"settingsMenuItem\">\u2699\ufe0f \u0424\u043e\u0440\u043c\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/button>\n <\/div>\n <\/div>\n <button id=\"clearBtn\">\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0439<\/button>\n <\/div>\n <div class=\"layer-controls\">\n <button id=\"newLayerBtn\" class=\"layer-btn\">\n \u041d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 <span class=\"shortcut\">(Q)<\/span>\n <\/button>\n <button id=\"prevLayerBtn\" class=\"layer-btn arrow-btn\">\u2190<\/button>\n <button id=\"nextLayerBtn\" class=\"layer-btn arrow-btn\">\u2192<\/button>\n <div class=\"layer-info\">\n \u0421\u043b\u043e\u0439: <span id=\"currentLayer\">1<\/span> \/ <span id=\"totalLayers\">1<\/span>\n <\/div>\n <button id=\"deleteLayerBtn\" style=\"background: #f44336;\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439<\/button>\n <\/div>\n <canvas id=\"canvas\" width=\"800\" height=\"600\"><\/canvas>\n \n <div class=\"info-panel\">\n <div class=\"info-header\">\n <div class=\"info-title\">\ud83d\udcca \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0439<\/div>\n <button class=\"clear-sequence-btn\" onclick=\"clearDirectionSequence()\">\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c<\/button>\n <\/div>\n <div class=\"sequence-container\" id=\"sequenceContainer\">\n <div class=\"sequence-header\">\n <div>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/div>\n <div>\u0414\u043b\u0438\u043d\u0430<\/div>\n <div>\u0423\u0433\u043e\u043b<\/div>\n <div>\u041d\u0430\u0447\u0430\u043b\u043e (X, Y)<\/div>\n <div>\u041a\u043e\u043d\u0435\u0446 (X, Y)<\/div>\n <div>\u0426\u0432\u0435\u0442<\/div>\n <div>\u041d\u043e\u043c\u0435\u0440 \u043b\u0438\u043d\u0438\u0438<\/div>\n <\/div>\n <div id=\"sequenceContent\">\n <div class=\"sequence-empty\">\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438…<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"settingsModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">\u2699\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/div>\n <button id=\"closeModalBtn\" class=\"close-btn\">\u2715<\/button>\n <\/div>\n <div class=\"settings-options\">\n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83c\udfaf \u041e\u0431\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <div class=\"setting-group\">\n <label>\n <span>\u043a-\u0432\u043e \u0427\u0438\u0441\u0435\u043b (8 \u0438\u043b\u0438 4):<\/span>\n <select id=\"numberOfNumbers\">\n <option value=\"4\">4<\/option>\n <option value=\"8\" selected>8<\/option>\n <\/select>\n <span><\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83c\udfaf \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0421\u0435\u0442\u043a\u0438\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"showGridCheckbox\" checked>\n <span>\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0435 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/span>\n <\/label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"showDiagonalCheckbox\" checked>\n <span>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c<\/span>\n <\/label>\n <div class=\"setting-group\">\n <label>\n <span>\u0420\u0430\u0437\u043c\u0435\u0440 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0435\u0442\u043a\u0438:<\/span>\n <input type=\"number\" id=\"gridStepInput\" min=\"10\" max=\"300\" value=\"50\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83d\udccf \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0438\u0439 \u043f\u043e \u0442\u0438\u043f\u0430\u043c\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 1<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line1Color\" value=\"#0000ff\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line1Width\" min=\"1\" max=\"20\" value=\"3\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 2<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line2Color\" value=\"#ff0000\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line2Width\" min=\"1\" max=\"20\" value=\"2\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 3<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line3Color\" value=\"#00ff00\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line3Width\" min=\"1\" max=\"20\" value=\"1\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83d\uddc2\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043b\u043e\u0435\u0432\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"copyContentCheckbox\">\n <span>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/span>\n <\/label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"newLineNewLayerCheckbox\">\n <span>\u041d\u043e\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f — \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const clearBtn = document.getElementById('clearBtn');\n const newLayerBtn = document.getElementById('newLayerBtn');\n const prevLayerBtn = document.getElementById('prevLayerBtn');\n const nextLayerBtn = document.getElementById('nextLayerBtn');\n const deleteLayerBtn = document.getElementById('deleteLayerBtn');\n const currentLayerSpan = document.getElementById('currentLayer');\n const totalLayersSpan = document.getElementById('totalLayers');\n const copyContentCheckbox = document.getElementById('copyContentCheckbox');\n const newLineNewLayerCheckbox = document.getElementById('newLineNewLayerCheckbox');\n const showGridCheckbox = document.getElementById('showGridCheckbox');\n const showDiagonalCheckbox = document.getElementById('showDiagonalCheckbox');\n const gridStepInput = document.getElementById('gridStepInput');\n const menuBtn = document.getElementById('menuBtn');\n const menuContent = document.getElementById('menuContent');\n const settingsMenuItem = document.getElementById('settingsMenuItem');\n const settingsModal = document.getElementById('settingsModal');\n const closeModalBtn = document.getElementById('closeModalBtn');\n const sequenceContent = document.getElementById('sequenceContent');\n const sequenceContainer = document.getElementById('sequenceContainer');\n \n \/\/ \u041f\u043e\u043b\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0438\u0439\n const line1Color = document.getElementById('line1Color');\n const line1Width = document.getElementById('line1Width');\n const line2Color = document.getElementById('line2Color');\n const line2Width = document.getElementById('line2Width');\n const line3Color = document.getElementById('line3Color');\n const line3Width = document.getElementById('line3Width');\n \n let activeTouches = {}; \/\/ \u041e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0438\n let isDrawing = false;\n let lastX = 0;\n let lastY = 0;\n let startX = 0;\n let startY = 0;\n let currentLineSegments = [];\n let currentLineInfo = null;\n let lineSequence = []; \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u043b\u0438\u043d\u0438\u044f\u0445\n \n \/\/ \u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043b\u0438\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0442\u043e\u0447\u043a\u0430\n let lineCounter = 1; \/\/ \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u0438\u043d\u0438\u044f: 1, 2 \u0438\u043b\u0438 3\n let lastEndPoint = null; \/\/ \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 {x, y}\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u0438\u043d\u0438\u0438\n function getCurrentLineSettings() {\n if (lineCounter === 1) {\n return { color: line1Color.value, width: parseInt(line1Width.value) };\n } else if (lineCounter === 2) {\n return { color: line2Color.value, width: parseInt(line2Width.value) };\n } else {\n return { color: line3Color.value, width: parseInt(line3Width.value) };\n }\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\/\u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0446\u0438\u0439\n function toggleSection(header) {\n header.classList.toggle('collapsed');\n const content = header.nextElementSibling;\n content.classList.toggle('collapsed');\n }\n \n \/\/ \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043b\u043e\u0435\u0432\n let layers = [[]];\n let currentLayerIndex = 0;\n \n \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0435\u0442\u043a\u0438\n function drawGrid() {\n if (!showGridCheckbox.checked && !showDiagonalCheckbox.checked) return;\n \n const step = parseInt(gridStepInput.value) || 50;\n const width = canvas.width;\n const height = canvas.height;\n \n ctx.strokeStyle = '#cccccc';\n ctx.lineWidth = 0.5;\n ctx.setLineDash([5, 5]); \/\/ \u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f\n \n \/\/ \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n if (showGridCheckbox.checked) {\n \/\/ \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n for (let x = 0; x <= width; x += step) {\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, height);\n ctx.stroke();\n }\n \n \/\/ \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n for (let y = 0; y <= height; y += step) {\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(width, y);\n ctx.stroke();\n }\n }\n \n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n if (showDiagonalCheckbox.checked) {\n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u0438\u0437 \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 (\u0432\u043f\u0440\u0430\u0432\u043e-\u0432\u043d\u0438\u0437 \u0447\u0435\u0440\u0435\u0437 \u0443\u0437\u043b\u044b)\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b\n for (let startY = 0; startY <= height; startY += step) {\n ctx.beginPath();\n ctx.moveTo(0, startY);\n \/\/ \u041b\u0438\u043d\u0438\u044f \u0438\u0434\u0435\u0442 \u043f\u043e\u0434 \u0443\u0433\u043b\u043e\u043c 45\u00b0 \u0434\u043e \u043a\u0440\u0430\u044f canvas\n const maxLen = Math.min(width, height - startY);\n ctx.lineTo(maxLen, startY + maxLen);\n ctx.stroke();\n }\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b (\u043a\u0440\u043e\u043c\u0435 \u0443\u0433\u043b\u0430)\n for (let startX = step; startX <= width; startX += step) {\n ctx.beginPath();\n ctx.moveTo(startX, 0);\n const maxLen = Math.min(width - startX, height);\n ctx.lineTo(startX + maxLen, maxLen);\n ctx.stroke();\n }\n \n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u0438\u0437 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 (\u0432\u043b\u0435\u0432\u043e-\u0432\u043d\u0438\u0437 \u0447\u0435\u0440\u0435\u0437 \u0443\u0437\u043b\u044b)\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b\n for (let startY = 0; startY <= height; startY += step) {\n ctx.beginPath();\n ctx.moveTo(width, startY);\n const maxLen = Math.min(width, height - startY);\n ctx.lineTo(width - maxLen, startY + maxLen);\n ctx.stroke();\n }\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b (\u043a\u0440\u043e\u043c\u0435 \u0443\u0433\u043b\u0430)\n for (let startX = 0; startX < width; startX += step) {\n ctx.beginPath();\n ctx.moveTo(startX, 0);\n const maxLen = Math.min(startX, height);\n ctx.lineTo(startX - maxLen, maxLen);\n ctx.stroke();\n }\n }\n \n ctx.setLineDash([]);\n }\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0442\u043a\u0438\n showGridCheckbox.addEventListener('change', redrawCanvas);\n showDiagonalCheckbox.addEventListener('change', redrawCanvas);\n gridStepInput.addEventListener('input', redrawCanvas);\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u043b\u0438\u043d\u0438\u0438\n function drawEndCircle(x, y, color, width) {\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.arc(x, y, width * 1.5, 0, Math.PI * 2);\n ctx.fill();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043b\u0438\u043d\u0438\u0438 \u0431\u0435\u0437 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430\n function drawLine(x1, y1, x2, y2, color, width) {\n ctx.strokeStyle = color;\n ctx.lineWidth = width;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u0433\u043b\u0443 (\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e) \u0446\u0438\u0444\u0440\u044b.\n function getDirectionFromAngle(angle) {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0438\u0441\u0435\u043b (4 \u0438\u043b\u0438 8)\n const numberOfNumbers = document.getElementById('numberOfNumbers').value;\n \n \/\/ \u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0443\u0433\u043e\u043b: Canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 0\u00b0 \u0441\u043f\u0440\u0430\u0432\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e 0\u00b0 \u0441\u0432\u0435\u0440\u0445\u0443\n \/\/ \u041f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430 +90\u00b0 \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441 \u043d\u0430\u0448\u0435\u0439 \u0441\u0445\u0435\u043c\u043e\u0439 (0\u00b0 \u0441\u0432\u0435\u0440\u0445\u0443)\n let normalizedAngle = angle + 90;\n \n \/\/ \u041f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u0443\u0433\u043e\u043b \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d [0, 360)\n if (normalizedAngle < 0) normalizedAngle += 360;\n if (normalizedAngle >= 360) normalizedAngle -= 360;\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 (1-16): \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 = 22.5\u00b0\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442 1: \u043e\u0442 0\u00b0 \u0434\u043e 22.5\u00b0 (\u0446\u0435\u043d\u0442\u0440 = 11.25\u00b0)\n const segmentSize = 22.5;\n let segment = Math.floor(normalizedAngle \/ segmentSize) + 1;\n \n \/\/ \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 16 (\u043e\u0442 348.75\u00b0 \u0434\u043e 360\u00b0)\n if (segment > 16) segment = 1;\n \n \/\/ \u0420\u0435\u0436\u0438\u043c 8 \u0447\u0438\u0441\u0435\u043b (0-7)\n if (numberOfNumbers === '8') {\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 1 \u0438 16 \u2192 0\n if (segment === 1 || segment === 16) return 0;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 2-3 \u2192 1\n if (segment === 2 || segment === 3) return 1;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 4-5 \u2192 2\n if (segment === 4 || segment === 5) return 2;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 6-7 \u2192 3\n if (segment === 6 || segment === 7) return 3;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 8-9 \u2192 4\n if (segment === 8 || segment === 9) return 4;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 10-11 \u2192 5\n if (segment === 10 || segment === 11) return 5;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 12-13 \u2192 6\n if (segment === 12 || segment === 13) return 6;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 14-15 \u2192 7\n if (segment === 14 || segment === 15) return 7;\n }\n \/\/ \u0420\u0435\u0436\u0438\u043c 4 \u0447\u0438\u0441\u0435\u043b (1-6) - \u043f\u043e \u0441\u0445\u0435\u043c\u0435 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\n else {\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 15, 16, 1, 2 \u2192 1\n if (segment === 15 || segment === 16 || segment === 1 || segment === 2) return 0;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 3, 4, 5, 6 \u2192 2\n if (segment === 3 || segment === 4 || segment === 5 || segment === 6) return 1;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 7, 8, 9, 10 \u2192 3\n if (segment === 7 || segment === 8 || segment === 9 || segment === 10) return 2;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 11, 12, 13, 14 \u2192 4\n if (segment === 11 || segment === 12 || segment === 13 || segment === 14) return 3;\n }\n return 0;\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\n function updateSequence() {\n if (lineSequence.length === 0) {\n sequenceContent.innerHTML = '<div class=\"sequence-empty\">\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438...<\/div>';\n return;\n }\n \n let html = '';\n lineSequence.forEach((line, index) => {\n const isLast = index === lineSequence.length - 1;\n html += `\n <div class=\"sequence-row ${isLast ? 'sequence-highlight' : ''}\">\n <div>${line.direction}<\/div>\n <div>${line.length} px<\/div>\n <div>${line.angle}\u00b0<\/div>\n <div>${line.start}<\/div>\n <div>${line.end}<\/div>\n <div><div class=\"color-indicator\" style=\"background-color: ${line.color};\"><\/div><\/div>\n <div>${line.lineNumber}<\/div>\n <\/div>\n `;\n });\n \n sequenceContent.innerHTML = html;\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435\n sequenceContainer.scrollTop = sequenceContainer.scrollHeight;\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\n function addLineToSequence(x1, y1, x2, y2, color, lineNumber) {\n const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));\n const angle = Math.atan2(y2 - y1, x2 - x1) * (180 \/ Math.PI);\n const direction = getDirectionFromAngle(angle);\n \n lineSequence.push({\n direction: direction,\n length: Math.round(length),\n angle: angle.toFixed(1),\n start: `(${Math.round(x1)}, ${Math.round(y1)})`,\n end: `(${Math.round(x2)}, ${Math.round(y2)})`,\n color: color,\n lineNumber: lineNumber\n });\n \n updateSequence();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\n function clearDirectionSequence() {\n lineSequence = [];\n updateSequence();\n }\n \n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044e\n menuBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n menuContent.classList.toggle('show');\n });\n document.addEventListener('click', () => {\n menuContent.classList.remove('show');\n });\n settingsMenuItem.addEventListener('click', () => {\n settingsModal.style.display = 'block';\n menuContent.classList.remove('show');\n });\n closeModalBtn.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n settingsModal.addEventListener('click', (e) => {\n if (e.target === settingsModal) {\n settingsModal.style.display = 'none';\n }\n });\n \n \/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430\n let isDragging = false;\n let dragOffsetX = 0;\n let dragOffsetY = 0;\n const modalContent = document.querySelector('.modal-content');\n const modalHeader = document.querySelector('.modal-header');\n \n modalHeader.addEventListener('mousedown', (e) => {\n isDragging = true;\n const rect = modalContent.getBoundingClientRect();\n dragOffsetX = e.clientX - rect.left;\n dragOffsetY = e.clientY - rect.top;\n modalContent.style.cursor = 'grabbing';\n });\n \n document.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n \n const newX = e.clientX - dragOffsetX;\n const newY = e.clientY - dragOffsetY;\n \n \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u043a\u043d\u0430\n const maxX = window.innerWidth - modalContent.offsetWidth;\n const maxY = window.innerHeight - modalContent.offsetHeight;\n \n const boundedX = Math.max(0, Math.min(newX, maxX));\n const boundedY = Math.max(0, Math.min(newY, maxY));\n \n modalContent.style.left = boundedX + 'px';\n modalContent.style.top = boundedY + 'px';\n modalContent.style.transform = 'none';\n });\n \n document.addEventListener('mouseup', () => {\n if (isDragging) {\n isDragging = false;\n modalContent.style.cursor = 'move';\n }\n });\n \n function redrawCanvas() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0435\u0442\u043a\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 (\u043d\u0430 \u0437\u0430\u0434\u043d\u0435\u043c \u043f\u043b\u0430\u043d\u0435)\n drawGrid();\n \n const currentLayer = layers[currentLayerIndex];\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u043b\u0438\u043d\u0438\u0438 \u0441 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u043e\u043d\u0446\u0430\u0445\n currentLayer.forEach(lineGroup => {\n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043b\u0438\u043d\u0438\u0438\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0436\u043e\u0447\u0435\u043a \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u043b\u0438\u043d\u0438\u0438\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n }\n \n function updateLayerInfo() {\n currentLayerSpan.textContent = currentLayerIndex + 1;\n totalLayersSpan.textContent = layers.length;\n \n prevLayerBtn.disabled = currentLayerIndex === 0;\n nextLayerBtn.disabled = currentLayerIndex === layers.length - 1;\n deleteLayerBtn.disabled = layers.length === 1;\n }\n \n function createNewLayer() {\n let newLayerContent = [];\n \n if (copyContentCheckbox.checked) {\n newLayerContent = JSON.parse(JSON.stringify(layers[currentLayerIndex]));\n }\n \n layers.push(newLayerContent);\n currentLayerIndex = layers.length - 1;\n redrawCanvas();\n updateLayerInfo();\n }\n \n function goToPreviousLayer() {\n if (currentLayerIndex > 0) {\n currentLayerIndex--;\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n function goToNextLayer() {\n if (currentLayerIndex < layers.length - 1) {\n currentLayerIndex++;\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n function deleteCurrentLayer() {\n if (layers.length > 1) {\n layers.splice(currentLayerIndex, 1);\n if (currentLayerIndex >= layers.length) {\n currentLayerIndex = layers.length - 1;\n }\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n \n canvas.addEventListener('mousedown', (e) => {\n isDrawing = true;\n const rect = canvas.getBoundingClientRect();\n lastX = e.clientX - rect.left;\n lastY = e.clientY - rect.top;\n startX = lastX;\n startY = lastY;\n currentLineSegments = [];\n \n const settings = getCurrentLineSettings();\n \n \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n currentLineInfo = {\n segments: [],\n color: settings.color,\n width: settings.width,\n endX: lastX,\n endY: lastY,\n lineType: lineCounter \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u0438\u043f \u043b\u0438\u043d\u0438\u0438\n };\n });\n \n canvas.addEventListener('mousemove', (e) => {\n if (!isDrawing) return;\n const rect = canvas.getBoundingClientRect();\n let currentX = e.clientX - rect.left;\n let currentY = e.clientY - rect.top;\n \n const settings = getCurrentLineSettings();\n const color = settings.color;\n const width = settings.width;\n const segment = {\n x1: lastX,\n y1: lastY,\n x2: currentX,\n y2: currentY\n };\n \n currentLineInfo.segments.push(segment);\n currentLineInfo.endX = currentX;\n currentLineInfo.endY = currentY;\n currentLineInfo.color = color;\n currentLineInfo.width = width;\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawGrid();\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n const currentLayer = layers[currentLayerIndex];\n currentLayer.forEach(lineGroup => {\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n currentLineInfo.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, color, width);\n });\n drawEndCircle(currentX, currentY, color, width);\n \n lastX = currentX;\n lastY = currentY;\n });\n \n canvas.addEventListener('mouseup', () => {\n if (isDrawing && currentLineInfo && currentLineInfo.segments.length > 0) {\n const userLineType = lineCounter;\n const userEndX = currentLineInfo.endX;\n const userEndY = currentLineInfo.endY;\n const userColor = currentLineInfo.color;\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043b\u0438\u043d\u0438\u044f 2 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u041f\u0415\u0420\u0415\u0414 \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 3\n if (lastEndPoint !== null && userLineType === 3) {\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2 (\u043a\u0440\u0430\u0441\u043d\u0443\u044e) \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0446\u043e\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043b\u0438\u043d\u0438\u0438 \u0438 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0439\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: startX,\n y2: startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: startX,\n endY: startY,\n lineType: 2\n };\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n layers[currentLayerIndex].push(autoLine);\n \n \/\/ \u0421\u041d\u0410\u0427\u0410\u041b\u0410 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, startX, startY, line2Settings.color, 2);\n }\n \n \/\/ \u041f\u041e\u0422\u041e\u041c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043b\u0438\u043d\u0438\u044e\n layers[currentLayerIndex].push(currentLineInfo);\n addLineToSequence(startX, startY, currentLineInfo.endX, currentLineInfo.endY, userColor, userLineType);\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438\n lastEndPoint = { x: userEndX, y: userEndY };\n \n \/\/ \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a: 1 -> 3 -> 1 -> 3\n if (userLineType === 1) {\n lineCounter = 3; \/\/ \u041f\u043e\u0441\u043b\u0435 \u043b\u0438\u043d\u0438\u0438 1 \u0438\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f 3\n } else if (userLineType === 3) {\n lineCounter = 1; \/\/ \u041f\u043e\u0441\u043b\u0435 \u043b\u0438\u043d\u0438\u0438 3 \u0438\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f 1\n }\n \n currentLineInfo = null;\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c canvas\n redrawCanvas();\n \n \/\/ \u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u043e\u043f\u0446\u0438\u044f \"\u041d\u043e\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\", \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\n if (newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n }\n isDrawing = false;\n currentLineSegments = [];\n });\n \n canvas.addEventListener('mouseleave', () => {\n if (isDrawing && currentLineInfo && currentLineInfo.segments.length > 0) {\n const userLineType = lineCounter;\n const userEndX = currentLineInfo.endX;\n const userEndY = currentLineInfo.endY;\n const userColor = currentLineInfo.color;\n \n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: startX,\n y2: startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: startX,\n endY: startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, startX, startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(currentLineInfo);\n addLineToSequence(startX, startY, currentLineInfo.endX, currentLineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n currentLineInfo = null;\n redrawCanvas();\n \n if (newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n }\n isDrawing = false;\n currentLineSegments = [];\n });\n \n canvas.addEventListener('touchstart', (e) => {\n e.preventDefault();\n const rect = canvas.getBoundingClientRect();\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n const touchX = touch.clientX - rect.left;\n const touchY = touch.clientY - rect.top;\n \n const settings = getCurrentLineSettings();\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u044f\n activeTouches[touchId] = {\n lastX: touchX,\n lastY: touchY,\n startX: touchX,\n startY: touchY,\n lineType: lineCounter,\n lineInfo: {\n segments: [],\n color: settings.color,\n width: settings.width,\n endX: touchX,\n endY: touchY,\n lineType: lineCounter\n }\n };\n }\n });\n \n canvas.addEventListener('touchmove', (e) => {\n e.preventDefault();\n if (Object.keys(activeTouches).length === 0) return;\n \n const rect = canvas.getBoundingClientRect();\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0432\u0438\u0436\u0443\u0449\u0435\u0435\u0441\u044f \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const currentX = touch.clientX - rect.left;\n const currentY = touch.clientY - rect.top;\n const touchData = activeTouches[touchId];\n \n const segment = {\n x1: touchData.lastX,\n y1: touchData.lastY,\n x2: currentX,\n y2: currentY\n };\n \n touchData.lineInfo.segments.push(segment);\n touchData.lineInfo.endX = currentX;\n touchData.lineInfo.endY = currentY;\n \n touchData.lastX = currentX;\n touchData.lastY = currentY;\n }\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c canvas \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u0430\u0441\u0430\u043d\u0438\u0439\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawGrid();\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n const currentLayer = layers[currentLayerIndex];\n currentLayer.forEach(lineGroup => {\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u043e\u0442 \u043a\u0430\u0441\u0430\u043d\u0438\u0439\n Object.values(activeTouches).forEach(touchData => {\n touchData.lineInfo.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, touchData.lineInfo.color, touchData.lineInfo.width);\n });\n drawEndCircle(touchData.lineInfo.endX, touchData.lineInfo.endY, touchData.lineInfo.color, touchData.lineInfo.width);\n });\n });\n \n canvas.addEventListener('touchend', (e) => {\n e.preventDefault();\n \n \/\/ \u0424\u043b\u0430\u0433 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438\n let shouldCreateNewLayer = false;\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const touchData = activeTouches[touchId];\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b\n if (touchData.lineInfo.segments.length > 0) {\n const userLineType = touchData.lineType;\n const userEndX = touchData.lineInfo.endX;\n const userEndY = touchData.lineInfo.endY;\n const userColor = touchData.lineInfo.color;\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2 \u041f\u0415\u0420\u0415\u0414 \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 3\n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: touchData.startX,\n y2: touchData.startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: touchData.startX,\n endY: touchData.startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, touchData.startX, touchData.startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(touchData.lineInfo);\n addLineToSequence(touchData.startX, touchData.startY, touchData.lineInfo.endX, touchData.lineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n shouldCreateNewLayer = true;\n redrawCanvas();\n }\n \n \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445\n delete activeTouches[touchId];\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0412\u0421\u0415 \u043f\u0430\u043b\u044c\u0446\u044b \u043e\u0442\u043e\u0440\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043b\u0438\u043d\u0438\u0438\n if (Object.keys(activeTouches).length === 0 && shouldCreateNewLayer && newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439\n canvas.addEventListener('touchcancel', (e) => {\n e.preventDefault();\n \n \/\/ \u0424\u043b\u0430\u0433 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438\n let shouldCreateNewLayer = false;\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0435\u0440\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const touchData = activeTouches[touchId];\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u0440\u0435\u0440\u0432\u0430\u043d\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b\n if (touchData.lineInfo.segments.length > 0) {\n const userLineType = touchData.lineType;\n const userEndX = touchData.lineInfo.endX;\n const userEndY = touchData.lineInfo.endY;\n const userColor = touchData.lineInfo.color;\n \n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: touchData.startX,\n y2: touchData.startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: touchData.startX,\n endY: touchData.startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, touchData.startX, touchData.startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(touchData.lineInfo);\n addLineToSequence(touchData.startX, touchData.startY, touchData.lineInfo.endX, touchData.lineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n shouldCreateNewLayer = true;\n redrawCanvas();\n }\n \n \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445\n delete activeTouches[touchId];\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0412\u0421\u0415 \u043f\u0430\u043b\u044c\u0446\u044b \u043e\u0442\u043e\u0440\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043b\u0438\u043d\u0438\u0438\n if (Object.keys(activeTouches).length === 0 && shouldCreateNewLayer && newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n });\n \n clearBtn.addEventListener('click', () => {\n layers[currentLayerIndex] = [];\n lineCounter = 1; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430\n lastEndPoint = null; \/\/ \u0421\u0431\u0440\u043e\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0438\n redrawCanvas();\n });\n \n newLayerBtn.addEventListener('click', createNewLayer);\n prevLayerBtn.addEventListener('click', goToPreviousLayer);\n nextLayerBtn.addEventListener('click', goToNextLayer);\n deleteLayerBtn.addEventListener('click', deleteCurrentLayer);\n \n document.addEventListener('keydown', (e) => {\n if (e.key === 'q' || e.key === 'Q' || e.key === '\u0439' || e.key === '\u0419') {\n e.preventDefault();\n createNewLayer();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n goToPreviousLayer();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n goToNextLayer();\n }\n });\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n updateLayerInfo();\n redrawCanvas();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0414\u043e\u0441\u043a\u0430 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438 \u2630 \u041c\u0435\u043d\u044e \u2699\ufe0f \u0424\u043e\u0440\u043c\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \u041d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 (Q) \u2190 \u2192 \u0421\u043b\u043e\u0439: 1 \/ 1 \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \ud83d\udcca \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0439 \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0414\u043b\u0438\u043d\u0430 \u0423\u0433\u043e\u043b \u041d\u0430\u0447\u0430\u043b\u043e (X, Y) \u041a\u043e\u043d\u0435\u0446 (X, Y) \u0426\u0432\u0435\u0442 \u041d\u043e\u043c\u0435\u0440 \u043b\u0438\u043d\u0438\u0438 \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438… \u2699\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u2715 \ud83c\udfaf \u041e\u0431\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a-\u0432\u043e \u0427\u0438\u0441\u0435\u043b (8 \u0438\u043b\u0438 4): 48… <a href=\"https:\/\/1.cbm.ua\/?page_id=8500\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 »<span class=\"screen-reader-text\">_v3 \u0412\u0432\u043e\u0434 \u0446\u0438\u0444\u0440 \u0436\u0435\u0441\u0442\u0430\u043c\u0438.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-8500","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8500"}],"version-history":[{"count":1,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500\/revisions"}],"predecessor-version":[{"id":8502,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500\/revisions\/8502"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8500,"date":"2026-01-15T19:57:34","date_gmt":"2026-01-15T16:57:34","guid":{"rendered":"https:\/\/1.cbm.ua\/?page_id=8500"},"modified":"2026-01-15T19:57:35","modified_gmt":"2026-01-15T16:57:35","slug":"_v3-%d0%b2%d0%b2%d0%be%d0%b4-%d1%86%d0%b8%d1%84%d1%80-%d0%b6%d0%b5%d1%81%d1%82%d0%b0%d0%bc%d0%b8","status":"publish","type":"page","link":"https:\/\/1.cbm.ua\/?page_id=8500","title":{"rendered":"_v3 \u0412\u0432\u043e\u0434 \u0446\u0438\u0444\u0440 \u0436\u0435\u0441\u0442\u0430\u043c\u0438."},"content":{"rendered":"\n\n\n\n \n \n \u0414\u043e\u0441\u043a\u0430 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438<\/title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: Arial, sans-serif;\n background: #f0f0f0;\n }\n #canvas {\n border: 2px solid #333;\n background: white;\n cursor: crosshair;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n .controls {\n margin-bottom: 15px;\n display: flex;\n gap: 15px;\n align-items: center;\n flex-wrap: wrap;\n }\n button {\n padding: 8px 16px;\n font-size: 14px;\n cursor: pointer;\n border: none;\n background: #4CAF50;\n color: white;\n border-radius: 4px;\n }\n button:hover {\n background: #45a049;\n }\n button:disabled {\n background: #ccc;\n cursor: not-allowed;\n }\n .layer-btn {\n background: #2196F3;\n }\n .layer-btn:hover:not(:disabled) {\n background: #0b7dda;\n }\n .menu-btn {\n background: #FF9800;\n }\n .menu-btn:hover {\n background: #e68900;\n }\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n input[type=\"color\"] {\n cursor: pointer;\n width: 40px;\n height: 30px;\n border: none;\n }\n input[type=\"range\"], input[type=\"number\"] {\n cursor: pointer;\n }\n input[type=\"number\"] {\n width: 60px;\n padding: 4px;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n .layer-controls {\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 10px;\n background: #e0e0e0;\n border-radius: 4px;\n }\n .layer-info {\n font-weight: bold;\n min-width: 100px;\n }\n .shortcut {\n font-size: 11px;\n color: #666;\n margin-left: 5px;\n }\n .arrow-btn {\n font-size: 18px;\n padding: 8px 12px;\n min-width: 40px;\n }\n \/* \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0431\u043b\u043e\u043a *\/\n .info-panel {\n margin-top: 15px;\n padding: 15px;\n background: #fff;\n border: 2px solid #2196F3;\n border-radius: 8px;\n width: 800px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .info-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n .info-title {\n font-weight: bold;\n font-size: 16px;\n color: #2196F3;\n }\n .clear-sequence-btn {\n background: #f44336;\n padding: 6px 14px;\n font-size: 13px;\n }\n .clear-sequence-btn:hover {\n background: #d32f2f;\n }\n .sequence-container {\n border: 1px solid #ddd;\n border-radius: 4px;\n background: #f9f9f9;\n max-height: 200px;\n overflow-y: auto;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n }\n .sequence-header {\n display: grid;\n grid-template-columns: 100px 80px 100px 120px 120px 60px 80px;\n gap: 10px;\n padding: 8px 10px;\n background: #2196F3;\n color: white;\n font-weight: bold;\n position: sticky;\n top: 0;\n border-bottom: 2px solid #1976D2;\n }\n .sequence-row {\n display: grid;\n grid-template-columns: 100px 80px 100px 120px 120px 60px 80px;\n gap: 10px;\n padding: 8px 10px;\n border-bottom: 1px solid #eee;\n align-items: center;\n }\n .sequence-row:hover {\n background: #f0f0f0;\n }\n .sequence-row:last-child {\n border-bottom: none;\n }\n .color-indicator {\n width: 30px;\n height: 20px;\n border-radius: 3px;\n border: 1px solid #ccc;\n display: inline-block;\n }\n .sequence-empty {\n padding: 20px;\n text-align: center;\n color: #999;\n font-style: italic;\n }\n .sequence-highlight {\n background: #e3f2fd;\n font-weight: bold;\n }\n \/* \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n animation: fadeIn 0.3s;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .modal-content {\n position: absolute;\n background-color: #fff;\n padding: 30px;\n border-radius: 8px;\n width: 500px;\n max-width: 90%;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n animation: slideDown 0.3s;\n cursor: move;\n left: 50%;\n top: 10%;\n transform: translateX(-50%);\n }\n @keyframes slideDown {\n from {\n transform: translateX(-50%) translateY(-50px);\n opacity: 0;\n }\n to {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n }\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 2px solid #e0e0e0;\n cursor: move;\n }\n .modal-title {\n font-size: 20px;\n font-weight: bold;\n color: #333;\n user-select: none;\n }\n .close-btn {\n background: #f44336;\n color: white;\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n }\n .close-btn:hover {\n background: #d32f2f;\n }\n .settings-options {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n .checkbox-label {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n padding: 10px;\n border-radius: 4px;\n transition: background 0.2s;\n }\n .checkbox-label:hover {\n background: #f5f5f5;\n }\n .checkbox-label input[type=\"checkbox\"] {\n cursor: pointer;\n width: 20px;\n height: 20px;\n }\n .checkbox-label span {\n font-size: 15px;\n }\n .setting-group {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px;\n border-radius: 4px;\n }\n .setting-group:hover {\n background: #f5f5f5;\n }\n .menu-dropdown {\n position: relative;\n display: inline-block;\n }\n .menu-content {\n display: none;\n position: absolute;\n background-color: white;\n min-width: 200px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n z-index: 100;\n border-radius: 4px;\n overflow: hidden;\n }\n .menu-content.show {\n display: block;\n }\n .menu-item {\n padding: 12px 16px;\n cursor: pointer;\n border: none;\n background: white;\n color: #333;\n text-align: left;\n width: 100%;\n font-size: 14px;\n }\n .menu-item:hover {\n background: #f0f0f0;\n }\n \/* \u0421\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 *\/\n .collapsible-section {\n margin-bottom: 10px;\n }\n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 15px;\n background: #2196F3;\n color: white;\n cursor: pointer;\n border-radius: 4px;\n user-select: none;\n font-weight: bold;\n font-size: 16px;\n }\n .section-header:hover {\n background: #1976D2;\n }\n .section-header::after {\n content: '\u25bc';\n font-size: 12px;\n transition: transform 0.3s;\n }\n .section-header.collapsed::after {\n transform: rotate(-90deg);\n }\n .section-content {\n max-height: 1000px;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n }\n .section-content.collapsed {\n max-height: 0;\n }\n .section-body {\n padding: 15px 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"controls\">\n <div class=\"menu-dropdown\">\n <button id=\"menuBtn\" class=\"menu-btn\">\u2630 \u041c\u0435\u043d\u044e<\/button>\n <div id=\"menuContent\" class=\"menu-content\">\n <button class=\"menu-item\" id=\"settingsMenuItem\">\u2699\ufe0f \u0424\u043e\u0440\u043c\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/button>\n <\/div>\n <\/div>\n <button id=\"clearBtn\">\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0439<\/button>\n <\/div>\n <div class=\"layer-controls\">\n <button id=\"newLayerBtn\" class=\"layer-btn\">\n \u041d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 <span class=\"shortcut\">(Q)<\/span>\n <\/button>\n <button id=\"prevLayerBtn\" class=\"layer-btn arrow-btn\">\u2190<\/button>\n <button id=\"nextLayerBtn\" class=\"layer-btn arrow-btn\">\u2192<\/button>\n <div class=\"layer-info\">\n \u0421\u043b\u043e\u0439: <span id=\"currentLayer\">1<\/span> \/ <span id=\"totalLayers\">1<\/span>\n <\/div>\n <button id=\"deleteLayerBtn\" style=\"background: #f44336;\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439<\/button>\n <\/div>\n <canvas id=\"canvas\" width=\"800\" height=\"600\"><\/canvas>\n \n <div class=\"info-panel\">\n <div class=\"info-header\">\n <div class=\"info-title\">\ud83d\udcca \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0439<\/div>\n <button class=\"clear-sequence-btn\" onclick=\"clearDirectionSequence()\">\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c<\/button>\n <\/div>\n <div class=\"sequence-container\" id=\"sequenceContainer\">\n <div class=\"sequence-header\">\n <div>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/div>\n <div>\u0414\u043b\u0438\u043d\u0430<\/div>\n <div>\u0423\u0433\u043e\u043b<\/div>\n <div>\u041d\u0430\u0447\u0430\u043b\u043e (X, Y)<\/div>\n <div>\u041a\u043e\u043d\u0435\u0446 (X, Y)<\/div>\n <div>\u0426\u0432\u0435\u0442<\/div>\n <div>\u041d\u043e\u043c\u0435\u0440 \u043b\u0438\u043d\u0438\u0438<\/div>\n <\/div>\n <div id=\"sequenceContent\">\n <div class=\"sequence-empty\">\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438…<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"settingsModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">\u2699\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/div>\n <button id=\"closeModalBtn\" class=\"close-btn\">\u2715<\/button>\n <\/div>\n <div class=\"settings-options\">\n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83c\udfaf \u041e\u0431\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <div class=\"setting-group\">\n <label>\n <span>\u043a-\u0432\u043e \u0427\u0438\u0441\u0435\u043b (8 \u0438\u043b\u0438 4):<\/span>\n <select id=\"numberOfNumbers\">\n <option value=\"4\">4<\/option>\n <option value=\"8\" selected>8<\/option>\n <\/select>\n <span><\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83c\udfaf \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0421\u0435\u0442\u043a\u0438\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"showGridCheckbox\" checked>\n <span>\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0435 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/span>\n <\/label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"showDiagonalCheckbox\" checked>\n <span>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443 \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c<\/span>\n <\/label>\n <div class=\"setting-group\">\n <label>\n <span>\u0420\u0430\u0437\u043c\u0435\u0440 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441\u0435\u0442\u043a\u0438:<\/span>\n <input type=\"number\" id=\"gridStepInput\" min=\"10\" max=\"300\" value=\"50\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83d\udccf \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0438\u0439 \u043f\u043e \u0442\u0438\u043f\u0430\u043c\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 1<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line1Color\" value=\"#0000ff\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line1Width\" min=\"1\" max=\"20\" value=\"3\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 2<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line2Color\" value=\"#ff0000\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line2Width\" min=\"1\" max=\"20\" value=\"2\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <div style=\"background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 10px;\">\n <div style=\"font-weight: bold; margin-bottom: 10px;\">\u041b\u0438\u043d\u0438\u044f 3<\/div>\n <div style=\"display: flex; gap: 15px; align-items: center;\">\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0426\u0432\u0435\u0442:<\/span>\n <input type=\"color\" id=\"line3Color\" value=\"#00ff00\" style=\"width: 40px; height: 30px; cursor: pointer; border: none;\">\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 8px;\">\n <span>\u0422\u043e\u043b\u0449\u0438\u043d\u0430:<\/span>\n <input type=\"number\" id=\"line3Width\" min=\"1\" max=\"20\" value=\"1\" style=\"width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;\">\n <span>px<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"collapsible-section\">\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\n \ud83d\uddc2\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043b\u043e\u0435\u0432\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-body\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"copyContentCheckbox\">\n <span>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/span>\n <\/label>\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" id=\"newLineNewLayerCheckbox\">\n <span>\u041d\u043e\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f — \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const clearBtn = document.getElementById('clearBtn');\n const newLayerBtn = document.getElementById('newLayerBtn');\n const prevLayerBtn = document.getElementById('prevLayerBtn');\n const nextLayerBtn = document.getElementById('nextLayerBtn');\n const deleteLayerBtn = document.getElementById('deleteLayerBtn');\n const currentLayerSpan = document.getElementById('currentLayer');\n const totalLayersSpan = document.getElementById('totalLayers');\n const copyContentCheckbox = document.getElementById('copyContentCheckbox');\n const newLineNewLayerCheckbox = document.getElementById('newLineNewLayerCheckbox');\n const showGridCheckbox = document.getElementById('showGridCheckbox');\n const showDiagonalCheckbox = document.getElementById('showDiagonalCheckbox');\n const gridStepInput = document.getElementById('gridStepInput');\n const menuBtn = document.getElementById('menuBtn');\n const menuContent = document.getElementById('menuContent');\n const settingsMenuItem = document.getElementById('settingsMenuItem');\n const settingsModal = document.getElementById('settingsModal');\n const closeModalBtn = document.getElementById('closeModalBtn');\n const sequenceContent = document.getElementById('sequenceContent');\n const sequenceContainer = document.getElementById('sequenceContainer');\n \n \/\/ \u041f\u043e\u043b\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0438\u043d\u0438\u0439\n const line1Color = document.getElementById('line1Color');\n const line1Width = document.getElementById('line1Width');\n const line2Color = document.getElementById('line2Color');\n const line2Width = document.getElementById('line2Width');\n const line3Color = document.getElementById('line3Color');\n const line3Width = document.getElementById('line3Width');\n \n let activeTouches = {}; \/\/ \u041e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0438\n let isDrawing = false;\n let lastX = 0;\n let lastY = 0;\n let startX = 0;\n let startY = 0;\n let currentLineSegments = [];\n let currentLineInfo = null;\n let lineSequence = []; \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u043b\u0438\u043d\u0438\u044f\u0445\n \n \/\/ \u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043b\u0438\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0442\u043e\u0447\u043a\u0430\n let lineCounter = 1; \/\/ \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u0438\u043d\u0438\u044f: 1, 2 \u0438\u043b\u0438 3\n let lastEndPoint = null; \/\/ \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 {x, y}\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u0438\u043d\u0438\u0438\n function getCurrentLineSettings() {\n if (lineCounter === 1) {\n return { color: line1Color.value, width: parseInt(line1Width.value) };\n } else if (lineCounter === 2) {\n return { color: line2Color.value, width: parseInt(line2Width.value) };\n } else {\n return { color: line3Color.value, width: parseInt(line3Width.value) };\n }\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\/\u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0446\u0438\u0439\n function toggleSection(header) {\n header.classList.toggle('collapsed');\n const content = header.nextElementSibling;\n content.classList.toggle('collapsed');\n }\n \n \/\/ \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043b\u043e\u0435\u0432\n let layers = [[]];\n let currentLayerIndex = 0;\n \n \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0435\u0442\u043a\u0438\n function drawGrid() {\n if (!showGridCheckbox.checked && !showDiagonalCheckbox.checked) return;\n \n const step = parseInt(gridStepInput.value) || 50;\n const width = canvas.width;\n const height = canvas.height;\n \n ctx.strokeStyle = '#cccccc';\n ctx.lineWidth = 0.5;\n ctx.setLineDash([5, 5]); \/\/ \u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f\n \n \/\/ \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n if (showGridCheckbox.checked) {\n \/\/ \u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n for (let x = 0; x <= width; x += step) {\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, height);\n ctx.stroke();\n }\n \n \/\/ \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n for (let y = 0; y <= height; y += step) {\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(width, y);\n ctx.stroke();\n }\n }\n \n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n if (showDiagonalCheckbox.checked) {\n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u0438\u0437 \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 (\u0432\u043f\u0440\u0430\u0432\u043e-\u0432\u043d\u0438\u0437 \u0447\u0435\u0440\u0435\u0437 \u0443\u0437\u043b\u044b)\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b\n for (let startY = 0; startY <= height; startY += step) {\n ctx.beginPath();\n ctx.moveTo(0, startY);\n \/\/ \u041b\u0438\u043d\u0438\u044f \u0438\u0434\u0435\u0442 \u043f\u043e\u0434 \u0443\u0433\u043b\u043e\u043c 45\u00b0 \u0434\u043e \u043a\u0440\u0430\u044f canvas\n const maxLen = Math.min(width, height - startY);\n ctx.lineTo(maxLen, startY + maxLen);\n ctx.stroke();\n }\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b (\u043a\u0440\u043e\u043c\u0435 \u0443\u0433\u043b\u0430)\n for (let startX = step; startX <= width; startX += step) {\n ctx.beginPath();\n ctx.moveTo(startX, 0);\n const maxLen = Math.min(width - startX, height);\n ctx.lineTo(startX + maxLen, maxLen);\n ctx.stroke();\n }\n \n \/\/ \u0414\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u0438\u0437 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 (\u0432\u043b\u0435\u0432\u043e-\u0432\u043d\u0438\u0437 \u0447\u0435\u0440\u0435\u0437 \u0443\u0437\u043b\u044b)\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b\n for (let startY = 0; startY <= height; startY += step) {\n ctx.beginPath();\n ctx.moveTo(width, startY);\n const maxLen = Math.min(width, height - startY);\n ctx.lineTo(width - maxLen, startY + maxLen);\n ctx.stroke();\n }\n \/\/ \u041b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b (\u043a\u0440\u043e\u043c\u0435 \u0443\u0433\u043b\u0430)\n for (let startX = 0; startX < width; startX += step) {\n ctx.beginPath();\n ctx.moveTo(startX, 0);\n const maxLen = Math.min(startX, height);\n ctx.lineTo(startX - maxLen, maxLen);\n ctx.stroke();\n }\n }\n \n ctx.setLineDash([]);\n }\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0442\u043a\u0438\n showGridCheckbox.addEventListener('change', redrawCanvas);\n showDiagonalCheckbox.addEventListener('change', redrawCanvas);\n gridStepInput.addEventListener('input', redrawCanvas);\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u043b\u0438\u043d\u0438\u0438\n function drawEndCircle(x, y, color, width) {\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.arc(x, y, width * 1.5, 0, Math.PI * 2);\n ctx.fill();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043b\u0438\u043d\u0438\u0438 \u0431\u0435\u0437 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430\n function drawLine(x1, y1, x2, y2, color, width) {\n ctx.strokeStyle = color;\n ctx.lineWidth = width;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u0433\u043b\u0443 (\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e) \u0446\u0438\u0444\u0440\u044b.\n function getDirectionFromAngle(angle) {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0438\u0441\u0435\u043b (4 \u0438\u043b\u0438 8)\n const numberOfNumbers = document.getElementById('numberOfNumbers').value;\n \n \/\/ \u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0443\u0433\u043e\u043b: Canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 0\u00b0 \u0441\u043f\u0440\u0430\u0432\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e 0\u00b0 \u0441\u0432\u0435\u0440\u0445\u0443\n \/\/ \u041f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430 +90\u00b0 \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441 \u043d\u0430\u0448\u0435\u0439 \u0441\u0445\u0435\u043c\u043e\u0439 (0\u00b0 \u0441\u0432\u0435\u0440\u0445\u0443)\n let normalizedAngle = angle + 90;\n \n \/\/ \u041f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u0443\u0433\u043e\u043b \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d [0, 360)\n if (normalizedAngle < 0) normalizedAngle += 360;\n if (normalizedAngle >= 360) normalizedAngle -= 360;\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442 (1-16): \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 = 22.5\u00b0\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442 1: \u043e\u0442 0\u00b0 \u0434\u043e 22.5\u00b0 (\u0446\u0435\u043d\u0442\u0440 = 11.25\u00b0)\n const segmentSize = 22.5;\n let segment = Math.floor(normalizedAngle \/ segmentSize) + 1;\n \n \/\/ \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 16 (\u043e\u0442 348.75\u00b0 \u0434\u043e 360\u00b0)\n if (segment > 16) segment = 1;\n \n \/\/ \u0420\u0435\u0436\u0438\u043c 8 \u0447\u0438\u0441\u0435\u043b (0-7)\n if (numberOfNumbers === '8') {\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 1 \u0438 16 \u2192 0\n if (segment === 1 || segment === 16) return 0;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 2-3 \u2192 1\n if (segment === 2 || segment === 3) return 1;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 4-5 \u2192 2\n if (segment === 4 || segment === 5) return 2;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 6-7 \u2192 3\n if (segment === 6 || segment === 7) return 3;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 8-9 \u2192 4\n if (segment === 8 || segment === 9) return 4;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 10-11 \u2192 5\n if (segment === 10 || segment === 11) return 5;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 12-13 \u2192 6\n if (segment === 12 || segment === 13) return 6;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 14-15 \u2192 7\n if (segment === 14 || segment === 15) return 7;\n }\n \/\/ \u0420\u0435\u0436\u0438\u043c 4 \u0447\u0438\u0441\u0435\u043b (1-6) - \u043f\u043e \u0441\u0445\u0435\u043c\u0435 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\n else {\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 15, 16, 1, 2 \u2192 1\n if (segment === 15 || segment === 16 || segment === 1 || segment === 2) return 0;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 3, 4, 5, 6 \u2192 2\n if (segment === 3 || segment === 4 || segment === 5 || segment === 6) return 1;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 7, 8, 9, 10 \u2192 3\n if (segment === 7 || segment === 8 || segment === 9 || segment === 10) return 2;\n \/\/ \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b 11, 12, 13, 14 \u2192 4\n if (segment === 11 || segment === 12 || segment === 13 || segment === 14) return 3;\n }\n return 0;\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\n function updateSequence() {\n if (lineSequence.length === 0) {\n sequenceContent.innerHTML = '<div class=\"sequence-empty\">\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438...<\/div>';\n return;\n }\n \n let html = '';\n lineSequence.forEach((line, index) => {\n const isLast = index === lineSequence.length - 1;\n html += `\n <div class=\"sequence-row ${isLast ? 'sequence-highlight' : ''}\">\n <div>${line.direction}<\/div>\n <div>${line.length} px<\/div>\n <div>${line.angle}\u00b0<\/div>\n <div>${line.start}<\/div>\n <div>${line.end}<\/div>\n <div><div class=\"color-indicator\" style=\"background-color: ${line.color};\"><\/div><\/div>\n <div>${line.lineNumber}<\/div>\n <\/div>\n `;\n });\n \n sequenceContent.innerHTML = html;\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435\n sequenceContainer.scrollTop = sequenceContainer.scrollHeight;\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\n function addLineToSequence(x1, y1, x2, y2, color, lineNumber) {\n const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));\n const angle = Math.atan2(y2 - y1, x2 - x1) * (180 \/ Math.PI);\n const direction = getDirectionFromAngle(angle);\n \n lineSequence.push({\n direction: direction,\n length: Math.round(length),\n angle: angle.toFixed(1),\n start: `(${Math.round(x1)}, ${Math.round(y1)})`,\n end: `(${Math.round(x2)}, ${Math.round(y2)})`,\n color: color,\n lineNumber: lineNumber\n });\n \n updateSequence();\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\n function clearDirectionSequence() {\n lineSequence = [];\n updateSequence();\n }\n \n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044e\n menuBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n menuContent.classList.toggle('show');\n });\n document.addEventListener('click', () => {\n menuContent.classList.remove('show');\n });\n settingsMenuItem.addEventListener('click', () => {\n settingsModal.style.display = 'block';\n menuContent.classList.remove('show');\n });\n closeModalBtn.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n settingsModal.addEventListener('click', (e) => {\n if (e.target === settingsModal) {\n settingsModal.style.display = 'none';\n }\n });\n \n \/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430\n let isDragging = false;\n let dragOffsetX = 0;\n let dragOffsetY = 0;\n const modalContent = document.querySelector('.modal-content');\n const modalHeader = document.querySelector('.modal-header');\n \n modalHeader.addEventListener('mousedown', (e) => {\n isDragging = true;\n const rect = modalContent.getBoundingClientRect();\n dragOffsetX = e.clientX - rect.left;\n dragOffsetY = e.clientY - rect.top;\n modalContent.style.cursor = 'grabbing';\n });\n \n document.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n \n const newX = e.clientX - dragOffsetX;\n const newY = e.clientY - dragOffsetY;\n \n \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u043a\u043d\u0430\n const maxX = window.innerWidth - modalContent.offsetWidth;\n const maxY = window.innerHeight - modalContent.offsetHeight;\n \n const boundedX = Math.max(0, Math.min(newX, maxX));\n const boundedY = Math.max(0, Math.min(newY, maxY));\n \n modalContent.style.left = boundedX + 'px';\n modalContent.style.top = boundedY + 'px';\n modalContent.style.transform = 'none';\n });\n \n document.addEventListener('mouseup', () => {\n if (isDragging) {\n isDragging = false;\n modalContent.style.cursor = 'move';\n }\n });\n \n function redrawCanvas() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0435\u0442\u043a\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 (\u043d\u0430 \u0437\u0430\u0434\u043d\u0435\u043c \u043f\u043b\u0430\u043d\u0435)\n drawGrid();\n \n const currentLayer = layers[currentLayerIndex];\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u043b\u0438\u043d\u0438\u0438 \u0441 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u043e\u043d\u0446\u0430\u0445\n currentLayer.forEach(lineGroup => {\n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043b\u0438\u043d\u0438\u0438\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0436\u043e\u0447\u0435\u043a \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u043b\u0438\u043d\u0438\u0438\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n }\n \n function updateLayerInfo() {\n currentLayerSpan.textContent = currentLayerIndex + 1;\n totalLayersSpan.textContent = layers.length;\n \n prevLayerBtn.disabled = currentLayerIndex === 0;\n nextLayerBtn.disabled = currentLayerIndex === layers.length - 1;\n deleteLayerBtn.disabled = layers.length === 1;\n }\n \n function createNewLayer() {\n let newLayerContent = [];\n \n if (copyContentCheckbox.checked) {\n newLayerContent = JSON.parse(JSON.stringify(layers[currentLayerIndex]));\n }\n \n layers.push(newLayerContent);\n currentLayerIndex = layers.length - 1;\n redrawCanvas();\n updateLayerInfo();\n }\n \n function goToPreviousLayer() {\n if (currentLayerIndex > 0) {\n currentLayerIndex--;\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n function goToNextLayer() {\n if (currentLayerIndex < layers.length - 1) {\n currentLayerIndex++;\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n function deleteCurrentLayer() {\n if (layers.length > 1) {\n layers.splice(currentLayerIndex, 1);\n if (currentLayerIndex >= layers.length) {\n currentLayerIndex = layers.length - 1;\n }\n redrawCanvas();\n updateLayerInfo();\n }\n }\n \n \n canvas.addEventListener('mousedown', (e) => {\n isDrawing = true;\n const rect = canvas.getBoundingClientRect();\n lastX = e.clientX - rect.left;\n lastY = e.clientY - rect.top;\n startX = lastX;\n startY = lastY;\n currentLineSegments = [];\n \n const settings = getCurrentLineSettings();\n \n \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n currentLineInfo = {\n segments: [],\n color: settings.color,\n width: settings.width,\n endX: lastX,\n endY: lastY,\n lineType: lineCounter \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u0438\u043f \u043b\u0438\u043d\u0438\u0438\n };\n });\n \n canvas.addEventListener('mousemove', (e) => {\n if (!isDrawing) return;\n const rect = canvas.getBoundingClientRect();\n let currentX = e.clientX - rect.left;\n let currentY = e.clientY - rect.top;\n \n const settings = getCurrentLineSettings();\n const color = settings.color;\n const width = settings.width;\n const segment = {\n x1: lastX,\n y1: lastY,\n x2: currentX,\n y2: currentY\n };\n \n currentLineInfo.segments.push(segment);\n currentLineInfo.endX = currentX;\n currentLineInfo.endY = currentY;\n currentLineInfo.color = color;\n currentLineInfo.width = width;\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawGrid();\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n const currentLayer = layers[currentLayerIndex];\n currentLayer.forEach(lineGroup => {\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n currentLineInfo.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, color, width);\n });\n drawEndCircle(currentX, currentY, color, width);\n \n lastX = currentX;\n lastY = currentY;\n });\n \n canvas.addEventListener('mouseup', () => {\n if (isDrawing && currentLineInfo && currentLineInfo.segments.length > 0) {\n const userLineType = lineCounter;\n const userEndX = currentLineInfo.endX;\n const userEndY = currentLineInfo.endY;\n const userColor = currentLineInfo.color;\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043b\u0438\u043d\u0438\u044f 2 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u041f\u0415\u0420\u0415\u0414 \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 3\n if (lastEndPoint !== null && userLineType === 3) {\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2 (\u043a\u0440\u0430\u0441\u043d\u0443\u044e) \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0446\u043e\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043b\u0438\u043d\u0438\u0438 \u0438 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0439\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: startX,\n y2: startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: startX,\n endY: startY,\n lineType: 2\n };\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e\n layers[currentLayerIndex].push(autoLine);\n \n \/\/ \u0421\u041d\u0410\u0427\u0410\u041b\u0410 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, startX, startY, line2Settings.color, 2);\n }\n \n \/\/ \u041f\u041e\u0422\u041e\u041c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043b\u0438\u043d\u0438\u044e\n layers[currentLayerIndex].push(currentLineInfo);\n addLineToSequence(startX, startY, currentLineInfo.endX, currentLineInfo.endY, userColor, userLineType);\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438\n lastEndPoint = { x: userEndX, y: userEndY };\n \n \/\/ \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a: 1 -> 3 -> 1 -> 3\n if (userLineType === 1) {\n lineCounter = 3; \/\/ \u041f\u043e\u0441\u043b\u0435 \u043b\u0438\u043d\u0438\u0438 1 \u0438\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f 3\n } else if (userLineType === 3) {\n lineCounter = 1; \/\/ \u041f\u043e\u0441\u043b\u0435 \u043b\u0438\u043d\u0438\u0438 3 \u0438\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f 1\n }\n \n currentLineInfo = null;\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c canvas\n redrawCanvas();\n \n \/\/ \u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u043e\u043f\u0446\u0438\u044f \"\u041d\u043e\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\", \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439\n if (newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n }\n isDrawing = false;\n currentLineSegments = [];\n });\n \n canvas.addEventListener('mouseleave', () => {\n if (isDrawing && currentLineInfo && currentLineInfo.segments.length > 0) {\n const userLineType = lineCounter;\n const userEndX = currentLineInfo.endX;\n const userEndY = currentLineInfo.endY;\n const userColor = currentLineInfo.color;\n \n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: startX,\n y2: startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: startX,\n endY: startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, startX, startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(currentLineInfo);\n addLineToSequence(startX, startY, currentLineInfo.endX, currentLineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n currentLineInfo = null;\n redrawCanvas();\n \n if (newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n }\n isDrawing = false;\n currentLineSegments = [];\n });\n \n canvas.addEventListener('touchstart', (e) => {\n e.preventDefault();\n const rect = canvas.getBoundingClientRect();\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n const touchX = touch.clientX - rect.left;\n const touchY = touch.clientY - rect.top;\n \n const settings = getCurrentLineSettings();\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u044f\n activeTouches[touchId] = {\n lastX: touchX,\n lastY: touchY,\n startX: touchX,\n startY: touchY,\n lineType: lineCounter,\n lineInfo: {\n segments: [],\n color: settings.color,\n width: settings.width,\n endX: touchX,\n endY: touchY,\n lineType: lineCounter\n }\n };\n }\n });\n \n canvas.addEventListener('touchmove', (e) => {\n e.preventDefault();\n if (Object.keys(activeTouches).length === 0) return;\n \n const rect = canvas.getBoundingClientRect();\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0434\u0432\u0438\u0436\u0443\u0449\u0435\u0435\u0441\u044f \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const currentX = touch.clientX - rect.left;\n const currentY = touch.clientY - rect.top;\n const touchData = activeTouches[touchId];\n \n const segment = {\n x1: touchData.lastX,\n y1: touchData.lastY,\n x2: currentX,\n y2: currentY\n };\n \n touchData.lineInfo.segments.push(segment);\n touchData.lineInfo.endX = currentX;\n touchData.lineInfo.endY = currentY;\n \n touchData.lastX = currentX;\n touchData.lastY = currentY;\n }\n \n \/\/ \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c canvas \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u0430\u0441\u0430\u043d\u0438\u0439\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawGrid();\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438\n const currentLayer = layers[currentLayerIndex];\n currentLayer.forEach(lineGroup => {\n lineGroup.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, lineGroup.color, lineGroup.width);\n });\n drawEndCircle(lineGroup.endX, lineGroup.endY, lineGroup.color, lineGroup.width);\n });\n \n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0432\u0441\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u043e\u0442 \u043a\u0430\u0441\u0430\u043d\u0438\u0439\n Object.values(activeTouches).forEach(touchData => {\n touchData.lineInfo.segments.forEach(segment => {\n drawLine(segment.x1, segment.y1, segment.x2, segment.y2, touchData.lineInfo.color, touchData.lineInfo.width);\n });\n drawEndCircle(touchData.lineInfo.endX, touchData.lineInfo.endY, touchData.lineInfo.color, touchData.lineInfo.width);\n });\n });\n \n canvas.addEventListener('touchend', (e) => {\n e.preventDefault();\n \n \/\/ \u0424\u043b\u0430\u0433 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438\n let shouldCreateNewLayer = false;\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const touchData = activeTouches[touchId];\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b\n if (touchData.lineInfo.segments.length > 0) {\n const userLineType = touchData.lineType;\n const userEndX = touchData.lineInfo.endX;\n const userEndY = touchData.lineInfo.endY;\n const userColor = touchData.lineInfo.color;\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e 2 \u041f\u0415\u0420\u0415\u0414 \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 3\n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: touchData.startX,\n y2: touchData.startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: touchData.startX,\n endY: touchData.startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, touchData.startX, touchData.startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(touchData.lineInfo);\n addLineToSequence(touchData.startX, touchData.startY, touchData.lineInfo.endX, touchData.lineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n shouldCreateNewLayer = true;\n redrawCanvas();\n }\n \n \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445\n delete activeTouches[touchId];\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0412\u0421\u0415 \u043f\u0430\u043b\u044c\u0446\u044b \u043e\u0442\u043e\u0440\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043b\u0438\u043d\u0438\u0438\n if (Object.keys(activeTouches).length === 0 && shouldCreateNewLayer && newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439\n canvas.addEventListener('touchcancel', (e) => {\n e.preventDefault();\n \n \/\/ \u0424\u043b\u0430\u0433 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438\n let shouldCreateNewLayer = false;\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0435\u0440\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u0435\n for (let i = 0; i < e.changedTouches.length; i++) {\n const touch = e.changedTouches[i];\n const touchId = touch.identifier;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (!activeTouches[touchId]) continue;\n \n const touchData = activeTouches[touchId];\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u0440\u0435\u0440\u0432\u0430\u043d\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b\n if (touchData.lineInfo.segments.length > 0) {\n const userLineType = touchData.lineType;\n const userEndX = touchData.lineInfo.endX;\n const userEndY = touchData.lineInfo.endY;\n const userColor = touchData.lineInfo.color;\n \n if (lastEndPoint !== null && userLineType === 3) {\n const line2Settings = { color: line2Color.value, width: parseInt(line2Width.value) };\n const autoLine = {\n segments: [{\n x1: lastEndPoint.x,\n y1: lastEndPoint.y,\n x2: touchData.startX,\n y2: touchData.startY\n }],\n color: line2Settings.color,\n width: line2Settings.width,\n endX: touchData.startX,\n endY: touchData.startY,\n lineType: 2\n };\n \n layers[currentLayerIndex].push(autoLine);\n addLineToSequence(lastEndPoint.x, lastEndPoint.y, touchData.startX, touchData.startY, line2Settings.color, 2);\n }\n \n layers[currentLayerIndex].push(touchData.lineInfo);\n addLineToSequence(touchData.startX, touchData.startY, touchData.lineInfo.endX, touchData.lineInfo.endY, userColor, userLineType);\n \n lastEndPoint = { x: userEndX, y: userEndY };\n \n if (userLineType === 1) {\n lineCounter = 3;\n } else if (userLineType === 3) {\n lineCounter = 1;\n }\n \n shouldCreateNewLayer = true;\n redrawCanvas();\n }\n \n \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0435 \u0438\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445\n delete activeTouches[touchId];\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0412\u0421\u0415 \u043f\u0430\u043b\u044c\u0446\u044b \u043e\u0442\u043e\u0440\u0432\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0431\u044b\u043b\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043b\u0438\u043d\u0438\u0438\n if (Object.keys(activeTouches).length === 0 && shouldCreateNewLayer && newLineNewLayerCheckbox.checked) {\n createNewLayer();\n }\n });\n \n clearBtn.addEventListener('click', () => {\n layers[currentLayerIndex] = [];\n lineCounter = 1; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430\n lastEndPoint = null; \/\/ \u0421\u0431\u0440\u043e\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0442\u043e\u0447\u043a\u0438\n redrawCanvas();\n });\n \n newLayerBtn.addEventListener('click', createNewLayer);\n prevLayerBtn.addEventListener('click', goToPreviousLayer);\n nextLayerBtn.addEventListener('click', goToNextLayer);\n deleteLayerBtn.addEventListener('click', deleteCurrentLayer);\n \n document.addEventListener('keydown', (e) => {\n if (e.key === 'q' || e.key === 'Q' || e.key === '\u0439' || e.key === '\u0419') {\n e.preventDefault();\n createNewLayer();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n goToPreviousLayer();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n goToNextLayer();\n }\n });\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n updateLayerInfo();\n redrawCanvas();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0414\u043e\u0441\u043a\u0430 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438 \u2630 \u041c\u0435\u043d\u044e \u2699\ufe0f \u0424\u043e\u0440\u043c\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \u041d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 (Q) \u2190 \u2192 \u0421\u043b\u043e\u0439: 1 \/ 1 \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \ud83d\udcca \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043b\u0438\u043d\u0438\u0439 \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0414\u043b\u0438\u043d\u0430 \u0423\u0433\u043e\u043b \u041d\u0430\u0447\u0430\u043b\u043e (X, Y) \u041a\u043e\u043d\u0435\u0446 (X, Y) \u0426\u0432\u0435\u0442 \u041d\u043e\u043c\u0435\u0440 \u043b\u0438\u043d\u0438\u0438 \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438… \u2699\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u2715 \ud83c\udfaf \u041e\u0431\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a-\u0432\u043e \u0427\u0438\u0441\u0435\u043b (8 \u0438\u043b\u0438 4): 48… <a href=\"https:\/\/1.cbm.ua\/?page_id=8500\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 »<span class=\"screen-reader-text\">_v3 \u0412\u0432\u043e\u0434 \u0446\u0438\u0444\u0440 \u0436\u0435\u0441\u0442\u0430\u043c\u0438.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-8500","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8500"}],"version-history":[{"count":1,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500\/revisions"}],"predecessor-version":[{"id":8502,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/8500\/revisions\/8502"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}