McBrincie212 Posts - Answer Overflow

McBrincie212

•Created by McBrincie212 on 4/15/2025 in #support

State Doesn't Get Defaulted And Values Don't Change

So i am making a reactive state system where the developer of a component can supply a default state and other states if they want. The default state is used when nothing is active and regarding the states. The code checks on the array to say which is active, the way the state array is orchestrated, it uses the first active state present in the list Each state has specific values to it, like color & other stuff. The STATE DEFAULTING EFFECT gets triggered and correctly switches the state. However the STATE DEFAULTING MEMO is not triggered. For some reason when i get the style field, even tho it does supply the correct value. The values do not get updated For context getterFromReactive "normalizes" the values into just accessors. It does create a effect for checking whenever the value is changed or not and update the returned value accordingly

export function createStateManager<T extends StateValues>(
  defaultState: Required<T>,
  ...states: State<T>[]
): StateManager<T> {
  const defaultCopyState: State<T> = {
    debugName: "default",
    getIsEnabled: () => true,
    values: {...defaultState}
  }
  
  // <...>
  const [currentState, setCurrentState] = createStore<State<T>>(defaultCopyState);

  // STATE DEFAULTING MEMO
  createMemo(() => {
    const currValues: T = currentState.values;
    const newObj: T = Object.assign({}, currValues)
    for (const [key, value] of Object.entries(defaultCopyState.values)) {
      if (key in newObj && newObj[key] !== undefined) continue;
      newObj[key as keyof T] = value;
    }
    setCurrentState("values", newObj);
  })

  // STATE CHANGE EFFECT
  createRenderEffect(() => {
    for (const state of states) {
      if (!state.getIsEnabled()) continue;
      // <...>
      setCurrentState(state)
      return
    }
    // <...>
    setCurrentState(defaultCopyState)
  })

  return {
     // <...>
    getStyleField: (field: keyof T) => getterFromReactive({ store: currentState.values, field: field }),
  }
}

export function createStateManager<T extends StateValues>(
  defaultState: Required<T>,
  ...states: State<T>[]
): StateManager<T> {
  const defaultCopyState: State<T> = {
    debugName: "default",
    getIsEnabled: () => true,
    values: {...defaultState}
  }
  
  // <...>
  const [currentState, setCurrentState] = createStore<State<T>>(defaultCopyState);

  // STATE DEFAULTING MEMO
  createMemo(() => {
    const currValues: T = currentState.values;
    const newObj: T = Object.assign({}, currValues)
    for (const [key, value] of Object.entries(defaultCopyState.values)) {
      if (key in newObj && newObj[key] !== undefined) continue;
      newObj[key as keyof T] = value;
    }
    setCurrentState("values", newObj);
  })

  // STATE CHANGE EFFECT
  createRenderEffect(() => {
    for (const state of states) {
      if (!state.getIsEnabled()) continue;
      // <...>
      setCurrentState(state)
      return
    }
    // <...>
    setCurrentState(defaultCopyState)
  })

  return {
     // <...>
    getStyleField: (field: keyof T) => getterFromReactive({ store: currentState.values, field: field }),
  }
}

46 replies

SSolidJS

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

Updating a signal depending on if an element is focused or not

I want to update a signal on whenever a element gains focus or not(true / false)

<input
  style={{'border-radius': borderRadius()}}
  class={styles["input-text-element"]}
  name={"1"}
  ref={inputTextElement}
  onfocus={() => {
    setIsFocused(true);
    console.log("wtf?", isFocused())
  }}
  onblur={() => {setIsFocused(false)}}
/>

<input
  style={{'border-radius': borderRadius()}}
  class={styles["input-text-element"]}
  name={"1"}
  ref={inputTextElement}
  onfocus={() => {
    setIsFocused(true);
    console.log("wtf?", isFocused())
  }}
  onblur={() => {setIsFocused(false)}}
/>

Tho if i do this, the focus gets used onfocus and doesn't trigger the expected behaiviour

66 replies

SSolidJS

•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

57 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