McBrincie212 Posts - Answer Overflow

McBrincie212

•Created by McBrincie212 on 2/23/2025 in #support

Having The Same Context Transfer Different Properties

im trying to make a base widget, where it has common stuff amongst the widget elements(canvas for now, there will be the reference panel as well)

import {Context, createContext, JSXElement, useContext} from "solid-js";

export const BaseWidgetContext: Context<BaseCanvasPropertiesInterface | undefined> = createContext();

export function useBaseWidgetContext(): BaseCanvasPropertiesInterface {
    const context: BaseCanvasPropertiesInterface | undefined = useContext(BaseWidgetContext);
    if (!context) throw new Error("useBaseWidgetContext must be used within a BaseWidgetProvider");
    return context;
}

export function BaseWidgetProvider(props: { properties: BaseCanvasPropertiesInterface; children: JSXElement }) {
    return (
        <BaseWidgetContext.Provider value={props.properties}>
            {props.children}
        </BaseWidgetContext.Provider>
    );
}

import {Context, createContext, JSXElement, useContext} from "solid-js";

export const BaseWidgetContext: Context<BaseCanvasPropertiesInterface | undefined> = createContext();

export function useBaseWidgetContext(): BaseCanvasPropertiesInterface {
    const context: BaseCanvasPropertiesInterface | undefined = useContext(BaseWidgetContext);
    if (!context) throw new Error("useBaseWidgetContext must be used within a BaseWidgetProvider");
    return context;
}

export function BaseWidgetProvider(props: { properties: BaseCanvasPropertiesInterface; children: JSXElement }) {
    return (
        <BaseWidgetContext.Provider value={props.properties}>
            {props.children}
        </BaseWidgetContext.Provider>
    );
}

note: BaseCanvasPropertiesInterface is a placeholder on the context here i want to supply BaseWidgetPropertiesInterface however, i can't just supply it like so bc my other widgets will inherit from this interface and expand with their own properties the naive approach would be making another context but ideally i want to handle this case from this context

53 replies

SSolidJS

•Created by McBrincie212 on 12/24/2024 in #support

Canvas Lags

function generateTransparentBackground(
    canvasBackground: HTMLCanvasElement, individualPixelSize: number,
    c1: string, c2: string, canvasWidth: number, canvasHeight: number
) {
    const canvasBackgroundCTX = canvasBackground.getContext("2d")!;

    const offscreenCanvas = document.createElement("canvas");
    offscreenCanvas.width = canvasWidth;
    offscreenCanvas.height = canvasHeight;
    const offscreenCTX = offscreenCanvas.getContext("2d")!;

    let cols = canvasBackground.width / (individualPixelSize * individualPixelSize);
    let rows = canvasBackground.height / (individualPixelSize * individualPixelSize);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            offscreenCTX.fillStyle = ((i + j) % 2 === 0) ? c1 : c2;
            offscreenCTX.fillRect(
                i * individualPixelSize,
                j * individualPixelSize,
                individualPixelSize,
                individualPixelSize
            );
        }
    }
    
    canvasBackgroundCTX.drawImage(offscreenCanvas, 0, 0);
}

export default function BaseCanvas(props: any) {
    let canvasBackground!: HTMLCanvasElement;
    let baseCanvasElement!: HTMLDivElement;

    const individualPixelSize: number = 20;
    const c1: string = "rgba(0, 0, 0, 1)"
    const c2: string = "rgb(255, 255, 255)"

    let canvasResWidth: number = individualPixelSize * props.width;
    let canvasResHeight: number = individualPixelSize * props.height;

    onMount(() => {
        baseCanvasElement.style.width = `${props.width}px`;
        baseCanvasElement.style.height = `${props.height}px`;
        generateTransparentBackground(
            canvasBackground, individualPixelSize, c1, c2, canvasResWidth, canvasResHeight
        )
    })

    return (
        <div class={"base-canvas"} ref={baseCanvasElement}>
            <canvas class={"background-layer-canvas"} width={canvasResWidth} height={canvasResHeight} ref={canvasBackground}/>
        </div>
    )
}

function generateTransparentBackground(
    canvasBackground: HTMLCanvasElement, individualPixelSize: number,
    c1: string, c2: string, canvasWidth: number, canvasHeight: number
) {
    const canvasBackgroundCTX = canvasBackground.getContext("2d")!;

    const offscreenCanvas = document.createElement("canvas");
    offscreenCanvas.width = canvasWidth;
    offscreenCanvas.height = canvasHeight;
    const offscreenCTX = offscreenCanvas.getContext("2d")!;

    let cols = canvasBackground.width / (individualPixelSize * individualPixelSize);
    let rows = canvasBackground.height / (individualPixelSize * individualPixelSize);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            offscreenCTX.fillStyle = ((i + j) % 2 === 0) ? c1 : c2;
            offscreenCTX.fillRect(
                i * individualPixelSize,
                j * individualPixelSize,
                individualPixelSize,
                individualPixelSize
            );
        }
    }
    
    canvasBackgroundCTX.drawImage(offscreenCanvas, 0, 0);
}

export default function BaseCanvas(props: any) {
    let canvasBackground!: HTMLCanvasElement;
    let baseCanvasElement!: HTMLDivElement;

    const individualPixelSize: number = 20;
    const c1: string = "rgba(0, 0, 0, 1)"
    const c2: string = "rgb(255, 255, 255)"

    let canvasResWidth: number = individualPixelSize * props.width;
    let canvasResHeight: number = individualPixelSize * props.height;

    onMount(() => {
        baseCanvasElement.style.width = `${props.width}px`;
        baseCanvasElement.style.height = `${props.height}px`;
        generateTransparentBackground(
            canvasBackground, individualPixelSize, c1, c2, canvasResWidth, canvasResHeight
        )
    })

    return (
        <div class={"base-canvas"} ref={baseCanvasElement}>
            <canvas class={"background-layer-canvas"} width={canvasResWidth} height={canvasResHeight} ref={canvasBackground}/>
        </div>
    )
}

6 replies

SSolidJS

•Created by McBrincie212 on 9/13/2024 in #support

Failed To Resolve

I tried importing onMount on a component but it results in vite saying

Pre-transform error: Failed to resolve import "solid-js/store/types/server.js" from "src/App.tsx". Does the file exist?
8:56:18 PM [vite] Pre-transform error: Failed to resolve import "solid-js/types/server/reactive.js" from "src/components/DrawComponents.tsx". Does the file exist?
8:56:18 PM [vite] Internal server error: Failed to resolve import "solid-js/store/types/server.js" from "src/App.tsx". Does the file exist?

Pre-transform error: Failed to resolve import "solid-js/store/types/server.js" from "src/App.tsx". Does the file exist?
8:56:18 PM [vite] Pre-transform error: Failed to resolve import "solid-js/types/server/reactive.js" from "src/components/DrawComponents.tsx". Does the file exist?
8:56:18 PM [vite] Internal server error: Failed to resolve import "solid-js/store/types/server.js" from "src/App.tsx". Does the file exist?

7 replies

SSolidJS

•Created by McBrincie212 on 9/3/2024 in #support

Performance Overhead When Panning And Zooming

So im experiencing performance overhead when panning and zooming. I assume this is javascript's fault but i do need some way to optimise it because as of now its slow even with like 5 canvases opened

24 replies

SSolidJS

•Created by McBrincie212 on 9/1/2024 in #support

How To Communicate Between Components

suppose this setup i got here

    <div>
        <DrawToolsMenu />
        <PixelArtCanvas />
    </div>

    <div>
        <DrawToolsMenu />
        <PixelArtCanvas />
    </div>

I want to PixelArtCanvas have a reference to DrawToolsMenu. How can i achieve that?

16 replies

SSolidJS

•Created by McBrincie212 on 3/8/2023 in #support

Track Variable Changes

i quite don't remember a lot the splid js syntax can someone explain to me how can i track variable changes and based on that i execute a function

13 replies

Gaming

Programming