diff --git a/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts b/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts index 24c78fb9..9340212c 100644 --- a/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts +++ b/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts @@ -5,6 +5,7 @@ import { CustomGlyphDefinitionType, CustomGlyphVectorType, type CustomGlyphCharacterDefinition, type CustomGlyphPathDrawFunctionDefinition } from './Types'; +/* eslint-disable max-len */ /* eslint-disable @typescript-eslint/naming-convention */ export const customGlyphDefinitions: { [index: string]: CustomGlyphCharacterDefinition | undefined } = { @@ -563,10 +564,11 @@ export const customGlyphDefinitions: { [index: string]: CustomGlyphCharacterDefi // Terminal graphic characters (1FBC0-1FBCA) '\u{1FBC0}': { type: CustomGlyphDefinitionType.PATH, data: 'M.16,.39 A.02,.02,0,0,1,.39,.16 L.5,.25 L.61,.16 A.02,.02,0,0,1,.84,.39 L.75,.5 L.84,.61 A.02,.02,0,0,1,.61,.84 L.5,.75 L.39,.84 A.02,.02,0,0,1,.16,.61 L.25,.5 Z M.24,.32 L.39,.5 L.24,.68 L.32,.76 L.5,.61 L.68,.76 L.76,.68 L.61,.5 L.76,.32 L.68,.24 L.5,.39 L.32,.24 Z' }, // WHITE HEAVY SALTIRE WITH ROUNDED CORNERS - // 1FBC1 LEFT THIRD WHITE RIGHT POINTING INDEX - // 1FBC2 MIDDLE THIRD WHITE RIGHT POINTING INDEX - // 1FBC3 RIGHT THIRD WHITE RIGHT POINTING INDEX - // 1FBC4 NEGATIVE SQUARED QUESTION MARK + // 1FBC1-1FBC4 is dervied from the Iosevka font (SIL OFL v1.1) https://github.com/be5invis/Iosevka + '\u{1FBC1}': { type: CustomGlyphDefinitionType.PATH, data: 'M0.142308,0.924 Q0.130770,0.924,0.120193,0.922 T0.101924,0.916 T0.089424,0.9065 T0.084616,0.895 V0.025 Q0.084616,0.019,0.089424,0.0135 T0.101924,0.004 T0.120193,-0.002 T0.142308,-0.004 Q0.150000,-0.004,0.157693,-0.003 T0.173078,0.000 L0.430770,0.085 Q0.451924,0.059,0.494232,0.041 T0.587501,0.013 T0.692309,-0.0005 T0.800001,-0.004 H1 V0.055 H0.800001 Q0.771155,0.055,0.742309,0.056 T0.685578,0.060 T0.630770,0.0685 T0.580770,0.0825 T0.543270,0.1045 T0.528847,0.133 V0.647 H0.530770 Q0.596155,0.645,0.659616,0.638 T0.782693,0.6165 T0.893270,0.5805 T1,0.531 V0.623 Q0.934616,0.644,0.880770,0.6595 T0.769232,0.685 T0.650963,0.700 T0.528847,0.707 V0.787 Q0.528847,0.802,0.543270,0.8155 T0.580770,0.8375 T0.630770,0.8515 T0.685578,0.860 T0.742309,0.864 T0.800001,0.865 H1 V0.924 H0.800001 Q0.746155,0.924,0.692309,0.9205 T0.587501,0.907 T0.494232,0.879 T0.430770,0.835 L0.173078,0.920 Q0.165386,0.922,0.157693,0.923 T0.142308,0.924 Z M0.2,0.841 L0.415385,0.770 V0.150 L0.2,0.079 V0.841 Z M1,0.698 Q0.973077,0.694,0.969231,0.6885 T0.965385,0.677 Q0.965385,0.672,0.969231,0.6665 T1,0.657 V0.698 Z' }, // LEFT THIRD WHITE RIGHT POINTING INDEX + '\u{1FBC2}': { type: CustomGlyphDefinitionType.PATH, data: 'M0,0.623 V0.531 Q0.044231,0.512,0.0625,0.4905 T0.092308,0.4465 T0.108654,0.4005 T0.113462,0.354 V0.351 Q0.113462,0.345,0.117308,0.3395 T0.129808,0.3305 T0.148846,0.3245 T0.171154,0.323 H0.501923 Q0.532692,0.323,0.563462,0.3185 T0.617308,0.303 T0.651923,0.2765 T0.663462,0.2435 V0.241 Q0.663462,0.219,0.657692,0.197 T0.639423,0.1545 T0.604808,0.115 T0.549615,0.082 T0.475577,0.0615 T0.392308,0.055 H0 V-0.004 H1 V0.055 H0.667308 Q0.694231,0.071,0.713462,0.09 T0.746154,0.129 T0.766346,0.1705 T0.775,0.213 H1 V0.316 Q0.971154,0.305,0.955769,0.2965 T0.920192,0.2825 T0.876923,0.2745 T0.830769,0.272 H0.773077 Q0.767308,0.297,0.743269,0.319 T0.680769,0.355 T0.595192,0.375 T0.501923,0.381 H0.227308 Q0.223462,0.415,0.211,0.4485 T0.172692,0.5135 T0.108269,0.573 T0,0.623 Z M0.611538,0.924 H0 V0.865 H0.611538 Q0.642308,0.865,0.673077,0.8605 T0.727885,0.845 T0.762308,0.8185 T0.773077,0.787 V0.785 Q0.773077,0.769,0.762308,0.7535 T0.727885,0.727 T0.673077,0.7115 T0.611538,0.707 H0.059615 Q0.048077,0.707,0.037115,0.7045 T0,0.694 V0.653 Q0.026923,0.648,0.037115,0.646 T0.059615,0.644 H0.722692 Q0.753462,0.644,0.784231,0.6395 T0.839038,0.624 T0.873846,0.5975 T0.884615,0.566 V0.564 Q0.884615,0.548,0.873846,0.532 T0.839038,0.5055 T0.784231,0.49 T0.722692,0.4855 H0.392308 Q0.380769,0.4855,0.370192,0.483 T0.351923,0.4765 T0.339423,0.467 T0.334615,0.4555 T0.339423,0.444 T0.351923,0.4345 T0.370192,0.428 T0.392308,0.4255 H0.832692 Q0.855769,0.4255,0.878846,0.4235 T0.922115,0.416 T0.957692,0.4015 T1,0.3815 V0.4685 Q0.975,0.4705,0.966346,0.4725 T0.95,0.4765 Q0.961538,0.4835,0.969231,0.4915 T1,0.5075 V0.6205 Q0.965385,0.6455,0.926923,0.665 T0.84,0.6935 Q0.866923,0.7115,0.877596,0.7345 T0.894231,0.7855 V0.787 Q0.894231,0.815,0.876923,0.8425 T0.820192,0.8895 T0.726923,0.916 T0.611538,0.924 Z' }, // MIDDLE THIRD WHITE RIGHT POINTING INDEX + '\u{1FBC3}': { type: CustomGlyphDefinitionType.PATH, data: 'M0,0.473 V0.386 Q0.025490,0.378,0.028431,0.3695 T0.031373,0.352 V0.35 Q0.031373,0.342,0.028431,0.333 T0,0.316 V0.213 H0.652941 Q0.684314,0.213,0.715686,0.2085 T0.770588,0.193 T0.804902,0.1665 T0.815686,0.135 V0.133 Q0.815686,0.117,0.804902,0.101 T0.770588,0.0745 T0.715686,0.0595 T0.652941,0.055 H0 V-0.004 H0.652941 Q0.707843,-0.004,0.761765,0.004 T0.856863,0.031 T0.915686,0.0775 T0.933333,0.133 V0.135 Q0.933333,0.163,0.915686,0.1905 T0.856863,0.237 T0.761765,0.264 T0.652941,0.272 H0.109804 Q0.131373,0.29,0.140196,0.31 T0.149020,0.35 V0.352 Q0.149020,0.37,0.142157,0.388 T0.118627,0.4225 T0.076471,0.452 T0,0.473 Z M0,0.625 V0.513 Q0.029412,0.526,0.032353,0.54 T0.035294,0.568 V0.57 Q0.035294,0.584,0.032353,0.598 T0,0.625 Z' }, // RIGHT THIRD WHITE RIGHT POINTING INDEX + '\u{1FBC4}': { type: CustomGlyphDefinitionType.PATH, data: 'M0.019231,1.085 V-0.165 H0.980769 V1.085 H0.019231 Z M0.446154,0.527 H0.553846 Q0.553846,0.511,0.5625,0.495 T0.591346,0.466 T0.631731,0.4405 T0.666346,0.4135 T0.688462,0.3825 T0.696154,0.35 Q0.696154,0.33,0.682692,0.311 T0.641346,0.2785 T0.575,0.259 T0.498077,0.253 T0.421154,0.259 T0.356731,0.279 T0.315385,0.3125 T0.301923,0.352 V0.357 H0.409615 V0.354 Q0.409615,0.345,0.414423,0.335 T0.431731,0.318 T0.4625,0.3075 T0.498077,0.304 Q0.517308,0.304,0.534615,0.307 T0.564423,0.3165 T0.582692,0.332 T0.588462,0.35 Q0.588462,0.366,0.572115,0.3805 T0.535577,0.4075 T0.496154,0.4335 T0.465385,0.4625 T0.45,0.4945 T0.446154,0.527 Z M0.5,0.667 Q0.519231,0.667,0.5375,0.664 T0.569231,0.654 T0.588462,0.637 T0.594231,0.617 T0.588462,0.5975 T0.569231,0.581 T0.5375,0.571 T0.5,0.568 T0.4625,0.571 T0.430769,0.581 T0.411538,0.5975 T0.405769,0.617 T0.411538,0.637 T0.430769,0.654 T0.4625,0.664 T0.5,0.667 Z' }, // NEGATIVE SQUARED QUESTION MARK '\u{1FBC5}': { type: CustomGlyphDefinitionType.VECTOR_SHAPE, data: { d: 'M.44,.35 L.44,.52 L.44,.62 L.19,.87 L.26,.94 L.5,.71 L.74,.94 L.81,.87 L.56,.62 L.56,.52 L.56,.35 Z M.17,.42 L.17,.52 L.83,.52 L.83,.42 Z M.67,.2 C.67,.106,.594,.03,.5,.03 C.406,.03,.33,.106,.33,.2 C.33,.294,.406,.37,.5,.37 C.594,.37,.67,.294,.67,.2 Z M.56,.2 C.56,.233,.533,.26,.5,.26 C.467,.26,.44,.233,.44,.2 C.44,.167,.467,.14,.5,.14 C.533,.14,.56,.167,.56,.2 Z', type: CustomGlyphVectorType.FILL } }, // STICK FIGURE '\u{1FBC6}': { type: CustomGlyphDefinitionType.VECTOR_SHAPE, data: { d: 'M.44,.35 L.44,.42 L.23,.27 L.19,.36 L.44,.52 L.44,.62 L.29,.92 L.38,.97 L.5,.71 L.61,.97 L.7,.92 L.56,.62 L.56,.52 L.81,.36 L.77,.27 L.56,.42 L.56,.35 Z M.67,.2 C.67,.106,.594,.03,.5,.03 C.406,.03,.33,.106,.33,.2 C.33,.294,.406,.37,.5,.37 C.594,.37,.67,.294,.67,.2 Z M.56,.2 C.56,.233,.533,.26,.5,.26 C.467,.26,.44,.233,.44,.2 C.44,.167,.467,.14,.5,.14 C.533,.14,.56,.167,.56,.2 Z', type: CustomGlyphVectorType.FILL } }, // STICK FIGURE WITH ARMS RAISED '\u{1FBC7}': { type: CustomGlyphDefinitionType.VECTOR_SHAPE, data: { d: 'M.44,.35 L.44,.62 L.29,.92 L.38,.97 L.5,.71 L.74,.94 L.81,.87 L.56,.62 L.56,.35 Z M.18,.56 L.23,.65 L.81,.36 L.77,.27 Z M.67,.2 C.67,.106,.594,.03,.5,.03 C.406,.03,.33,.106,.33,.2 C.33,.294,.406,.37,.5,.37 C.594,.37,.67,.294,.67,.2 Z M.56,.2 C.56,.233,.533,.26,.5,.26 C.467,.26,.44,.233,.44,.2 C.44,.167,.467,.14,.5,.14 C.533,.14,.56,.167,.56,.2 Z', type: CustomGlyphVectorType.FILL } }, // STICK FIGURE LEANING LEFT diff --git a/addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts b/addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts index 3cda6a9c..5e557016 100644 --- a/addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts +++ b/addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts @@ -93,13 +93,36 @@ function drawPathDefinitionCharacter( ctx.beginPath(); let currentX = 0; let currentY = 0; + let lastControlX = 0; + let lastControlY = 0; + let lastCommand = ''; for (const instruction of instructions.split(' ')) { const type = instruction[0]; const args: string[] = instruction.substring(1).split(','); + if (type === 'Z') { + ctx.closePath(); + lastCommand = type; + continue; + } + if (type === 'V') { + const y = yOffset + parseFloat(args[0]) * deviceCellHeight; + ctx.lineTo(currentX, y); + currentY = y; + lastControlX = currentX; + lastControlY = currentY; + lastCommand = type; + continue; + } + if (type === 'H') { + const x = xOffset + parseFloat(args[0]) * deviceCellWidth; + ctx.lineTo(x, currentY); + currentX = x; + lastControlX = currentX; + lastControlY = currentY; + lastCommand = type; + continue; + } if (!args[0] || !args[1]) { - if (type === 'Z') { - ctx.closePath(); - } continue; } if (type === 'A') { @@ -126,11 +149,44 @@ function drawPathDefinitionCharacter( ctx.moveTo(translatedArgs[0], translatedArgs[1]); currentX = translatedArgs[0]; currentY = translatedArgs[1]; + lastControlX = currentX; + lastControlY = currentY; } else if (type === 'L') { ctx.lineTo(translatedArgs[0], translatedArgs[1]); currentX = translatedArgs[0]; currentY = translatedArgs[1]; + lastControlX = currentX; + lastControlY = currentY; + } else if (type === 'Q') { + ctx.quadraticCurveTo(translatedArgs[0], translatedArgs[1], translatedArgs[2], translatedArgs[3]); + lastControlX = translatedArgs[0]; + lastControlY = translatedArgs[1]; + currentX = translatedArgs[2]; + currentY = translatedArgs[3]; + } else if (type === 'T') { + // T uses reflection of last control point if previous command was Q or T + let cpX: number; + let cpY: number; + if (lastCommand === 'Q' || lastCommand === 'T') { + cpX = 2 * currentX - lastControlX; + cpY = 2 * currentY - lastControlY; + } else { + cpX = currentX; + cpY = currentY; + } + ctx.quadraticCurveTo(cpX, cpY, translatedArgs[0], translatedArgs[1]); + lastControlX = cpX; + lastControlY = cpY; + currentX = translatedArgs[0]; + currentY = translatedArgs[1]; + } else if (type === 'C') { + ctx.bezierCurveTo(translatedArgs[0], translatedArgs[1], translatedArgs[2], translatedArgs[3], translatedArgs[4], translatedArgs[5]); + lastControlX = translatedArgs[2]; + lastControlY = translatedArgs[3]; + currentX = translatedArgs[4]; + currentY = translatedArgs[5]; } + lastCommand = type; } ctx.fill(); } @@ -564,7 +620,8 @@ function clamp(value: number, max: number, min: number = 0): number { const svgToCanvasInstructionMap: { [index: string]: any } = { 'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]), 'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]), - 'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1]) + 'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1]), + 'Q': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.quadraticCurveTo(args[0], args[1], args[2], args[3]) }; function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number, doClamp: boolean, devicePixelRatio: number, leftPadding: number = 0, rightPadding: number = 0): number[] { diff --git a/demo/client.ts b/demo/client.ts index a6e33b20..b0598ed0 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -836,7 +836,7 @@ function customGlyphAlignmentHandler(): void { term.write('🭥🭒🭝🭚 🭣🭧🭓🭞🭜🭘 🭢🭕🭠🭗 🭔🭟 🭖🭡 🭪🭨\n\r'); term.write(' 🭢🭗 🭤🭙 🭦🭛\n\r'); term.write('\x1b[0mComposite terminal graphics characters:\x1b[34m\n\r'); - term.write('\u{1FBB2}\u{1FBB3} \u{1FBB9}\u{1FBBA}\n\r'); + term.write('\u{1FBB2}\u{1FBB3} \u{1FBB9}\u{1FBBA} \u{1FBC1}\u{1FBC2}\u{1FBC3}\n\r'); term.write('\x1b[0mFill tests:\x1b[35m\n\r'); const fillChars = ['\u{2591}', '\u{2592}', '\u{2593}', '\u{1FB8C}', '\u{1FB8D}', '\u{1FB8E}', '\u{1FB8F}', '\u{1FB90}', '\u{1FB91}', '\u{1FB92}', '\u{1FB94}', '\u{1FB95}', '\u{1FB96}', '\u{1FB97}', '\u{1FB98}', '\u{1FB99}']; while (fillChars.length > 0) {