diff --git a/css/ueblueprint-node-value-type-color.css.map b/css/ueblueprint-node-value-type-color.css.map deleted file mode 100644 index 4f41a79..0000000 --- a/css/ueblueprint-node-value-type-color.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../scss/ueblueprint-node-value-type-color.scss"],"names":[],"mappings":"AAAA,KAEI,8BAGJ,wBAEI,gCAGJ,wBAEI,gCAGJ,sBAEI,gCAGJ,uBAEI,gCAGJ,wBAEI,gCAGJ,uBAEI,gCACA,0GAGJ,qBAEI,gCAGJ,gCAEI","file":"ueblueprint-node-value-type-color.css"} \ No newline at end of file diff --git a/css/ueblueprint-style.css b/css/ueblueprint-style.css deleted file mode 100644 index eec447d..0000000 --- a/css/ueblueprint-style.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}:root{--ueb-fron-size: 13px;--ueb-viewport-height: 30rem;--ueb-viewport-width: 100%;--ueb-grid-size: 16px;--ueb-grid-line-width: 2px;--ueb-grid-line-color: #353535;--ueb-grid-set: 8;--ueb-grid-set-line-color: #161616;--ueb-grid-axis-line-color: black;--ueb-grid-snap: 16px;--ueb-node-radius: 8px}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-fron-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0, 0, 0, 0.5);z-index:1}.ueb-viewport-zoom{color:#4d4d4db7}.ueb-viewport-body{position:relative;height:var(--ueb-viewport-height);width:var(--ueb-viewport-width);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 black,1px 4px 6px 0 rgba(0, 0, 0, 0.3);will-change:transform}ueb-selector[data-selecting=false]~ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected{z-index:1}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-7px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 black;border-radius:var(--ueb-node-radius);background:rgba(0, 0, 0, 0.7);overflow:hidden}.ueb-node-header{padding:.2em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:6px 0;color:white;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}ueb-pin{display:block;padding:1px 2px}ueb-selector[data-selecting=false]~ueb-node ueb-pin:hover{background:var(--ueb-node-value-background)}ueb-selector[data-selecting=false]~ueb-node ueb-pin .ueb-node-value-icon{cursor:crosshair}.ueb-node-value-icon{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-node-value-icon::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-node-value-color);border-radius:50%}.ueb-node-value-fill::before{background:var(--ueb-node-value-color)}.ueb-node-value-icon::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-node-value-color)}.ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-selector>*{visibility:visible}ueb-selector[data-selecting=true]{visibility:visible;top:min(var(--ueb-select-from-y)*1px,var(--ueb-select-to-y)*1px);left:min(var(--ueb-select-from-x)*1px,var(--ueb-select-to-x)*1px);width:calc(max(var(--ueb-select-from-x) - var(--ueb-select-to-x),var(--ueb-select-to-x) - var(--ueb-select-from-x))*1px);height:calc(max(var(--ueb-select-from-y) - var(--ueb-select-to-y),var(--ueb-select-to-y) - var(--ueb-select-from-y))*1px)}/*# sourceMappingURL=ueblueprint-style.css.map */ diff --git a/css/ueblueprint-style.css.map b/css/ueblueprint-style.css.map deleted file mode 100644 index 80438df..0000000 --- a/css/ueblueprint-style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../scss/ueblueprint-style.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,4DACA,sBAGJ,4CACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,0DACI,4CAGJ,yEACI,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,cACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,kCACI,mBACA,iEACA,kEACA,yHACA","file":"ueblueprint-style.css"} \ No newline at end of file diff --git a/css/ueblueprint-node-value-type-color.css b/dist/css/ueblueprint-node-value-type-color.css similarity index 100% rename from css/ueblueprint-node-value-type-color.css rename to dist/css/ueblueprint-node-value-type-color.css diff --git a/dist/css/ueblueprint-node-value-type-color.css.map b/dist/css/ueblueprint-node-value-type-color.css.map new file mode 100644 index 0000000..ae98ccd --- /dev/null +++ b/dist/css/ueblueprint-node-value-type-color.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-node-value-type-color.scss"],"names":[],"mappings":"AAAA,KAEI,8BAGJ,wBAEI,gCAGJ,wBAEI,gCAGJ,sBAEI,gCAGJ,uBAEI,gCAGJ,wBAEI,gCAGJ,uBAEI,gCACA,0GAGJ,qBAEI,gCAGJ,gCAEI","file":"ueblueprint-node-value-type-color.css"} \ No newline at end of file diff --git a/dist/css/ueblueprint-style.css b/dist/css/ueblueprint-style.css new file mode 100644 index 0000000..6cb7f3e --- /dev/null +++ b/dist/css/ueblueprint-style.css @@ -0,0 +1 @@ +@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}:root{--ueb-fron-size: 13px;--ueb-viewport-height: 30rem;--ueb-viewport-width: 100%;--ueb-grid-size: 16px;--ueb-grid-line-width: 2px;--ueb-grid-line-color: #353535;--ueb-grid-set: 8;--ueb-grid-set-line-color: #161616;--ueb-grid-axis-line-color: black;--ueb-grid-snap: 16px;--ueb-node-radius: 8px}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-fron-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0, 0, 0, 0.5);z-index:1}.ueb-viewport-zoom{color:#4d4d4db7}.ueb-viewport-body{position:relative;height:var(--ueb-viewport-height);width:var(--ueb-viewport-width);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}.ueb-grid[data-drag-scrolling=true]{cursor:grabbing}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 black,1px 4px 6px 0 rgba(0, 0, 0, 0.3);will-change:transform}.ueb-grid[data-drag-scrolling=false] ueb-selector[data-selecting=false]~ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected{z-index:1}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 black;border-radius:var(--ueb-node-radius);background:rgba(0, 0, 0, 0.7);overflow:hidden}.ueb-node-header{padding:.2em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:6px 0;color:white;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}ueb-pin{display:block;padding:1px 2px}.ueb-grid[data-drag-scrolling=false]{cursor:default}ueb-selector[data-selecting=false]~ueb-node ueb-pin:hover{background:var(--ueb-node-value-background)}.ueb-grid[data-drag-scrolling=false] ueb-selector[data-selecting=false]~ueb-node ueb-pin .ueb-node-value-icon{cursor:crosshair}.ueb-node-value-icon{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-node-value-icon::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-node-value-color);border-radius:50%}.ueb-node-value-fill::before{background:var(--ueb-node-value-color)}.ueb-node-value-icon::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-node-value-color)}.ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-selector>*{visibility:visible}ueb-selector[data-selecting=true]{visibility:visible;top:min(var(--ueb-select-from-y)*1px,var(--ueb-select-to-y)*1px);left:min(var(--ueb-select-from-x)*1px,var(--ueb-select-to-x)*1px);width:calc(max(var(--ueb-select-from-x) - var(--ueb-select-to-x),var(--ueb-select-to-x) - var(--ueb-select-from-x))*1px);height:calc(max(var(--ueb-select-from-y) - var(--ueb-select-to-y),var(--ueb-select-to-y) - var(--ueb-select-from-y))*1px)}/*# sourceMappingURL=ueblueprint-style.css.map */ diff --git a/dist/css/ueblueprint-style.css.map b/dist/css/ueblueprint-style.css.map new file mode 100644 index 0000000..114b740 --- /dev/null +++ b/dist/css/ueblueprint-style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,oCACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,4DACA,sBAGJ,iFACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,qCACI,eAGJ,0DACI,4CAGJ,8GACI,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,cACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,kCACI,mBACA,iEACA,kEACA,yHACA","file":"ueblueprint-style.css"} \ No newline at end of file diff --git a/dist/font/roboto-bold.woff b/dist/font/roboto-bold.woff new file mode 100644 index 0000000..c9b02e5 Binary files /dev/null and b/dist/font/roboto-bold.woff differ diff --git a/dist/font/roboto-bold.woff2 b/dist/font/roboto-bold.woff2 new file mode 100644 index 0000000..1eedf77 Binary files /dev/null and b/dist/font/roboto-bold.woff2 differ diff --git a/dist/font/roboto-light.woff b/dist/font/roboto-light.woff new file mode 100644 index 0000000..13c73ff Binary files /dev/null and b/dist/font/roboto-light.woff differ diff --git a/dist/font/roboto-light.woff2 b/dist/font/roboto-light.woff2 new file mode 100644 index 0000000..358c6de Binary files /dev/null and b/dist/font/roboto-light.woff2 differ diff --git a/dist/font/roboto-regular.woff b/dist/font/roboto-regular.woff new file mode 100644 index 0000000..6da0140 Binary files /dev/null and b/dist/font/roboto-regular.woff differ diff --git a/dist/font/roboto-regular.woff2 b/dist/font/roboto-regular.woff2 new file mode 100644 index 0000000..c0b2dd6 Binary files /dev/null and b/dist/font/roboto-regular.woff2 differ diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 5a3f06a..d0781fa 100644 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -318,6 +318,10 @@ class GraphElement extends HTMLElement { this.template = template; } + getTemplate() { + return this.template + } + connectedCallback() { this.blueprint = this.closest("ueb-blueprint"); this.template.apply(this); @@ -380,7 +384,7 @@ class SelectorTemplate extends Template { apply(selector) { super.apply(selector); selector.classList.add("ueb-selector"); - selector.dataset.selecting = "false"; + this.applyFinishSelecting(selector); } /** @@ -410,7 +414,7 @@ class SelectorTemplate extends Template { * Applies the style relative to selection finishing. * @param {GraphSelector} selector Selector element */ - applyFinishSelecting(selector, finalPosition) { + applyFinishSelecting(selector) { selector.dataset.selecting = "false"; } } @@ -506,7 +510,7 @@ class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ apply(blueprint) { super.apply(blueprint); @@ -518,11 +522,12 @@ class BlueprintTemplate extends Template { blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]"); blueprint.selectorElement = new GraphSelector(); blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes); + this.applyEndDragScrolling(blueprint); } /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyZoom(blueprint, newZoom) { blueprint.classList.remove("ueb-zoom-" + sanitizeText$1(blueprint.zoom)); @@ -531,7 +536,7 @@ class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyExpand(blueprint) { blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText$1(blueprint.additional[0])); @@ -540,12 +545,28 @@ class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyTranlate(blueprint) { blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText$1(blueprint.translateValue[0])); blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText$1(blueprint.translateValue[1])); } + + /** + * Applies the style to the element. + * @param {Blueprint} blueprint The blueprint element + */ + applyStartDragScrolling(blueprint) { + blueprint.gridElement.dataset.dragScrolling = true; + } + + /** + * Applies the style to the element. + * @param {Blueprint} blueprint The blueprint element + */ + applyEndDragScrolling(blueprint) { + blueprint.gridElement.dataset.dragScrolling = false; + } } class Context { @@ -1442,9 +1463,17 @@ class MouseClickDrag extends Pointing { class DragScroll extends MouseClickDrag { + startDrag() { + this.blueprint.template.applyStartDragScrolling(this.blueprint); + } + dragTo(location, movement) { this.blueprint.scrollDelta([-movement[0], -movement[1]]); } + + endDrag() { + this.blueprint.template.applyEndDragScrolling(this.blueprint); + } } class KeyboardShortcut extends Context { @@ -1499,6 +1528,9 @@ class KeyboardShortcut extends Context { class Configuration { static deleteNodesKeyboardKey = "Delete" + static expandGridSize = 400 + static gridSize = 16 + static gridSnap = 16 } class KeyvoardCanc extends KeyboardShortcut { @@ -1887,10 +1919,7 @@ class DragMove extends MouseClickDrag { startDrag() { if (isNaN(this.stepSize) || this.stepSize <= 0) { - this.stepSize = parseInt(getComputedStyle(this.target).getPropertyValue("--ueb-grid-snap")); - if (isNaN(this.stepSize) || this.stepSize <= 0) { - this.stepSize = 1; - } + this.stepSize = this.blueprint.gridSnap; } // Get the current mouse position this.mousePosition = this.stepSize != 1 ? this.snapToGrid(this.clickedPosition) : this.clickedPosition; @@ -2055,14 +2084,18 @@ class Paste extends Context { } pasted(value) { - let top = Number.MAX_SAFE_INTEGER; - let left = Number.MAX_SAFE_INTEGER; + let top = 0; + let left = 0; + let count = 0; let nodes = this.serializer.readMultiple(value).map(entity => { let node = new GraphNode(entity); - top = Math.min(top, node.location[1]); - left = Math.min(left, node.location[0]); + top += node.location[1]; + left += node.location[0]; + ++count; return node }); + top /= count; + left /= count; if (nodes.length > 0) { this.blueprint.unselectAll(); } @@ -2193,11 +2226,15 @@ class Blueprint extends GraphElement { super({}, new BlueprintTemplate()); /** @type {BlueprintTemplate} */ this.template; + /** @type {number} */ + this.gridSize = Configuration.gridSize; + /** @type {number} */ + this.gridSnap = Configuration.gridSnap; /** @type {GraphNode[]}" */ this.nodes = []; /** @type {GraphLink[]}" */ this.links = []; - this.expandGridSize = 400; + this.expandGridSize = Configuration.expandGridSize; /** @type {number[]} */ this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]; /** @type {number[]} */ @@ -2238,6 +2275,30 @@ class Blueprint extends GraphElement { }; } + /** + * Expand the grid, considers the absolute value of params + * @param {number} x - Horizontal expansion value + * @param {number} y - Vertical expansion value + */ + #expand(x, y) { + x = Math.round(Math.abs(x)); + y = Math.round(Math.abs(y)); + this.additional = [this.additional[0] + x, this.additional[1] + y]; + this.template.applyExpand(this); + } + + /** + * Moves the content of the grid according to the coordinates + * @param {number} x - Horizontal translation value + * @param {number} y - Vertical translation value + */ + #translate(x, y) { + x = Math.round(x); + y = Math.round(y); + this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]; + this.template.applyTranlate(this); + } + connectedCallback() { super.connectedCallback(); @@ -2246,17 +2307,18 @@ class Blueprint extends GraphElement { this.cancObject = new KeyvoardCanc(this.getGridDOMElement(), this); this.zoomObject = new Zoom(this.getGridDOMElement(), this, { - looseTarget: true + looseTarget: true, }); this.selectObject = new Select(this.getGridDOMElement(), this, { clickButton: 0, + exitAnyButton: true, moveEverywhere: true, - exitAnyButton: true }); this.dragObject = new DragScroll(this.getGridDOMElement(), this, { clickButton: 2, + exitAnyButton: false, + looseTarget: true, moveEverywhere: true, - exitAnyButton: false }); this.unfocusObject = new Unfocus(this.getGridDOMElement(), this); @@ -2364,28 +2426,11 @@ class Blueprint extends GraphElement { ] } - /** - * Expand the grid, considers the absolute value of params - * @param {number} x - Horizontal expansion value - * @param {number} y - Vertical expansion value - */ - _expand(x, y) { - x = Math.round(Math.abs(x)); - y = Math.round(Math.abs(y)); - this.additional = [this.additional[0] + x, this.additional[1] + y]; - this.template.applyExpand(this); - } - - /** - * Moves the content of the grid according to the coordinates - * @param {number} x - Horizontal translation value - * @param {number} y - Vertical translation value - */ - _translate(x, y) { - x = Math.round(x); - y = Math.round(y); - this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]; - this.template.applyTranlate(this); + snapToGrid(location) { + return [ + this.gridSnap * Math.round(location[0] / this.gridSnap), + this.gridSnap * Math.round(location[1] / this.gridSnap) + ] } /** @@ -2398,9 +2443,9 @@ class Blueprint extends GraphElement { let scaledX = x / scale; let scaledY = y / scale; // First expand the grid to contain the additional space - this._expand(scaledX, scaledY); + this.#expand(scaledX, scaledY); // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly - this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0); + this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0); if (x < 0) { this.viewportElement.scrollLeft -= x; } diff --git a/index.html b/index.html index 2b7cf56..e434c66 100755 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ - - + + diff --git a/js/Blueprint.js b/js/Blueprint.js index 4d3f6ce..d937759 100755 --- a/js/Blueprint.js +++ b/js/Blueprint.js @@ -12,6 +12,7 @@ import Utility from "./Utility" import Zoom from "./input/Zoom" import GraphNode from "./graph/GraphNode" import GraphLink from "./graph/GraphLink" +import Configuration from "./Configuration" export default class Blueprint extends GraphElement { @@ -19,11 +20,15 @@ export default class Blueprint extends GraphElement { super({}, new BlueprintTemplate()) /** @type {BlueprintTemplate} */ this.template + /** @type {number} */ + this.gridSize = Configuration.gridSize + /** @type {number} */ + this.gridSnap = Configuration.gridSnap /** @type {GraphNode[]}" */ this.nodes = [] /** @type {GraphLink[]}" */ this.links = [] - this.expandGridSize = 400 + this.expandGridSize = Configuration.expandGridSize /** @type {number[]} */ this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0] /** @type {number[]} */ @@ -64,6 +69,30 @@ export default class Blueprint extends GraphElement { } } + /** + * Expand the grid, considers the absolute value of params + * @param {number} x - Horizontal expansion value + * @param {number} y - Vertical expansion value + */ + #expand(x, y) { + x = Math.round(Math.abs(x)) + y = Math.round(Math.abs(y)) + this.additional = [this.additional[0] + x, this.additional[1] + y] + this.template.applyExpand(this) + } + + /** + * Moves the content of the grid according to the coordinates + * @param {number} x - Horizontal translation value + * @param {number} y - Vertical translation value + */ + #translate(x, y) { + x = Math.round(x) + y = Math.round(y) + this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y] + this.template.applyTranlate(this) + } + connectedCallback() { super.connectedCallback() @@ -72,17 +101,18 @@ export default class Blueprint extends GraphElement { this.cancObject = new KeyboardCanc(this.getGridDOMElement(), this) this.zoomObject = new Zoom(this.getGridDOMElement(), this, { - looseTarget: true + looseTarget: true, }) this.selectObject = new Select(this.getGridDOMElement(), this, { clickButton: 0, + exitAnyButton: true, moveEverywhere: true, - exitAnyButton: true }) this.dragObject = new DragScroll(this.getGridDOMElement(), this, { clickButton: 2, + exitAnyButton: false, + looseTarget: true, moveEverywhere: true, - exitAnyButton: false }) this.unfocusObject = new Unfocus(this.getGridDOMElement(), this) @@ -190,28 +220,11 @@ export default class Blueprint extends GraphElement { ] } - /** - * Expand the grid, considers the absolute value of params - * @param {number} x - Horizontal expansion value - * @param {number} y - Vertical expansion value - */ - _expand(x, y) { - x = Math.round(Math.abs(x)) - y = Math.round(Math.abs(y)) - this.additional = [this.additional[0] + x, this.additional[1] + y] - this.template.applyExpand(this) - } - - /** - * Moves the content of the grid according to the coordinates - * @param {number} x - Horizontal translation value - * @param {number} y - Vertical translation value - */ - _translate(x, y) { - x = Math.round(x) - y = Math.round(y) - this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y] - this.template.applyTranlate(this) + snapToGrid(location) { + return [ + this.gridSnap * Math.round(location[0] / this.gridSnap), + this.gridSnap * Math.round(location[1] / this.gridSnap) + ] } /** @@ -224,9 +237,9 @@ export default class Blueprint extends GraphElement { let scaledX = x / scale let scaledY = y / scale // First expand the grid to contain the additional space - this._expand(scaledX, scaledY) + this.#expand(scaledX, scaledY) // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly - this._translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0) + this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0) if (x < 0) { this.viewportElement.scrollLeft -= x } diff --git a/js/Configuration.js b/js/Configuration.js index 10d2219..d5153aa 100644 --- a/js/Configuration.js +++ b/js/Configuration.js @@ -1,4 +1,7 @@ export default class Configuration { static deleteNodesKeyboardKey = "Delete" -} \ No newline at end of file + static expandGridSize = 400 + static gridSize = 16 + static gridSnap = 16 +} diff --git a/js/graph/GraphElement.js b/js/graph/GraphElement.js index b322f9e..e86e801 100755 --- a/js/graph/GraphElement.js +++ b/js/graph/GraphElement.js @@ -14,6 +14,10 @@ export default class GraphElement extends HTMLElement { this.template = template } + getTemplate() { + return this.template + } + connectedCallback() { this.blueprint = this.closest("ueb-blueprint") this.template.apply(this) diff --git a/js/input/DragMove.js b/js/input/DragMove.js index c3b278b..a66cc62 100755 --- a/js/input/DragMove.js +++ b/js/input/DragMove.js @@ -17,10 +17,7 @@ export default class DragMove extends MouseClickDrag { startDrag() { if (isNaN(this.stepSize) || this.stepSize <= 0) { - this.stepSize = parseInt(getComputedStyle(this.target).getPropertyValue("--ueb-grid-snap")) - if (isNaN(this.stepSize) || this.stepSize <= 0) { - this.stepSize = 1 - } + this.stepSize = this.blueprint.gridSnap } // Get the current mouse position this.mousePosition = this.stepSize != 1 ? this.snapToGrid(this.clickedPosition) : this.clickedPosition diff --git a/js/input/DragScroll.js b/js/input/DragScroll.js index 0358692..8811e66 100755 --- a/js/input/DragScroll.js +++ b/js/input/DragScroll.js @@ -2,7 +2,15 @@ import MouseClickDrag from "./MouseClickDrag" export default class DragScroll extends MouseClickDrag { + startDrag() { + this.blueprint.template.applyStartDragScrolling(this.blueprint) + } + dragTo(location, movement) { this.blueprint.scrollDelta([-movement[0], -movement[1]]) } + + endDrag() { + this.blueprint.template.applyEndDragScrolling(this.blueprint) + } } diff --git a/js/input/Paste.js b/js/input/Paste.js index 0589104..7559a1d 100644 --- a/js/input/Paste.js +++ b/js/input/Paste.js @@ -21,14 +21,18 @@ export default class Paste extends Context { } pasted(value) { - let top = Number.MAX_SAFE_INTEGER - let left = Number.MAX_SAFE_INTEGER + let top = 0 + let left = 0 + let count = 0 let nodes = this.serializer.readMultiple(value).map(entity => { let node = new GraphNode(entity) - top = Math.min(top, node.location[1]) - left = Math.min(left, node.location[0]) + top += node.location[1] + left += node.location[0] + ++count return node }) + top /= count + left /= count if (nodes.length > 0) { this.blueprint.unselectAll() } diff --git a/js/template/BlueprintTemplate.js b/js/template/BlueprintTemplate.js index 4120642..40ff9fe 100755 --- a/js/template/BlueprintTemplate.js +++ b/js/template/BlueprintTemplate.js @@ -55,7 +55,7 @@ export default class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ apply(blueprint) { super.apply(blueprint) @@ -67,11 +67,12 @@ export default class BlueprintTemplate extends Template { blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]") blueprint.selectorElement = new GraphSelector() blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes) + this.applyEndDragScrolling(blueprint) } /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyZoom(blueprint, newZoom) { blueprint.classList.remove("ueb-zoom-" + sanitizeText(blueprint.zoom)) @@ -80,7 +81,7 @@ export default class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyExpand(blueprint) { blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0])) @@ -89,10 +90,26 @@ export default class BlueprintTemplate extends Template { /** * Applies the style to the element. - * @param {Blueprint} brueprint The blueprint element + * @param {Blueprint} blueprint The blueprint element */ applyTranlate(blueprint) { blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0])) blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1])) } + + /** + * Applies the style to the element. + * @param {Blueprint} blueprint The blueprint element + */ + applyStartDragScrolling(blueprint) { + blueprint.gridElement.dataset.dragScrolling = true + } + + /** + * Applies the style to the element. + * @param {Blueprint} blueprint The blueprint element + */ + applyEndDragScrolling(blueprint) { + blueprint.gridElement.dataset.dragScrolling = false + } } diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js index 4bdd34e..5430e8c 100644 --- a/js/template/SelectorTemplate.js +++ b/js/template/SelectorTemplate.js @@ -13,7 +13,7 @@ export default class SelectorTemplate extends Template { apply(selector) { super.apply(selector) selector.classList.add("ueb-selector") - selector.dataset.selecting = "false" + this.applyFinishSelecting(selector) } /** @@ -43,7 +43,7 @@ export default class SelectorTemplate extends Template { * Applies the style relative to selection finishing. * @param {GraphSelector} selector Selector element */ - applyFinishSelecting(selector, finalPosition) { + applyFinishSelecting(selector) { selector.dataset.selecting = "false" } } diff --git a/package.json b/package.json index 53b9438..2433244 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Unreal Engine's Blueprint visualisation library", "main": "ueblueprint.js", "scripts": { - "build": "rollup --config && sass scss:css --style=compressed" + "build": "rollup --config && sass scss:dist/css --style=compressed" }, "repository": { "type": "git", @@ -25,6 +25,7 @@ "@rollup/plugin-commonjs": "^21.0.0", "@rollup/plugin-node-resolve": "^13.0.5", "rollup": "^2.58.0", + "rollup-plugin-copy": "^3.4.0", "rollup-plugin-minify-html-template-literals": "^1.2.0", "rollup-plugin-terser": "^7.0.2", "sass": "^1.45.1", diff --git a/rollup.config.js b/rollup.config.js index 091aa48..b0129ba 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,6 +2,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve' import minifyHTML from 'rollup-plugin-minify-html-template-literals' import commonjs from '@rollup/plugin-commonjs' import { terser } from 'rollup-plugin-terser' +import copy from 'rollup-plugin-copy' export default { input: 'js/export.js', @@ -14,5 +15,13 @@ export default { //minifyHTML(), commonjs(), //terser() + copy({ + targets: [ + { + src: ["font/*"], + dest: "dist/font" + } + ] + }) ] } \ No newline at end of file diff --git a/scss/ueblueprint-style.css b/scss/ueblueprint-style.css index d79d31a..ad0a6b9 100644 --- a/scss/ueblueprint-style.css +++ b/scss/ueblueprint-style.css @@ -116,6 +116,10 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body { overflow : hidden; } +.ueb-grid[data-drag-scrolling="true"] { + cursor: grabbing; +} + .ueb-zoom--.ueb, .ueb { /* 16/16 */ @@ -204,7 +208,7 @@ ueb-node { will-change : transform; } -ueb-selector[data-selecting="false"]~ueb-node { +.ueb-grid[data-drag-scrolling="false"] ueb-selector[data-selecting="false"]~ueb-node { cursor: move; } @@ -278,11 +282,15 @@ ueb-pin { padding: 1px 2px; } +.ueb-grid[data-drag-scrolling="false"] { + cursor: default; +} + ueb-selector[data-selecting="false"]~ueb-node ueb-pin:hover { background: var(--ueb-node-value-background); } -ueb-selector[data-selecting="false"]~ueb-node ueb-pin .ueb-node-value-icon { +.ueb-grid[data-drag-scrolling="false"] ueb-selector[data-selecting="false"]~ueb-node ueb-pin .ueb-node-value-icon { cursor: crosshair; }