fragment-shader - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

classes/Editor.ts

 import { createShaderEditor } from '../util/editor';
 import { type EditorConfig } from '../types/editor';
 import Shader, { DEFAULT_SHADER_CONFIG } from './Shader';
-import CodeEditor from './CodeEditor';
+import BaseEditor from './BaseEditor';
 import '../css/editor.css';
-import { UniformValue } from '../types/shader';
+import { Uniform } from '../types/uniform';
+import { HasResolution } from '../types/dimensions';
 
@@ -16,4 +17,4 @@ const DEFAULT_EDITOR_CONFIG: EditorConfig = {
   private config: EditorConfig;
-  private editor: CodeEditor;
-  private shader: Shader;
+  private editor: BaseEditor;
+  public shader: Shader;
 
@@ -40,5 +41,13 @@ constructor(config: EditorConfig = DEFAULT_EDITOR_CONFIG) {
 
+  set size(resolution: HasResolution) {
+    const width = resolution.width || window.innerWidth;
+    const height = resolution.height || window.innerHeight;
+    const dpr = resolution.dpr || window.devicePixelRatio;
+    this.shader.size = { width, height, dpr };
+  }
+
   onUpdate(val: string) {
     this.editor.hideError();
     this.config?.onUpdate?.(val);
+    console.log(val)
     this.shader.rebuild({ shader: val, uniforms: this.config.uniforms });
@@ -57,3 +66,3 @@ }
 
-  rebuild(config: { shader?: string; uniforms?: UniformValue[] } = {}) {
+  rebuild(config: { shader?: string; uniforms?: Uniform[] } = {}) {
     const {
@@ -64,3 +73,3 @@ shader,
       shader?: string;
-      uniforms?: UniformValue[];
+      uniforms?: Uniform[];
     } = {
@@ -72,2 +81,10 @@ shader: '',
 
+    this.config.shader = shader;
+    this.config.uniforms = uniforms;
+    this.editor.hideError();
+    this.editor.destroy();
+    this.editor = createShaderEditor({
+      ...this.config,
+      onUpdate: this.onUpdate,
+    });
     this.shader.rebuild({ shader, uniforms });
@@ -74,0 +91,0 @@ }

classes/Shader.ts

@@ -10,5 +10,7 @@ import Uniform from './Uniform';
   type ShaderState,
-  type UniformValue,
 } from '../types/shader';
 import {
+  type Uniform as UniformTuple
+} from '../types/uniform';
+import {
   DEFAULT_FRAGMENT_SHADER,
@@ -70,4 +72,2 @@ DEFAULT_UNIFORMS,
 
-    console.log(this.config);
-
     this.state = {
@@ -77,3 +77,3 @@ active: false,
 
-    this.canvas = createCanvas(this.config.parent);
+    this.canvas = createCanvas(this.container);
 
@@ -87,2 +87,7 @@ if (this.config.fillViewport) {
 
+    if (this.config.fillContainer) {
+      this.config.width = this.container.offsetWidth;
+      this.config.height = this.container.offsetHeight;
+    }
+
     sizeCanvas(this.canvas, this.config as HasResolution);
@@ -125,3 +130,3 @@
 
-    if (this.config.fillViewport) {
+    if (this.config.fillViewport || this.config.fillContainer) {
       this.onWindowResize = this.onWindowResize.bind(this);
@@ -132,2 +137,6 @@ window.addEventListener('resize', this.onWindowResize);
 
+  get container () {
+    return this.config.parent ?? document.body
+  }
+
   get uniformDeclarations(): string {
@@ -163,3 +172,3 @@ return (this.config.uniforms || []).reduce((acc, [name, type]) => {
 
-  set uniforms(uniforms: UniformValue[]) {
+  set uniforms(uniforms: UniformTuple[]) {
     this.config.uniforms = uniforms;
@@ -174,8 +183,11 @@ }
     } = resolution;
+
     this.config.width = width;
     this.config.height = height;
     this.config.dpr = dpr;
+
     sizeCanvas(this.canvas, this.config as HasResolution);
     this.ctx?.viewport(0, 0, this.canvas.width, this.canvas.height);
     this.config?.onResize?.();
+    if (!this.config.animate) this.tick(window.performance.now());
   }
@@ -194,4 +206,4 @@
 
-  buildUniforms(): UniformValue[] {
-    const uniforms = [...INTERNAL_UNIFORMS, ...(this.config.uniforms || [])];
+  buildUniforms(): Record<string, Uniform> {
+    const uniforms: UniformTuple[] = [...INTERNAL_UNIFORMS, ...(this.config.uniforms || [])];
 
@@ -270,5 +282,10 @@ this._uniformMap = this.config.uniforms?.reduce((acc, [name], i) => {
   onWindowResize() {
-    this.config.width = window.innerWidth;
-    this.config.height = window.innerHeight;
-    this.config.dpr = window.devicePixelRatio;
+    if (this.config.fillContainer) {
+      this.config.width = this.container.offsetWidth;
+      this.config.height = this.container.offsetHeight;
+    } else {
+      this.config.width = window.innerWidth;
+      this.config.height = window.innerHeight;
+      this.config.dpr = window.devicePixelRatio;
+    }
     sizeCanvas(this.canvas, this.config as HasResolution);
@@ -328,3 +345,3 @@ this.ctx?.viewport(0, 0, this.canvas.width, this.canvas.height);
     this._uniforms?.time?.set(time);
-    this._uniforms?.stream?.set(time);
+    this._uniforms?.stream?.set(this.stream || time);
     this._uniforms?.volume?.set(this.volume);
@@ -331,0 +348,0 @@ this.config?.uniforms?.forEach(uniform => {

constants/shader.ts

@@ -27,7 +27,7 @@ export const DEFAULT_VERTEX_SHADER = /*glsl*/ `
 export const INTERNAL_UNIFORMS = [
-  ['time', 0, 0],
-  ['stream', 0, 0],
+  ['time', 0, [0, 0, 1, .001]],
+  ['stream', 0, [0, 0, 1, .001]],
   ['resolution', 2, [window.innerWidth, window.innerHeight]],
-  ['volume', 0, 1],
-  ['scroll', 0, 0],
+  ['volume', 0, [1, 0, 1, .001]],
+  ['scroll', 0, [0, 0, 1, .001]],
 ] as any;
@@ -34,0 +34,0 @@

index.ts

@@ -7,1 +7,2 @@ export { default as Shader } from './classes/Shader';
 export * from './types/shader';
+export * from './types/uniform';

package.json

 {
   "name": "fragment-shader",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A lightweight, performant WebGL fragment shader renderer + editor. ",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -128,12 +128,10 @@ # **fragment-shader**
 
-We can pass any number of `Uniform` values to our shaders. Uniforms passed to the `Shader` class are automatically injected into our shaders without having to define them explicitly. The renderer expects an array of uniforms, each of type `UniformValue`. The first index (`[0]`) of a `UniformValue` defines its `name`, the second (`[1]`) defines its `type`, and the third (`[2]`) defines its `value`.
+We can pass any number of `Uniform` values to our shaders. Uniforms passed to the `Shader` class are automatically injected into our shaders without having to define them explicitly. The renderer expects an array of uniforms, each of type `Uniform`. The first index (`[0]`) of a `Uniform` defines its `name`, the second (`[1]`) defines its `type`, and the third (`[2]`) defines its `value`.
 
-> **Note** Please note that uniforms of type `bool` are unique in that their values aren't contained within an array.
-
 ```javascript
-import { Shader, type UniformValue } from 'fragment-shader';
+import { Shader, type Uniform } from 'fragment-shader';
 
-const zoom: UniformValue = ['zoom', 0, [2.5]];
-const color: UniformValue = ['color', 3, [0.8, 0.2, 0.6]];
-const warp: UniformValue = ['warp', 1, false];
+const zoom: Uniform = ['zoom', 0, [2.5]];
+const color: Uniform = ['color', 3, [0.8, 0.2, 0.6]];
+const warp: Uniform = ['warp', 1, [false]];
 
@@ -140,0 +138,0 @@ const shader = new Shader({

types/editor.ts

@@ -1,2 +0,2 @@
-import { StreamParser } from '@codemirror/language';
+import type { StreamParser } from '@codemirror/language';
 import type { ShaderConfig } from './shader';
@@ -3,0 +3,0 @@

types/shader.ts

@@ -0,8 +1,10 @@
+import { type Uniform } from "./uniform";
 export interface ShaderConfig {
   parent?: HTMLElement;
   shader?: string;
-  uniforms?: any[];
+  uniforms?: Uniform[]; 
   width?: number;
   height?: number;
   fillViewport?: boolean;
+  fillContainer?: boolean;
   dpr?: number;
@@ -19,3 +21,1 @@ onSuccess?: Function;
 }
-
-export type UniformValue = [string, number, number[] | boolean];

util/dom.ts

@@ -13,7 +13,3 @@ import { HasResolution } from './../types/dimensions';
   canvas: HTMLCanvasElement,
-  { width, height, dpr }: HasResolution = {
-    width: window.innerWidth,
-    height: window.innerHeight,
-    dpr: window.devicePixelRatio,
-  }
+  { width, height, dpr }: HasResolution
 ): void {
@@ -20,0 +16,0 @@ canvas.width = width * dpr;

util/editor.ts

 import { clike } from '@codemirror/legacy-modes/mode/clike';
 import { createStyleSheet } from './dom';
-import { UniformValue } from '../types/shader';
-import CodeEditor from '../classes/CodeEditor';
+import BaseEditor from '../classes/BaseEditor';
 import { EditorConfig } from '../types/editor';
+import { Uniform } from '../types/uniform';
 import {
@@ -17,3 +17,3 @@ BLOCKS,
   shader?: string;
-  uniforms?: UniformValue[];
+  uniforms?: Uniform[];
   onUpdate?: Function;
@@ -43,3 +43,3 @@ onError?: Function;
   config: ShaderEditorConfig = DEFAULT_CONFIG
-): CodeEditor {
+): BaseEditor {
   const { parent, shader, uniforms, width, height, fillViewport } = {
@@ -59,3 +59,3 @@ ...DEFAULT_CONFIG,
 
-  return new CodeEditor({
+  return new BaseEditor({
     document: shader || '',
@@ -62,0 +62,0 @@ parent: parent || DEFAULT_PARENT,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47121

increased by5.45%

Number of package files

23

increased by4.55%

Lines of code

1362

increased by4.77%

Worsened metrics

Number of lines in readme file

219

decreased by-0.9%

No dependency changes