Replace BLOCK_PATTERN_WITH_REGION with new clipPath

This commit is contained in:
Daniel Imms
2025-12-24 04:33:32 -08:00
parent 11dae84ff7
commit 20fdfba16f
3 changed files with 17 additions and 58 deletions
@@ -432,46 +432,46 @@ export const customGlyphDefinitions: { [index: string]: CustomGlyphCharacterDefi
'\u{1FB8B}': { type: CustomGlyphDefinitionType.SOLID_OCTANT_BLOCK_VECTOR, data: [{ x: 1, y: 0, w: 7, h: 8 }] }, // RIGHT SEVEN EIGHTHS B0OCK
// Rectangular shade characters (1FB8C-1FB94)
'\u{1FB8C}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[ // LEFT HALF MEDIUM SHADE
'\u{1FB8C}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [ // LEFT HALF MEDIUM SHADE
[1, 0],
[0, 1]
], [0, 0, 0.5, 1]] },
'\u{1FB8D}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[ // RIGHT HALF MEDIUM SHADE
], clipPath: 'M0,0 L0.5,0 L0.5,1 L0,1 Z' },
'\u{1FB8D}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [ // RIGHT HALF MEDIUM SHADE
[1, 0],
[0, 1]
], [0.5, 0, 0.5, 1]] },
'\u{1FB8E}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[ // UPPER HALF MEDIUM SHADE
], clipPath: 'M0.5,0 L1,0 L1,1 L0.5,1 Z' },
'\u{1FB8E}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [ // UPPER HALF MEDIUM SHADE
[1, 0],
[0, 1]
], [0, 0, 1, 0.5]] },
'\u{1FB8F}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[ // LOWER HALF MEDIUM SHADE
], clipPath: 'M0,0 L1,0 L1,0.5 L0,0.5 Z' },
'\u{1FB8F}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [ // LOWER HALF MEDIUM SHADE
[1, 0],
[0, 1]
], [0, 0.5, 1, 0.5]] },
'\u{1FB90}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[ // INVERSE MEDIUM SHADE
], clipPath: 'M0,0.5 L1,0.5 L1,1 L0,1 Z' },
'\u{1FB90}': { type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [ // INVERSE MEDIUM SHADE
[0, 1],
[1, 0]
], [0, 0, 1, 1]] },
] },
'\u{1FB91}': [ // UPPER HALF BLOCK AND LOWER HALF INVERSE MEDIUM SHADE
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [
[0, 1],
[1, 0]
], [0, 0.5, 1, 0.5]] },
], clipPath: 'M0,0.5 L1,0.5 L1,1 L0,1 Z' },
{ type: CustomGlyphDefinitionType.SOLID_OCTANT_BLOCK_VECTOR, data: [{ x: 0, y: 0, w: 8, h: 4 }] }
],
'\u{1FB92}': [ // UPPER HALF INVERSE MEDIUM SHADE AND LOWER HALF BLOCK
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [
[0, 1],
[1, 0]
], [0, 0, 1, 0.5]] },
], clipPath: 'M0,0 L1,0 L1,0.5 L0,0.5 Z' },
{ type: CustomGlyphDefinitionType.SOLID_OCTANT_BLOCK_VECTOR, data: [{ x: 0, y: 4, w: 8, h: 4 }] }
],
// 1FB93 is <reserved>
'\u{1FB94}': [ // LEFT HALF INVERSE MEDIUM SHADE AND RIGHT HALF BLOCK
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [[
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: [
[0, 1],
[1, 0]
], [0, 0, 0.5, 1]] },
], clipPath: 'M0,0 L0.5,0 L0.5,1 L0,1 Z' },
{ type: CustomGlyphDefinitionType.SOLID_OCTANT_BLOCK_VECTOR, data: [{ x: 4, y: 0, w: 4, h: 8 }] }
],
@@ -5,7 +5,7 @@
import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
import { customGlyphDefinitions } from './CustomGlyphDefinitions';
import { CustomGlyphDefinitionType, CustomGlyphVectorType, type CustomGlyphDefinitionPart, type CustomGlyphPathDrawFunctionDefinition, type CustomGlyphPatternDefinition, type CustomGlyphRegionDefinition, type ICustomGlyphSolidOctantBlockVector, type ICustomGlyphVectorShape } from './Types';
import { CustomGlyphDefinitionType, CustomGlyphVectorType, type CustomGlyphDefinitionPart, type CustomGlyphPathDrawFunctionDefinition, type CustomGlyphPatternDefinition, type ICustomGlyphSolidOctantBlockVector, type ICustomGlyphVectorShape } from './Types';
/**
* Try drawing a custom block element or box drawing character, returning whether it was
@@ -59,9 +59,6 @@ function drawDefinitionPart(
case CustomGlyphDefinitionType.BLOCK_PATTERN:
drawPatternChar(ctx, part.data, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
break;
case CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION:
drawBlockPatternWithRegion(ctx, part.data, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
break;
case CustomGlyphDefinitionType.PATH_FUNCTION:
case CustomGlyphDefinitionType.PATH:
drawPathDefinitionCharacter(ctx, part.data, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
@@ -420,40 +417,6 @@ function drawPatternChar(
ctx.fillRect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
}
/**
* Draws rectangular shade characters - medium shade pattern clipped to a region.
* Uses a checkerboard pattern that shifts 1px each row (same as medium shade U+2592).
*/
function drawBlockPatternWithRegion(
ctx: CanvasRenderingContext2D,
definition: [pattern: CustomGlyphPatternDefinition, region: CustomGlyphRegionDefinition],
xOffset: number,
yOffset: number,
deviceCellWidth: number,
deviceCellHeight: number
): void {
const [pattern, region] = definition;
const [rx, ry, rw, rh] = region;
const regionX = Math.round(xOffset + rx * deviceCellWidth);
const regionY = Math.round(yOffset + ry * deviceCellHeight);
const regionW = Math.round(rw * deviceCellWidth);
const regionH = Math.round(rh * deviceCellHeight);
// Save context state
ctx.save();
// Clip to the region
ctx.beginPath();
ctx.rect(regionX, regionY, regionW, regionH);
ctx.clip();
// Draw the pattern
drawPatternChar(ctx, pattern, xOffset, yOffset, deviceCellWidth, deviceCellHeight);
// Restore context state
ctx.restore();
}
function drawPathDefinitionCharacterWithWeight(
ctx: CanvasRenderingContext2D,
charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
@@ -33,7 +33,6 @@ export type CustomGlyphPatternDefinition = number[][];
export const enum CustomGlyphDefinitionType {
SOLID_OCTANT_BLOCK_VECTOR,
BLOCK_PATTERN,
BLOCK_PATTERN_WITH_REGION,
PATH_FUNCTION,
PATH_FUNCTION_WITH_WEIGHT,
PATH,
@@ -41,12 +40,9 @@ export const enum CustomGlyphDefinitionType {
VECTOR_SHAPE,
}
export type CustomGlyphRegionDefinition = [x: number, y: number, w: number, h: number];
export type CustomGlyphDefinitionPartRaw = (
{ type: CustomGlyphDefinitionType.SOLID_OCTANT_BLOCK_VECTOR, data: ICustomGlyphSolidOctantBlockVector[] } |
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN, data: CustomGlyphPatternDefinition } |
{ type: CustomGlyphDefinitionType.BLOCK_PATTERN_WITH_REGION, data: [pattern: CustomGlyphPatternDefinition, region: CustomGlyphRegionDefinition] } |
{ type: CustomGlyphDefinitionType.PATH_FUNCTION, data: CustomGlyphPathDrawFunctionDefinition } |
{ type: CustomGlyphDefinitionType.PATH_FUNCTION_WITH_WEIGHT, data: { [fontWeight: number]: string | CustomGlyphPathDrawFunctionDefinition } } |
{ type: CustomGlyphDefinitionType.PATH, data: string } |