modern-canvas 0.21.3 → 0.22.0

package/dist/index.js

@@ -5728,7 +5728,7 @@ void main(void) {
 O([_({ default: () => [] }), D("design:type", Array)], si.prototype, "colors", void 0), O([_({ fallback: .05 }), D("design:type", Number)], si.prototype, "epsilon", void 0), si = ai = O([x("ColorReplaceEffect"), D("design:paramtypes", [typeof (ii = typeof Partial < "u" && Partial) == "function" ? ii : Object, Array])], si);
 //#endregion
 //#region src/scene/effects/DrawboardEffect.frag?raw
-var ci = "precision highp float;\n\nin vec2 vUv;\nuniform sampler2D uTexture;\nuniform vec2 inputSize;\nuniform vec2 zoom;\nuniform vec2 translate;\nuniform float gridScale;\nuniform vec2 gridSize;\nuniform int checkerboard;\nuniform int checkerboardStyle;\nuniform float dotBackgroundBaseColor;\nuniform float dotBackgroundZoomedOutColor;\nuniform float dotColorDiff;\nuniform int pixelGrid;\nuniform int watermark;\nuniform sampler2D watermarkTexture;\nuniform vec2 watermarkSize;\nuniform vec2 watermarkOffset;\nuniform vec2 watermarkSpacing;\nuniform float watermarkRotation;\nuniform float watermarkAlpha;\n\nconst float VIEWPORT_SPACE_MIN_DOT_RADIUS = 0.5;\nconst float CANVAS_SPACE_DOT_RADIUS = 1.;\nconst float CANVAS_SPACE_DOT_GRID_SIZE_PX = 16.;\n\nconst int CHECKERBOARD_STYLE_NONE = 0;\nconst int CHECKERBOARD_STYLE_GRID = 1;\nconst int CHECKERBOARD_STYLE_GRID_DARK = 2;\nconst int CHECKERBOARD_STYLE_DOTS = 3;\n\nfloat _round(float val) {\n  return floor(val + .5);\n}\n\nvec2 _round(vec2 pt) {\n  return floor(pt + .5);\n}\n\nfloat scaledGridSize(float zoomScale) {\n  if (zoomScale < 0.03125) {\n    return 32.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.0625) {\n    return 16.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.125) {\n    return 8.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.25) {\n    return 4.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.5) {\n    return 2.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else {\n    return CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n}\n\nvec4 renderCheckerboard(vec2 coord, vec4 color) {\n  float value;\n  if (checkerboardStyle == CHECKERBOARD_STYLE_GRID) {\n    vec2 fractValue = fract(coord * vec2(gridScale) * zoom) - 0.5;\n    value = fractValue.x * fractValue.y < 0.0 ? 1.0 : 0.95;\n  }\n  else if (checkerboardStyle == CHECKERBOARD_STYLE_GRID_DARK) {\n    vec2 fractValue = fract(coord * vec2(gridScale) * zoom) - 0.5;\n    value = fractValue.x * fractValue.y < 0.0 ? 0.12 : 0.17;\n  }\n  else if (checkerboardStyle == CHECKERBOARD_STYLE_DOTS) {\n    float zoomScale = zoom.x;\n    float gridPixelSize = scaledGridSize(zoomScale);\n    float zoomInterpolationFactor = smoothstep(0.5, 1.0, zoomScale);\n    float dotColor = dotBackgroundZoomedOutColor + dotColorDiff * zoomInterpolationFactor;\n    vec2 nearestGridPoint = _round(coord / gridPixelSize) * gridPixelSize;\n    float canvasSpaceDist = length(coord - nearestGridPoint);\n    float viewportSpaceDist = canvasSpaceDist * zoomScale;\n    float viewportSpaceDotRadius = max(VIEWPORT_SPACE_MIN_DOT_RADIUS, CANVAS_SPACE_DOT_RADIUS * zoomScale);\n    float dist = 1.0 - smoothstep(0., 1., (viewportSpaceDist - viewportSpaceDotRadius + .5));\n    value = mix(dotBackgroundBaseColor, dotColor, dist);\n  }\n  return vec4(value * (1.0 - color.a) + color.rgb, 1);\n}\n\nvec4 renderPixelGrid(vec2 coord, vec4 color) {\n  vec3 rgb = color.rgb;\n  vec2 corner = fract(coord);\n  float gridWeight = max(float(corner.x < gridSize.x), float(corner.y < gridSize.y));\n  vec3 gridColor;\n  vec3 weights = vec3(0.299, 0.587, 0.114);\n  float c2 = dot(rgb * rgb, weights);\n  float luminance = sqrt(c2);\n  if (luminance > 0.5) {\n    float target = (luminance - 0.05) / luminance;\n    gridColor = rgb * target;\n  }\n  else {\n    float target = luminance * 0.8 + 0.15;\n    float c1 = dot(rgb, weights);\n    float a = 1.0 - 2.0 * c1 + c2;\n    float b = c2 - c1;\n    gridColor = mix(rgb, vec3(1), (b + sqrt(b * b - a * (c2 - target * target))) / a);\n  }\n  return vec4(mix(rgb, gridColor, gridWeight), color.a);\n}\n\nvec4 renderWatermark(vec2 coord, vec4 color) {\n  float hw = watermarkSize.x * 0.5;\n  float hh = watermarkSize.y * 0.5;\n  float c = cos(-watermarkRotation);\n  float s = sin(-watermarkRotation);\n  vec2 blockSize = watermarkSize + watermarkSpacing;\n  vec2 tiles = max(floor(inputSize / blockSize), vec2(1.0));\n  vec2 gridCoverage = tiles * blockSize;\n  vec2 startPos = watermarkOffset;\n  vec2 localPix = coord - startPos;\n  vec2 blockIndex = floor(localPix / blockSize);\n  vec2 wmCenter = startPos + blockIndex * blockSize + watermarkSize * 0.5 + watermarkSpacing / 2.0;\n  vec2 local = coord - wmCenter;\n  vec2 inv = vec2(\n    local.x * c + local.y * s,\n    -local.x * s + local.y * c\n  );\n  if (inv.x >= -hw && inv.x <= hw && inv.y >= -hh && inv.y <= hh) {\n    vec2 wmUV = (inv + vec2(hw, hh)) / watermarkSize;\n    vec4 wmColor = texture(watermarkTexture, wmUV);\n    float alpha = wmColor.a * watermarkAlpha;\n    return mix(color, wmColor, alpha);\n  } else {\n    return color;\n  }\n}\n\nvoid main(void) {\n  vec4 color = texture(uTexture, vUv);\n  vec2 coord = vec2(vUv.x, 1.0 - vUv.y);\n  coord = (coord * inputSize - translate) / zoom;\n  if (checkerboard > 0) {\n    color = renderCheckerboard(coord, color);\n  }\n  if (watermark > 0) {\n    color = renderWatermark(coord, color);\n  }\n  if (pixelGrid > 0) {\n    color = renderPixelGrid(coord, color);\n  }\n  gl_FragColor = color;\n}\n", li, ui, W = class extends H {
+var ci = "precision highp float;\n\nin vec2 vUv;\nuniform sampler2D uTexture;\nuniform vec2 inputSize;\nuniform vec2 zoom;\nuniform vec2 translate;\nuniform float gridScale;\nuniform vec2 gridSize;\nuniform int checkerboard;\nuniform int checkerboardStyle;\nuniform float dotBackgroundBaseColor;\nuniform float dotBackgroundZoomedOutColor;\nuniform float dotColorDiff;\nuniform int pixelGrid;\nuniform int watermark;\nuniform sampler2D watermarkTexture;\nuniform vec2 watermarkSize;\nuniform vec2 watermarkOffset;\nuniform vec2 watermarkSpacing;\nuniform float watermarkRotation;\nuniform float watermarkAlpha;\n\nconst float VIEWPORT_SPACE_MIN_DOT_RADIUS = 0.5;\nconst float CANVAS_SPACE_DOT_RADIUS = 1.;\nconst float CANVAS_SPACE_DOT_GRID_SIZE_PX = 16.;\n\nconst int CHECKERBOARD_STYLE_NONE = 0;\nconst int CHECKERBOARD_STYLE_GRID = 1;\nconst int CHECKERBOARD_STYLE_GRID_DARK = 2;\nconst int CHECKERBOARD_STYLE_DOTS = 3;\nconst int CHECKERBOARD_STYLE_DOTS_DARK = 4;\n\nfloat _round(float val) {\n  return floor(val + .5);\n}\n\nvec2 _round(vec2 pt) {\n  return floor(pt + .5);\n}\n\nfloat scaledGridSize(float zoomScale) {\n  if (zoomScale < 0.03125) {\n    return 32.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.0625) {\n    return 16.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.125) {\n    return 8.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.25) {\n    return 4.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else if (zoomScale < 0.5) {\n    return 2.0 * CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n  else {\n    return CANVAS_SPACE_DOT_GRID_SIZE_PX;\n  }\n}\n\nvec4 renderCheckerboard(vec2 coord, vec4 color) {\n  float value;\n  if (checkerboardStyle == CHECKERBOARD_STYLE_GRID) {\n    vec2 fractValue = fract(coord * vec2(gridScale) * zoom) - 0.5;\n    value = fractValue.x * fractValue.y < 0.0 ? 1.0 : 0.95;\n  }\n  else if (checkerboardStyle == CHECKERBOARD_STYLE_GRID_DARK) {\n    vec2 fractValue = fract(coord * vec2(gridScale) * zoom) - 0.5;\n    value = fractValue.x * fractValue.y < 0.0 ? 0.12 : 0.17;\n  }\n  else if (checkerboardStyle == CHECKERBOARD_STYLE_DOTS || checkerboardStyle == CHECKERBOARD_STYLE_DOTS_DARK) {\n    // light vs dark dots share this path; the base/dot colours are supplied as\n    // uniforms (set per style on the CPU side), so only the values differ.\n    float zoomScale = zoom.x;\n    float gridPixelSize = scaledGridSize(zoomScale);\n    float zoomInterpolationFactor = smoothstep(0.5, 1.0, zoomScale);\n    float dotColor = dotBackgroundZoomedOutColor + dotColorDiff * zoomInterpolationFactor;\n    vec2 nearestGridPoint = _round(coord / gridPixelSize) * gridPixelSize;\n    float canvasSpaceDist = length(coord - nearestGridPoint);\n    float viewportSpaceDist = canvasSpaceDist * zoomScale;\n    float viewportSpaceDotRadius = max(VIEWPORT_SPACE_MIN_DOT_RADIUS, CANVAS_SPACE_DOT_RADIUS * zoomScale);\n    float dist = 1.0 - smoothstep(0., 1., (viewportSpaceDist - viewportSpaceDotRadius + .5));\n    value = mix(dotBackgroundBaseColor, dotColor, dist);\n  }\n  return vec4(value * (1.0 - color.a) + color.rgb, 1);\n}\n\nvec4 renderPixelGrid(vec2 coord, vec4 color) {\n  vec3 rgb = color.rgb;\n  vec2 corner = fract(coord);\n  float gridWeight = max(float(corner.x < gridSize.x), float(corner.y < gridSize.y));\n  vec3 gridColor;\n  vec3 weights = vec3(0.299, 0.587, 0.114);\n  float c2 = dot(rgb * rgb, weights);\n  float luminance = sqrt(c2);\n  if (luminance > 0.5) {\n    float target = (luminance - 0.05) / luminance;\n    gridColor = rgb * target;\n  }\n  else {\n    float target = luminance * 0.8 + 0.15;\n    float c1 = dot(rgb, weights);\n    float a = 1.0 - 2.0 * c1 + c2;\n    float b = c2 - c1;\n    gridColor = mix(rgb, vec3(1), (b + sqrt(b * b - a * (c2 - target * target))) / a);\n  }\n  return vec4(mix(rgb, gridColor, gridWeight), color.a);\n}\n\nvec4 renderWatermark(vec2 coord, vec4 color) {\n  float hw = watermarkSize.x * 0.5;\n  float hh = watermarkSize.y * 0.5;\n  float c = cos(-watermarkRotation);\n  float s = sin(-watermarkRotation);\n  vec2 blockSize = watermarkSize + watermarkSpacing;\n  vec2 tiles = max(floor(inputSize / blockSize), vec2(1.0));\n  vec2 gridCoverage = tiles * blockSize;\n  vec2 startPos = watermarkOffset;\n  vec2 localPix = coord - startPos;\n  vec2 blockIndex = floor(localPix / blockSize);\n  vec2 wmCenter = startPos + blockIndex * blockSize + watermarkSize * 0.5 + watermarkSpacing / 2.0;\n  vec2 local = coord - wmCenter;\n  vec2 inv = vec2(\n    local.x * c + local.y * s,\n    -local.x * s + local.y * c\n  );\n  if (inv.x >= -hw && inv.x <= hw && inv.y >= -hh && inv.y <= hh) {\n    vec2 wmUV = (inv + vec2(hw, hh)) / watermarkSize;\n    vec4 wmColor = texture(watermarkTexture, wmUV);\n    float alpha = wmColor.a * watermarkAlpha;\n    return mix(color, wmColor, alpha);\n  } else {\n    return color;\n  }\n}\n\nvoid main(void) {\n  vec4 color = texture(uTexture, vUv);\n  vec2 coord = vec2(vUv.x, 1.0 - vUv.y);\n  coord = (coord * inputSize - translate) / zoom;\n  if (checkerboard > 0) {\n    color = renderCheckerboard(coord, color);\n  }\n  if (watermark > 0) {\n    color = renderWatermark(coord, color);\n  }\n  if (pixelGrid > 0) {\n    color = renderPixelGrid(coord, color);\n  }\n  gl_FragColor = color;\n}\n", li, ui, W = class extends H {
 	static {
 		ui = this;
 	}
@@ -5745,6 +5745,11 @@ var ci = "precision highp float;\n\nin vec2 vUv;\nuniform sampler2D uTexture;\nu
 			case "watermark":
 				this._loadWatermark(t);
 				break;
+			case "checkerboard":
+			case "checkerboardStyle":
+			case "pixelGrid":
+				this.requestRender();
+				break;
 		}
 	}
 	async _loadWatermark(e) {
@@ -5753,12 +5758,25 @@ var ci = "precision highp float;\n\nin vec2 vUv;\nuniform sampler2D uTexture;\nu
 	_checkerboardStyleMap = {
 		grid: 1,
 		gridDark: 2,
-		dot: 3
+		dot: 3,
+		dotDark: 4
+	};
+	_dotColors = {
+		light: {
+			base: .9608,
+			zoomedOut: .6667,
+			diff: .102
+		},
+		dark: {
+			base: .1216,
+			zoomedOut: .3137,
+			diff: .102
+		}
 	};
 	apply(e, t) {
 		t.redraw(e, () => {
 			this._watermark ? this._watermark.activate(e, 1) : e.texture.unbind(1);
-			let n = e.shader.uniforms.viewMatrix, r = this._watermark ? [this.watermarkWidth, this.watermarkWidth * this._watermark.height / this._watermark.width] : [0, 0], i = Math.max(r[0], r[1]);
+			let n = e.shader.uniforms.viewMatrix, r = this._watermark ? [this.watermarkWidth, this.watermarkWidth * this._watermark.height / this._watermark.width] : [0, 0], i = Math.max(r[0], r[1]), a = this.checkerboardStyle === "dotDark" ? this._dotColors.dark : this._dotColors.light;
 			I.draw(e, ui.material, {
 				uTexture: 0,
 				inputSize: [t.width, t.height],
@@ -5768,9 +5786,9 @@ var ci = "precision highp float;\n\nin vec2 vUv;\nuniform sampler2D uTexture;\nu
 				gridSize: [n[0] > 4 ? Math.ceil(.5 / n[0] * 1e4) / 1e4 : 0, n[4] > 4 ? Math.ceil(.5 / n[4] * 1e4) / 1e4 : 0],
 				checkerboard: +!!this.checkerboard,
 				checkerboardStyle: this._checkerboardStyleMap[this.checkerboardStyle] ?? 0,
-				dotBackgroundBaseColor: .9608,
-				dotBackgroundZoomedOutColor: .6667,
-				dotColorDiff: .102,
+				dotBackgroundBaseColor: a.base,
+				dotBackgroundZoomedOutColor: a.zoomedOut,
+				dotColorDiff: a.diff,
 				pixelGrid: +!!this.pixelGrid,
 				watermark: +!!this._watermark,
 				watermarkTexture: 1,

package/dist/scene/effects/DrawboardEffect.d.ts

@@ -3,7 +3,7 @@ import type { EffectProperties, Node, Viewport } from '../main';
 import type { Texture2D } from '../resources';
 import { Effect } from '../main/Effect';
 import { Material } from '../resources';
-export type CheckerboardStyle = 'grid' | 'gridDark' | 'dot';
+export type CheckerboardStyle = 'grid' | 'gridDark' | 'dot' | 'dotDark';
 export interface DrawboardEffectProperties extends EffectProperties {
     checkerboard?: boolean;
     checkerboardStyle?: CheckerboardStyle;
@@ -27,5 +27,10 @@ export declare class DrawboardEffect extends Effect {
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     protected _loadWatermark(value?: string): Promise<void>;
     protected _checkerboardStyleMap: Record<CheckerboardStyle, number>;
+    protected _dotColors: Record<'light' | 'dark', {
+        base: number;
+        zoomedOut: number;
+        diff: number;
+    }>;
     apply(renderer: WebGLRenderer, source: Viewport): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",