## html
<div :class="node {{ showPortName ? 'show-port-name' : '' }}" style="transform:translate({{ x }}px,{{ y }}px)">
  <sf-template path="Blackprint/nodes/template/routes.sf"></sf-template>
  <div class="content">
	<div class="left-port">
	  <sf-template path="Blackprint/nodes/template/input-port.sf"></sf-template>
	</div>

  	<div class="center port-{{ _portLen }}"
		@contextmenu.stopAll.prevent="nodeMenu(event)"
		@dragmove="moveNode(event)"
		@pointerdown="swapZIndex(event)"
		@pointerover="nodeHovered(event)"
	  	@pointerout="nodeUnhovered(event)"
	></div>

	<div class="right-port">
	  <sf-template path="Blackprint/nodes/template/output-port.sf"></sf-template>
	</div>
  </div>
  
  <sf-template path="Blackprint/nodes/template/other.sf"></sf-template>
</div>

## scss-global
bpic-data-minimal {
	.left-port .name, .right-port .name {
		display: none !important;
	}

	.show-port-name {
		.content{
			display: flex !important;
			margin-top: 0 !important;
		}
		.left-port .name, .right-port .name {
			display: inline-flex !important;
		}
		.left-port {
			margin-right: 0 !important;
			width: auto;
			.input {
				padding-right: 10px !important;
			}
		}
		.right-port {
			margin-left: 0 !important;
			.output {
				padding-left: 10px !important;
			}
		}

		.center {
			position: relative;
			text-align: center;
			width: 15px;
			align-self: center;
			z-index: 1;
		}
	}

	.left-port {
		margin-right: 17px;
		input {
			display: inline-block;
		}
	}

	& > .node {
		outline: 1px dashed white;
		box-shadow: 0 0 10px 2px black;
	}

	.center {
		height: 100%;
		position: relative;
		text-align: center;
		vertical-align: middle;
		margin-left: -15px;
		display: inline-flex;
		&.port-2 {
			margin-top: 11px;
		}
	}
}

## js-global
// Register with default interface
Blackprint.Sketch.registerInterface("BPIC/Data/Minimal",
class extends Context.IFace.DataMinimal {
	constructor(node){
		super(node);
		this.showPortName = false;
		this._portLen = 0;
	}

	init(el){ // Run once
		this.initClone(el);

		let inputs = this.input;
		for(let key in inputs) this._portLen++;
	}

	initClone(el){ // Run multiple times if the nodes element is cloned to different container
		let $el = $('.center', el);
		if($el[0] == null) return;

		$el.append(this.node.createIcon());
	}
});