stuff
This commit is contained in:
parent
bc92231240
commit
b8225c639e
GPG key ID:
883EDBAA726BD96C
11904 changed files with 1472749 additions and 133 deletions
364
node_modules/mathjax-full/ts/output/svg/Wrappers/menclose.ts
generated
vendored
Normal file
364
node_modules/mathjax-full/ts/output/svg/Wrappers/menclose.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
/*************************************************************
|
||||
*
|
||||
* Copyright (c) 2018-2022 The MathJax Consortium
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileoverview Implements the SVGmenclose wrapper for the MmlMenclose object
|
||||
*
|
||||
* @author dpvc@mathjax.org (Davide Cervone)
|
||||
*/
|
||||
|
||||
import {SVGWrapper, SVGConstructor} from '../Wrapper.js';
|
||||
import {CommonMencloseMixin} from '../../common/Wrappers/menclose.js';
|
||||
import {SVGmsqrt} from './msqrt.js';
|
||||
import * as Notation from '../Notation.js';
|
||||
import {MmlMenclose} from '../../../core/MmlTree/MmlNodes/menclose.js';
|
||||
import {OptionList} from '../../../util/Options.js';
|
||||
|
||||
/*****************************************************************/
|
||||
/**
|
||||
* The SVGmenclose wrapper for the MmlMenclose object
|
||||
*
|
||||
* @template N The HTMLElement node class
|
||||
* @template T The Text node class
|
||||
* @template D The Document class
|
||||
*/
|
||||
// @ts-ignore
|
||||
export class SVGmenclose<N, T, D> extends CommonMencloseMixin<
|
||||
SVGWrapper<any, any, any>,
|
||||
SVGmsqrt<any, any, any>,
|
||||
any,
|
||||
SVGConstructor<any, any, any>
|
||||
>(SVGWrapper) {
|
||||
|
||||
/**
|
||||
* The menclose wrapper
|
||||
*/
|
||||
public static kind = MmlMenclose.prototype.kind;
|
||||
|
||||
/**
|
||||
* The definitions of the various notations
|
||||
*/
|
||||
public static notations: Notation.DefList<SVGmenclose<any, any, any>, any> = new Map([
|
||||
|
||||
Notation.Border('top'),
|
||||
Notation.Border('right'),
|
||||
Notation.Border('bottom'),
|
||||
Notation.Border('left'),
|
||||
|
||||
Notation.Border2('actuarial', 'top', 'right'),
|
||||
Notation.Border2('madruwb', 'bottom', 'right'),
|
||||
|
||||
Notation.DiagonalStrike('up'),
|
||||
Notation.DiagonalStrike('down'),
|
||||
|
||||
['horizontalstrike', {
|
||||
renderer: Notation.RenderLine('horizontal', 'Y'),
|
||||
bbox: (node) => [0, node.padding, 0, node.padding]
|
||||
}],
|
||||
|
||||
['verticalstrike', {
|
||||
renderer: Notation.RenderLine('vertical', 'X'),
|
||||
bbox: (node) => [node.padding, 0, node.padding, 0]
|
||||
}],
|
||||
|
||||
['box', {
|
||||
renderer: (node, _child) => {
|
||||
const {w, h, d} = node.getBBox();
|
||||
node.adaptor.append(node.element, node.box(w, h, d));
|
||||
},
|
||||
bbox: Notation.fullBBox,
|
||||
border: Notation.fullBorder,
|
||||
remove: 'left right top bottom'
|
||||
}],
|
||||
|
||||
['roundedbox', {
|
||||
renderer: (node, _child) => {
|
||||
const {w, h, d} = node.getBBox();
|
||||
const r = node.thickness + node.padding;
|
||||
node.adaptor.append(node.element, node.box(w, h, d, r));
|
||||
},
|
||||
bbox: Notation.fullBBox
|
||||
}],
|
||||
|
||||
['circle', {
|
||||
renderer: (node, _child) => {
|
||||
const {w, h, d} = node.getBBox();
|
||||
node.adaptor.append(node.element, node.ellipse(w, h, d));
|
||||
},
|
||||
bbox: Notation.fullBBox
|
||||
}],
|
||||
|
||||
['phasorangle', {
|
||||
//
|
||||
// Use a bottom border and an upward strike properly angled
|
||||
//
|
||||
renderer: (node, _child) => {
|
||||
const {w, h, d} = node.getBBox();
|
||||
const a = node.getArgMod(1.75 * node.padding, h + d)[0];
|
||||
const t = node.thickness / 2;
|
||||
const HD = h + d;
|
||||
const cos = Math.cos(a);
|
||||
node.adaptor.append(
|
||||
node.element,
|
||||
node.path('mitre', 'M', w, t - d, 'L', t + cos * t, t - d, 'L' , cos * HD + t, HD - d - t)
|
||||
);
|
||||
},
|
||||
bbox: (node) => {
|
||||
const p = node.padding / 2;
|
||||
const t = node.thickness;
|
||||
return [2 * p, p, p + t, 3 * p + t];
|
||||
},
|
||||
border: (node) => [0, 0, node.thickness, 0],
|
||||
remove: 'bottom'
|
||||
}],
|
||||
|
||||
Notation.Arrow('up'),
|
||||
Notation.Arrow('down'),
|
||||
Notation.Arrow('left'),
|
||||
Notation.Arrow('right'),
|
||||
|
||||
Notation.Arrow('updown'),
|
||||
Notation.Arrow('leftright'),
|
||||
|
||||
Notation.DiagonalArrow('updiagonal'), // backward compatibility
|
||||
Notation.DiagonalArrow('northeast'),
|
||||
Notation.DiagonalArrow('southeast'),
|
||||
Notation.DiagonalArrow('northwest'),
|
||||
Notation.DiagonalArrow('southwest'),
|
||||
|
||||
Notation.DiagonalArrow('northeastsouthwest'),
|
||||
Notation.DiagonalArrow('northwestsoutheast'),
|
||||
|
||||
['longdiv', {
|
||||
//
|
||||
// Use a line along the top followed by a half ellipse at the left
|
||||
//
|
||||
renderer: (node, _child) => {
|
||||
const {w, h, d} = node.getBBox();
|
||||
const t = node.thickness / 2;
|
||||
const p = node.padding;
|
||||
node.adaptor.append(
|
||||
node.element,
|
||||
node.path('round',
|
||||
'M', t, t - d,
|
||||
'a', p - t / 2, (h + d) / 2 - 4 * t, 0, '0,1', 0, h + d - 2 * t,
|
||||
'L', w - t, h - t
|
||||
)
|
||||
);
|
||||
},
|
||||
bbox: (node) => {
|
||||
const p = node.padding;
|
||||
const t = node.thickness;
|
||||
return [p + t, p, p, 2 * p + t / 2];
|
||||
}
|
||||
}],
|
||||
|
||||
['radical', {
|
||||
//
|
||||
// Use the msqrt rendering, but remove the extra space due to the radical
|
||||
// (it is added in at the end, so other notations overlap the root)
|
||||
//
|
||||
renderer: (node, child) => {
|
||||
node.msqrt.toSVG(child);
|
||||
const left = node.sqrtTRBL()[3];
|
||||
node.place(-left, 0, child);
|
||||
},
|
||||
//
|
||||
// Create the needed msqrt wrapper
|
||||
//
|
||||
init: (node) => {
|
||||
node.msqrt = node.createMsqrt(node.childNodes[0]);
|
||||
},
|
||||
//
|
||||
// Add back in the padding for the square root
|
||||
//
|
||||
bbox: (node) => node.sqrtTRBL(),
|
||||
//
|
||||
// This notation replaces the child
|
||||
//
|
||||
renderChild: true
|
||||
}]
|
||||
|
||||
] as Notation.DefPair<SVGmenclose<any, any, any>, any>[]);
|
||||
|
||||
/********************************************************/
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
public toSVG(parent: N) {
|
||||
const svg = this.standardSVGnode(parent);
|
||||
//
|
||||
// Create a box at the correct position and add the children
|
||||
//
|
||||
const left = this.getBBoxExtenders()[3];
|
||||
const def: OptionList = {};
|
||||
if (left > 0) {
|
||||
def.transform = 'translate(' + this.fixed(left) + ', 0)';
|
||||
}
|
||||
const block = this.adaptor.append(svg, this.svg('g', def));
|
||||
if (this.renderChild) {
|
||||
this.renderChild(this, block);
|
||||
} else {
|
||||
this.childNodes[0].toSVG(block);
|
||||
}
|
||||
//
|
||||
// Render all the notations for this menclose element
|
||||
//
|
||||
for (const name of Object.keys(this.notations)) {
|
||||
const notation = this.notations[name];
|
||||
!notation.renderChild && notation.renderer(this, svg);
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************************/
|
||||
|
||||
/**
|
||||
* Create an arrow using SVG elements
|
||||
*
|
||||
* @param {number} W The length of the arrow
|
||||
* @param {number} a The angle for the arrow
|
||||
* @param {boolean} double True if this is a double-headed arrow
|
||||
* @param {string} offset 'X' for vertical arrow, 'Y' for horizontal
|
||||
* @param {number} dist Distance to translate in the offset direction
|
||||
* @return {N} The newly created arrow
|
||||
*/
|
||||
public arrow(W: number, a: number, double: boolean, offset: string = '', dist: number = 0): N {
|
||||
const {w, h, d} = this.getBBox();
|
||||
const dw = (W - w) / 2;
|
||||
const m = (h - d) / 2;
|
||||
const t = this.thickness;
|
||||
const t2 = t / 2;
|
||||
const [x, y, dx] = [t * this.arrowhead.x, t * this.arrowhead.y, t * this.arrowhead.dx];
|
||||
const arrow =
|
||||
(double ?
|
||||
this.fill(
|
||||
'M', w + dw, m, // point of arrow
|
||||
'l', -(x + dx), y, 'l', dx, t2 - y, // upper right head
|
||||
'L', x - dw, m + t2, // upper side of shaft
|
||||
'l', dx, y - t2, 'l', -(x + dx), - y, // left point
|
||||
'l', x + dx, -y, 'l', -dx, y - t2, // lower left head
|
||||
'L', w + dw - x, m - t2, // lower side of shaft
|
||||
'l', -dx, t2 - y, 'Z' // lower head
|
||||
) :
|
||||
this.fill(
|
||||
'M', w + dw, m, // point of arrow
|
||||
'l', -(x + dx), y, 'l', dx, t2 - y, // upper head
|
||||
'L', -dw, m + t2, 'l', 0, -t, // upper side of shaft
|
||||
'L', w + dw - x, m - t2, // lower side of shaft
|
||||
'l', -dx, t2 - y, 'Z' // lower head
|
||||
));
|
||||
const transform = [];
|
||||
if (dist) {
|
||||
transform.push(offset === 'X' ? `translate(${this.fixed(-dist)} 0)` : `translate(0 ${this.fixed(dist)})`);
|
||||
}
|
||||
if (a) {
|
||||
const A = this.jax.fixed(-a * 180 / Math.PI);
|
||||
transform.push(`rotate(${A} ${this.fixed(w / 2)} ${this.fixed(m)})`);
|
||||
}
|
||||
if (transform.length) {
|
||||
this.adaptor.setAttribute(arrow, 'transform', transform.join(' '));
|
||||
}
|
||||
return arrow as N;
|
||||
}
|
||||
|
||||
/********************************************************/
|
||||
|
||||
/**
|
||||
* Create a line element
|
||||
*
|
||||
* @param {number[]} pq The coordinates of the endpoints, [x1, y1, x2, y2]
|
||||
* @return {N} The newly created line element
|
||||
*/
|
||||
public line(pq: [number, number, number, number]): N {
|
||||
const [x1, y1, x2, y2] = pq;
|
||||
return this.svg('line', {
|
||||
x1: this.fixed(x1), y1: this.fixed(y1),
|
||||
x2: this.fixed(x2), y2: this.fixed(y2),
|
||||
'stroke-width': this.fixed(this.thickness)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a rectangle element
|
||||
*
|
||||
* @param {number} w The width of the rectangle
|
||||
* @param {number} h The height of the rectangle
|
||||
* @param {number} d The depth of the rectangle
|
||||
* @param {number=} r The corner radius for a rounded rectangle
|
||||
* @return {N} The newly created line element
|
||||
*/
|
||||
public box(w: number, h: number, d: number, r: number = 0): N {
|
||||
const t = this.thickness;
|
||||
const def: OptionList = {
|
||||
x: this.fixed(t / 2), y: this.fixed(t / 2 - d),
|
||||
width: this.fixed(w - t), height: this.fixed(h + d - t),
|
||||
fill: 'none', 'stroke-width': this.fixed(t)
|
||||
};
|
||||
if (r) {
|
||||
def.rx = this.fixed(r);
|
||||
}
|
||||
return this.svg('rect', def);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an ellipse element
|
||||
*
|
||||
* @param {number} w The width of the ellipse
|
||||
* @param {number} h The height of the ellipse
|
||||
* @param {number} d The depth of the ellipse
|
||||
* @return {N} The newly created ellipse node
|
||||
*/
|
||||
public ellipse(w: number, h: number, d: number): N {
|
||||
const t = this.thickness;
|
||||
return this.svg('ellipse', {
|
||||
rx: this.fixed((w - t) / 2), ry: this.fixed((h + d - t) / 2),
|
||||
cx: this.fixed(w / 2), cy: this.fixed((h - d) / 2),
|
||||
'fill': 'none', 'stroke-width': this.fixed(t)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a path element from the commands that specify it
|
||||
*
|
||||
* @param {string} join The join style for the path
|
||||
* @param {(string|number)[]} P The list of commands and coordinates for the path
|
||||
* @return {N} The newly created path
|
||||
*/
|
||||
public path(join: string, ...P: (string | number)[]): N {
|
||||
return this.svg('path', {
|
||||
d: P.map(x => (typeof x === 'string' ? x : this.fixed(x))).join(' '),
|
||||
style: {'stroke-width': this.fixed(this.thickness)},
|
||||
'stroke-linecap': 'round', 'stroke-linejoin': join,
|
||||
fill: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a filled path element from the commands the specify it
|
||||
* (same as path above, but no thickness adjustments)
|
||||
*
|
||||
* @param {(string|number)[]} P The list of commands and coordinates for the path
|
||||
* @return {N} The newly created path
|
||||
*/
|
||||
public fill(...P: (string | number)[]): N {
|
||||
return this.svg('path', {
|
||||
d: P.map(x => (typeof x === 'string' ? x : this.fixed(x))).join(' ')
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue