Skip to content

Commit

Permalink
image widget
Browse files Browse the repository at this point in the history
  • Loading branch information
EliCDavis committed Sep 18, 2024
1 parent 5194d75 commit 765208d
Show file tree
Hide file tree
Showing 12 changed files with 184 additions and 15 deletions.
2 changes: 1 addition & 1 deletion esbuild.dev.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const buildOptsWeb: BuildOptions = {
// format: 'cjs',
bundle: true,
sourcemap: true,
minify: true,
minify: false,
treeShaking: true,
plugins: [
// NodeModulesPolyfillPlugin(),
Expand Down
15 changes: 6 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,8 @@
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
// function resizeCanvas() {
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
// }
// window.addEventListener('resize', resizeCanvas, false);
// resizeCanvas();

NodeFlowTheme.FontFamily = "Source Code Pro";



const node3 = new FlowNode({
title: "Node 3",
position: { x: 850, y: 150 },
Expand Down Expand Up @@ -286,6 +277,12 @@
{
type: "number",
config: { value: 2 }
},
{
type: "image",
config: {
image: "https://i.imgur.com/qRZgWC0.jpeg"
}
}
]
})
Expand Down
5 changes: 5 additions & 0 deletions src/graph.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { NoteSubsystem } from "./notes/subsystem";
import { ConnectionRendererConfiguration, NodeSubsystem } from "./nodes/subsystem";
import { Connection } from './connection';
import { Organize } from './organize';
import { Publisher } from './nodes/publisher';

export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;

Expand Down Expand Up @@ -177,6 +178,10 @@ export class NodeFlowGraph {
Organize(this.#ctx, this);
}

addPublisher(identifier: string, publisher: Publisher): void {
this.#mainNodeSubsystem.addPublisher(identifier, publisher);
}

getNodes(): Array<FlowNode> {
return this.#mainNodeSubsystem.getNodes();
}
Expand Down
4 changes: 4 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ globalThis.NodeFlowGraph = NodeFlowGraph;
globalThis.FlowNode = FlowNode;
globalThis.NodeFlowTheme = Theme;
globalThis.FlowNote = FlowNote;
globalThis.NodePublisher = Publisher;

// Widgets
import { NumberWidget } from './widgets/number';
Expand All @@ -15,10 +16,13 @@ import { ToggleWidget } from './widgets/toggle';
import { SliderWidget } from './widgets/slider';
import { GlobalWidgetFactory } from './widgets/factory';
import { FlowNote } from './notes/note';
import { Publisher } from './nodes/publisher';
import { ImageWidget } from './widgets/image';
globalThis.NumberWidget = NumberWidget;
globalThis.ColorWidget = ColorWidget;
globalThis.StringWidget = StringWidget;
globalThis.ButtonWidget = ButtonWidget;
globalThis.ToggleWidget = ToggleWidget;
globalThis.SliderWidget = SliderWidget;
globalThis.ImageWidget = ImageWidget;
globalThis.GlobalWidgetFactory = GlobalWidgetFactory;
4 changes: 4 additions & 0 deletions src/node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,10 @@ export class FlowNode {

public setProperty(name: string, value: any): void {
const oldValue = this.#data[name];
if (oldValue === value) {
return;
}

this.#data[name] = value;

for (let i = 0; i < this.#registeredAnyPropertyChangeCallbacks.length; i++) {
Expand Down
1 change: 0 additions & 1 deletion src/nodes/publisher.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ContextMenuConfig, ContextMenuItemConfig } from "../contextMenu";
import { NodeFlowGraph } from "../graph";
import { FlowNode, FlowNodeConfig } from '../node';
import { Vector2 } from "../types/vector2";
import { NodeSubsystem } from "./subsystem";
Expand Down
5 changes: 5 additions & 0 deletions src/nodes/subsystem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CursorStyle } from "../styles/cursor";
import { Vector2 } from "../types/vector2";
import { Widget } from "../widgets/widget";
import { NodeFactory, NodeFactoryConfig } from "./factory";
import { Publisher } from "./publisher";

export interface ConnectionRendererConfiguration {
size?: number;
Expand Down Expand Up @@ -81,6 +82,10 @@ export class NodeSubsystem {
this.#idleConnectionRenderer = BuildConnectionRenderer(config?.idleConnection);
}

addPublisher(identifier: string, publisher: Publisher): void {
this.#nodeFactory.addPublisher(identifier, publisher);
}

clickStart(mousePosition: Vector2, ctrlKey: boolean): boolean {
let hoveringSomething = false;
if (this.#nodeHovering > -1) {
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export class ColorWidget {
constructor(node: FlowNode, config?: ColorWidgetConfig) {
this.#node = node;
this.#nodeProperty = config?.property;
this.Set(config?.value === undefined ? "#000000" : config?.value);
this.#textBoxStyle = new TextBoxStyle({
box: {
color: this.#value,
Expand All @@ -59,6 +58,7 @@ export class ColorWidget {
},
text: config?.textStyle
});
this.Set(config?.value === undefined ? "#000000" : config?.value);
this.#callback = config?.callback;

if (this.#nodeProperty !== undefined) {
Expand Down
2 changes: 2 additions & 0 deletions src/widgets/factory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { SliderWidget, SliderWidgetConfig } from './slider';
import { StringWidget, StringWidgetConfig } from './string';
import { ToggleWidget, ToggleWidgetConfig } from './toggle';
import { FlowNode } from "../node";
import { ImageWidget, ImageWidgetConfig } from "./image";

export type WidgetBuilder = (node: FlowNode, confg?: any) => Widget;

Expand Down Expand Up @@ -38,5 +39,6 @@ GlobalWidgetFactory.register("color", (node: FlowNode, config?: ColorWidgetConfi
GlobalWidgetFactory.register("slider", (node: FlowNode, config?: SliderWidgetConfig) => new SliderWidget(node, config));
GlobalWidgetFactory.register("string", (node: FlowNode, config?: StringWidgetConfig) => new StringWidget(node, config));
GlobalWidgetFactory.register("toggle", (node: FlowNode, config?: ToggleWidgetConfig) => new ToggleWidget(node, config));
GlobalWidgetFactory.register("image", (node: FlowNode, config?: ImageWidgetConfig) => new ImageWidget(config));

export { GlobalWidgetFactory };
153 changes: 153 additions & 0 deletions src/widgets/image.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import { Box } from "../types/box";
import { Vector2 } from "../types/vector2";

const margin = 15;

export interface ImageWidgetConfig {
image?: string;
maxWidth?: number
maxHeight?: number
}

/**
* constructor(lightNode, nodeManager, id, parameterData, app) {
this.lightNode = lightNode;
this.id = id;
this.app = app;
this.lightNode.title = parameterData.name;
this.lightNode.onDropFile = (file) => {
// console.log(file)
var reader = new FileReader();
reader.onload = (evt) => {
console.log(evt.target.result)
nodeManager.nodeParameterChanged({
id: id,
data: evt.target.result,
binary: true
});
}
reader.readAsArrayBuffer(file);
const url = URL.createObjectURL(file);
// this.loadImage(this._url, function (img) {
// that.size[1] = (img.height / img.width) * that.size[0];
// });
this.loadImgFromURL(url);
}
}
loadImgFromURL(url) {
const img = document.createElement("img");
img.src = url;
img.onload = () => {
// if (callback) {
// callback(this);
// }
// console.log("Image loaded, size: " + img.width + "x" + img.height);
// this.dirty = true;
// that.boxcolor = "#9F9";f
// that.setDirtyCanvas(true);
this.lightNode.widgets[0].image = img
this.lightNode.setSize(this.lightNode.computeSize());
};
img.onerror = () => {
console.log("error loading the image:" + url);
}
}
update(parameterData) {
console.log("image parameter", parameterData)
const curVal = parameterData.currentValue;
this.app.RequestManager.getParameterValue(this.id, (response) => {
const url = URL.createObjectURL(response);
this.loadImgFromURL(url)
})
}
*/

export class ImageWidget {

#url: string | undefined;

#image: HTMLImageElement | undefined;

#maxWidth: number;

#maxHeight: number;

constructor(config?: ImageWidgetConfig) {
this.#maxWidth = config?.maxWidth === undefined ? 150 : config?.maxWidth;
this.#maxHeight = config?.maxHeight === undefined ? 150 : config?.maxHeight;
if (config?.image) {
this.Set(config?.image);
}
}

Set(url: string) {
this.#image = undefined;
this.#url = url;

const img = document.createElement("img");
img.src = url;
img.onload = () => {
this.#image = img;
};
img.onerror = (event) => {
console.log("error loading image:", url, event);
}
}

Size(): Vector2 {
if (this.#image === undefined) {
return { "x": 0, "y": 0 }
}

let adjust = 1;
if (this.#image.width > this.#maxWidth) {
adjust = this.#maxWidth / this.#image.width
}

if (this.#image.height > this.#maxHeight) {
let heightAdjust = this.#maxHeight / this.#image.height
if (heightAdjust < adjust) {
adjust = heightAdjust;
}
}

return {
"x": adjust * this.#image.width,
"y": adjust * this.#image.height
}
}

ClickStart(): void {
}

ClickEnd(): void {
}

Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
const size = this.Size();
const box: Box = {
Position: position,
Size: {
x: size.x * scale,
y: size.y * scale,
}
}

if (!this.#image) {
return box;
}

ctx.drawImage(
this.#image,
position.x,
position.y,
box.Size.x,
box.Size.y
);
return box;
}
}
2 changes: 1 addition & 1 deletion src/widgets/number.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export class NumberWidget {
constructor(node: FlowNode, config?: NumberWidgetConfig) {
this.#node = node;
this.#nodeProperty = config?.property;
this.Set(config?.value === undefined ? 0 : config?.value);
this.#idleBoxStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idleBoxStyle, {
box: {
color: Theme.Widget.BackgroundColor,
Expand All @@ -60,6 +59,7 @@ export class NumberWidget {
},
text: { color: Theme.Widget.FontColor },
}));
this.Set(config?.value === undefined ? 0 : config?.value);
this.#callback = config?.callback;

if (this.#nodeProperty !== undefined) {
Expand Down
4 changes: 2 additions & 2 deletions src/widgets/toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,6 @@ export class ToggleWidget {
this.#node = node;
this.#nodeProperty = config?.property;
this.#text = config?.text === undefined ? "Toggle" : config?.text;
this.Set(config?.value === undefined ? false : config?.value);
this.#callback = config?.callback;

this.#enabledStyle = new ToggleStyle({
idle: TextBoxStyleWithFallback(config?.enabledStyle?.idle, {
Expand Down Expand Up @@ -159,6 +157,8 @@ export class ToggleWidget {
lightColor: config?.disabledStyle?.lightColor === undefined ? "#004400" : config?.enabledStyle?.lightColor,
});

this.Set(config?.value === undefined ? false : config?.value);
this.#callback = config?.callback;
if (this.#nodeProperty !== undefined) {
this.#node.subscribeToProperty(this.#nodeProperty, (oldVal, newVal) => {
this.Set(newVal);
Expand Down

0 comments on commit 765208d

Please sign in to comment.