SILVER
/
NODEDC_BIM_VIEWER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Align BIM comments with OPS detail card

This commit is contained in:
CODEX 2026-06-20 17:21:07 +03:00
parent 684f85b382
commit d70f6e0886
4 changed files with 800 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

574
frontend/dcViewer.css
View File

@ -1582,24 +1582,29 @@ header {
.comment-card-modal { .comment-card-modal {
position: fixed; position: fixed;
--env-control-h: 46px; --env-control-h: 42px;
--env-button-radius: 17px; --ops-detail-bg: rgba(18, 18, 20, 0.96);
--env-glass-control-bg: var(--nodedc-glass-control-bg); --ops-detail-surface: rgba(28, 28, 31, 0.76);
--env-glass-control-hover: var(--nodedc-glass-control-hover); --ops-detail-surface-strong: rgba(32, 32, 35, 0.92);
--env-glass-control-shadow: var(--nodedc-glass-control-shadow); --ops-detail-border: rgba(255, 255, 255, 0.055);
top: 96px; --ops-detail-muted: rgba(229, 231, 235, 0.54);
left: calc(50vw - 230px); top: 34px;
left: calc(50vw - 440px);
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
width: min(520px, calc(100vw - 36px)); width: min(880px, calc(100vw - 48px));
max-height: min(760px, calc(100vh - 72px)); max-height: min(820px, calc(100vh - 68px));
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
border: 1px solid var(--modal-border);
border-radius: var(--modal-radius, 16px);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
z-index: 30050;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 30px;
background:
radial-gradient(circle at 80% 20%, rgba(130, 58, 120, 0.13), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
var(--ops-detail-bg);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.64);
z-index: 30050;
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
} }
.comment-card-modal.hidden { .comment-card-modal.hidden {
@ -1607,14 +1612,11 @@ header {
} }
.comment-card-modal__header { .comment-card-modal__header {
display: grid; display: flex;
grid-template-columns: minmax(0, 1fr) var(--env-control-h);
align-items: center; align-items: center;
gap: 10px; justify-content: space-between;
min-height: calc(var(--env-control-h) + 20px); min-height: 64px;
padding: 12px 12px 8px 16px; padding: 20px 28px 8px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent);
border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
cursor: grab; cursor: grab;
user-select: none; user-select: none;
} }
@ -1623,172 +1625,471 @@ header {
cursor: grabbing; cursor: grabbing;
} }
.comment-card-modal__titles { .ops-detail-nav,
display: grid; .ops-detail-actions,
gap: 3px; .ops-detail-section-actions,
min-width: 0; .ops-activity-composer__toolbar {
display: flex;
align-items: center;
gap: 8px;
} }
.comment-card-modal__title { .ops-detail-actions {
color: var(--text); gap: 10px;
font-size: 15px; }
font-weight: 800;
line-height: 1.2; .ops-detail-icon-btn,
.ops-detail-mini-btn,
.ops-activity-send {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 18px;
background: rgba(255, 255, 255, 0.038);
color: rgba(245, 245, 250, 0.78);
cursor: pointer;
outline: none;
transition: background 130ms ease, color 130ms ease, transform 120ms ease;
}
.ops-detail-mini-btn {
width: 36px;
height: 36px;
border-radius: 13px;
}
.ops-detail-icon-btn:hover,
.ops-detail-mini-btn:hover,
.ops-activity-send:hover {
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.95);
}
.ops-detail-icon-btn:active,
.ops-detail-mini-btn:active,
.ops-activity-send:active {
transform: translateY(1px);
}
.ops-detail-icon-btn svg,
.ops-detail-mini-btn svg,
.ops-activity-send svg,
.ops-detail-pill svg,
.ops-detail-meta-row svg,
.ops-detail-dropzone__icon svg {
display: block;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.comment-card-modal__body {
display: grid;
gap: 24px;
min-height: 0;
overflow: auto;
padding: 30px 32px 24px;
}
.ops-detail-hero {
display: grid;
gap: 12px;
} }
.comment-card-modal__subtitle { .comment-card-modal__subtitle {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--muted); color: rgba(229, 231, 235, 0.68);
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
letter-spacing: 0;
white-space: nowrap; white-space: nowrap;
} }
.comment-card-modal__body { .ops-detail-title-input,
display: grid; .ops-detail-description-input {
gap: 12px;
min-height: 0;
overflow: auto;
padding: 12px 14px 14px;
}
.comment-field {
display: grid;
gap: 6px;
}
.comment-field span,
.comment-thread__title,
.comment-attachments__head span {
color: rgba(245, 245, 250, 0.84);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.comment-field input,
.comment-field textarea {
width: 100%; width: 100%;
border: 1px solid var(--modal-border); min-width: 0;
border-radius: var(--modal-radius, 10px); border: 0;
background: var(--modal-element); background: transparent;
color: var(--text); color: rgba(245, 245, 250, 0.94);
font: inherit; font: inherit;
font-size: 13px;
outline: none; outline: none;
padding: 11px 12px; resize: none;
resize: vertical;
} }
.comment-field textarea { .ops-detail-title-input {
min-height: 86px; min-height: 36px;
line-height: 1.42; font-size: 21px;
font-weight: 760;
line-height: 1.25;
} }
.comment-field input:focus, .ops-detail-title-input::placeholder {
.comment-field textarea:focus { color: rgba(245, 245, 250, 0.52);
border-color: var(--modal-element-outline);
box-shadow: 0 0 0 2px rgba(255, 234, 0, 0.08);
} }
.ops-detail-description-input {
min-height: 30px;
color: rgba(245, 245, 250, 0.72);
font-size: 16px;
line-height: 1.45;
}
.ops-detail-description-input::placeholder {
color: rgba(245, 245, 250, 0.4);
}
.ops-detail-meta-row {
display: flex;
align-items: center;
gap: 7px;
min-height: 22px;
margin-top: 18px;
color: var(--ops-detail-muted);
font-size: 12px;
font-weight: 650;
}
.ops-detail-meta-row svg {
width: 15px;
height: 15px;
}
.ops-detail-pills {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.ops-detail-pill {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 38px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.034);
color: rgba(245, 245, 250, 0.78);
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 720;
}
.ops-detail-pill:hover {
background: rgba(255, 255, 255, 0.065);
color: rgba(255, 255, 255, 0.95);
}
.ops-comment-subitems,
.comment-attachments, .comment-attachments,
.comment-thread { .comment-thread {
display: grid;
gap: 12px;
}
.ops-comment-subitems.hidden {
display: none;
}
.ops-detail-section-title,
.comment-thread__title {
color: rgba(245, 245, 250, 0.92);
font-size: 19px;
font-weight: 760;
line-height: 1.2;
}
.ops-comment-subitems__list {
display: grid; display: grid;
gap: 8px; gap: 8px;
border: 1px solid var(--modal-border);
border-radius: var(--modal-radius, 10px);
background: color-mix(in srgb, var(--modal-focus) var(--modal-focus-alpha, 100%), transparent);
padding: 10px;
} }
.comment-attachments--reply { .ops-comment-subitem {
border-style: dashed; display: grid;
} grid-template-columns: 20px minmax(0, 1fr) 28px;
.comment-attachments__head {
display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 10px;
gap: 8px; min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--ops-detail-border);
border-radius: 15px;
background: rgba(255, 255, 255, 0.026);
}
.ops-comment-subitem input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.ops-comment-subitem input[type="text"] {
min-width: 0;
border: 0;
background: transparent;
color: rgba(245, 245, 250, 0.86);
font: inherit;
font-size: 13px;
outline: none;
}
.ops-comment-subitem button {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 10px;
background: transparent;
color: rgba(245, 245, 250, 0.48);
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.ops-comment-subitem button:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(245, 245, 250, 0.9);
}
.ops-detail-dropzone {
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
min-height: 76px;
padding: 16px 18px;
border: 0;
border-radius: 21px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.024));
transition: background 140ms ease, box-shadow 140ms ease;
}
.ops-detail-dropzone.drag-over {
background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.04));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
}
.ops-detail-dropzone__icon {
color: var(--accent);
}
.ops-detail-dropzone__copy {
display: grid;
gap: 5px;
min-width: 0;
}
.ops-detail-dropzone__copy strong {
color: rgba(245, 245, 250, 0.92);
font-size: 15px;
font-weight: 760;
line-height: 1.2;
}
.ops-detail-dropzone__copy span {
color: rgba(245, 245, 250, 0.52);
font-size: 13px;
line-height: 1.2;
} }
.comment-attach-button { .comment-attach-button {
min-height: 28px; min-height: 34px;
border: 0; border: 0;
border-radius: 9px; border-radius: 13px;
background: var(--modal-element); background: transparent;
color: rgba(245, 245, 250, 0.82); color: var(--accent);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 11px; font-size: 13px;
font-weight: 800; font-weight: 800;
padding: 0 10px; padding: 0 14px;
} }
.comment-attach-button:hover { .comment-attach-button:hover {
background: var(--env-glass-control-hover); background: rgba(255, 255, 255, 0.055);
color: #fff;
} }
.comment-attachment-grid { .comment-attachment-grid {
grid-column: 1 / -1;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
gap: 8px; gap: 9px;
}
.comment-attachment-grid--reply {
grid-column: auto;
} }
.comment-attachment-thumb { .comment-attachment-thumb {
position: relative; position: relative;
min-height: 70px; min-height: 86px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--modal-border); border: 1px solid var(--ops-detail-border);
border-radius: 9px; border-radius: 14px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.04);
} }
.comment-attachment-thumb img { .comment-attachment-thumb img {
display: block; display: block;
width: 100%; width: 100%;
height: 82px; height: 104px;
object-fit: cover; object-fit: cover;
} }
.comment-attachment-file {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 9px;
min-height: 86px;
padding: 12px;
color: rgba(245, 245, 250, 0.82);
}
.comment-attachment-file svg {
display: block;
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.72;
}
.comment-attachment-file__meta {
display: grid;
gap: 4px;
min-width: 0;
}
.comment-attachment-file__meta strong,
.comment-attachment-file__meta span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comment-attachment-file__meta strong {
font-size: 12px;
font-weight: 760;
}
.comment-attachment-file__meta span {
color: rgba(245, 245, 250, 0.48);
font-size: 11px;
}
.comment-attachment-thumb button { .comment-attachment-thumb button {
position: absolute; position: absolute;
top: 4px; top: 6px;
right: 4px; right: 6px;
display: grid; display: grid;
place-items: center; place-items: center;
width: 22px; width: 24px;
height: 22px; height: 24px;
border: 0; border: 0;
border-radius: 8px; border-radius: 9px;
background: rgba(12, 12, 14, 0.76); background: rgba(12, 12, 14, 0.78);
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
font-weight: 900; font-weight: 900;
line-height: 1; line-height: 1;
} }
.comment-thread__list { .ops-detail-activity {
gap: 14px;
}
.ops-detail-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ops-activity-composer {
display: grid; display: grid;
gap: 8px; gap: 8px;
padding: 16px;
border: 1px solid var(--ops-detail-border);
border-radius: 24px;
background: rgba(22, 23, 25, 0.78);
}
.ops-activity-composer > span {
color: rgba(245, 245, 250, 0.9);
font-size: 15px;
font-weight: 760;
}
.ops-activity-composer textarea {
width: 100%;
min-height: 118px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.045);
background: transparent;
color: rgba(245, 245, 250, 0.84);
font: inherit;
font-size: 14px;
line-height: 1.45;
outline: none;
resize: vertical;
}
.ops-activity-composer textarea::placeholder {
color: rgba(245, 245, 250, 0.34);
}
.ops-activity-composer__toolbar {
justify-content: flex-start;
}
.ops-activity-send {
margin-left: auto;
background: rgba(255, 255, 255, 0.16);
color: rgba(245, 245, 250, 0.74);
}
.ops-activity-send:disabled,
.comment-card-modal__footer button:disabled {
cursor: default;
opacity: 0.55;
transform: none;
}
.comment-thread__list {
display: grid;
gap: 10px;
} }
.comment-thread-empty { .comment-thread-empty {
color: var(--muted); color: var(--ops-detail-muted);
font-size: 12px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
} }
.comment-thread-message { .comment-thread-message {
display: grid; display: grid;
gap: 6px; gap: 7px;
border-radius: 10px; border: 1px solid var(--ops-detail-border);
background: rgba(255, 255, 255, 0.045); border-radius: 16px;
padding: 9px; background: rgba(255, 255, 255, 0.026);
padding: 11px 12px;
} }
.comment-thread-message__head { .comment-thread-message__head {
@ -1797,8 +2098,8 @@ header {
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
color: rgba(245, 245, 250, 0.56); color: rgba(245, 245, 250, 0.5);
font-size: 10px; font-size: 11px;
font-weight: 700; font-weight: 700;
} }
@ -1811,32 +2112,59 @@ header {
} }
.comment-thread-message__body { .comment-thread-message__body {
color: rgba(245, 245, 250, 0.78); color: rgba(245, 245, 250, 0.76);
font-size: 12px; font-size: 13px;
line-height: 1.42; line-height: 1.45;
white-space: pre-wrap; white-space: pre-wrap;
} }
.comment-card-modal__footer { .comment-card-modal__footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
display: grid; display: flex;
grid-template-columns: 1fr 1fr; justify-content: flex-end;
gap: 8px; gap: 10px;
padding: 12px 14px; padding: 14px 32px 18px;
background: color-mix(in srgb, var(--modal-bg) var(--modal-bg-alpha, 100%), transparent); background: var(--ops-detail-bg);
border-top: 1px solid var(--modal-border); border-top: 1px solid rgba(255, 255, 255, 0.04);
} }
.comment-card-modal__footer .primary-btn, .comment-card-modal__footer .primary-btn,
.comment-card-modal__footer .secondary-btn { .comment-card-modal__footer .secondary-btn {
width: 100%; min-width: 148px;
} }
.comment-card-modal .error-text { .comment-card-modal .error-text {
min-height: 16px; min-height: 16px;
color: var(--error); color: var(--error);
font-size: 12px; font-size: 12px;
font-weight: 700;
}
@media (max-width: 720px) {
.comment-card-modal {
top: 14px;
left: 12px;
width: calc(100vw - 24px);
max-height: calc(100vh - 28px);
border-radius: 24px;
}
.comment-card-modal__header,
.comment-card-modal__body,
.comment-card-modal__footer {
padding-left: 18px;
padding-right: 18px;
}
.ops-detail-dropzone {
grid-template-columns: 30px minmax(0, 1fr);
}
.ops-detail-dropzone .comment-attach-button {
grid-column: 2;
justify-self: start;
}
} }
.settings-panel { .settings-panel {

220
frontend/dcViewer.js
View File

@ -57,11 +57,16 @@ const commentModal = document.getElementById("commentModal");
const commentModalHeader = document.getElementById("commentModalHeader"); const commentModalHeader = document.getElementById("commentModalHeader");
const commentModalClose = document.getElementById("commentModalClose"); const commentModalClose = document.getElementById("commentModalClose");
const commentModalSubtitle = document.getElementById("commentModalSubtitle"); const commentModalSubtitle = document.getElementById("commentModalSubtitle");
const commentModalEditedMeta = document.getElementById("commentModalEditedMeta");
const commentTitleInput = document.getElementById("commentTitleInput"); const commentTitleInput = document.getElementById("commentTitleInput");
const commentBodyInput = document.getElementById("commentBodyInput"); const commentBodyInput = document.getElementById("commentBodyInput");
const commentDropzone = document.getElementById("commentDropzone");
const commentAttachButton = document.getElementById("commentAttachButton"); const commentAttachButton = document.getElementById("commentAttachButton");
const commentAttachmentInput = document.getElementById("commentAttachmentInput"); const commentAttachmentInput = document.getElementById("commentAttachmentInput");
const commentAttachmentGrid = document.getElementById("commentAttachmentGrid"); const commentAttachmentGrid = document.getElementById("commentAttachmentGrid");
const commentSubitemsSection = document.getElementById("commentSubitemsSection");
const commentSubitemsList = document.getElementById("commentSubitemsList");
const commentAddSubitemButton = document.getElementById("commentAddSubitemButton");
const commentThreadList = document.getElementById("commentThreadList"); const commentThreadList = document.getElementById("commentThreadList");
const commentReplyInput = document.getElementById("commentReplyInput"); const commentReplyInput = document.getElementById("commentReplyInput");
const commentReplyAttachButton = document.getElementById("commentReplyAttachButton"); const commentReplyAttachButton = document.getElementById("commentReplyAttachButton");
@ -70,6 +75,7 @@ const commentReplyAttachmentGrid = document.getElementById("commentReplyAttachme
const commentModalError = document.getElementById("commentModalError"); const commentModalError = document.getElementById("commentModalError");
const commentCancelButton = document.getElementById("commentCancelButton"); const commentCancelButton = document.getElementById("commentCancelButton");
const commentApplyButton = document.getElementById("commentApplyButton"); const commentApplyButton = document.getElementById("commentApplyButton");
const commentApplyInlineButton = document.getElementById("commentApplyInlineButton");
const treeContainer = document.getElementById("treeContainer"); const treeContainer = document.getElementById("treeContainer");
const displayModeControl = document.getElementById("displayModeControl"); const displayModeControl = document.getElementById("displayModeControl");
const displayModeSelectHost = document.getElementById("displayModeSelect"); const displayModeSelectHost = document.getElementById("displayModeSelect");
@ -297,6 +303,7 @@ let activeCommentId = null;
let hoverCommentId = null; let hoverCommentId = null;
let commentDraftAttachments = []; let commentDraftAttachments = [];
let commentReplyAttachments = []; let commentReplyAttachments = [];
let commentDraftSubitems = [];
let commentTargetRaf = 0; let commentTargetRaf = 0;
let commentLongPressTimer = null; let commentLongPressTimer = null;
let commentLongPressStart = null; let commentLongPressStart = null;
@ -890,8 +897,16 @@ const openCommentContextMenuFromEvent = (event) => {
return true; return true;
}; };
const readImageFiles = async (fileList) => { const COMMENT_FILE_LIMIT_BYTES = 50 * 1024 * 1024;
const files = Array.from(fileList || []).filter((file) => file?.type?.startsWith("image/")).slice(0, 8);
const readAttachmentFiles = async (fileList) => {
const files = Array.from(fileList || [])
.filter((file) => file && file.size <= COMMENT_FILE_LIMIT_BYTES)
.slice(0, 8);
const skipped = Array.from(fileList || []).filter((file) => file && file.size > COMMENT_FILE_LIMIT_BYTES).length;
if (skipped && commentModalError) {
commentModalError.textContent = `Файлы больше 50 МБ не добавлены: ${skipped}`;
}
const readOne = (file) => new Promise((resolve) => { const readOne = (file) => new Promise((resolve) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => resolve({ reader.onload = () => resolve({
@ -908,21 +923,51 @@ const readImageFiles = async (fileList) => {
return items.filter(Boolean); return items.filter(Boolean);
}; };
const formatFileSize = (value) => {
const size = Number(value);
if (!Number.isFinite(size) || size <= 0) return "";
if (size >= 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(size >= 10 * 1024 * 1024 ? 0 : 1)} МБ`;
if (size >= 1024) return `${Math.round(size / 1024)} КБ`;
return `${Math.round(size)} Б`;
};
const renderAttachmentGrid = (grid, attachments, onRemove) => { const renderAttachmentGrid = (grid, attachments, onRemove) => {
if (!grid) return; if (!grid) return;
grid.replaceChildren(); grid.replaceChildren();
(attachments || []).forEach((attachment, index) => { (attachments || []).forEach((attachment, index) => {
const thumb = document.createElement("div"); const thumb = document.createElement("div");
thumb.className = "comment-attachment-thumb"; thumb.className = "comment-attachment-thumb";
const img = document.createElement("img"); const isImage = String(attachment.type || "").startsWith("image/") || /^data:image\//i.test(String(attachment.dataUrl || ""));
img.src = attachment.dataUrl; if (isImage) {
img.alt = attachment.name || "attachment"; const img = document.createElement("img");
img.src = attachment.dataUrl;
img.alt = attachment.name || "attachment";
thumb.appendChild(img);
} else {
const file = document.createElement("div");
file.className = "comment-attachment-file";
file.innerHTML = `
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v5h5"></path>
</svg>
`;
const meta = document.createElement("div");
meta.className = "comment-attachment-file__meta";
const name = document.createElement("strong");
name.textContent = attachment.name || "Файл";
const size = document.createElement("span");
size.textContent = formatFileSize(attachment.size) || attachment.type || "Файл";
meta.append(name, size);
file.appendChild(meta);
thumb.appendChild(file);
}
const remove = document.createElement("button"); const remove = document.createElement("button");
remove.type = "button"; remove.type = "button";
remove.setAttribute("aria-label", "Удалить картинку"); remove.setAttribute("aria-label", "Удалить файл");
remove.textContent = "×"; remove.textContent = "×";
remove.addEventListener("click", () => onRemove?.(index)); remove.addEventListener("click", () => onRemove?.(index));
thumb.append(img, remove); thumb.appendChild(remove);
grid.appendChild(thumb); grid.appendChild(thumb);
}); });
}; };
@ -934,10 +979,31 @@ const renderThreadAttachments = (container, attachments) => {
attachments.forEach((attachment) => { attachments.forEach((attachment) => {
const thumb = document.createElement("div"); const thumb = document.createElement("div");
thumb.className = "comment-attachment-thumb"; thumb.className = "comment-attachment-thumb";
const img = document.createElement("img"); const isImage = String(attachment.type || "").startsWith("image/") || /^data:image\//i.test(String(attachment.dataUrl || ""));
img.src = attachment.dataUrl; if (isImage) {
img.alt = attachment.name || "attachment"; const img = document.createElement("img");
thumb.appendChild(img); img.src = attachment.dataUrl;
img.alt = attachment.name || "attachment";
thumb.appendChild(img);
} else {
const file = document.createElement("div");
file.className = "comment-attachment-file";
file.innerHTML = `
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v5h5"></path>
</svg>
`;
const meta = document.createElement("div");
meta.className = "comment-attachment-file__meta";
const name = document.createElement("strong");
name.textContent = attachment.name || "Файл";
const size = document.createElement("span");
size.textContent = formatFileSize(attachment.size) || attachment.type || "Файл";
meta.append(name, size);
file.appendChild(meta);
thumb.appendChild(file);
}
grid.appendChild(thumb); grid.appendChild(thumb);
}); });
container.appendChild(grid); container.appendChild(grid);
@ -976,7 +1042,9 @@ const renderCommentThread = (comment) => {
const resetCommentModalAttachments = () => { const resetCommentModalAttachments = () => {
commentDraftAttachments = []; commentDraftAttachments = [];
commentReplyAttachments = []; commentReplyAttachments = [];
commentDraftSubitems = [];
renderModalAttachmentInputs(); renderModalAttachmentInputs();
renderCommentSubitems();
}; };
const renderModalAttachmentInputs = () => { const renderModalAttachmentInputs = () => {
@ -990,6 +1058,40 @@ const renderModalAttachmentInputs = () => {
}); });
}; };
const renderCommentSubitems = () => {
if (!commentSubitemsList || !commentSubitemsSection) return;
commentSubitemsList.replaceChildren();
const subitems = Array.isArray(commentDraftSubitems) ? commentDraftSubitems : [];
commentSubitemsSection.classList.toggle("hidden", !subitems.length);
subitems.forEach((subitem, index) => {
const row = document.createElement("label");
row.className = "ops-comment-subitem";
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = !!subitem.done;
checkbox.addEventListener("change", () => {
commentDraftSubitems[index] = { ...commentDraftSubitems[index], done: checkbox.checked };
});
const input = document.createElement("input");
input.type = "text";
input.value = subitem.title || "";
input.placeholder = "Новый подэлемент";
input.addEventListener("input", () => {
commentDraftSubitems[index] = { ...commentDraftSubitems[index], title: input.value };
});
const remove = document.createElement("button");
remove.type = "button";
remove.setAttribute("aria-label", "Удалить подэлемент");
remove.textContent = "×";
remove.addEventListener("click", () => {
commentDraftSubitems.splice(index, 1);
renderCommentSubitems();
});
row.append(checkbox, input, remove);
commentSubitemsList.appendChild(row);
});
};
const openCommentModalForTarget = () => { const openCommentModalForTarget = () => {
if (!commentContextTarget || !commentModal) return; if (!commentContextTarget || !commentModal) return;
commentsModeActive = true; commentsModeActive = true;
@ -1001,8 +1103,13 @@ const openCommentModalForTarget = () => {
commentBodyInput && (commentBodyInput.value = ""); commentBodyInput && (commentBodyInput.value = "");
commentReplyInput && (commentReplyInput.value = ""); commentReplyInput && (commentReplyInput.value = "");
if (commentModalSubtitle) { if (commentModalSubtitle) {
commentModalSubtitle.textContent = "BIM-COMMENT";
}
if (commentModalEditedMeta) {
const [x, y, z] = commentContextTarget.worldPos || []; const [x, y, z] = commentContextTarget.worldPos || [];
commentModalSubtitle.textContent = Number.isFinite(x) ? `Точка: ${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}` : "Новый таргет"; commentModalEditedMeta.textContent = Number.isFinite(x)
? `Последнее редактирование: новая точка ${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`
: "Последнее редактирование: новый комментарий";
} }
if (commentModalError) commentModalError.textContent = ""; if (commentModalError) commentModalError.textContent = "";
resetCommentModalAttachments(); resetCommentModalAttachments();
@ -1024,10 +1131,17 @@ const openCommentModalForComment = (commentId) => {
commentBodyInput && (commentBodyInput.value = comment.body || ""); commentBodyInput && (commentBodyInput.value = comment.body || "");
commentReplyInput && (commentReplyInput.value = ""); commentReplyInput && (commentReplyInput.value = "");
if (commentModalSubtitle) { if (commentModalSubtitle) {
commentModalSubtitle.textContent = `Создан: ${formatDateTime(comment.createdAt)} · Изменён: ${formatDateTime(comment.updatedAt)}`; commentModalSubtitle.textContent = comment.id || "BIM-COMMENT";
}
if (commentModalEditedMeta) {
commentModalEditedMeta.textContent = `Последнее редактирование: ${formatDateTime(comment.updatedAt || comment.createdAt)}`;
} }
if (commentModalError) commentModalError.textContent = ""; if (commentModalError) commentModalError.textContent = "";
resetCommentModalAttachments(); resetCommentModalAttachments();
commentDraftSubitems = Array.isArray(comment.subitems)
? comment.subitems.map((item) => ({ ...item }))
: [];
renderCommentSubitems();
renderCommentThread(comment); renderCommentThread(comment);
commentModalBackdrop?.classList.remove("hidden"); commentModalBackdrop?.classList.remove("hidden");
commentModal.classList.remove("hidden"); commentModal.classList.remove("hidden");
@ -1049,39 +1163,58 @@ const closeCommentModal = () => {
renderCommentTargets(); renderCommentTargets();
}; };
const buildCommentPayload = () => ({ const normalizedSubitemsDraft = () => (
...(commentContextTarget || {}), (commentDraftSubitems || [])
title: commentTitleInput?.value?.trim() || "", .map((item) => ({
body: commentBodyInput?.value?.trim() || "", id: item.id || `sub_${Date.now()}_${Math.random().toString(36).slice(2)}`,
attachments: commentDraftAttachments, title: String(item.title || "").trim(),
}); done: !!item.done,
}))
.filter((item) => item.title)
);
const buildCommentPayload = ({ title, body, replyBody } = {}) => {
const finalBody = body || replyBody || "";
return {
...(commentContextTarget || {}),
title: title || (finalBody ? finalBody.slice(0, 80) : "Комментарий"),
body: finalBody,
attachments: [...commentDraftAttachments, ...commentReplyAttachments].slice(0, 8),
subitems: normalizedSubitemsDraft(),
};
};
const applyCommentModal = async () => { const applyCommentModal = async () => {
if (isGuestMode()) return; if (isGuestMode()) return;
const title = commentTitleInput?.value?.trim() || ""; const title = commentTitleInput?.value?.trim() || "";
const body = commentBodyInput?.value?.trim() || ""; const body = commentBodyInput?.value?.trim() || "";
const replyBody = commentReplyInput?.value?.trim() || ""; const replyBody = commentReplyInput?.value?.trim() || "";
if (!title && !body && commentModalMode === "create") { if (!title && !body && !replyBody && !commentDraftAttachments.length && !commentReplyAttachments.length && !commentDraftSubitems.length && commentModalMode === "create") {
if (commentModalError) commentModalError.textContent = "Заполните тему или описание"; if (commentModalError) commentModalError.textContent = "Добавьте заголовок, описание, комментарий или файл";
return; return;
} }
if (commentApplyButton) { if (commentApplyButton) {
commentApplyButton.disabled = true; commentApplyButton.disabled = true;
commentApplyButton.textContent = "Сохранение..."; commentApplyButton.textContent = "Сохранение...";
} }
if (commentApplyInlineButton) {
commentApplyInlineButton.disabled = true;
}
try { try {
let payload = null; let payload = null;
if (commentModalMode === "create") { if (commentModalMode === "create") {
payload = await fetchJSON(COMMENTS_API, { payload = await fetchJSON(COMMENTS_API, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(buildCommentPayload()), body: JSON.stringify(buildCommentPayload({ title, body, replyBody })),
}); });
} else if (commentModalCommentId) { } else if (commentModalCommentId) {
const original = commentRecords.find((item) => item.id === commentModalCommentId); const original = commentRecords.find((item) => item.id === commentModalCommentId);
const subitems = normalizedSubitemsDraft();
const patchPayload = {}; const patchPayload = {};
if (!original || title !== (original.title || "")) patchPayload.title = title; if (!original || title !== (original.title || "")) patchPayload.title = title;
if (!original || body !== (original.body || "")) patchPayload.body = body; if (!original || body !== (original.body || "")) patchPayload.body = body;
if (JSON.stringify(subitems) !== JSON.stringify(original?.subitems || [])) patchPayload.subitems = subitems;
if (replyBody || commentReplyAttachments.length) { if (replyBody || commentReplyAttachments.length) {
patchPayload.message = { patchPayload.message = {
body: replyBody, body: replyBody,
@ -1117,6 +1250,9 @@ const applyCommentModal = async () => {
commentApplyButton.disabled = false; commentApplyButton.disabled = false;
commentApplyButton.textContent = "Применить"; commentApplyButton.textContent = "Применить";
} }
if (commentApplyInlineButton) {
commentApplyInlineButton.disabled = false;
}
} }
}; };
@ -4941,23 +5077,59 @@ const loadProjectSnapshot = async (project) => {
commentModalClose?.addEventListener("click", closeCommentModal); commentModalClose?.addEventListener("click", closeCommentModal);
commentCancelButton?.addEventListener("click", closeCommentModal); commentCancelButton?.addEventListener("click", closeCommentModal);
commentApplyButton?.addEventListener("click", applyCommentModal); commentApplyButton?.addEventListener("click", applyCommentModal);
commentApplyInlineButton?.addEventListener("click", applyCommentModal);
commentModalBackdrop?.addEventListener("click", (event) => { commentModalBackdrop?.addEventListener("click", (event) => {
if (event.target === commentModalBackdrop) closeCommentModal(); if (event.target === commentModalBackdrop) closeCommentModal();
}); });
commentAttachButton?.addEventListener("click", () => commentAttachmentInput?.click()); commentAttachButton?.addEventListener("click", () => commentAttachmentInput?.click());
commentReplyAttachButton?.addEventListener("click", () => commentReplyAttachmentInput?.click()); commentReplyAttachButton?.addEventListener("click", () => commentReplyAttachmentInput?.click());
commentAddSubitemButton?.addEventListener("click", () => {
commentDraftSubitems.push({
id: `sub_${Date.now()}_${Math.random().toString(36).slice(2)}`,
title: "",
done: false,
});
renderCommentSubitems();
const inputs = commentSubitemsList?.querySelectorAll?.(".ops-comment-subitem input[type='text']");
inputs?.[inputs.length - 1]?.focus?.();
});
commentAttachmentInput?.addEventListener("change", async (event) => { commentAttachmentInput?.addEventListener("change", async (event) => {
const files = await readImageFiles(event.target.files); const files = await readAttachmentFiles(event.target.files);
commentDraftAttachments = [...commentDraftAttachments, ...files].slice(0, 8); commentDraftAttachments = [...commentDraftAttachments, ...files].slice(0, 8);
event.target.value = ""; event.target.value = "";
renderModalAttachmentInputs(); renderModalAttachmentInputs();
}); });
commentReplyAttachmentInput?.addEventListener("change", async (event) => { commentReplyAttachmentInput?.addEventListener("change", async (event) => {
const files = await readImageFiles(event.target.files); const files = await readAttachmentFiles(event.target.files);
commentReplyAttachments = [...commentReplyAttachments, ...files].slice(0, 8); commentReplyAttachments = [...commentReplyAttachments, ...files].slice(0, 8);
event.target.value = ""; event.target.value = "";
renderModalAttachmentInputs(); renderModalAttachmentInputs();
}); });
if (commentDropzone) {
commentDropzone.addEventListener("click", (event) => {
if (event.target?.closest?.("button,input,.comment-attachment-thumb")) return;
commentAttachmentInput?.click();
});
["dragenter", "dragover"].forEach((type) => {
commentDropzone.addEventListener(type, (event) => {
event.preventDefault();
event.stopPropagation();
commentDropzone.classList.add("drag-over");
});
});
["dragleave", "drop"].forEach((type) => {
commentDropzone.addEventListener(type, (event) => {
event.preventDefault();
event.stopPropagation();
commentDropzone.classList.remove("drag-over");
});
});
commentDropzone.addEventListener("drop", async (event) => {
const files = await readAttachmentFiles(event.dataTransfer?.files);
commentDraftAttachments = [...commentDraftAttachments, ...files].slice(0, 8);
renderModalAttachmentInputs();
});
}
if (!isGuestMode()) { if (!isGuestMode()) {
loadProjectsList().catch(() => { loadProjectsList().catch(() => {
templatesMenu?.setData({ templates: templateFallbacks, projects: [], error: "API недоступно" }); templatesMenu?.setData({ templates: templateFallbacks, projects: [], error: "API недоступно" });

153
frontend/index.html
View File

@ -134,7 +134,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./dcViewer.css?v=24"> <link rel="stylesheet" href="./dcViewer.css?v=25">
</head> </head>
<body> <body>
<header> <header>
@ -293,51 +293,126 @@
<div id="objectModalBackdrop" class="modal-backdrop hidden"></div> <div id="objectModalBackdrop" class="modal-backdrop hidden"></div>
<div id="objectModal" class="templates-panel measurement-modal hidden"></div> <div id="objectModal" class="templates-panel measurement-modal hidden"></div>
<div id="commentModalBackdrop" class="modal-backdrop hidden"></div> <div id="commentModalBackdrop" class="modal-backdrop hidden"></div>
<div id="commentModal" class="comment-card-modal hidden" role="dialog" aria-modal="true" aria-label="Комментарий к модели"> <div id="commentModal" class="comment-card-modal ops-comment-detail hidden" role="dialog" aria-modal="true" aria-label="Комментарий к модели">
<div class="comment-card-modal__header" id="commentModalHeader"> <div class="comment-card-modal__header" id="commentModalHeader">
<div class="comment-card-modal__titles"> <div class="ops-detail-nav">
<div class="comment-card-modal__title">Комментарий к модели</div> <button class="ops-detail-icon-btn" type="button" aria-label="Назад" title="Назад">
<div class="comment-card-modal__subtitle" id="commentModalSubtitle">Новый таргет</div> <svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 7 9 12l5 5"></path>
</svg>
</button>
<button class="ops-detail-icon-btn" type="button" aria-label="Развернуть" title="Развернуть">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 5h5v5M19 5l-7 7M10 19H5v-5M5 19l7-7"></path>
</svg>
</button>
</div>
<div class="ops-detail-actions">
<button class="ops-detail-icon-btn" type="button" aria-label="Уведомления" title="Уведомления">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"></path>
<path d="M10 21h4"></path>
</svg>
</button>
<button class="ops-detail-icon-btn" type="button" aria-label="Ещё" title="Ещё">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 12h.01M18 12h.01M6 12h.01"></path>
</svg>
</button>
<button class="ops-detail-icon-btn modal-close" id="commentModalClose" type="button" aria-label="Закрыть" title="Закрыть">
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</button>
</div> </div>
<button class="modal-close inspector-collapse-btn" id="commentModalClose" type="button" aria-label="Закрыть">
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</button>
</div> </div>
<div class="comment-card-modal__body"> <div class="comment-card-modal__body">
<label class="comment-field"> <section class="ops-detail-hero">
<span>Тема</span> <div class="comment-card-modal__subtitle" id="commentModalSubtitle">BIM-COMMENT</div>
<input type="text" id="commentTitleInput" autocomplete="off" placeholder="Тема комментария"> <input class="ops-detail-title-input" type="text" id="commentTitleInput" autocomplete="off" placeholder="Новый комментарий">
</label> <textarea class="ops-detail-description-input" id="commentBodyInput" rows="2" placeholder="Нажмите, чтобы добавить описание"></textarea>
<label class="comment-field"> <div class="ops-detail-meta-row">
<span>Описание</span> <svg viewBox="0 0 24 24" aria-hidden="true">
<textarea id="commentBodyInput" rows="5" placeholder="Описание комментария"></textarea> <path d="M3 12a9 9 0 1 0 3-6.7M3 4v6h6"></path>
</label> <path d="M12 7v5l3 2"></path>
<div class="comment-attachments"> </svg>
<div class="comment-attachments__head"> <span id="commentModalEditedMeta">Последнее редактирование: только что</span>
<span>Картинки</span>
<button type="button" class="comment-attach-button" id="commentAttachButton">Добавить</button>
<input type="file" id="commentAttachmentInput" accept="image/*" multiple hidden>
</div> </div>
<div class="ops-detail-pills">
<button class="ops-detail-pill" id="commentAddSubitemButton" type="button">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3 4 7l8 4 8-4-8-4ZM4 12l8 4 8-4M4 17l8 4 8-4"></path>
</svg>
<span>Добавить подэлемент</span>
</button>
</div>
</section>
<section class="ops-comment-subitems hidden" id="commentSubitemsSection">
<div class="ops-detail-section-title">Подэлементы</div>
<div class="ops-comment-subitems__list" id="commentSubitemsList"></div>
</section>
<section class="comment-attachments ops-detail-dropzone" id="commentDropzone">
<div class="ops-detail-dropzone__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 16V7"></path>
<path d="m8 11 4-4 4 4"></path>
<path d="M20 16.5a4.5 4.5 0 0 0-8.7-1.6A3.5 3.5 0 1 0 6.5 19H18a2 2 0 0 0 2-2.5Z"></path>
</svg>
</div>
<div class="ops-detail-dropzone__copy">
<strong>Перетащите файлы сюда или нажмите для выбора</strong>
<span>Любой формат, несколько файлов за раз, до 50 МБ на файл</span>
</div>
<button type="button" class="comment-attach-button" id="commentAttachButton">Выбрать</button>
<input type="file" id="commentAttachmentInput" multiple hidden>
<div class="comment-attachment-grid" id="commentAttachmentGrid"></div> <div class="comment-attachment-grid" id="commentAttachmentGrid"></div>
</div> </section>
<div class="comment-thread">
<div class="comment-thread__title">Комментарии</div> <section class="comment-thread ops-detail-activity">
<div class="comment-thread__list" id="commentThreadList"></div> <div class="ops-detail-section-head">
<label class="comment-field comment-field--reply"> <div class="comment-thread__title">Активность</div>
<span>Новый комментарий</span> <div class="ops-detail-section-actions">
<textarea id="commentReplyInput" rows="3" placeholder="Оставить комментарий"></textarea> <button class="ops-detail-mini-btn" type="button" aria-label="Сортировка" title="Сортировка">
</label> <svg viewBox="0 0 24 24" aria-hidden="true">
<div class="comment-attachments comment-attachments--reply"> <path d="M4 6h12M4 12h8M4 18h4M18 8v10M15 15l3 3 3-3"></path>
<div class="comment-attachments__head"> </svg>
<span>Картинки к ответу</span> </button>
<button type="button" class="comment-attach-button" id="commentReplyAttachButton">Добавить</button> <button class="ops-detail-mini-btn" type="button" aria-label="Фильтр" title="Фильтр">
<input type="file" id="commentReplyAttachmentInput" accept="image/*" multiple hidden> <svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 6h16M7 12h10M10 18h4"></path>
</svg>
</button>
</div> </div>
<div class="comment-attachment-grid" id="commentReplyAttachmentGrid"></div>
</div> </div>
</div> <label class="ops-activity-composer">
<span>Добавить комментарий</span>
<textarea id="commentReplyInput" rows="5" placeholder="Добавить комментарий"></textarea>
<div class="ops-activity-composer__toolbar">
<button type="button" class="ops-detail-mini-btn" id="commentReplyAttachButton" aria-label="Прикрепить файл" title="Прикрепить файл">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m21.4 11.6-8.5 8.5a6 6 0 0 1-8.5-8.5l8.5-8.5a4 4 0 0 1 5.7 5.7l-8.5 8.5a2 2 0 0 1-2.8-2.8l7.8-7.8"></path>
</svg>
</button>
<button type="button" class="ops-detail-mini-btn" aria-label="Реакция" title="Реакция">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"></path>
<path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"></path>
</svg>
</button>
<button type="button" class="ops-activity-send" id="commentApplyInlineButton" aria-label="Отправить комментарий" title="Отправить комментарий">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 19V5"></path>
<path d="m5 12 7-7 7 7"></path>
</svg>
</button>
<input type="file" id="commentReplyAttachmentInput" multiple hidden>
</div>
</label>
<div class="comment-attachment-grid comment-attachment-grid--reply" id="commentReplyAttachmentGrid"></div>
<div class="comment-thread__list" id="commentThreadList"></div>
</section>
<div class="error-text" id="commentModalError"></div> <div class="error-text" id="commentModalError"></div>
</div> </div>
<div class="comment-card-modal__footer"> <div class="comment-card-modal__footer">
@ -494,6 +569,6 @@
<input id="fileInput" class="hidden" type="file" <input id="fileInput" class="hidden" type="file"
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl"> accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
<script type="module" src="./dcViewer.js?v=28"></script> <script type="module" src="./dcViewer.js?v=29"></script>
</body> </body>
</html> </html>

45
server/index.js
View File

@ -1578,22 +1578,47 @@ const sanitizeCommentAttachments = (value) => {
return []; return [];
} }
const dataUrl = typeof item.dataUrl === "string" ? item.dataUrl : ""; const dataUrl = typeof item.dataUrl === "string" ? item.dataUrl : "";
if (!/^data:image\/(png|jpe?g|webp|gif);base64,/i.test(dataUrl)) { if (!/^data:[^;,]+\/?[^;,]*;base64,/i.test(dataUrl)) {
return []; return [];
} }
if (dataUrl.length > 4_500_000) { const size = Number(item.size);
if (Number.isFinite(size) && size > 50 * 1024 * 1024) {
return [];
}
if (dataUrl.length > 70_000_000) {
return []; return [];
} }
return [{ return [{
id: stringOrNull(item.id) || `att_${randomBase64Url(8)}`, id: stringOrNull(item.id) || `att_${randomBase64Url(8)}`,
name: sanitizeFilename(item.name || "image", "image"), name: sanitizeFilename(item.name || "file", "file"),
type: stringOrNull(item.type) || "image", type: stringOrNull(item.type) || "application/octet-stream",
size: Number.isFinite(Number(item.size)) ? Number(item.size) : null, size: Number.isFinite(size) ? size : null,
dataUrl dataUrl
}]; }];
}); });
}; };
const sanitizeCommentSubitems = (value) => {
if (!Array.isArray(value)) {
return [];
}
return value.slice(0, 100).flatMap((item) => {
if (!item || typeof item !== "object") {
return [];
}
const title = sanitizeCommentText(item.title ?? item.text ?? item.name, 300);
if (!title) {
return [];
}
return [{
id: stringOrNull(item.id) || `sub_${randomBase64Url(8)}`,
title,
done: item.done === true,
createdAt: stringOrNull(item.createdAt) || nowIso()
}];
});
};
const resolveCommentSource = (payload = {}) => { const resolveCommentSource = (payload = {}) => {
const identity = resolveAssetIdentityFromPayload(payload); const identity = resolveAssetIdentityFromPayload(payload);
const rawSrc = stringOrNull(payload.src) || const rawSrc = stringOrNull(payload.src) ||
@ -1649,6 +1674,7 @@ const publicComment = (comment) => ({
objectId: comment.objectId || null, objectId: comment.objectId || null,
title: comment.title || "", title: comment.title || "",
body: comment.body || "", body: comment.body || "",
subitems: Array.isArray(comment.subitems) ? comment.subitems : [],
worldPos: comment.worldPos || null, worldPos: comment.worldPos || null,
createdAt: comment.createdAt, createdAt: comment.createdAt,
updatedAt: comment.updatedAt, updatedAt: comment.updatedAt,
@ -1722,6 +1748,7 @@ const handleCreateComment = async (req, res) => {
objectId: stringOrNull(payload?.objectId), objectId: stringOrNull(payload?.objectId),
title: title || "Комментарий", title: title || "Комментарий",
body, body,
subitems: sanitizeCommentSubitems(payload?.subitems),
worldPos, worldPos,
createdAt: now, createdAt: now,
updatedAt: now, updatedAt: now,
@ -1773,11 +1800,14 @@ const handlePatchComment = async (req, res, commentId) => {
} }
const hasTitle = Object.prototype.hasOwnProperty.call(payload, "title"); const hasTitle = Object.prototype.hasOwnProperty.call(payload, "title");
const hasBody = Object.prototype.hasOwnProperty.call(payload, "body"); const hasBody = Object.prototype.hasOwnProperty.call(payload, "body");
const hasSubitems = Object.prototype.hasOwnProperty.call(payload, "subitems");
const nextTitle = hasTitle ? sanitizeCommentText(payload.title, 180) || comment.title || "Комментарий" : comment.title; const nextTitle = hasTitle ? sanitizeCommentText(payload.title, 180) || comment.title || "Комментарий" : comment.title;
const nextBody = hasBody ? sanitizeCommentText(payload.body, 8000) : comment.body; const nextBody = hasBody ? sanitizeCommentText(payload.body, 8000) : comment.body;
const nextSubitems = hasSubitems ? sanitizeCommentSubitems(payload.subitems) : (Array.isArray(comment.subitems) ? comment.subitems : []);
const titleChanged = hasTitle && nextTitle !== comment.title; const titleChanged = hasTitle && nextTitle !== comment.title;
const bodyChanged = hasBody && nextBody !== comment.body; const bodyChanged = hasBody && nextBody !== comment.body;
if ((titleChanged || bodyChanged) && !isOwner) { const subitemsChanged = hasSubitems && JSON.stringify(nextSubitems) !== JSON.stringify(comment.subitems || []);
if ((titleChanged || bodyChanged || subitemsChanged) && !isOwner) {
sendJSON(res, 403, {ok: false, error: "comment_owner_required"}); sendJSON(res, 403, {ok: false, error: "comment_owner_required"});
return; return;
} }
@ -1787,6 +1817,9 @@ const handlePatchComment = async (req, res, commentId) => {
if (bodyChanged) { if (bodyChanged) {
comment.body = nextBody; comment.body = nextBody;
} }
if (subitemsChanged) {
comment.subitems = nextSubitems;
}
const nextMessage = buildCommentMessage(payload?.message || null, user); const nextMessage = buildCommentMessage(payload?.message || null, user);
if (nextMessage) { if (nextMessage) {
comment.messages = Array.isArray(comment.messages) ? comment.messages : []; comment.messages = Array.isArray(comment.messages) ? comment.messages : [];