105 lines
2.0 KiB
JavaScript
105 lines
2.0 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2022 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import './tp-lc-in.js';
|
|
import './tp-lc-out.js';
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
export class TpLcBlock extends LitElement {
|
|
static get blockStyles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
position: absolute;
|
|
padding: 10px;
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
}
|
|
|
|
.inputs, .outputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.inputs {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.outputs {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
tp-lc-in + tp-lc-in,
|
|
tp-lc-out + tp-lc-out {
|
|
margin-top: 10px;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const { } = this;
|
|
const inputs = this.inputs || [];
|
|
const outputs = this.outputs || [];
|
|
|
|
return html`
|
|
<div class="wrap">
|
|
${inputs.length > 0 ? html`
|
|
<div class="inputs">
|
|
${inputs.map(input => html`
|
|
<tp-lc-in .name=${input.name}></tp-lc-in>
|
|
`)}
|
|
</div>
|
|
` : null}
|
|
|
|
<div class="inner">
|
|
${this.renderContent()}
|
|
</div>
|
|
|
|
<div class="outputs">
|
|
${outputs.length > 0 ? html`
|
|
${outputs.map(input => html`
|
|
<tp-lc-out .name=${input.name}></tp-lc-out>
|
|
`)}
|
|
</div>
|
|
` : null}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
left: { type: Number },
|
|
top: { type: Number },
|
|
inputs: { type: Array },
|
|
output: { type: Array },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.inputs = [];
|
|
this.outputs = [];
|
|
}
|
|
|
|
shouldUpdate(changes) {
|
|
super.shouldUpdate(changes);
|
|
|
|
if (changes.has('left') || changes.has('top')) {
|
|
this.style.left = `${this.left || 0}px`;
|
|
this.style.top = `${this.top || 0}px`;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-lc-block', TpLcBlock);
|