Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Links implementation WIP

Browse Source
This commit is contained in:
barsdeveloper
2022-02-02 18:20:00 +01:00
parent e4ff5efc80
commit b2c3ba14f3
6 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/ueblueprint-style.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueblueprint-style.css.map vendored
View File

@@ -1 +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,+FACI,4CACA,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,2CAEI,mBACA,mDACA,oDACA,6FACA,8FAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,SACI,cACA,kBACA,qBAGJ,aACI,WACA,YACA,sHAKA,iBAGJ,kBACI,6BAEA,2BACA,uEACA,sGACA,qIACA,4FACA","file":"ueblueprint-style.css"}
{"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,+FACI,4CACA,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,gBACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,kCACI,mBACA,wCACA,yCACA,0CACA,4CAGJ,eACI,mBAGJ,SACI,0BACA,cACA,kBACA,wCACA,iCACA,oFAKA,4CACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA","file":"ueblueprint-style.css"}

5
dist/ueblueprint.js vendored
View File

@@ -399,6 +399,7 @@ class SelectorTemplate extends Template {
*/
apply(selector) {
super.apply(selector);
selector.classList.add("ueb-positioned");
this.applyFinishSelecting(selector);
}
@@ -1494,6 +1495,7 @@ class LinkTemplate extends Template {
*/
apply(link) {
super.apply(link);
link.classList.add("ueb-positioned");
}
/**
@@ -1514,6 +1516,9 @@ class LinkTemplate extends Template {
applyDestinationLocation(link, finalPosition) {
link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0]));
link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1]));
const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1]);
let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2;
link.style.setProperty("--ueb-link-skew", skew);
}
}

4
js/template/LinkTemplate.js
View File

@@ -26,6 +26,7 @@ export default class LinkTemplate extends Template {
*/
apply(link) {
super.apply(link)
link.classList.add("ueb-positioned")
}
/**
@@ -46,5 +47,8 @@ export default class LinkTemplate extends Template {
applyDestinationLocation(link, finalPosition) {
link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0]))
link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1]))
const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1])
let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2
link.style.setProperty("--ueb-link-skew", skew)
}
}

1
js/template/SelectorTemplate.js
View File

@@ -12,6 +12,7 @@ export default class SelectorTemplate extends Template {
*/
apply(selector) {
super.apply(selector)
selector.classList.add("ueb-positioned")
this.applyFinishSelecting(selector)
}

64
scss/ueblueprint-style.css
View File

@@ -329,13 +329,13 @@ ueb-pin {
border-left : 0.3em solid var(--ueb-node-value-color);
}
ueb-selector[data-selecting="true"],
ueb-link {
visibility : visible;
top : min(var(--ueb-from-y) * 1px, var(--ueb-to-y) * 1px);
left : min(var(--ueb-from-x) * 1px, var(--ueb-to-x) * 1px);
width : calc(max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x)) * 1px);
height : calc(max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y)) * 1px);
.ueb-positioned {
--ueb-computed-min-x : min(var(--ueb-from-x), var(--ueb-to-x));
--ueb-computed-max-x : max(var(--ueb-from-x), var(--ueb-to-x));
--ueb-computed-min-y : min(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-max-y : max(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-width : max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));
--ueb-computed-height : max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));
}
ueb-selector {
@@ -424,35 +424,49 @@ ueb-selector {
background-repeat : no-repeat;
}
ueb-selector[data-selecting="true"] {
visibility : visible;
top : calc(var(--ueb-computed-min-y) * 1px);
left : calc(var(--ueb-computed-min-x) * 1px);
width : calc(var(--ueb-computed-width) * 1px);
height : calc(var(--ueb-computed-height) * 1px);
}
ueb-selector>* {
visibility : visible;
}
ueb-link {
display : block;
position : absolute;
border : 2px solid red;
--ueb-width-threshold : 50;
display : block;
position : absolute;
top : calc(var(--ueb-computed-min-y) * 1px);
left : calc(var(--ueb-from-x) * 1px);
width : calc(max(
/* 1 */
var(--ueb-to-x) - var(--ueb-from-x),
/* 3 */
var(--ueb-width-threshold)) * 1px);
height : calc(var(--ueb-computed-height) * 1px);
border : 1px solid red;
}
ueb-link svg {
width : 100%;
height : 100%;
transform : scale(
/* x */
clamp(-1, calc(var(--ueb-to-x) - var(--ueb-from-x)), 1),
/* y */
clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
overflow : visible;
transform : scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
overflow : visible;
}
ueb-link svg path {
--value : clamp(0, calc(), 1);
/* Taylor expansion of arcsin around 0 */
--asin-term1 : var(--value);
--asin-term2 : calc(1 / 6 * var(--value) * var(--value) * var(--value));
--asin-term3 : calc(3 / 40 * var(--value) * var(--value) * var(--value) * var(--value) * var(--value));
--asin-term4 : calc(5 / 112 * var(--value) * var(--value) * var(--value) * var(--value) * var(--value) * var(--value) * var(--value));
--asin : calc(var(--asin-term1) + var(--asin-term2) + var(--asin-term3) + var(--asin-term4));
transform : skewX(calc(1rad * var(--asin)));
/* flag stating whether or not the width of the link is below threshold or not */
--ueb-width-below-threshold : clamp(
/* min */
0,
/* input */
calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))),
/* max */
1);
transform : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));
transform-origin : 0 0;
}