256 lines
24 KiB
JavaScript
256 lines
24 KiB
JavaScript
|
'use strict';
|
||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
exports.declarePin = exports.generateStyle = exports.generateInputPinHTML = exports.generateOutputPinHTML = exports.Pin = exports.PinAction = void 0;
|
||
|
const structures_1 = require("@itharbors/structures");
|
||
|
const TYPE = {};
|
||
|
class PinAction extends structures_1.Action {
|
||
|
// details: D & PinActionDetail;
|
||
|
constructor(pin, details) {
|
||
|
const cDetails = details;
|
||
|
cDetails.blockName = pin.pathData.blockName;
|
||
|
cDetails.index = pin.pathData.index;
|
||
|
super(cDetails);
|
||
|
// this.details = cDetails;
|
||
|
this.pin = pin;
|
||
|
}
|
||
|
exec(params) {
|
||
|
}
|
||
|
revertAction() {
|
||
|
return new PinAction(this.pin, {});
|
||
|
}
|
||
|
}
|
||
|
exports.PinAction = PinAction;
|
||
|
class Pin {
|
||
|
constructor() {
|
||
|
this.color = 'white';
|
||
|
this.line = '';
|
||
|
this.style = '';
|
||
|
this.pathData = {
|
||
|
blockName: '',
|
||
|
index: 0,
|
||
|
};
|
||
|
this.refs = {};
|
||
|
}
|
||
|
init(details, desc, blockName, index) {
|
||
|
this.details = details;
|
||
|
this.pathData.blockName = blockName;
|
||
|
this.pathData.index = index;
|
||
|
this.desc = desc;
|
||
|
}
|
||
|
exec(action) {
|
||
|
if (!this.$root) {
|
||
|
return;
|
||
|
}
|
||
|
const nodeRoot = this.$root.getRootNode();
|
||
|
if (nodeRoot) {
|
||
|
nodeRoot.host.dispatch('dirty', {
|
||
|
detail: {
|
||
|
action,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
onInit() {
|
||
|
}
|
||
|
onUpdate() {
|
||
|
}
|
||
|
}
|
||
|
exports.Pin = Pin;
|
||
|
Pin.type = 'unknown';
|
||
|
// todo 考虑数据冲突
|
||
|
function generateIcon(pin) {
|
||
|
if (pin.icon) {
|
||
|
return /*html*/ `<ui-icon value="${pin.icon}"></ui-icon>`;
|
||
|
}
|
||
|
return '';
|
||
|
}
|
||
|
function generateTitle(pin) {
|
||
|
if (pin.name) {
|
||
|
return /*html*/ `<span class="name" title="${pin.name}">${pin.name}</span>`;
|
||
|
}
|
||
|
return '';
|
||
|
}
|
||
|
/**
|
||
|
* 生成 output pin 的 HTML
|
||
|
* @param pin
|
||
|
* @param details
|
||
|
* @returns
|
||
|
*/
|
||
|
function generateOutputPinHTML(pin, details) {
|
||
|
const type = pin.dataType;
|
||
|
const define = TYPE[type] || TYPE['unknown'];
|
||
|
const pinI = new define();
|
||
|
const color = pinI.color ? `--param-color: ${pinI.color};` : '';
|
||
|
const $pin = document.createElement('div');
|
||
|
$pin.classList.add('pin');
|
||
|
$pin.classList.add('out');
|
||
|
$pin.classList.add(type + '');
|
||
|
// @ts-ignore
|
||
|
$pin.__pin = pinI;
|
||
|
$pin.innerHTML = /*html*/ `${pinI.style ? `<style>${pinI.style}</style>` : ''}
|
||
|
<div class="body">
|
||
|
<div class="name">
|
||
|
${generateTitle(pin)}
|
||
|
${generateIcon(pin)}
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<v-graph-node-param ${pin.hidePin ? 'hidden' : ''} style="${color}" class="point" direction="output" name="${pin.tag}" type="${type}" role="right"></v-graph-node-param>`;
|
||
|
const $refList = $pin.querySelectorAll('[ref]');
|
||
|
Array.prototype.forEach.call($refList, ($ref) => {
|
||
|
const ref = $ref.getAttribute('ref');
|
||
|
if (ref) {
|
||
|
pinI.refs[ref] = $ref;
|
||
|
}
|
||
|
});
|
||
|
pinI.details = details;
|
||
|
// pinI.onInit();
|
||
|
// pinI.onUpdate(details);
|
||
|
return $pin;
|
||
|
}
|
||
|
exports.generateOutputPinHTML = generateOutputPinHTML;
|
||
|
/**
|
||
|
* 生成 input pin 的 HTML
|
||
|
* @param pin
|
||
|
* @param pinData
|
||
|
* @param blockName
|
||
|
* @param lineMap
|
||
|
* @returns
|
||
|
*/
|
||
|
function generateInputPinHTML(pin, pinDataList, index, blockName, lineMap) {
|
||
|
const type = pin.dataType;
|
||
|
const define = TYPE[type] || TYPE['unknown'];
|
||
|
const pinI = new define();
|
||
|
const color = pinI.color ? `--param-color: ${pinI.color};` : '';
|
||
|
let connected = false;
|
||
|
for (const id in lineMap) {
|
||
|
const line = lineMap[id];
|
||
|
if (line &&
|
||
|
line.output.node === blockName &&
|
||
|
line.output.param === pin.tag) {
|
||
|
connected = true;
|
||
|
}
|
||
|
}
|
||
|
const $pin = document.createElement('div');
|
||
|
$pin.classList.add('pin');
|
||
|
$pin.classList.add('in');
|
||
|
$pin.classList.add(type + '');
|
||
|
// @ts-ignore
|
||
|
$pin.__pin = pinI;
|
||
|
$pin.innerHTML = /*html*/ `${pinI.style ? `<style>${pinI.style}</style>` : ''}
|
||
|
<div class="body">
|
||
|
<div class="name">
|
||
|
${generateIcon(pin)}
|
||
|
${generateTitle(pin)}
|
||
|
</div>
|
||
|
${pinI.contentSlot ? `<div class="slot-content" ${connected ? 'hidden' : ''}>${pinI.contentSlot}</div>` : ''}
|
||
|
</div>
|
||
|
|
||
|
${pinI.childrenSlot ? `<div class="children" ${connected ? 'hidden' : ''}>${pinI.childrenSlot.map(child => '<div class="slot-children">' + child + '</div>').join('')}</div>` : ''}
|
||
|
<v-graph-node-param ${pin.hidePin ? 'hidden' : ''} style="${color}" class="point" direction="input" name="${pin.tag}" type="${type}" role="left"></v-graph-node-param>`;
|
||
|
const $refList = $pin.querySelectorAll('[ref]');
|
||
|
Array.prototype.forEach.call($refList, ($ref) => {
|
||
|
const ref = $ref.getAttribute('ref');
|
||
|
if (ref) {
|
||
|
pinI.refs[ref] = $ref;
|
||
|
}
|
||
|
});
|
||
|
const pinData = pinDataList[index];
|
||
|
pinI.init(pinData, pin, blockName, index);
|
||
|
pinI.$root = $pin;
|
||
|
pinI.onInit();
|
||
|
pinI.onUpdate();
|
||
|
return $pin;
|
||
|
}
|
||
|
exports.generateInputPinHTML = generateInputPinHTML;
|
||
|
/**
|
||
|
* 生成 pin 的样式代码
|
||
|
* @param config
|
||
|
* @returns
|
||
|
*/
|
||
|
function generateStyle(blockDesc) {
|
||
|
return /*css*/ `
|
||
|
.pin {
|
||
|
--param-color: #fff;
|
||
|
--line—margin: 6px;
|
||
|
|
||
|
line-height: calc(var(--header-height) - 4px);
|
||
|
margin: var(--line—margin) 10px 0 10px;
|
||
|
position: relative;
|
||
|
}
|
||
|
.pin:last-child {
|
||
|
padding-bottom: var(--line—margin);
|
||
|
}
|
||
|
.pin.in {
|
||
|
|
||
|
}
|
||
|
.pin.out {
|
||
|
text-align: right;
|
||
|
}
|
||
|
.pin.in > .point[hidden], .pin.out > .point[hidden] {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.pin.in > .point, .pin.out > .point {
|
||
|
display: block;
|
||
|
border: 1px solid var(--param-color);
|
||
|
transform: rotate(45deg);
|
||
|
width: 7px;
|
||
|
height: 7px;
|
||
|
position: absolute;
|
||
|
top: 6px;
|
||
|
transition: all 0.2s;
|
||
|
background: var(--background-color);
|
||
|
z-index: 1;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.pin.in > .point {
|
||
|
left: -14px;
|
||
|
}
|
||
|
.pin.out > .point {
|
||
|
right: -14px;
|
||
|
}
|
||
|
.pin.in > .point:hover,
|
||
|
.pin.in > .point[active],
|
||
|
.pin.out > .point:hover,
|
||
|
.pin.out > .point[active]
|
||
|
{
|
||
|
background: var(--param-color);
|
||
|
}
|
||
|
|
||
|
.pin > .body {
|
||
|
display: flex;
|
||
|
}
|
||
|
.pin > .body > .name {
|
||
|
flex: 1;
|
||
|
white-space: nowrap;
|
||
|
overflow: hidden;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
|
||
|
.pin > .body > .name > .name {
|
||
|
padding: 0 6px;
|
||
|
}
|
||
|
|
||
|
.pin > .body > .slot-content {
|
||
|
flex: 1;
|
||
|
display: flex;
|
||
|
width: 120px;
|
||
|
}
|
||
|
|
||
|
.pin > .children, .pin > .children > div {
|
||
|
margin-top: calc(var(--line—margin) * 0.5);
|
||
|
}
|
||
|
|
||
|
.pin > .body > .slot-content[hidden], .pin > .children[hidden] {
|
||
|
display: none;
|
||
|
}
|
||
|
`;
|
||
|
}
|
||
|
exports.generateStyle = generateStyle;
|
||
|
function declarePin(define) {
|
||
|
const type = define.type;
|
||
|
TYPE[type] = define;
|
||
|
}
|
||
|
exports.declarePin = declarePin;
|
||
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGluLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2Jsb2NrLWZvcmdlL3Bpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7OztBQWFiLHNEQUcrQjtBQU0vQixNQUFNLElBQUksR0FFTixFQUFFLENBQUM7QUFPUCxNQUFhLFNBQXdCLFNBQVEsbUJBQTJCO0lBSXBFLGdDQUFnQztJQUVoQyxZQUFZLEdBQVEsRUFBRSxPQUFVO1FBQzVCLE1BQU0sUUFBUSxHQUFHLE9BQThCLENBQUM7UUFDaEQsUUFBUSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQztRQUM1QyxRQUFRLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDO1FBQ3BDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNoQiwyQkFBMkI7UUFDM0IsSUFBSSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7SUFDbkIsQ0FBQztJQUVELElBQUksQ0FBQyxNQUVKO0lBRUQsQ0FBQztJQUVELFlBQVk7UUFDUixPQUFPLElBQUksU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDdkMsQ0FBQztDQUNKO0FBeEJELDhCQXdCQztBQUVELE1BQWEsR0FBRztJQUFoQjtRQUdJLFVBQUssR0FBRyxPQUFPLENBQUM7UUFDaEIsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLFVBQUssR0FBRyxFQUFFLENBQUM7UUFHWCxhQUFRLEdBQUc7WUFDUCxTQUFTLEVBQUUsRUFBRTtZQUNiLEtBQUssRUFBRSxDQUFDO1NBQ1gsQ0FBQztRQU9GLFNBQUksR0FBbUMsRUFBRSxDQUFDO0lBK0I5QyxDQUFDO0lBNUJHLElBQUksQ0FBQyxPQUFVLEVBQUUsSUFBcUIsRUFBRSxTQUFpQixFQUFFLEtBQWE7UUFDcEUsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7UUFDdkIsSUFB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
|