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

Selector element added

Browse Source
This commit is contained in:
barsdeveloper
2021-10-10 15:34:12 +02:00
parent 82355b9126
commit 16fd34fa84
9 changed files with 229 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/GraphNode.js
View File

@@ -11,6 +11,7 @@ export default class GraphNode extends SelectableDraggable {
}
connectedCallback() {
const type = this.getAttribute('type')?.trim()
super.connectedCallback()
this.classList.add('ueb-node')
if (this.selected) {
@@ -21,4 +22,4 @@ export default class GraphNode extends SelectableDraggable {
}
}
customElements.define('u-object', GraphNode)
customElements.define('u-node', GraphNode)

54
js/GraphSelector.js Normal file
View File

@@ -0,0 +1,54 @@
import FastSelectionModel from "./selection/FastSelectionModel";
import GraphEntity from "./GraphEntity";
import Template from "./template/Template";
export default class GraphSelector extends GraphEntity {
constructor() {
super(new Template())
/**
* @type {import("./GraphSelector").default}
*/
this.selectionModel = null
}
connectedCallback() {
super.connectedCallback()
this.classList.add('ueb-selector')
this.dataset.selecting = "false"
}
/**
* Create a selection rectangle starting from the specified position
* @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
*/
startSelecting(initialPosition) {
initialPosition = this.blueprint.compensateTranslation(initialPosition)
// Set initial position
this.style.setProperty('--ueb-select-from-x', initialPosition[0])
this.style.setProperty('--ueb-select-from-y', initialPosition[1])
// Final position coincide with the initial position, at the beginning of selection
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)
}
/**
* Move selection rectagle to the specified final position. The initial position was specified by startSelecting()
* @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
*/
doSelecting(finalPosition) {
finalPosition = this.blueprint.compensateTranslation(finalPosition)
this.style.setProperty('--ueb-select-to-x', finalPosition[0])
this.style.setProperty('--ueb-select-to-y', finalPosition[1])
this.selectionModel.selectTo(finalPosition)
}
finishSelecting() {
this.dataset.selecting = "false"
this.selectionModel = null
}
}
customElements.define('u-selector', GraphSelector)

54
js/UEBlueprint.js
View File

@@ -2,13 +2,12 @@ import Utility from "./Utility"
import DragScroll from "./input/DragScroll"
import Select from "./input/Select"
import Zoom from "./input/Zoom"
import FastSelectionModel from "./selection/FastSelectionModel"
import SimpleSelectionModel from "./selection/SimpleSelectionModel"
import GraphEntity from "./GraphEntity"
import BlueprintTemplate from "./template/BlueprintTemplate"
import GraphSelector from "./GraphSelector"
/**
* @typedef {import("./GraphNode").default} GrapNode
* @typedef {import("./GraphNode").default} GraphNode
*/
export default class UEBlueprint extends GraphEntity {
@@ -18,7 +17,7 @@ export default class UEBlueprint extends GraphEntity {
constructor() {
super(new BlueprintTemplate())
/** @type {GrapNode[]}" */
/** @type {GraphNode[]}" */
this.nodes = new Array()
this.expandGridSize = 400
/** @type {HTMLElement} */
@@ -41,10 +40,7 @@ export default class UEBlueprint extends GraphEntity {
this.zoom = 0
/** @type {HTMLElement} */
this.headerElement = null
/** @type {FastSelectionModel} */
this.selectionModel = null
let self = this
/** @type {(node: GrapNode) => BoundariesInfo} */
/** @type {(node: GraphNode) => BoundariesInfo} */
this.nodeBoundariesSupplier = (node) => {
let rect = node.getBoundingClientRect()
let gridRect = this.nodesContainerElement.getBoundingClientRect()
@@ -57,7 +53,7 @@ export default class UEBlueprint extends GraphEntity {
secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
}
}
/** @type {(node: GrapNode, selected: bool) => void}} */
/** @type {(node: GraphNode, selected: bool) => void}} */
this.nodeSelectToggleFunction = (node, selected) => {
node.setSelected(selected)
}
@@ -67,7 +63,7 @@ export default class UEBlueprint extends GraphEntity {
super.connectedCallback()
this.classList.add('ueb', `ueb-zoom-${this.zoom}`)
this.headerElement = this.querySelector('.ueb-node-header')
this.headerElement = this.querySelector('.ueb-viewport-header')
console.assert(this.headerElement, "Header element not provided by the template.")
this.overlayElement = this.querySelector('.ueb-viewport-overlay')
console.assert(this.overlayElement, "Overlay element not provided by the template.")
@@ -75,10 +71,10 @@ export default class UEBlueprint extends GraphEntity {
console.assert(this.viewportElement, "Viewport element not provided by the template.")
this.gridElement = this.viewportElement.querySelector('.ueb-grid')
console.assert(this.gridElement, "Grid element not provided by the template.")
this.selectorElement = this.viewportElement.querySelector('.ueb-selector')
console.assert(this.selectorElement, "Selector element not provided by the template.")
this.selectorElement = new GraphSelector()
this.nodesContainerElement = this.querySelector('[data-nodes]')
console.assert(this.nodesContainerElement, "Nodes container element not provided by the template.")
this.nodesContainerElement.append(this.selectorElement)
this.insertChildren()
this.dragObject = new DragScroll(this.getGridDOMElement(), this, {
@@ -290,38 +286,6 @@ export default class UEBlueprint extends GraphEntity {
return position
}
/**
* Create a selection rectangle starting from the specified position
* @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
*/
startSelecting(initialPosition) {
initialPosition = this.compensateTranslation(initialPosition)
// Set initial position
this.selectorElement.style.setProperty('--ueb-select-from-x', initialPosition[0])
this.selectorElement.style.setProperty('--ueb-select-from-y', initialPosition[1])
// Final position coincide with the initial position, at the beginning of selection
this.selectorElement.style.setProperty('--ueb-select-to-x', initialPosition[0])
this.selectorElement.style.setProperty('--ueb-select-to-y', initialPosition[1])
this.selectorElement.dataset.selecting = "true"
this.selectionModel = new FastSelectionModel(initialPosition, this.nodes, this.nodeBoundariesSupplier, this.nodeSelectToggleFunction)
}
finishSelecting() {
this.selectorElement.dataset.selecting = "false"
this.selectionModel = null
}
/**
* Move selection rectagle to the specified final position. The initial position was specified by startSelecting()
* @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
*/
doSelecting(finalPosition) {
finalPosition = this.compensateTranslation(finalPosition)
this.selectorElement.style.setProperty('--ueb-select-to-x', finalPosition[0])
this.selectorElement.style.setProperty('--ueb-select-to-y', finalPosition[1])
this.selectionModel.selectTo(finalPosition)
}
/**
* Unselect all nodes
*/
@@ -331,7 +295,7 @@ export default class UEBlueprint extends GraphEntity {
/**
*
* @param {...GrapNode} blueprintNodes
* @param {...GraphNode} blueprintNodes
*/
addNode(...blueprintNodes) {
[...blueprintNodes].reduce(

7
js/input/Select.js
View File

@@ -6,19 +6,20 @@ export default class Select extends MouseClickDrag {
super(target, blueprint, options)
this.stepSize = options?.stepSize
this.mousePosition = [0, 0]
this.selectorElement = this.blueprint.selectorElement
}
startDrag() {
this.blueprint.startSelecting(this.clickedPosition)
this.selectorElement.startSelecting(this.clickedPosition)
}
dragTo(location, movement) {
this.blueprint.doSelecting(location)
this.selectorElement.doSelecting(location)
}
endDrag() {
if (this.started) {
this.blueprint.finishSelecting()
this.selectorElement.finishSelecting()
} else {
this.blueprint.unselectAll()
}

4
js/template/BlueprintTemplate.js
View File

@@ -25,9 +25,7 @@ export default class BlueprintTemplate extends Template {
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="--ueb-additional-x:${element.additional[0]}; --ueb-additional-y:${element.additional[1]}; --ueb-translate-x:${element.translateValue[0]}; --ueb-translate-y:${element.translateValue[1]}">
<div class="ueb-grid-content" data-nodes>
<div class="ueb-selector" data-selecting="false"></div>
</div>
<div class="ueb-grid-content" data-nodes></div>
</div>
</div>
`

7
js/template/Template.js
View File

@@ -1,8 +1,11 @@
/**
* @typedef {import("./GraphNode").default} GraphNode
*/
export default class Template {
/**
* Computes the html content of the target element.
* @param {HTMLElement} element Target element
* @param {GraphNode} element Target element
* @returns The computed html
*/
render(element) {
@@ -11,7 +14,7 @@ export default class Template {
/**
* Returns the html elements rendered by this template.
* @param {HTMLElement} element Target element
* @param {GraphNode} element Target element
* @returns The rendered elements
*/
getElements(element) {