This commit is contained in:
gsinghpal
2026-04-14 08:05:56 -04:00
parent d3c8782505
commit b62d4b1f36
15 changed files with 1272 additions and 30 deletions

View File

@@ -18,10 +18,26 @@ html,body{width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-sy
.fmt-stl{background:rgba(76,175,80,.15);color:#2e7d32}
.fmt-brep{background:rgba(255,152,0,.15);color:#e65100}
.fmt-other{background:rgba(158,158,158,.15);color:#616161}
#toolbar{position:absolute;top:10px;left:10px;display:flex;gap:4px;z-index:100;flex-wrap:wrap;background:rgba(255,255,255,.85);padding:4px;border-radius:6px;backdrop-filter:blur(4px);box-shadow:0 1px 3px rgba(0,0,0,.1)}
#toolbar button{background:#fff;border:1px solid #ced4da;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;cursor:pointer;color:#495057;transition:all .15s;min-width:40px}
#toolbar button:hover{background:#0d6efd;color:#fff;border-color:#0d6efd}
#toolbar .btn-divider{width:1px;background:#dee2e6;margin:2px 4px}
</style>
</head>
<body>
<div id="viewer-container"></div>
<div id="toolbar">
<button onclick="setView('top')" title="Top view">Top</button>
<button onclick="setView('bottom')" title="Bottom view">Btm</button>
<button onclick="setView('front')" title="Front view">Front</button>
<button onclick="setView('back')" title="Back view">Back</button>
<button onclick="setView('left')" title="Left view">Left</button>
<button onclick="setView('right')" title="Right view">Right</button>
<button onclick="setView('iso')" title="Isometric view">Iso</button>
<span class="btn-divider"></span>
<button onclick="fitToView()" title="Fit to view">Fit</button>
<button onclick="takeScreenshot()" title="Take screenshot (PNG)">📷</button>
</div>
<div id="format-badge"></div>
<div id="loading"><div class="spinner"></div><div id="loading-msg">Loading 3D model...</div></div>
<div id="error"></div>
@@ -115,6 +131,106 @@ html,body{width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-sy
.catch(function(err) {
showError('Failed to load model: ' + err.message);
});
// ---- View preset functions (Top/Front/Side/Iso) ----
// Online3DViewer's internal viewer exposes a Camera object we can manipulate.
window.setView = function(view) {
try {
const v = viewer.GetViewer();
if (!v) return;
const camera = v.GetCamera();
if (!camera) return;
// Compute distance from current camera to keep zoom roughly consistent
const eye = camera.eye;
const center = camera.center;
const dx = eye.x - center.x, dy = eye.y - center.y, dz = eye.z - center.z;
const dist = Math.sqrt(dx*dx + dy*dy + dz*dz) || 100;
let newEye, newUp;
switch (view) {
case 'top':
newEye = new OV.Coord3D(center.x, center.y, center.z + dist);
newUp = new OV.Coord3D(0, 1, 0);
break;
case 'bottom':
newEye = new OV.Coord3D(center.x, center.y, center.z - dist);
newUp = new OV.Coord3D(0, 1, 0);
break;
case 'front':
newEye = new OV.Coord3D(center.x, center.y - dist, center.z);
newUp = new OV.Coord3D(0, 0, 1);
break;
case 'back':
newEye = new OV.Coord3D(center.x, center.y + dist, center.z);
newUp = new OV.Coord3D(0, 0, 1);
break;
case 'left':
newEye = new OV.Coord3D(center.x - dist, center.y, center.z);
newUp = new OV.Coord3D(0, 0, 1);
break;
case 'right':
newEye = new OV.Coord3D(center.x + dist, center.y, center.z);
newUp = new OV.Coord3D(0, 0, 1);
break;
case 'iso':
default:
const d = dist / Math.sqrt(3);
newEye = new OV.Coord3D(center.x + d, center.y - d, center.z + d);
newUp = new OV.Coord3D(0, 0, 1);
break;
}
const newCam = new OV.Camera(newEye, center, newUp, camera.fov);
v.SetCamera(newCam);
v.Render();
} catch(e) {
console.warn('setView failed:', e);
}
};
window.fitToView = function() {
try {
const v = viewer.GetViewer();
if (v && v.FitSphereToWindow) {
// FitSphereToWindow uses the model's bounding sphere
v.FitSphereToWindow(v.GetBoundingSphere(() => true), false);
v.Render();
}
} catch(e) {
console.warn('fitToView failed:', e);
}
};
window.takeScreenshot = function() {
try {
const v = viewer.GetViewer();
if (!v) return;
// Get the renderer's canvas and convert to PNG
const canvas = v.GetCanvas ? v.GetCanvas() : null;
if (!canvas) {
// Fallback: find canvas inside container
const c = container.querySelector('canvas');
if (!c) return;
downloadCanvas(c);
return;
}
downloadCanvas(canvas);
} catch(e) {
console.warn('screenshot failed:', e);
}
};
function downloadCanvas(canvas) {
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
const stamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
a.download = (fileName.replace(/\.[^.]+$/, '') || 'model') + '-' + stamp + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
}
})();
</script>
</body>

View File

@@ -10,6 +10,7 @@
import { Component, useState } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Dialog } from "@web/core/dialog/dialog";
export class Fp3dViewer extends Component {
static template = "fusion_plating_configurator.Fp3dViewer";
@@ -58,3 +59,60 @@ registry.category("fields").add("fp_3d_preview", {
component: Fp3dViewer,
supportedTypes: ["many2one"],
});
// =============================================================================
// 3D Viewer Dialog component (full-screen embedded viewer)
// =============================================================================
export class Fp3dViewerDialog extends Component {
static template = "fusion_plating_configurator.Fp3dViewerDialog";
static components = { Dialog };
static props = {
attachmentId: Number,
name: { type: String, optional: true },
close: { type: Function, optional: true },
};
setup() {
this.state = useState({ isMaximized: true });
}
get iframeSrc() {
const name = encodeURIComponent(this.props.name || "");
return `/fp/3d-viewer?id=${this.props.attachmentId}&name=${name}`;
}
get dialogSize() {
return this.state.isMaximized ? "fullscreen" : "xl";
}
get frameStyle() {
if (this.state.isMaximized) {
return "height: calc(98vh - 100px) !important;";
}
return "height: calc(85vh - 100px) !important;";
}
toggleSize() {
this.state.isMaximized = !this.state.isMaximized;
}
}
registry.category("dialog").add("Fp3dViewerDialog", Fp3dViewerDialog);
// Client action handler — opens the 3D viewer in a dialog within the same window.
// Triggered by Python returning:
// { type: 'ir.actions.client', tag: 'fp_3d_viewer_open',
// params: { attachment_id: N, name: "..." } }
function fp3dViewerOpenAction(env, action) {
const params = action.params || {};
if (!params.attachment_id) return Promise.resolve();
env.services.dialog.add(Fp3dViewerDialog, {
attachmentId: params.attachment_id,
name: params.name || "",
});
return Promise.resolve();
}
registry.category("actions").add("fp_3d_viewer_open", fp3dViewerOpenAction);

View File

@@ -0,0 +1,81 @@
/** @odoo-module **/
// Fusion Plating -- PDF Drawing Preview Widget
// Copyright 2026 Nexa Systems Inc.
// License OPL-1
//
// Custom many2many_binary widget that opens PDFs in the fusion_pdf_preview
// dialog instead of downloading them.
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import {
Many2ManyBinaryField,
many2ManyBinaryField,
} from "@web/views/fields/many2many_binary/many2many_binary_field";
export class FpPdfPreviewBinary extends Many2ManyBinaryField {
static template = "fusion_plating_configurator.FpPdfPreviewBinary";
setup() {
super.setup();
this.dialogService = useService("dialog");
}
onFileClick(ev, file) {
const isPdf = (file.mimetype === "application/pdf") ||
(file.name || "").toLowerCase().endsWith(".pdf");
const dialogs = registry.category("dialog");
if (isPdf && dialogs.contains("PDFViewerDialog")) {
ev.preventDefault();
ev.stopPropagation();
const PDFViewerDialog = dialogs.get("PDFViewerDialog");
const url = `/web/content/${file.id}?download=false`;
this.dialogService.add(PDFViewerDialog, {
url: url,
title: file.name || "Drawing",
reportName: "",
recordIds: "",
modelName: "ir.attachment",
});
}
// For non-PDF or when preview not available, default browser behavior
// (the <a href> with download attribute) kicks in because we don't
// prevent default.
}
}
export const fpPdfPreviewBinary = {
...many2ManyBinaryField,
component: FpPdfPreviewBinary,
};
registry.category("fields").add("fp_pdf_preview_binary", fpPdfPreviewBinary);
// Client action handler: open a PDF attachment in the fusion_pdf_preview dialog.
// Triggered by Python methods returning:
// { type: 'ir.actions.client', tag: 'fp_pdf_preview_open',
// params: { attachment_id: N, title: "..." } }
function fpPdfPreviewOpenAction(env, action) {
const params = action.params || {};
const attId = params.attachment_id;
if (!attId) return Promise.resolve();
const dialogs = registry.category("dialog");
const PDFViewerDialog = dialogs.contains("PDFViewerDialog") ? dialogs.get("PDFViewerDialog") : null;
if (!PDFViewerDialog) {
window.open(`/web/content/${attId}?download=false`, '_blank');
return Promise.resolve();
}
const url = `/web/content/${attId}?download=false`;
env.services.dialog.add(PDFViewerDialog, {
url: url,
title: params.title || 'Document',
reportName: '',
recordIds: '',
modelName: 'ir.attachment',
});
return Promise.resolve();
}
registry.category("actions").add("fp_pdf_preview_open", fpPdfPreviewOpenAction);

View File

@@ -0,0 +1,80 @@
/** @odoo-module **/
// Fusion Plating -- Inline PDF Preview field widget
// Copyright 2026 Nexa Systems Inc.
// License OPL-1
//
// Field widget for Many2one(ir.attachment) fields that embeds the
// PDF.js viewer inline at a fixed height (one page at a time).
// A "Full Screen" button below opens the fusion_pdf_preview dialog.
import { Component, useState } from "@odoo/owl";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
export class FpPdfInlinePreview extends Component {
static template = "fusion_plating_configurator.FpPdfInlinePreview";
static props = { ...standardFieldProps };
setup() {
this.dialogService = useService("dialog");
this.state = useState({ hasAttachment: false, iframeSrc: "", attId: 0, name: "" });
this._updateState();
}
get rawValue() {
return this.props.record.data[this.props.name];
}
_updateState() {
const v = this.rawValue;
let attId = 0;
let name = "";
if (v) {
if (Array.isArray(v)) {
attId = v[0] || 0;
name = v[1] || "";
} else if (typeof v === "object" && v.id) {
attId = v.id;
name = v.display_name || "";
} else if (typeof v === "number") {
attId = v;
}
}
this.state.hasAttachment = !!attId;
this.state.attId = attId;
this.state.name = name;
if (attId) {
const fileUrl = `/web/content/${attId}?download=false`;
// PDF.js URL params: zoom=page-fit, no thumbs sidebar, single-page mode
this.state.iframeSrc =
`/fusion_pdf_preview/static/lib/pdfjs/web/viewer.html` +
`?file=${encodeURIComponent(fileUrl)}` +
`#zoom=page-fit&pagemode=none&scrollmode=3`;
}
}
onPatched() {
this._updateState();
}
openFullScreen() {
if (!this.state.attId) return;
const dialogs = registry.category("dialog");
if (!dialogs.contains("PDFViewerDialog")) return;
const PDFViewerDialog = dialogs.get("PDFViewerDialog");
const url = `/web/content/${this.state.attId}?download=false`;
this.dialogService.add(PDFViewerDialog, {
url: url,
title: this.state.name || "Drawing",
reportName: "",
recordIds: "",
modelName: "ir.attachment",
});
}
}
registry.category("fields").add("fp_pdf_inline_preview", {
component: FpPdfInlinePreview,
supportedTypes: ["many2one"],
});

View File

@@ -5,13 +5,22 @@
// =============================================================================
// -- Configurator two-column layout: 3/4 fields + 1/4 preview --
// When the preview column is hidden (no 3D model AND no drawings), the
// fields column expands to full width via the :has() selector below.
.o_fp_cfg_layout {
display: grid;
grid-template-columns: 1fr 320px;
grid-template-columns: 1fr 380px;
gap: 16px;
align-items: start;
}
// Full width when right column has no visible content
.o_fp_cfg_layout:has(> .o_fp_cfg_preview.o_invisible_modifier),
.o_fp_cfg_layout:has(> .o_fp_cfg_preview[style*="display: none"]),
.o_fp_cfg_layout:has(> .o_fp_cfg_preview[style*="display:none"]) {
grid-template-columns: 1fr;
}
.o_fp_cfg_fields {
min-width: 0;
}
@@ -19,6 +28,18 @@
.o_fp_cfg_preview {
position: sticky;
top: 16px;
// Force all field widgets (3D viewer, Html drawing preview) to be
// block-level + full width so the 3D and PDF iframes match exactly.
.o_field_widget,
> div > .o_field_widget {
display: block;
width: 100%;
}
iframe {
display: block;
}
}
// Responsive: stack on narrow screens
@@ -50,14 +71,73 @@
.o_fp_3d_iframe {
width: 100%;
height: 500px;
height: 450px;
border: 1px solid $border-color;
border-radius: 0.5rem;
background-color: #f0f2f5;
display: block;
}
// Inside the preview column, make iframe taller
// Inside the preview column: same height as the PDF preview iframe
.o_fp_cfg_preview .o_fp_3d_iframe {
height: 600px;
height: 450px;
}
// -- 3D Viewer Dialog (full-screen modal) --
.o_fp_3d_dialog {
.modal-body {
padding: 0;
}
}
.o_fp_3d_dialog_body {
width: 100%;
background-color: #f0f2f5;
overflow: hidden;
}
.o_fp_3d_dialog_iframe {
width: 100%;
border: 0;
display: block;
background-color: #f0f2f5;
}
.o_fp_3d_dialog_actions {
padding: 8px 12px;
text-align: right;
border-top: 1px solid var(--bs-border-color, #dee2e6);
background-color: var(--bs-body-bg);
}
// -- Inline PDF preview widget (fp_pdf_inline_preview) --
.o_fp_pdf_inline_root {
width: 100%;
}
.o_fp_pdf_inline_frame_wrap {
width: 100%;
height: 450px;
border: 1px solid $border-color;
border-radius: 0.5rem;
overflow: hidden;
background-color: #f0f2f5;
}
.o_fp_pdf_inline_iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.o_fp_pdf_inline_placeholder {
border: 2px dashed $border-color;
border-radius: 0.5rem;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--bs-tertiary-bg);
}

View File

@@ -18,4 +18,33 @@
</div>
</t>
<t t-name="fusion_plating_configurator.Fp3dViewerDialog">
<Dialog title.translate="3D Model Viewer"
size="dialogSize"
contentClass="'o_fp_3d_dialog'"
footer="false">
<div class="o_fp_3d_dialog_body">
<iframe t-att-src="iframeSrc"
t-att-style="frameStyle"
class="o_fp_3d_dialog_iframe"
frameborder="0"
allowfullscreen="true"/>
</div>
<div class="o_fp_3d_dialog_actions">
<button type="button"
class="btn btn-sm btn-outline-secondary"
t-on-click="toggleSize">
<i t-att-class="state.isMaximized ? 'fa fa-compress me-1' : 'fa fa-expand me-1'"/>
<t t-if="state.isMaximized">Restore</t>
<t t-else="">Maximize</t>
</button>
<button type="button"
class="btn btn-sm btn-secondary ms-2"
t-on-click="props.close">
Close
</button>
</div>
</Dialog>
</t>
</templates>

View File

@@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="fusion_plating_configurator.FpPdfPreviewBinary">
<div t-attf-class="oe_fileupload {{props.className ? props.className : ''}}" aria-atomic="true">
<div class="o_attachments">
<t t-foreach="files" t-as="file" t-key="file_index">
<t t-set="editable" t-value="!props.readonly"/>
<t t-set="ext" t-value="getExtension(file)"/>
<t t-set="url" t-value="getUrl(file.id)"/>
<t t-set="isPdf" t-value="(file.mimetype === 'application/pdf') or (file.name and file.name.toLowerCase().endsWith('.pdf'))"/>
<div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' }"
t-att-title="file.name">
<div class="o_attachment_wrap">
<div class="o_image_box float-start"
t-att-data-tooltip="isPdf ? 'Preview ' + file.name : 'Download ' + file.name">
<a t-att-href="url"
t-on-click="(ev) => this.onFileClick(ev, file)"
t-att-download="isPdf ? undefined : ''"
aria-label="Open">
<img t-if="isImage(file)"
class="o_preview_image o_hover object-fit-cover rounded align-baseline"
t-attf-src="/web/image/{{ file.id }}"
onerror="this.src = '/web/static/img/mimetypes/image.svg'"/>
<span t-else="" class="o_image o_preview_image o_hover"
t-att-data-mimetype="file.mimetype"
t-att-data-ext="ext" role="img"/>
</a>
</div>
<div class="caption">
<a class="ml4"
t-att-data-tooltip="isPdf ? 'Preview ' + file.name : 'Download ' + file.name"
t-att-href="url"
t-on-click="(ev) => this.onFileClick(ev, file)"
t-att-download="isPdf ? undefined : ''"><t t-esc="file.name"/></a>
</div>
<div class="caption small">
<a class="ml4 small text-uppercase"
t-att-href="url"
t-on-click="(ev) => this.onFileClick(ev, file)"
t-att-download="isPdf ? undefined : ''">
<b><t t-esc="ext"/></b>
</a>
</div>
<div class="o_attachment_uploaded">
<i class="text-success fa fa-check" role="img"
aria-label="Uploaded" title="Uploaded"/>
</div>
<div t-if="editable" class="o_attachment_delete"
t-on-click.stop="() => this.onFileRemove(file.id)">
<span role="img" aria-label="Delete" title="Delete">×</span>
</div>
</div>
</div>
</t>
</div>
<div t-if="!props.readonly and (!props.numberOfFiles or files.length &lt; props.numberOfFiles)"
class="oe_add">
<FileInput acceptedFileExtensions="props.acceptedFileExtensions"
multiUpload="true"
onUpload.bind="onFileUploaded"
resModel="props.record.resModel"
resId="props.record.resId or 0">
<button class="btn btn-secondary o_attach" data-tooltip="Attach">
<span class="fa fa-paperclip" aria-label="Attach"/>
<t t-esc="uploadText"/>
</button>
</FileInput>
</div>
</div>
</t>
</templates>

View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">
<t t-name="fusion_plating_configurator.FpPdfInlinePreview">
<div class="o_fp_pdf_inline_root">
<t t-if="state.hasAttachment">
<div class="o_fp_pdf_inline_frame_wrap">
<iframe t-att-src="state.iframeSrc"
class="o_fp_pdf_inline_iframe"
frameborder="0"
title="PDF Preview"/>
</div>
<div class="text-center mt-2">
<button type="button"
class="btn btn-sm btn-outline-primary"
t-on-click="openFullScreen">
<i class="fa fa-expand me-1"/>Full Screen
</button>
</div>
</t>
<t t-if="!state.hasAttachment">
<div class="o_fp_pdf_inline_placeholder text-center text-muted p-4">
<i class="fa fa-file-pdf-o fa-3x mb-2 d-block"/>
<span>No PDF attached.</span>
</div>
</t>
</div>
</t>
</templates>