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

Moving fonts to dist, grabbing cursor on scrolling

Browse Source
This commit is contained in:
barsdeveloper
2021-12-27 01:45:44 +01:00
parent 1017ce6bb2
commit 303cc5b71e
26 changed files with 202 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/ueblueprint-node-value-type-color.css.map
View File

@@ -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"}

1
css/ueblueprint-style.css
View File

File diff suppressed because one or more lines are too long

1
css/ueblueprint-style.css.map
View File

@@ -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"}

0
css/ueblueprint-node-value-type-color.css → dist/css/ueblueprint-node-value-type-color.css vendored
View File

1
dist/css/ueblueprint-node-value-type-color.css.map vendored Normal file
View File

@@ -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"}

1
dist/css/ueblueprint-style.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/ueblueprint-style.css.map vendored Normal file
View File

@@ -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"}

BIN
dist/font/roboto-bold.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/font/roboto-bold.woff2 vendored Normal file
View File

Binary file not shown.

BIN
dist/font/roboto-light.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/font/roboto-light.woff2 vendored Normal file
View File

Binary file not shown.

BIN
dist/font/roboto-regular.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/font/roboto-regular.woff2 vendored Normal file
View File

Binary file not shown.

129
dist/ueblueprint.js vendored
View File

@@ -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;
}

4
index.html
View File

@@ -7,8 +7,8 @@
<title></title>
<style>
</style>
<link rel="stylesheet" href="css/ueblueprint-node-value-type-color.css">
<link rel="stylesheet" href="css/ueblueprint-style.css">
<link rel="stylesheet" href="dist/css/ueblueprint-node-value-type-color.css">
<link rel="stylesheet" href="dist/css/ueblueprint-style.css">
</head>
<body>

69
js/Blueprint.js
View File

@@ -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
}

5
js/Configuration.js
View File

@@ -1,4 +1,7 @@
export default class Configuration {
static deleteNodesKeyboardKey = "Delete"
}
static expandGridSize = 400
static gridSize = 16
static gridSnap = 16
}

4
js/graph/GraphElement.js
View File

@@ -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)

5
js/input/DragMove.js
View File

@@ -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

8
js/input/DragScroll.js
View File

@@ -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)
}
}

12
js/input/Paste.js
View File

@@ -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()
}

25
js/template/BlueprintTemplate.js
View File

@@ -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
}
}

4
js/template/SelectorTemplate.js
View File

@@ -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"
}
}

3
package.json
View File

@@ -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",

9
rollup.config.js
View File

@@ -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"
}
]
})
]
}

12
scss/ueblueprint-style.css
View File

@@ -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;
}