@itk-viewer/element
Version:
Web Component for multi-dimensional viewer
84 lines (83 loc) • 3.01 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import './itk-viewer-element.js';
import './itk-viewport.js';
import './itk-view-3d.js';
import './itk-view-3d-vtkjs.js';
import './itk-view-controls-shoelace.js';
let ItkViewer3d = class ItkViewer3d extends LitElement {
constructor() {
super(...arguments);
this.viewer = createRef();
this.view = createRef();
this.controls = createRef();
this.hideScaleUi = false;
this.hideColorUi = false;
this.hideTransferFunctionUi = false;
}
getActor() {
return this.viewer.value?.getActor();
}
render() {
return html `
<itk-viewer class="fill" ${ref(this.viewer)}>
<itk-viewport class="fill">
<div style="position: relative" class="fill">
<div style="position: absolute; top: 0.25rem; left: 0.25rem">
<itk-view-controls-shoelace
view="3d"
${ref(this.controls)}
?hideScaleUi="${this.hideScaleUi}"
?hideColorUi="${this.hideColorUi}"
?hideTransferFunctionUi="${this.hideTransferFunctionUi}"
></itk-view-controls-shoelace>
</div>
<itk-view-3d ${ref(this.view)} class="fill">
<itk-view-3d-vtkjs></itk-view-3d-vtkjs>
</itk-view-3d>
</div>
</itk-viewport>
</itk-viewer>
`;
}
async firstUpdated() {
await this.updateComplete; // Wait for view to render
const viewActor = this.view.value.getActor();
const controls = this.controls.value;
controls.setActor(viewActor);
}
static { this.styles = css `
:host {
width: 100%;
height: 100%;
display: flex;
}
.fill {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
`; }
};
__decorate([
property({ type: Boolean })
], ItkViewer3d.prototype, "hideScaleUi", void 0);
__decorate([
property({ type: Boolean })
], ItkViewer3d.prototype, "hideColorUi", void 0);
__decorate([
property({ type: Boolean })
], ItkViewer3d.prototype, "hideTransferFunctionUi", void 0);
ItkViewer3d = __decorate([
customElement('itk-viewer-3d')
], ItkViewer3d);
export { ItkViewer3d };
//# sourceMappingURL=itk-viewer-3d.js.map