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

Resizeable comments

Browse Source
This commit is contained in:
barsdeveloper
2022-12-04 22:12:53 +01:00
parent 41e1ffd59b
commit 9e8e25d832
19 changed files with 1103 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
js/template/CommentNodeTemplate.js
View File

@@ -1,13 +1,14 @@
import { css, html } from "lit"
import Configuration from "../Configuration"
import IResizeableTemplate from "./IResizeableTemplate"
import LinearColorEntity from "../entity/LinearColorEntity"
import NodeTemplate from "./NodeTemplate"
/**
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
*/
export default class CommentNodeTemplate extends NodeTemplate {
export default class CommentNodeTemplate extends IResizeableTemplate {
#color = LinearColorEntity.getWhite()
@@ -19,12 +20,12 @@ export default class CommentNodeTemplate extends NodeTemplate {
// Dimming the colors to 2/3
const factor = 2 / 3
this.#color.setFromRGBA(
this.#color.R.value * factor,
this.#color.G.value * factor,
this.#color.B.value * factor,
this.#color.R.value,
this.#color.G.value,
this.#color.B.value,
)
element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
super.constructed(element) // Keep it at the end
super.constructed(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
}
getColor() {
@@ -36,25 +37,32 @@ export default class CommentNodeTemplate extends NodeTemplate {
}
render() {
const width = this.element.entity.getNodeWidth()
const height = this.element.entity.getNodeHeight()
return html`
<div class="ueb-node-border">
<div class="ueb-node-handler-top"></div>
<div class="ueb-node-handler-right"></div>
<div class="ueb-node-handler-bottom"></div>
<div class="ueb-node-handler-left"></div>
<div class="ueb-node-wrapper">
<div class="ueb-node-top">
${this.element.entity.NodeComment}
</div>
<div class="ueb-node-content"
style="${`width: ${width}px; height: ${height}px;`}">
</div>
</div>
</div>
`
}
/** @param {Number} value */
setSizeX(value) {
if (value >= Configuration.gridSet * Configuration.gridSize) {
this.element.sizeX = value
return true
}
return false
}
/** @param {Number} value */
setSizeY(value) {
if (value >= 3 * Configuration.gridSize) {
this.element.sizeY = Math.max(value, 3 * Configuration.gridSize)
return true
}
return false
}
}