Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-20 21:07:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
barsdeveloper
2021-10-31 16:05:38 +01:00
parent 12e44c5482
commit 199005ec20
13 changed files with 1297 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
js/Blueprint.js
View File

@@ -1,23 +1,21 @@
import BlueprintTemplate from "./template/BlueprintTemplate"
import DragScroll from "./input/DragScroll"
import GraphEntity from "./graph/GraphEntity"
import GraphElement from "./graph/GraphElement"
import GraphSelector from "./graph/GraphSelector"
import Select from "./input/Select"
import Utility from "./Utility"
import Zoom from "./input/Zoom"
import BlueprintData from "./BlueprintData"
/** @typedef {import("./graph/GraphNode").default} GraphNode */
export default class Blueprint extends GraphEntity {
export default class Blueprint extends GraphElement {
insertChildren() {
this.querySelector('[data-nodes]').append(...this.nodes)
this.querySelector('[data-nodes]').append(...this.entity.nodes)
}
constructor() {
super(new BlueprintTemplate())
/** @type {GraphNode[]}" */
this.nodes = new Array()
this.expandGridSize = 400
super(new BlueprintData(), new BlueprintTemplate())
/** @type {HTMLElement} */
this.gridElement = null
/** @type {HTMLElement} */
@@ -30,10 +28,6 @@ export default class Blueprint extends GraphEntity {
this.nodesContainerElement = null
this.dragObject = null
this.selectObject = null
/** @type {Array<number>} */
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
/** @type {Array<number>} */
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
/** @type {number} */
this.zoom = 0
/** @type {HTMLElement} */
@@ -128,19 +122,19 @@ export default class Blueprint extends GraphEntity {
]
let expand = [0, 0]
for (let i = 0; i < 2; ++i) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) {
if (delta[i] < 0 && finalScroll[i] < 0.25 * this.entity.expandGridSize) {
// Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i]
if (expand[i] > 0) {
// Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
expand[i] = -this.expandGridSize
expand[i] = -this.entity.expandGridSize
}
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) {
} else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.entity.expandGridSize) {
// Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step
expand[i] = finalScroll[i] - scrollMax[i]
if (expand[i] < 0) {
// Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
expand[i] = this.expandGridSize
expand[i] = this.entity.expandGridSize
}
}
}
@@ -158,8 +152,8 @@ export default class Blueprint extends GraphEntity {
scrollCenter() {
const scroll = this.getScroll()
const offset = [
this.translateValue[0] - scroll[0],
this.translateValue[1] - scroll[1]
this.entity.translateValue[0] - scroll[0],
this.entity.translateValue[1] - scroll[1]
]
const targetOffset = this.getViewportSize().map(size => size / 2)
const deltaOffset = [
@@ -170,7 +164,7 @@ export default class Blueprint extends GraphEntity {
}
getExpandGridSize() {
return this.expandGridSize
return this.entity.expandGridSize
}
getViewportSize() {
@@ -199,10 +193,10 @@ export default class Blueprint extends GraphEntity {
_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.entity.additional = [this.entity.additional[0] + x, this.entity.additional[1] + y]
if (this.gridElement) {
this.gridElement.style.setProperty('--ueb-additional-x', this.additional[0])
this.gridElement.style.setProperty('--ueb-additional-y', this.additional[1])
this.gridElement.style.setProperty('--ueb-additional-x', this.entity.additional[0])
this.gridElement.style.setProperty('--ueb-additional-y', this.entity.additional[1])
}
}
@@ -214,10 +208,10 @@ export default class Blueprint extends GraphEntity {
_translate(x, y) {
x = Math.round(x)
y = Math.round(y)
this.translateValue = [this.translateValue[0] + x, this.translateValue[1] + y]
this.entity.translateValue = [this.entity.translateValue[0] + x, this.entity.translateValue[1] + y]
if (this.gridElement) {
this.gridElement.style.setProperty('--ueb-translate-x', this.translateValue[0])
this.gridElement.style.setProperty('--ueb-translate-y', this.translateValue[1])
this.gridElement.style.setProperty('--ueb-translate-x', this.entity.translateValue[0])
this.gridElement.style.setProperty('--ueb-translate-y', this.entity.translateValue[1])
}
}
@@ -243,7 +237,7 @@ export default class Blueprint extends GraphEntity {
}
progressiveSnapToGrid(x) {
return this.expandGridSize * Math.round(x / this.expandGridSize + 0.5 * Math.sign(x))
return this.entity.expandGridSize * Math.round(x / this.entity.expandGridSize + 0.5 * Math.sign(x))
}
getZoom() {
@@ -279,16 +273,24 @@ export default class Blueprint extends GraphEntity {
}
compensateTranslation(position) {
position[0] -= this.translateValue[0]
position[1] -= this.translateValue[1]
position[0] -= this.entity.translateValue[0]
position[1] -= this.entity.translateValue[1]
return position
}
/**
*
* @returns {GraphNode[]} Nodes
*/
getNodes() {
return this.entity.nodes
}
/**
* Unselect all nodes
*/
unselectAll() {
this.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
this.entity.nodes.forEach(node => this.nodeSelectToggleFunction(node, false))
}
/**
@@ -301,7 +303,7 @@ export default class Blueprint extends GraphEntity {
s.push(e)
return s
},
this.nodes)
this.entity.nodes)
if (this.nodesContainerElement) {
this.nodesContainerElement.append(...graphNodes)
}

13
js/BlueprintData.js Normal file
View File

@@ -0,0 +1,13 @@
/** @typedef {import("./graph/GraphNode").default} GraphNode */
export default class BlueprintData {
constructor() {
/** @type {GraphNode[]}" */
this.nodes = new Array()
this.expandGridSize = 400
/** @type {Array<number>} */
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
/** @type {Array<number>} */
this.translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
}
}

9
js/export.js
View File

@@ -1,14 +1,17 @@
import FunctionReferenceEntity from "./entity/FunctionReferenceEntity"
import GeneralSerializer from "./serialization/GeneralSerializer"
import LocalizedTextEntity from "./entity/LocalizedTextEntity"
import ObjectEntity from "./entity/ObjectEntity"
import ObjectSerializer from "./serialization/ObjectSerializer"
import PinEntity from "./entity/PinEntity"
import SerializerFactory from "./serialization/SerializerFactory"
import FunctionReferenceEntity from "./entity/FunctionReferenceEntity"
import LocalizedTextEntity from "./entity/LocalizedTextEntity"
import Blueprint from "./Blueprint"
import GraphNode from "./graph/GraphNode"
import GraphLink from "./graph/GraphLink"
SerializerFactory.registerSerializer(ObjectEntity, new ObjectSerializer())
SerializerFactory.registerSerializer(PinEntity, new GeneralSerializer("Pin ", PinEntity, "", ",", true))
SerializerFactory.registerSerializer(FunctionReferenceEntity, new GeneralSerializer("", FunctionReferenceEntity, "", ",", false))
SerializerFactory.registerSerializer(LocalizedTextEntity, new GeneralSerializer("NSLOCTEXT", LocalizedTextEntity, "", ",", false, "", _ => ""))
export { SerializerFactory as SerializerFactory, ObjectEntity as ObjectEntity }
export { Blueprint as Blueprint, GraphNode as GraphNode, GraphLink as GraphLink }

18
js/graph/GraphElement.js Executable file
View File

@@ -0,0 +1,18 @@
export default class GraphElement extends HTMLElement {
/**
*
* @param {import("../template/Template").default} template The template to render this node
*/
constructor(entity, template) {
super()
/** @type {import("../Blueprint").default}" */
this.blueprint = null
this.entity = entity
this.template = template
}
connectedCallback() {
this.blueprint = this.closest('u-blueprint')
this.append(...this.template.getElements(this.entity))
}
}

22
js/graph/GraphEntity.js
View File

@@ -1,22 +0,0 @@
export default class GraphEntity extends HTMLElement {
/**
*
* @param {import("../template/Template").default} template The template to render this node
*/
constructor(template) {
super()
/** @type {import("../Blueprint").Blueprint}" */
this.blueprint = null
this.template = template
}
connectedCallback() {
this.blueprint = this.closest('u-blueprint')
this.append(...this.template.getElements(this))
}
// Subclasses want to rewrite this
render() {
return ''
}
}

4
js/graph/GraphLink.js
View File

@@ -1,6 +1,6 @@
import UBlueprintEntity from "./UBlueprintEntity"
import GraphElement from "./GraphElement"
export default class GraphLink extends UBlueprintEntity {
export default class GraphLink extends GraphElement {
/**
*

11
js/graph/GraphNode.js
View File

@@ -1,10 +1,17 @@
import ObjectEntity from "../entity/ObjectEntity"
import SerializerFactory from "../serialization/SerializerFactory"
import NodeTemplate from "../template/NodeTemplate"
import SelectableDraggable from "./SelectableDraggable"
export default class GraphNode extends SelectableDraggable {
constructor() {
super(new NodeTemplate())
static fromSerializedObject(str) {
let entity = SerializerFactory.getSerializer(ObjectEntity).read(str)
return new GraphNode(entity)
}
constructor(entity) {
super(entity, new NodeTemplate())
this.graphNodeName = 'n/a'
this.inputs = []
this.outputs = []

8
js/graph/GraphSelector.js
View File

@@ -1,11 +1,11 @@
import FastSelectionModel from "../selection/FastSelectionModel"
import GraphEntity from "./GraphEntity"
import GraphElement from "./GraphElement"
import Template from "../template/Template"
export default class GraphSelector extends GraphEntity {
export default class GraphSelector extends GraphElement {
constructor() {
super(new Template())
super({}, new Template())
/**
* @type {import("./GraphSelector").default}
*/
@@ -31,7 +31,7 @@ export default class GraphSelector extends GraphEntity {
this.style.setProperty('--ueb-select-to-x', initialPosition[0])
this.style.setProperty('--ueb-select-to-y', initialPosition[1])
this.dataset.selecting = "true"
this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.nodes, this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
}
/**

8
js/graph/SelectableDraggable.js
View File

@@ -1,10 +1,10 @@
import Drag from "../input/Drag"
import GraphEntity from "./GraphEntity"
import GraphElement from "./GraphElement"
export default class SelectableDraggable extends GraphEntity {
export default class SelectableDraggable extends GraphElement {
constructor(template) {
super(template)
constructor(...args) {
super(...args)
this.dragObject = null
this.location = [0, 0]
this.selected = false

4
js/template/NodeTemplate.js
View File

@@ -1,4 +1,4 @@
import { PinEntity } from "../../dist/ueblueprint"
import PinEntity from "../entity/PinEntity"
import Template from "./Template"
export default class NodeTemplate extends Template {
@@ -42,7 +42,7 @@ export default class NodeTemplate extends Template {
${outputs.map((output, index) => `
<div class="ueb-node-output ueb-node-value-${output.type}">
${output.name}
<span class="ueb-node-value-icon ${entity.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
<span class="ueb-node-value-icon ${outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
</div>
`).join("") ?? ''}
</div>

6
js/template/Template.js
View File

@@ -1,5 +1,5 @@
/**
* @typedef {import("../graph/GraphNode").default} GraphNode
* @typedef {import(""../entity/Entity"").default} Entity
*/
export default class Template {
@@ -14,12 +14,12 @@ export default class Template {
/**
* Returns the html elements rendered by this template.
* @param {GraphNode} entity Entity representing the element
* @param {Entity} entity Entity representing the element
* @returns The rendered elements
*/
getElements(entity) {
let aDiv = document.createElement('div')
aDiv.innerHTML = this.render(element)
aDiv.innerHTML = this.render(entity)
return aDiv.childNodes
}
}