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

Edge scroll, minor refactoring

Browse Source
This commit is contained in:
barsdeveloper
2023-02-08 22:15:37 +01:00
parent cb98b85084
commit 319f5af77f
20 changed files with 175 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/Blueprint.js
View File

@@ -81,7 +81,6 @@ export default class Blueprint extends IElement {
node.setSelected(selected)
}
#avoidScrolling = false
/** @type {Map<String, Number>} */
#nodeNameCounter = new Map()
/** @type {NodeElement[]}" */
@@ -126,14 +125,14 @@ export default class Blueprint extends IElement {
this.scrollY = y
}
scrollDelta(x = 0, y = 0, smooth = false) {
scrollDelta(x = 0, y = 0, smooth = false, scrollTime = Configuration.smoothScrollTime) {
if (smooth) {
let previousScrollDelta = [0, 0]
Utility.animate(0, x, Configuration.smoothScrollTime, x => {
Utility.animate(0, x, scrollTime, x => {
this.scrollDelta(x - previousScrollDelta[0], 0, false)
previousScrollDelta[0] = x
})
Utility.animate(0, y, Configuration.smoothScrollTime, y => {
Utility.animate(0, y, scrollTime, y => {
this.scrollDelta(0, y - previousScrollDelta[1], false)
previousScrollDelta[1] = y
})

1
js/Configuration.js
View File

@@ -24,6 +24,7 @@ export default class Configuration {
static distanceThreshold = 5 // px
static dragEventName = "ueb-drag"
static dragGeneralEventName = "ueb-drag-general"
static edgeScrollThreshold = 50
static editTextEventName = {
begin: "ueb-edit-text-begin",
end: "ueb-edit-text-end",

6
js/Utility.js
View File

@@ -108,10 +108,10 @@ export default class Utility {
*/
static convertLocation(viewportLocation, movementElement, ignoreScale = false) {
const scaleCorrection = ignoreScale ? 1 : 1 / Utility.getScale(movementElement)
const targetOffset = movementElement.getBoundingClientRect()
const bounding = movementElement.getBoundingClientRect()
let location = [
Math.round((viewportLocation[0] - targetOffset.x) * scaleCorrection),
Math.round((viewportLocation[1] - targetOffset.y) * scaleCorrection)
Math.round((viewportLocation[0] - bounding.x) * scaleCorrection),
Math.round((viewportLocation[1] - bounding.y) * scaleCorrection)
]
return location
}

12
js/element/WindowElement.js
View File

@@ -1,7 +1,7 @@
import ColorPickerWindowTemplate from "../template/ColorPickerWindowTemplate"
import ColorPickerWindowTemplate from "../template/window/ColorPickerWindowTemplate"
import Configuration from "../Configuration"
import IDraggableElement from "./IDraggableElement"
import WindowTemplate from "../template/WindowTemplate"
import WindowTemplate from "../template/window/WindowTemplate"
/** @typedef {typeof WindowElement} WindowElementConstructor */
@@ -43,10 +43,10 @@ export default class WindowElement extends IDraggableElement {
super.initialize(entity, template)
}
setup() {
super.setup()
this.locationX = this.blueprint.mousePosition[0]
this.locationY = this.blueprint.mousePosition[1]
computeSizes() {
const bounding = this.getBoundingClientRect()
this.sizeX = bounding.width
this.sizeY = bounding.height
}
cleanup() {

2
js/entity/ObjectEntity.js
View File

@@ -455,7 +455,7 @@ export default class ObjectEntity extends IEntity {
if (this.getClass() === Configuration.nodeType.macro) {
return Utility.formatStringName(this.MacroGraphReference.getMacroName())
}
let memberName = this.FunctionReference.MemberName
let memberName = this.FunctionReference?.MemberName
if (memberName) {
const memberParent = this.FunctionReference.MemberParent?.path ?? ""
switch (memberName) {

26
js/input/mouse/IMouseClickDrag.js
View File

@@ -74,7 +74,30 @@ export default class IMouseClickDrag extends IPointing {
const movement = [e.movementX, e.movementY]
this.dragTo(location, movement)
if (this.#trackingMouse) {
this.blueprint.mousePosition = this.locationFromEvent(e)
this.blueprint.mousePosition = location
}
if (this.options.scrollGraphEdge) {
const movementNorm = Math.sqrt(movement[0] * movement[0] + movement[1] * movement[1])
const threshold = this.blueprint.scaleCorrect(Configuration.edgeScrollThreshold)
const leftThreshold = this.blueprint.template.gridLeftVisibilityBoundary() + threshold
const rightThreshold = this.blueprint.template.gridRightVisibilityBoundary() - threshold
let scrollX = 0
if (location[0] < leftThreshold) {
scrollX = location[0] - leftThreshold
} else if (location[0] > rightThreshold) {
scrollX = location[0] - rightThreshold
}
const topThreshold = this.blueprint.template.gridTopVisibilityBoundary() + threshold
const bottomThreshold = this.blueprint.template.gridBottomVisibilityBoundary() - threshold
let scrollY = 0
if (location[1] < topThreshold) {
scrollY = location[1] - topThreshold
} else if (location[1] > bottomThreshold) {
scrollY = location[1] - bottomThreshold
}
scrollX = Utility.clamp(this.blueprint.scaleCorrectReverse(scrollX) ** 3 * movementNorm * 0.6, -20, 20)
scrollY = Utility.clamp(this.blueprint.scaleCorrectReverse(scrollY) ** 3 * movementNorm * 0.6, -20, 20)
this.blueprint.scrollDelta(scrollX, scrollY)
}
}
@@ -124,6 +147,7 @@ export default class IMouseClickDrag extends IPointing {
options.moveEverywhere ??= false
options.movementSpace ??= blueprint?.getGridDOMElement()
options.repositionOnClick ??= false
options.scrollGraphEdge ??= false
options.strictTarget ??= false
super(target, blueprint, options)
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)

11
js/input/mouse/MouseCreateLink.js
View File

@@ -3,6 +3,7 @@ import ElementFactory from "../../element/ElementFactory"
import IMouseClickDrag from "./IMouseClickDrag"
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/LinkElement").default} LinkElement
* @typedef {import("../../element/LinkElement").LinkElementConstructor} LinkElementConstructor
* @typedef {import("../../element/PinElement").default} PinElement
@@ -68,6 +69,16 @@ export default class MouseCreateLink extends IMouseClickDrag {
linkValid = false
/**
* @param {PinElement} target
* @param {Blueprint} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options = {}) {
options.scrollGraphEdge ??= true
super(target, blueprint, options)
}
startDrag(location) {
if (this.target.nodeElement.getType() == Configuration.nodeType.knot) {
this.#knotPin = this.target

3
js/input/mouse/Select.js
View File

@@ -2,7 +2,8 @@ import IMouseClickDrag from "./IMouseClickDrag"
export default class Select extends IMouseClickDrag {
constructor(target, blueprint, options) {
constructor(target, blueprint, options = {}) {
options.scrollGraphEdge ??= true
super(target, blueprint, options)
this.selectorElement = this.blueprint.template.selectorElement
}

1
js/template/ISelectableDraggableTemplate.js
View File

@@ -20,6 +20,7 @@ export default class ISelectableDraggableTemplate extends IDraggablePositionedTe
createDraggableObject() {
return /** @type {MouseMoveDraggable} */(new MouseMoveNodes(this.element, this.blueprint, {
draggableElement: this.getDraggableElement(),
scrollGraphEdge: true,
}))
}

2
js/template/pin/LinearColorPinTemplate.js
View File

@@ -1,5 +1,5 @@
import { html, nothing } from "lit"
import ColorPickerWindowTemplate from "../ColorPickerWindowTemplate"
import ColorPickerWindowTemplate from "../window/ColorPickerWindowTemplate"
import Configuration from "../../Configuration"
import ElementFactory from "../../element/ElementFactory"
import PinTemplate from "./PinTemplate"

12
js/template/ColorPickerWindowTemplate.js → js/template/window/ColorPickerWindowTemplate.js
View File

@@ -1,14 +1,14 @@
import { html } from "lit"
import { styleMap } from "lit/directives/style-map.js"
import ColorHandlerElement from "../element/ColorHandlerElement"
import ColorSliderElement from "../element/ColorSliderElement"
import Configuration from "../Configuration"
import LinearColorEntity from "../entity/LinearColorEntity"
import Utility from "../Utility"
import ColorHandlerElement from "../../element/ColorHandlerElement"
import ColorSliderElement from "../../element/ColorSliderElement"
import Configuration from "../../Configuration"
import LinearColorEntity from "../../entity/LinearColorEntity"
import Utility from "../../Utility"
import WindowTemplate from "./WindowTemplate"
/**
* @typedef {import("../element/WindowElement").default} WindowElement
* @typedef {import("../../element/WindowElement").default} WindowElement
* @typedef {import("lit").PropertyValues} PropertyValues
*/

28
js/template/WindowTemplate.js → js/template/window/WindowTemplate.js
View File

@@ -1,10 +1,10 @@
import { html } from "lit"
import Configuration from "../Configuration"
import IDraggablePositionedTemplate from "./IDraggablePositionedTemplate"
import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
import SVGIcon from "../SVGIcon"
import Configuration from "../../Configuration"
import IDraggablePositionedTemplate from "../IDraggablePositionedTemplate"
import MouseMoveDraggable from "../../input/mouse/MouseMoveDraggable"
import SVGIcon from "../../SVGIcon"
/** @typedef {import("../element/WindowElement").default} WindowElement */
/** @typedef {import("../../element/WindowElement").default} WindowElement */
/** @extends {IDraggablePositionedTemplate<WindowElement>} */
export default class WindowTemplate extends IDraggablePositionedTemplate {
@@ -25,6 +25,24 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
})
}
setup() {
const leftBoundary = this.blueprint.template.gridLeftVisibilityBoundary()
const topBoundary = this.blueprint.template.gridTopVisibilityBoundary()
this.element.locationX = this.blueprint.scaleCorrectReverse(this.blueprint.mousePosition[0] - leftBoundary)
this.element.locationY = this.blueprint.scaleCorrectReverse(this.blueprint.mousePosition[1] - topBoundary)
this.element.updateComplete.then(() => {
const bounding = this.blueprint.getBoundingClientRect()
if (this.element.locationX + this.element.sizeX > bounding.width) {
this.element.locationX = bounding.width - this.element.sizeX
}
this.element.locationX = Math.max(0, this.element.locationX)
if (this.element.locationY + this.element.sizeY > bounding.height) {
this.element.locationY = bounding.height - this.element.sizeY
}
this.element.locationY = Math.max(0, this.element.locationY)
})
}
render() {
return html`
<div class="ueb-window">