super-hero/extensions/shader-graph/dist/block-forge/pin.js

'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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