@xui/components
Version:
xUI Components for Angular
62 lines • 12.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { GraphViewService } from './graph-view.service';
import * as i0 from "@angular/core";
import * as i1 from "./graph-view.service";
import * as i2 from "@angular/cdk/drag-drop";
import * as i3 from "../icon/icon";
export class XuiNode {
constructor(graphViewService) {
this.graphViewService = graphViewService;
}
hasConnectedPort(port) {
return this.graphViewService.hasConnectedPort(this.id, port);
}
getPortGroup(port) {
return this.graphViewService.getGroup(port.groupId);
}
dragNode() {
this.graphViewService.dragMove();
}
drag(event) {
// console.log('dragging', event);
this.graphViewService.wireTool(this.id, 'input2', event.clientX, event.clientY);
if (event.clientX === 0 && event.clientY === 0) {
this.graphViewService.wireToolPath.set(null);
}
// event.preventDefault();
event.stopPropagation();
}
dragStart(event) {
event.dataTransfer.setData('text', 'foobar');
}
dragEnd() {
// this.parent.wireToolPath = null;
}
drop(event) {
const node = event.dataTransfer.getData('text');
const port = event.dataTransfer.getData('text/port');
console.log('drop', event, node);
}
denyConnection(event) {
// const node = event.dataTransfer!.getData('text');
// const port = event.dataTransfer!.getData('text/port');
//
// console.log('allow', node, port);
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiNode, deps: [{ token: i1.GraphViewService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XuiNode, selector: "xui-node", inputs: { id: "id", title: "title", inputs: "inputs", outputs: "outputs" }, ngImport: i0, template: "<div class=\"x-node\" cdkDrag (cdkDragMoved)=\"dragNode()\">\n <div class=\"x-node-header\" cdkDragHandle>{{ title }}</div>\n <div class=\"x-node-inputs\">\n @for (port of inputs; track port.id) {\n <div class=\"x-node-value\">\n <xui-icon\n draggable=\"true\"\n (drag)=\"drag($event)\"\n (dragstart)=\"dragStart($event)\"\n (dragend)=\"dragEnd()\"\n (drop)=\"drop($event)\"\n (dragover)=\"denyConnection($event)\"\n [style.color]=\"getPortGroup(port).color\"\n [attr.data-port]=\"port.id\"\n [icon]=\"hasConnectedPort(port.id) ? 'radio_button_checked' : 'radio_button_unchecked'\"\n ></xui-icon>\n {{ port.name }}\n </div>\n }\n </div>\n\n <div class=\"x-node-outputs\">\n @for (port of outputs; track port.id) {\n <div class=\"x-node-value\">\n {{ port.name }}\n <xui-icon\n (dragover)=\"denyConnection($event)\"\n (drop)=\"drop($event)\"\n [style.color]=\"getPortGroup(port).color\"\n [attr.data-port]=\"port.id\"\n [icon]=\"hasConnectedPort(port.id) ? 'radio_button_checked' : 'radio_button_unchecked'\"\n ></xui-icon>\n </div>\n }\n </div>\n\n <div class=\"x-node-extensions\">extensions</div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiNode, decorators: [{
type: Component,
args: [{ selector: 'xui-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-node\" cdkDrag (cdkDragMoved)=\"dragNode()\">\n <div class=\"x-node-header\" cdkDragHandle>{{ title }}</div>\n <div class=\"x-node-inputs\">\n @for (port of inputs; track port.id) {\n <div class=\"x-node-value\">\n <xui-icon\n draggable=\"true\"\n (drag)=\"drag($event)\"\n (dragstart)=\"dragStart($event)\"\n (dragend)=\"dragEnd()\"\n (drop)=\"drop($event)\"\n (dragover)=\"denyConnection($event)\"\n [style.color]=\"getPortGroup(port).color\"\n [attr.data-port]=\"port.id\"\n [icon]=\"hasConnectedPort(port.id) ? 'radio_button_checked' : 'radio_button_unchecked'\"\n ></xui-icon>\n {{ port.name }}\n </div>\n }\n </div>\n\n <div class=\"x-node-outputs\">\n @for (port of outputs; track port.id) {\n <div class=\"x-node-value\">\n {{ port.name }}\n <xui-icon\n (dragover)=\"denyConnection($event)\"\n (drop)=\"drop($event)\"\n [style.color]=\"getPortGroup(port).color\"\n [attr.data-port]=\"port.id\"\n [icon]=\"hasConnectedPort(port.id) ? 'radio_button_checked' : 'radio_button_unchecked'\"\n ></xui-icon>\n </div>\n }\n </div>\n\n <div class=\"x-node-extensions\">extensions</div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.GraphViewService }], propDecorators: { id: [{
type: Input
}], title: [{
type: Input
}], inputs: [{
type: Input
}], outputs: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9ncmFwaC12aWV3L25vZGUudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvZ3JhcGgtdmlldy9ub2RlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFMUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7Ozs7O0FBUXhELE1BQU0sT0FBTyxPQUFPO0lBTWxCLFlBQW9CLGdCQUFrQztRQUFsQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO0lBQUcsQ0FBQztJQUUxRCxnQkFBZ0IsQ0FBQyxJQUFZO1FBQzNCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUVELFlBQVksQ0FBQyxJQUFjO1FBQ3pCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDdEQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELElBQUksQ0FBQyxLQUFnQjtRQUNuQixrQ0FBa0M7UUFFbEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVoRixJQUFJLEtBQUssQ0FBQyxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssQ0FBQyxPQUFPLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDL0MsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDL0MsQ0FBQztRQUVELDBCQUEwQjtRQUMxQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFnQjtRQUN4QixLQUFLLENBQUMsWUFBYSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVELE9BQU87UUFDTCxtQ0FBbUM7SUFDckMsQ0FBQztJQUVELElBQUksQ0FBQyxLQUFnQjtRQUNuQixNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsWUFBYSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNqRCxNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsWUFBYSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUV0RCxPQUFPLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFnQjtRQUM3QixvREFBb0Q7UUFDcEQseURBQXlEO1FBQ3pELEVBQUU7UUFDRixvQ0FBb0M7UUFFcEMsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDOzhHQXZEVSxPQUFPO2tHQUFQLE9BQU8sNEhDVnBCLG95Q0FzQ0E7OzJGRDVCYSxPQUFPO2tCQU5uQixTQUFTOytCQUNFLFVBQVUsbUJBR0gsdUJBQXVCLENBQUMsTUFBTTtxRkFHdEMsRUFBRTtzQkFBVixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5vZGVHcm91cCwgTm9kZVBvcnQgfSBmcm9tICcuL2dyYXBoLXZpZXcudHlwZXMnO1xuaW1wb3J0IHsgR3JhcGhWaWV3U2VydmljZSB9IGZyb20gJy4vZ3JhcGgtdmlldy5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAneHVpLW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJ25vZGUuaHRtbCcsXG4gIHN0eWxlczogW10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFh1aU5vZGUge1xuICBASW5wdXQoKSBpZCE6IHN0cmluZztcbiAgQElucHV0KCkgdGl0bGUhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGlucHV0cyE6IE5vZGVQb3J0W107XG4gIEBJbnB1dCgpIG91dHB1dHMhOiBOb2RlUG9ydFtdO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZ3JhcGhWaWV3U2VydmljZTogR3JhcGhWaWV3U2VydmljZSkge31cblxuICBoYXNDb25uZWN0ZWRQb3J0KHBvcnQ6IHN0cmluZykge1xuICAgIHJldHVybiB0aGlzLmdyYXBoVmlld1NlcnZpY2UuaGFzQ29ubmVjdGVkUG9ydCh0aGlzLmlkLCBwb3J0KTtcbiAgfVxuXG4gIGdldFBvcnRHcm91cChwb3J0OiBOb2RlUG9ydCk6IE5vZGVHcm91cCB7XG4gICAgcmV0dXJuIHRoaXMuZ3JhcGhWaWV3U2VydmljZS5nZXRHcm91cChwb3J0Lmdyb3VwSWQpO1xuICB9XG5cbiAgZHJhZ05vZGUoKSB7XG4gICAgdGhpcy5ncmFwaFZpZXdTZXJ2aWNlLmRyYWdNb3ZlKCk7XG4gIH1cblxuICBkcmFnKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICAvLyBjb25zb2xlLmxvZygnZHJhZ2dpbmcnLCBldmVudCk7XG5cbiAgICB0aGlzLmdyYXBoVmlld1NlcnZpY2Uud2lyZVRvb2wodGhpcy5pZCwgJ2lucHV0MicsIGV2ZW50LmNsaWVudFgsIGV2ZW50LmNsaWVudFkpO1xuXG4gICAgaWYgKGV2ZW50LmNsaWVudFggPT09IDAgJiYgZXZlbnQuY2xpZW50WSA9PT0gMCkge1xuICAgICAgdGhpcy5ncmFwaFZpZXdTZXJ2aWNlLndpcmVUb29sUGF0aC5zZXQobnVsbCk7XG4gICAgfVxuXG4gICAgLy8gZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgfVxuXG4gIGRyYWdTdGFydChldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgZXZlbnQuZGF0YVRyYW5zZmVyIS5zZXREYXRhKCd0ZXh0JywgJ2Zvb2JhcicpO1xuICB9XG5cbiAgZHJhZ0VuZCgpIHtcbiAgICAvLyB0aGlzLnBhcmVudC53aXJlVG9vbFBhdGggPSBudWxsO1xuICB9XG5cbiAgZHJvcChldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgY29uc3Qgbm9kZSA9IGV2ZW50LmRhdGFUcmFuc2ZlciEuZ2V0RGF0YSgndGV4dCcpO1xuICAgIGNvbnN0IHBvcnQgPSBldmVudC5kYXRhVHJhbnNmZXIhLmdldERhdGEoJ3RleHQvcG9ydCcpO1xuXG4gICAgY29uc29sZS5sb2coJ2Ryb3AnLCBldmVudCwgbm9kZSk7XG4gIH1cblxuICBkZW55Q29ubmVjdGlvbihldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgLy8gY29uc3Qgbm9kZSA9IGV2ZW50LmRhdGFUcmFuc2ZlciEuZ2V0RGF0YSgndGV4dCcpO1xuICAgIC8vIGNvbnN0IHBvcnQgPSBldmVudC5kYXRhVHJhbnNmZXIhLmdldERhdGEoJ3RleHQvcG9ydCcpO1xuICAgIC8vXG4gICAgLy8gY29uc29sZS5sb2coJ2FsbG93Jywgbm9kZSwgcG9ydCk7XG5cbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ4LW5vZGVcIiBjZGtEcmFnIChjZGtEcmFnTW92ZWQpPVwiZHJhZ05vZGUoKVwiPlxuICA8ZGl2IGNsYXNzPVwieC1ub2RlLWhlYWRlclwiIGNka0RyYWdIYW5kbGU+e3sgdGl0bGUgfX08L2Rpdj5cbiAgPGRpdiBjbGFzcz1cIngtbm9kZS1pbnB1dHNcIj5cbiAgICBAZm9yIChwb3J0IG9mIGlucHV0czsgdHJhY2sgcG9ydC5pZCkge1xuICAgICAgPGRpdiBjbGFzcz1cIngtbm9kZS12YWx1ZVwiPlxuICAgICAgICA8eHVpLWljb25cbiAgICAgICAgICBkcmFnZ2FibGU9XCJ0cnVlXCJcbiAgICAgICAgICAoZHJhZyk9XCJkcmFnKCRldmVudClcIlxuICAgICAgICAgIChkcmFnc3RhcnQpPVwiZHJhZ1N0YXJ0KCRldmVudClcIlxuICAgICAgICAgIChkcmFnZW5kKT1cImRyYWdFbmQoKVwiXG4gICAgICAgICAgKGRyb3ApPVwiZHJvcCgkZXZlbnQpXCJcbiAgICAgICAgICAoZHJhZ292ZXIpPVwiZGVueUNvbm5lY3Rpb24oJGV2ZW50KVwiXG4gICAgICAgICAgW3N0eWxlLmNvbG9yXT1cImdldFBvcnRHcm91cChwb3J0KS5jb2xvclwiXG4gICAgICAgICAgW2F0dHIuZGF0YS1wb3J0XT1cInBvcnQuaWRcIlxuICAgICAgICAgIFtpY29uXT1cImhhc0Nvbm5lY3RlZFBvcnQocG9ydC5pZCkgPyAncmFkaW9fYnV0dG9uX2NoZWNrZWQnIDogJ3JhZGlvX2J1dHRvbl91bmNoZWNrZWQnXCJcbiAgICAgICAgPjwveHVpLWljb24+XG4gICAgICAgIHt7IHBvcnQubmFtZSB9fVxuICAgICAgPC9kaXY+XG4gICAgfVxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwieC1ub2RlLW91dHB1dHNcIj5cbiAgICBAZm9yIChwb3J0IG9mIG91dHB1dHM7IHRyYWNrIHBvcnQuaWQpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJ4LW5vZGUtdmFsdWVcIj5cbiAgICAgICAge3sgcG9ydC5uYW1lIH19XG4gICAgICAgIDx4dWktaWNvblxuICAgICAgICAgIChkcmFnb3Zlcik9XCJkZW55Q29ubmVjdGlvbigkZXZlbnQpXCJcbiAgICAgICAgICAoZHJvcCk9XCJkcm9wKCRldmVudClcIlxuICAgICAgICAgIFtzdHlsZS5jb2xvcl09XCJnZXRQb3J0R3JvdXAocG9ydCkuY29sb3JcIlxuICAgICAgICAgIFthdHRyLmRhdGEtcG9ydF09XCJwb3J0LmlkXCJcbiAgICAgICAgICBbaWNvbl09XCJoYXNDb25uZWN0ZWRQb3J0KHBvcnQuaWQpID8gJ3JhZGlvX2J1dHRvbl9jaGVja2VkJyA6ICdyYWRpb19idXR0b25fdW5jaGVja2VkJ1wiXG4gICAgICAgID48L3h1aS1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgfVxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwieC1ub2RlLWV4dGVuc2lvbnNcIj5leHRlbnNpb25zPC9kaXY+XG48L2Rpdj5cbiJdfQ==