@projectstorm/react-diagrams-defaults/dist/index.umd.js

This workspace houses the default models

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["projectstorm/react-diagrams-defaults"]=t():e["projectstorm/react-diagrams-defaults"]=t()}(self,(()=>(()=>{"use strict";var e={n:t=>{var o=t&&t.__esModule?()=>t.default:()=>t;return e.d(o,{a:o}),o},d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{DefaultLabelFactory:()=>c,DefaultLabelModel:()=>n,DefaultLabelWidget:()=>a,DefaultLinkFactory:()=>k,DefaultLinkModel:()=>u,DefaultLinkPointWidget:()=>h,DefaultLinkSegmentWidget:()=>f,DefaultLinkWidget:()=>m,DefaultNodeFactory:()=>C,DefaultNodeModel:()=>E,DefaultNodeWidget:()=>w,DefaultPortFactory:()=>I,DefaultPortLabel:()=>M,DefaultPortModel:()=>L});const o=require("react"),r=require("@projectstorm/react-diagrams-core");class n extends r.LabelModel{constructor(e={}){super(Object.assign({offsetY:null==e.offsetY?-23:e.offsetY,type:"default"},e))}setLabel(e){this.options.label=e}deserialize(e){super.deserialize(e),this.options.label=e.data.label}serialize(){return Object.assign(Object.assign({},super.serialize()),{label:this.options.label})}}const s=require("@emotion/styled");var i,l=e.n(s);!function(e){e.Label=l().div`
		background: rgba(0, 0, 0, 0.8);
		border-radius: 5px;
		color: white;
		font-size: 12px;
		padding: 4px 8px;
		font-family: sans-serif;
		user-select: none;
	`}(i||(i={}));class a extends o.Component{render(){return o.createElement(i.Label,null,this.props.model.getOptions().label)}}const d=require("@projectstorm/react-canvas-core");class c extends d.AbstractReactFactory{constructor(){super("default")}generateReactWidget(e){return o.createElement(a,{model:e.model})}generateModel(e){return new n}}const p=require("@projectstorm/geometry");class u extends r.LinkModel{constructor(e={}){super(Object.assign({type:"default",width:e.width||3,color:e.color||"gray",selectedColor:e.selectedColor||"rgb(0,192,255)",curvyness:50},e))}calculateControlOffset(e){return e.getOptions().alignment===r.PortModelAlignment.RIGHT?[this.options.curvyness,0]:e.getOptions().alignment===r.PortModelAlignment.LEFT?[-this.options.curvyness,0]:e.getOptions().alignment===r.PortModelAlignment.TOP?[0,-this.options.curvyness]:[0,this.options.curvyness]}getSVGPath(){if(2==this.points.length){const e=new p.BezierCurve;return e.setSource(this.getFirstPoint().getPosition()),e.setTarget(this.getLastPoint().getPosition()),e.setSourceControl(this.getFirstPoint().getPosition().clone()),e.setTargetControl(this.getLastPoint().getPosition().clone()),this.sourcePort&&e.getSourceControl().translate(...this.calculateControlOffset(this.getSourcePort())),this.targetPort&&e.getTargetControl().translate(...this.calculateControlOffset(this.getTargetPort())),e.getSVGCurve()}}serialize(){return Object.assign(Object.assign({},super.serialize()),{width:this.options.width,color:this.options.color,curvyness:this.options.curvyness,selectedColor:this.options.selectedColor})}deserialize(e){super.deserialize(e),this.options.color=e.data.color,this.options.width=e.data.width,this.options.curvyness=e.data.curvyness,this.options.selectedColor=e.data.selectedColor}addLabel(e){if(e instanceof r.LabelModel)return super.addLabel(e);let t=new n;return t.setLabel(e),super.addLabel(t)}setWidth(e){this.options.width=e,this.fireEvent({width:e},"widthChanged")}setColor(e){this.options.color=e,this.fireEvent({color:e},"colorChanged")}}var g;!function(e){e.PointTop=l().circle`
		pointer-events: all;
	`}(g||(g={}));class h extends o.Component{constructor(e){super(e),this.state={selected:!1}}render(){const{point:e}=this.props;return o.createElement("g",null,o.createElement("circle",{cx:e.getPosition().x,cy:e.getPosition().y,r:5,fill:this.state.selected||this.props.point.isSelected()?this.props.colorSelected:this.props.color}),o.createElement(g.PointTop,{className:"point",onMouseLeave:()=>{this.setState({selected:!1})},onMouseEnter:()=>{this.setState({selected:!0})},"data-id":e.getID(),"data-linkid":e.getLink().getID(),cx:e.getPosition().x,cy:e.getPosition().y,r:15,opacity:0}))}}class f extends o.Component{render(){const e=o.cloneElement(this.props.factory.generateLinkSegment(this.props.link,this.props.selected||this.props.link.isSelected(),this.props.path),{ref:this.props.forwardRef}),t=o.cloneElement(e,Object.assign(Object.assign({strokeLinecap:"round",onMouseLeave:()=>{this.props.onSelection(!1)},onMouseEnter:()=>{this.props.onSelection(!0)}},this.props.extras),{ref:null,"data-linkid":this.props.link.getID(),strokeOpacity:this.props.selected?.1:0,strokeWidth:20,fill:"none",onContextMenu:()=>{this.props.link.isLocked()||(event.preventDefault(),this.props.link.remove())}}));return o.createElement("g",null,e,t)}}const m=e=>{const[t,n]=o.useState(!1),s=(0,o.useRef)([]);(0,o.useEffect)((()=>(e.link.setRenderedPaths(s.current.map((e=>e.current)).filter(Boolean)),()=>{e.link.setRenderedPaths([])})),[e.link]);const i=()=>{const e=o.createRef();return s.current.push(e),e},l=(t,o)=>{if(!t.shiftKey&&!e.link.isLocked()&&e.link.getPoints().length-1<=e.diagramEngine.getMaxNumberPointsPerLink()){const r=e.diagramEngine.getRelativeMousePoint(t),n=e.link.point(r.x,r.y,o);t.persist(),t.stopPropagation(),e.diagramEngine.getActionEventBus().fireAction({event:t,model:n})}},a=t=>{var r;return o.createElement(h,{key:t.getID(),point:t,colorSelected:null!==(r=e.link.getOptions().selectedColor)&&void 0!==r?r:"",color:e.link.getOptions().color})},d=(r,s,l)=>o.createElement(f,{key:`link-${l}`,path:r,selected:t,diagramEngine:e.diagramEngine,factory:e.diagramEngine.getFactoryForLink(e.link),link:e.link,forwardRef:i(),onSelection:n,extras:s}),c=e.link.getPoints(),p=[];if(s.current=[],2===c.length)p.push(d(e.link.getSVGPath(),{onMouseDown:t=>{var o;null===(o=e.selected)||void 0===o||o.call(e,t),l(t,1)}},"0")),null==e.link.getTargetPort()&&p.push(a(c[1]));else{for(let t=0;t<c.length-1;t++)p.push(d(r.LinkWidget.generateLinePath(c[t],c[t+1]),{"data-linkid":e.link.getID(),"data-point":t,onMouseDown:o=>{var r;null===(r=e.selected)||void 0===r||r.call(e,o),l(o,t+1)}},t));if(null===(u=e.renderPoints)||void 0===u||u){for(let e=1;e<c.length-1;e++)p.push(a(c[e]));null==e.link.getTargetPort()&&p.push(a(c[c.length-1]))}}var u;return o.createElement("g",{"data-default-link-test":e.link.getOptions().testName},p)},b=require("@emotion/react");var P;!function(e){e.Keyframes=b.keyframes`
		from {
			stroke-dashoffset: 24;
		}
		to {
			stroke-dashoffset: 0;
		}
	`;const t=b.css`
		stroke-dasharray: 10, 2;
		animation: ${e.Keyframes} 1s linear infinite;
	`;e.Path=l().path`
		${e=>e.selected&&t};
		fill: none;
		pointer-events: auto;
	`}(P||(P={}));class k extends d.AbstractReactFactory{constructor(e="default"){super(e)}generateReactWidget(e){return o.createElement(m,{link:e.model,diagramEngine:this.engine})}generateModel(e){return new u}generateLinkSegment(e,t,r){return o.createElement(P.Path,{selected:t,stroke:t?e.getOptions().selectedColor:e.getOptions().color,strokeWidth:e.getOptions().width,d:r})}}const O=require("lodash/map");var y,v,x=e.n(O);class L extends r.PortModel{constructor(e,t,o){t&&(e={in:!!e,name:t,label:o}),super(Object.assign({label:e.label||e.name,alignment:e.in?r.PortModelAlignment.LEFT:r.PortModelAlignment.RIGHT,type:"default"},e))}deserialize(e){super.deserialize(e),this.options.in=e.data.in,this.options.label=e.data.label}serialize(){return Object.assign(Object.assign({},super.serialize()),{in:this.options.in,label:this.options.label})}link(e,t){let o=this.createLinkModel(t);return o.setSourcePort(this),o.setTargetPort(e),o}canLinkToPort(e){return!(e instanceof L)||this.options.in!==e.getOptions().in}createLinkModel(e){let t=super.createLinkModel();return!t&&e?e.generateModel({}):t||new u}}class E extends r.NodeModel{constructor(e={},t){"string"==typeof e&&(e={name:e,color:t}),super(Object.assign({type:"default",name:"Untitled",color:"rgb(0,192,255)"},e)),this.portsOut=[],this.portsIn=[]}doClone(e,t){t.portsIn=[],t.portsOut=[],super.doClone(e,t)}removePort(e){super.removePort(e),e.getOptions().in?this.portsIn.splice(this.portsIn.indexOf(e),1):this.portsOut.splice(this.portsOut.indexOf(e),1)}addPort(e){return super.addPort(e),e.getOptions().in?-1===this.portsIn.indexOf(e)&&this.portsIn.push(e):-1===this.portsOut.indexOf(e)&&this.portsOut.push(e),e}addInPort(e,t=!0){const o=new L({in:!0,name:e,label:e,alignment:r.PortModelAlignment.LEFT});return t||this.portsIn.splice(0,0,o),this.addPort(o)}addOutPort(e,t=!0){const o=new L({in:!1,name:e,label:e,alignment:r.PortModelAlignment.RIGHT});return t||this.portsOut.splice(0,0,o),this.addPort(o)}deserialize(e){super.deserialize(e),this.options.name=e.data.name,this.options.color=e.data.color,this.portsIn=x()(e.data.portsInOrder,(e=>this.getPortFromID(e))),this.portsOut=x()(e.data.portsOutOrder,(e=>this.getPortFromID(e)))}serialize(){return Object.assign(Object.assign({},super.serialize()),{name:this.options.name,color:this.options.color,portsInOrder:x()(this.portsIn,(e=>e.getID())),portsOutOrder:x()(this.portsOut,(e=>e.getID()))})}getInPorts(){return this.portsIn}getOutPorts(){return this.portsOut}}!function(e){e.PortLabel=l().div`
		display: flex;
		margin-top: 1px;
		align-items: center;
	`,e.Label=l().div`
		padding: 0 5px;
		flex-grow: 1;
	`,e.Port=l().div`
		width: 15px;
		height: 15px;
		background: rgba(255, 255, 255, 0.1);

		&:hover {
			background: rgb(192, 255, 0);
		}
	`}(y||(y={}));class M extends o.Component{render(){const e=o.createElement(r.PortWidget,{engine:this.props.engine,port:this.props.port},o.createElement(y.Port,null)),t=o.createElement(y.Label,null,this.props.port.getOptions().label);return o.createElement(y.PortLabel,null,this.props.port.getOptions().in?e:t,this.props.port.getOptions().in?t:e)}}!function(e){e.Node=l().div`
		background-color: ${e=>e.background};
		border-radius: 5px;
		font-family: sans-serif;
		color: white;
		border: solid 2px black;
		overflow: visible;
		font-size: 11px;
		border: solid 2px ${e=>e.selected?"rgb(0,192,255)":"black"};
	`,e.Title=l().div`
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		white-space: nowrap;
		justify-items: center;
	`,e.TitleName=l().div`
		flex-grow: 1;
		padding: 5px 5px;
	`,e.Ports=l().div`
		display: flex;
		background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
	`,e.PortsContainer=l().div`
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		&:first-of-type {
			margin-right: 10px;
		}

		&:only-child {
			margin-right: 0px;
		}
	`}(v||(v={}));class w extends o.Component{constructor(){super(...arguments),this.generatePort=e=>o.createElement(M,{engine:this.props.engine,port:e,key:e.getID()})}render(){return o.createElement(v.Node,{"data-default-node-name":this.props.node.getOptions().name,selected:this.props.node.isSelected(),background:this.props.node.getOptions().color},o.createElement(v.Title,null,o.createElement(v.TitleName,null,this.props.node.getOptions().name)),o.createElement(v.Ports,null,o.createElement(v.PortsContainer,null,x()(this.props.node.getInPorts(),this.generatePort)),o.createElement(v.PortsContainer,null,x()(this.props.node.getOutPorts(),this.generatePort))))}}class C extends d.AbstractReactFactory{constructor(){super("default")}generateReactWidget(e){return o.createElement(w,{engine:this.engine,node:e.model})}generateModel(e){return new E}}class I extends d.AbstractModelFactory{constructor(){super("default")}generateModel(){return new L({name:"unknown"})}}return t})()));
//# sourceMappingURL=index.umd.js.map