mirror of https://github.com/vladmandic/human
update
Vladimir Mandic
parent
5c2a6b48dc
commit
fdbbfdf739
|
|
@ -11,6 +11,7 @@ Repository: **<git+https://github.com/vladmandic/human.git>**
|
|||
|
||||
### **HEAD -> main** 2021/03/13 mandic00@live.com
|
||||
|
||||
- add typedocs and types
|
||||
- strong typings
|
||||
|
||||
### **1.1.2** 2021/03/12 mandic00@live.com
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
134
src/draw.ts
134
src/draw.ts
|
|
@ -1,7 +1,7 @@
|
|||
import config from '../config';
|
||||
import { TRI468 as triangulation } from './blazeface/coords';
|
||||
|
||||
export const options = {
|
||||
export const drawOptions = {
|
||||
color: <string>'rgba(173, 216, 230, 0.3)', // 'lightblue' with light alpha channel
|
||||
labelColor: <string>'rgba(173, 216, 230, 1)', // 'lightblue' with dark alpha channel
|
||||
shadowColor: <string>'black',
|
||||
|
|
@ -21,29 +21,29 @@ export const options = {
|
|||
};
|
||||
|
||||
function point(ctx, x, y, z = null) {
|
||||
ctx.fillStyle = options.useDepth && z ? `rgba(${127.5 + (2 * (z || 0))}, ${127.5 - (2 * (z || 0))}, 255, 0.3)` : options.color;
|
||||
ctx.fillStyle = drawOptions.useDepth && z ? `rgba(${127.5 + (2 * (z || 0))}, ${127.5 - (2 * (z || 0))}, 255, 0.3)` : drawOptions.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, options.pointSize, 0, 2 * Math.PI);
|
||||
ctx.arc(x, y, drawOptions.pointSize, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function rect(ctx, x, y, width, height) {
|
||||
ctx.beginPath();
|
||||
if (options.useCurves) {
|
||||
if (drawOptions.useCurves) {
|
||||
const cx = (x + x + width) / 2;
|
||||
const cy = (y + y + height) / 2;
|
||||
ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI);
|
||||
} else {
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.moveTo(x + options.roundRect, y);
|
||||
ctx.lineTo(x + width - options.roundRect, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + options.roundRect);
|
||||
ctx.lineTo(x + width, y + height - options.roundRect);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - options.roundRect, y + height);
|
||||
ctx.lineTo(x + options.roundRect, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - options.roundRect);
|
||||
ctx.lineTo(x, y + options.roundRect);
|
||||
ctx.quadraticCurveTo(x, y, x + options.roundRect, y);
|
||||
ctx.lineWidth = drawOptions.lineWidth;
|
||||
ctx.moveTo(x + drawOptions.roundRect, y);
|
||||
ctx.lineTo(x + width - drawOptions.roundRect, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + drawOptions.roundRect);
|
||||
ctx.lineTo(x + width, y + height - drawOptions.roundRect);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - drawOptions.roundRect, y + height);
|
||||
ctx.lineTo(x + drawOptions.roundRect, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - drawOptions.roundRect);
|
||||
ctx.lineTo(x, y + drawOptions.roundRect);
|
||||
ctx.quadraticCurveTo(x, y, x + drawOptions.roundRect, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
ctx.stroke();
|
||||
|
|
@ -54,12 +54,12 @@ function lines(ctx, points: number[] = []) {
|
|||
ctx.beginPath();
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
for (const pt of points) {
|
||||
ctx.strokeStyle = options.useDepth && pt[2] ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.3)` : options.color;
|
||||
ctx.fillStyle = options.useDepth && pt[2] ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.3)` : options.color;
|
||||
ctx.strokeStyle = drawOptions.useDepth && pt[2] ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.3)` : drawOptions.color;
|
||||
ctx.fillStyle = drawOptions.useDepth && pt[2] ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.3)` : drawOptions.color;
|
||||
ctx.lineTo(pt[0], parseInt(pt[1]));
|
||||
}
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
if (drawOptions.fillPolygons) {
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ function lines(ctx, points: number[] = []) {
|
|||
|
||||
function curves(ctx, points: number[] = []) {
|
||||
if (points === undefined || points.length === 0) return;
|
||||
if (!options.useCurves || points.length <= 2) {
|
||||
if (!drawOptions.useCurves || points.length <= 2) {
|
||||
lines(ctx, points);
|
||||
return;
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ function curves(ctx, points: number[] = []) {
|
|||
}
|
||||
ctx.quadraticCurveTo(points[points.length - 2][0], points[points.length - 2][1], points[points.length - 1][0], points[points.length - 1][1]);
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
if (drawOptions.fillPolygons) {
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
|
@ -90,8 +90,8 @@ export async function gesture(inCanvas, result) {
|
|||
if (!(inCanvas instanceof HTMLCanvasElement)) return;
|
||||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.font = options.font;
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.font = drawOptions.font;
|
||||
ctx.fillStyle = drawOptions.color;
|
||||
let i = 1;
|
||||
for (let j = 0; j < result.length; j++) {
|
||||
let where:any[] = [];
|
||||
|
|
@ -100,12 +100,12 @@ export async function gesture(inCanvas, result) {
|
|||
if ((what.length > 1) && (what[1].length > 0)) {
|
||||
const person = where[1] > 0 ? `#${where[1]}` : '';
|
||||
const label = `${where[0]} ${person}: ${what[1]}`;
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
ctx.fillText(label, 8, 2 + (i * options.lineHeight));
|
||||
if (drawOptions.shadowColor && drawOptions.shadowColor !== '') {
|
||||
ctx.fillStyle = drawOptions.shadowColor;
|
||||
ctx.fillText(label, 8, 2 + (i * drawOptions.lineHeight));
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillText(label, 6, 0 + (i * options.lineHeight));
|
||||
ctx.fillStyle = drawOptions.labelColor;
|
||||
ctx.fillText(label, 6, 0 + (i * drawOptions.lineHeight));
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -117,10 +117,10 @@ export async function face(inCanvas, result) {
|
|||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
for (const f of result) {
|
||||
ctx.font = options.font;
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.fillStyle = options.color;
|
||||
if (options.drawBoxes) {
|
||||
ctx.font = drawOptions.font;
|
||||
ctx.strokeStyle = drawOptions.color;
|
||||
ctx.fillStyle = drawOptions.color;
|
||||
if (drawOptions.drawBoxes) {
|
||||
rect(ctx, f.box[0], f.box[1], f.box[2], f.box[3]);
|
||||
// rect(ctx, inCanvas.width * f.boxRaw[0], inCanvas.height * f.boxRaw[1], inCanvas.width * f.boxRaw[2], inCanvas.height * f.boxRaw[3]);
|
||||
}
|
||||
|
|
@ -137,24 +137,24 @@ export async function face(inCanvas, result) {
|
|||
}
|
||||
if (f.angle && f.angle.roll) labels.push(`roll: ${Math.trunc(100 * f.angle.roll) / 100} yaw:${Math.trunc(100 * f.angle.yaw) / 100} pitch:${Math.trunc(100 * f.angle.pitch) / 100}`);
|
||||
if (labels.length === 0) labels.push('face');
|
||||
ctx.fillStyle = options.color;
|
||||
ctx.fillStyle = drawOptions.color;
|
||||
for (let i = labels.length - 1; i >= 0; i--) {
|
||||
const x = Math.max(f.box[0], 0);
|
||||
const y = i * options.lineHeight + f.box[1];
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
const y = i * drawOptions.lineHeight + f.box[1];
|
||||
if (drawOptions.shadowColor && drawOptions.shadowColor !== '') {
|
||||
ctx.fillStyle = drawOptions.shadowColor;
|
||||
ctx.fillText(labels[i], x + 5, y + 16);
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillStyle = drawOptions.labelColor;
|
||||
ctx.fillText(labels[i], x + 4, y + 15);
|
||||
}
|
||||
ctx.lineWidth = 1;
|
||||
if (f.mesh) {
|
||||
if (options.drawPoints) {
|
||||
if (drawOptions.drawPoints) {
|
||||
for (const pt of f.mesh) point(ctx, pt[0], pt[1], pt[2]);
|
||||
// for (const pt of f.meshRaw) point(ctx, pt[0] * inCanvas.offsetWidth, pt[1] * inCanvas.offsetHeight, pt[2]);
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
if (drawOptions.drawPolygons) {
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i < triangulation.length / 3; i++) {
|
||||
const points = [
|
||||
|
|
@ -166,26 +166,26 @@ export async function face(inCanvas, result) {
|
|||
}
|
||||
// iris: array[center, left, top, right, bottom]
|
||||
if (f.annotations && f.annotations.leftEyeIris) {
|
||||
ctx.strokeStyle = options.useDepth ? 'rgba(255, 200, 255, 0.3)' : options.color;
|
||||
ctx.strokeStyle = drawOptions.useDepth ? 'rgba(255, 200, 255, 0.3)' : drawOptions.color;
|
||||
ctx.beginPath();
|
||||
const sizeX = Math.abs(f.annotations.leftEyeIris[3][0] - f.annotations.leftEyeIris[1][0]) / 2;
|
||||
const sizeY = Math.abs(f.annotations.leftEyeIris[4][1] - f.annotations.leftEyeIris[2][1]) / 2;
|
||||
ctx.ellipse(f.annotations.leftEyeIris[0][0], f.annotations.leftEyeIris[0][1], sizeX, sizeY, 0, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
ctx.fillStyle = options.useDepth ? 'rgba(255, 255, 200, 0.3)' : options.color;
|
||||
if (drawOptions.fillPolygons) {
|
||||
ctx.fillStyle = drawOptions.useDepth ? 'rgba(255, 255, 200, 0.3)' : drawOptions.color;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
if (f.annotations && f.annotations.rightEyeIris) {
|
||||
ctx.strokeStyle = options.useDepth ? 'rgba(255, 200, 255, 0.3)' : options.color;
|
||||
ctx.strokeStyle = drawOptions.useDepth ? 'rgba(255, 200, 255, 0.3)' : drawOptions.color;
|
||||
ctx.beginPath();
|
||||
const sizeX = Math.abs(f.annotations.rightEyeIris[3][0] - f.annotations.rightEyeIris[1][0]) / 2;
|
||||
const sizeY = Math.abs(f.annotations.rightEyeIris[4][1] - f.annotations.rightEyeIris[2][1]) / 2;
|
||||
ctx.ellipse(f.annotations.rightEyeIris[0][0], f.annotations.rightEyeIris[0][1], sizeX, sizeY, 0, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
if (options.fillPolygons) {
|
||||
ctx.fillStyle = options.useDepth ? 'rgba(255, 255, 200, 0.3)' : options.color;
|
||||
if (drawOptions.fillPolygons) {
|
||||
ctx.fillStyle = drawOptions.useDepth ? 'rgba(255, 255, 200, 0.3)' : drawOptions.color;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
|
@ -203,13 +203,13 @@ export async function body(inCanvas, result) {
|
|||
ctx.lineJoin = 'round';
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
// result[i].keypoints = result[i].keypoints.filter((a) => a.score > 0.5);
|
||||
if (!lastDrawnPose[i] && options.bufferedOutput) lastDrawnPose[i] = { ...result[i] };
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
if (options.drawPoints) {
|
||||
if (!lastDrawnPose[i] && drawOptions.bufferedOutput) lastDrawnPose[i] = { ...result[i] };
|
||||
ctx.strokeStyle = drawOptions.color;
|
||||
ctx.lineWidth = drawOptions.lineWidth;
|
||||
if (drawOptions.drawPoints) {
|
||||
for (let pt = 0; pt < result[i].keypoints.length; pt++) {
|
||||
ctx.fillStyle = options.useDepth && result[i].keypoints[pt].position.z ? `rgba(${127.5 + (2 * result[i].keypoints[pt].position.z)}, ${127.5 - (2 * result[i].keypoints[pt].position.z)}, 255, 0.5)` : options.color;
|
||||
if (options.bufferedOutput) {
|
||||
ctx.fillStyle = drawOptions.useDepth && result[i].keypoints[pt].position.z ? `rgba(${127.5 + (2 * result[i].keypoints[pt].position.z)}, ${127.5 - (2 * result[i].keypoints[pt].position.z)}, 255, 0.5)` : drawOptions.color;
|
||||
if (drawOptions.bufferedOutput) {
|
||||
lastDrawnPose[i].keypoints[pt][0] = (lastDrawnPose[i].keypoints[pt][0] + result[i].keypoints[pt].position.x) / 2;
|
||||
lastDrawnPose[i].keypoints[pt][1] = (lastDrawnPose[i].keypoints[pt][1] + result[i].keypoints[pt].position.y) / 2;
|
||||
point(ctx, lastDrawnPose[i].keypoints[pt][0], lastDrawnPose[i].keypoints[pt][1]);
|
||||
|
|
@ -218,14 +218,14 @@ export async function body(inCanvas, result) {
|
|||
}
|
||||
}
|
||||
}
|
||||
if (options.drawLabels) {
|
||||
ctx.font = options.font;
|
||||
if (drawOptions.drawLabels) {
|
||||
ctx.font = drawOptions.font;
|
||||
for (const pt of result[i].keypoints) {
|
||||
ctx.fillStyle = options.useDepth && pt.position.z ? `rgba(${127.5 + (2 * pt.position.z)}, ${127.5 - (2 * pt.position.z)}, 255, 0.5)` : options.color;
|
||||
ctx.fillStyle = drawOptions.useDepth && pt.position.z ? `rgba(${127.5 + (2 * pt.position.z)}, ${127.5 - (2 * pt.position.z)}, 255, 0.5)` : drawOptions.color;
|
||||
ctx.fillText(`${pt.part}`, pt.position.x + 4, pt.position.y + 4);
|
||||
}
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
if (drawOptions.drawPolygons) {
|
||||
let part;
|
||||
const points: any[] = [];
|
||||
// torso
|
||||
|
|
@ -300,35 +300,35 @@ export async function hand(inCanvas, result) {
|
|||
const ctx = inCanvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.font = options.font;
|
||||
ctx.font = drawOptions.font;
|
||||
for (const h of result) {
|
||||
if (options.drawBoxes) {
|
||||
ctx.strokeStyle = options.color;
|
||||
ctx.fillStyle = options.color;
|
||||
if (drawOptions.drawBoxes) {
|
||||
ctx.strokeStyle = drawOptions.color;
|
||||
ctx.fillStyle = drawOptions.color;
|
||||
rect(ctx, h.box[0], h.box[1], h.box[2], h.box[3]);
|
||||
if (options.shadowColor && options.shadowColor !== '') {
|
||||
ctx.fillStyle = options.shadowColor;
|
||||
ctx.fillText('hand', h.box[0] + 3, 1 + h.box[1] + options.lineHeight, h.box[2]);
|
||||
if (drawOptions.shadowColor && drawOptions.shadowColor !== '') {
|
||||
ctx.fillStyle = drawOptions.shadowColor;
|
||||
ctx.fillText('hand', h.box[0] + 3, 1 + h.box[1] + drawOptions.lineHeight, h.box[2]);
|
||||
}
|
||||
ctx.fillStyle = options.labelColor;
|
||||
ctx.fillText('hand', h.box[0] + 2, 0 + h.box[1] + options.lineHeight, h.box[2]);
|
||||
ctx.fillStyle = drawOptions.labelColor;
|
||||
ctx.fillText('hand', h.box[0] + 2, 0 + h.box[1] + drawOptions.lineHeight, h.box[2]);
|
||||
ctx.stroke();
|
||||
}
|
||||
if (options.drawPoints) {
|
||||
if (drawOptions.drawPoints) {
|
||||
if (h.landmarks && h.landmarks.length > 0) {
|
||||
for (const pt of h.landmarks) {
|
||||
ctx.fillStyle = options.useDepth ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.5)` : options.color;
|
||||
ctx.fillStyle = drawOptions.useDepth ? `rgba(${127.5 + (2 * pt[2])}, ${127.5 - (2 * pt[2])}, 255, 0.5)` : drawOptions.color;
|
||||
point(ctx, pt[0], pt[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (options.drawPolygons) {
|
||||
if (drawOptions.drawPolygons) {
|
||||
const addPart = (part) => {
|
||||
if (!part) return;
|
||||
for (let i = 0; i < part.length; i++) {
|
||||
ctx.lineWidth = options.lineWidth;
|
||||
ctx.lineWidth = drawOptions.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = options.useDepth ? `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)` : options.color;
|
||||
ctx.strokeStyle = drawOptions.useDepth ? `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)` : drawOptions.color;
|
||||
ctx.moveTo(part[i > 0 ? i - 1 : 0][0], part[i > 0 ? i - 1 : 0][1]);
|
||||
ctx.lineTo(part[i][0], part[i][1]);
|
||||
ctx.stroke();
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export class Human {
|
|||
image: { tensor: Tensor, canvas: OffscreenCanvas | HTMLCanvasElement };
|
||||
// classes
|
||||
tf: typeof tf;
|
||||
draw: { options?: typeof draw.options, gesture: Function, face: Function, body: Function, hand: Function, canvas: Function, all: Function };
|
||||
draw: { options?: typeof draw.drawOptions, gesture: Function, face: Function, body: Function, hand: Function, canvas: Function, all: Function };
|
||||
// models
|
||||
models: {
|
||||
face: facemesh.MediaPipeFaceMesh | null,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
:root {
|
||||
--color-background: #fdfdfd;
|
||||
--color-text: #222;
|
||||
--color-text-aside: #707070;
|
||||
--color-link: #4da6ff;
|
||||
--color-menu-divider: #eee;
|
||||
--color-menu-divider-focus: #000;
|
||||
--color-menu-label: #707070;
|
||||
--color-panel: #fff;
|
||||
--color-panel-divider: #eee;
|
||||
--color-comment-tag: #707070;
|
||||
--color-comment-tag-text: #fff;
|
||||
--color-code-background: rgba(#000, 0.04);
|
||||
--color-ts: #9600ff;
|
||||
--color-ts-interface: #647f1b;
|
||||
--color-ts-enum: #937210;
|
||||
--color-ts-class: #0672de;
|
||||
--color-ts-private: #707070;
|
||||
--color-toolbar: #fff;
|
||||
--color-toolbar-text: #333;
|
||||
}
|
||||
|
||||
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
|
||||
/* ==========================================================================
|
||||
* * HTML5 display definitions
|
||||
|
|
@ -1585,14 +1607,14 @@ ul.tsd-descriptions > li > :last-child > :last-child > :last-child,
|
|||
}
|
||||
}
|
||||
body {
|
||||
background: #fdfdfd;
|
||||
background: var(--color-background);
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4da6ff;
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -1604,7 +1626,7 @@ code, pre {
|
|||
padding: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
background-color: var(--color-code-background);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -1670,7 +1692,7 @@ blockquote {
|
|||
padding: 20px 20px 0 0;
|
||||
max-width: 450px;
|
||||
visibility: hidden;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-panel);
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
html.default .col-menu > *:last-child {
|
||||
|
|
@ -1730,7 +1752,7 @@ html.default.has-menu .col-content {
|
|||
.tsd-page-title {
|
||||
padding: 70px 0 20px 0;
|
||||
margin: 0 0 40px 0;
|
||||
background: #fff;
|
||||
background: var(--color-panel);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.tsd-page-title h1 {
|
||||
|
|
@ -1740,10 +1762,10 @@ html.default.has-menu .col-content {
|
|||
.tsd-breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
}
|
||||
.tsd-breadcrumb a {
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
text-decoration: none;
|
||||
}
|
||||
.tsd-breadcrumb a:hover {
|
||||
|
|
@ -1816,8 +1838,8 @@ dl.tsd-comment-tags dt {
|
|||
padding: 1px 5px;
|
||||
margin: 0 10px 0 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #707070;
|
||||
color: #707070;
|
||||
border: 1px solid var(--color-comment-tag);
|
||||
color: var(--color-comment-tag);
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -1887,7 +1909,7 @@ dl.tsd-comment-tags p {
|
|||
top: 40px;
|
||||
right: 20px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-panel);
|
||||
visibility: hidden;
|
||||
transform: translate(50%, 0);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
|
||||
|
|
@ -1909,11 +1931,11 @@ dl.tsd-comment-tags p {
|
|||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid var(--color-panel-divider);
|
||||
background-color: var(--color-panel);
|
||||
}
|
||||
footer.with-border-bottom {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
footer .tsd-legend-group {
|
||||
font-size: 0;
|
||||
|
|
@ -1951,7 +1973,7 @@ footer .tsd-legend {
|
|||
.tsd-index-panel h3 {
|
||||
margin: 0 -20px 10px -20px;
|
||||
padding: 0 20px 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
.tsd-index-panel ul.tsd-index-list {
|
||||
-webkit-column-count: 3;
|
||||
|
|
@ -1995,39 +2017,39 @@ footer .tsd-legend {
|
|||
}
|
||||
.tsd-index-panel a,
|
||||
.tsd-index-panel .tsd-parent-kind-module a {
|
||||
color: #9600ff;
|
||||
color: var(--color-ts);
|
||||
}
|
||||
.tsd-index-panel .tsd-parent-kind-interface a {
|
||||
color: #647F1B;
|
||||
color: var(--color-ts-interface);
|
||||
}
|
||||
.tsd-index-panel .tsd-parent-kind-enum a {
|
||||
color: #937210;
|
||||
color: var(--color-ts-enum);
|
||||
}
|
||||
.tsd-index-panel .tsd-parent-kind-class a {
|
||||
color: #0672DE;
|
||||
color: var(--color-ts-class);
|
||||
}
|
||||
.tsd-index-panel .tsd-kind-module a {
|
||||
color: #9600ff;
|
||||
color: var(--color-ts);
|
||||
}
|
||||
.tsd-index-panel .tsd-kind-interface a {
|
||||
color: #647F1B;
|
||||
color: var(--color-ts-interface);
|
||||
}
|
||||
.tsd-index-panel .tsd-kind-enum a {
|
||||
color: #937210;
|
||||
color: var(--color-ts-enum);
|
||||
}
|
||||
.tsd-index-panel .tsd-kind-class a {
|
||||
color: #0672DE;
|
||||
color: var(--color-ts-class);
|
||||
}
|
||||
.tsd-index-panel .tsd-is-private a {
|
||||
color: #707070;
|
||||
color: var(--color-ts-private);
|
||||
}
|
||||
|
||||
.tsd-flag {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #707070;
|
||||
color: var(--color-comment-tag-text);
|
||||
background-color: var(--color-comment-tag);
|
||||
text-indent: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
|
@ -2047,19 +2069,19 @@ footer .tsd-legend {
|
|||
border-bottom: none;
|
||||
}
|
||||
.tsd-member a[data-tsd-kind] {
|
||||
color: #9600ff;
|
||||
color: var(--color-ts);
|
||||
}
|
||||
.tsd-member a[data-tsd-kind=Interface] {
|
||||
color: #647F1B;
|
||||
color: var(--color-ts-interface);
|
||||
}
|
||||
.tsd-member a[data-tsd-kind=Enum] {
|
||||
color: #937210;
|
||||
color: var(--color-ts-enum);
|
||||
}
|
||||
.tsd-member a[data-tsd-kind=Class] {
|
||||
color: #0672DE;
|
||||
color: var(--color-ts-class);
|
||||
}
|
||||
.tsd-member a[data-tsd-kind=Private] {
|
||||
color: #707070;
|
||||
color: var(--color-ts-private);
|
||||
}
|
||||
|
||||
.tsd-navigation {
|
||||
|
|
@ -2070,7 +2092,7 @@ footer .tsd-legend {
|
|||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-left: 2px solid transparent;
|
||||
color: #222;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
transition: border-left-color 0.1s;
|
||||
}
|
||||
|
|
@ -2113,10 +2135,10 @@ footer .tsd-legend {
|
|||
padding-left: 105px;
|
||||
}
|
||||
.tsd-navigation.primary > ul {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
.tsd-navigation.primary li {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
.tsd-navigation.primary li.current > a {
|
||||
font-weight: bold;
|
||||
|
|
@ -2124,7 +2146,7 @@ footer .tsd-legend {
|
|||
.tsd-navigation.primary li.label span {
|
||||
display: block;
|
||||
padding: 20px 0 6px 5px;
|
||||
color: #707070;
|
||||
color: var(--color-menu-label);
|
||||
}
|
||||
.tsd-navigation.primary li.globals + li > span, .tsd-navigation.primary li.globals + li > a {
|
||||
padding-top: 20px;
|
||||
|
|
@ -2164,16 +2186,16 @@ footer .tsd-legend {
|
|||
padding-left: 125px;
|
||||
}
|
||||
.tsd-navigation.secondary ul.current a {
|
||||
border-left-color: #eee;
|
||||
border-left-color: var(--color-panel-divider);
|
||||
}
|
||||
.tsd-navigation.secondary li.focus > a,
|
||||
.tsd-navigation.secondary ul.current li.focus > a {
|
||||
border-left-color: #000;
|
||||
border-left-color: var(--color-menu-divider-focus);
|
||||
}
|
||||
.tsd-navigation.secondary li.current {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-left-color: #eee;
|
||||
border-left-color: var(--color-panel-divider);
|
||||
}
|
||||
.tsd-navigation.secondary li.current > a {
|
||||
font-weight: bold;
|
||||
|
|
@ -2188,7 +2210,7 @@ footer .tsd-legend {
|
|||
.tsd-panel {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-panel);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.tsd-panel:empty {
|
||||
|
|
@ -2197,7 +2219,7 @@ footer .tsd-legend {
|
|||
.tsd-panel > h1, .tsd-panel > h2, .tsd-panel > h3 {
|
||||
margin: 1.5em -20px 10px -20px;
|
||||
padding: 0 20px 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
.tsd-panel > h1.tsd-before-signature, .tsd-panel > h2.tsd-before-signature, .tsd-panel > h3.tsd-before-signature {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -2259,7 +2281,7 @@ footer .tsd-legend {
|
|||
outline: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #222;
|
||||
color: var(--color-text);
|
||||
}
|
||||
#tsd-search .field label {
|
||||
position: absolute;
|
||||
|
|
@ -2282,17 +2304,17 @@ footer .tsd-legend {
|
|||
}
|
||||
#tsd-search .results li {
|
||||
padding: 0 10px;
|
||||
background-color: #fdfdfd;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
#tsd-search .results li:nth-child(even) {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-panel);
|
||||
}
|
||||
#tsd-search .results li.state {
|
||||
display: none;
|
||||
}
|
||||
#tsd-search .results li.current,
|
||||
#tsd-search .results li:hover {
|
||||
background-color: #eee;
|
||||
background-color: var(--color-panel-divider);
|
||||
}
|
||||
#tsd-search .results a {
|
||||
display: block;
|
||||
|
|
@ -2301,11 +2323,11 @@ footer .tsd-legend {
|
|||
top: 10px;
|
||||
}
|
||||
#tsd-search .results span.parent {
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
font-weight: normal;
|
||||
}
|
||||
#tsd-search.has-focus {
|
||||
background-color: #eee;
|
||||
background-color: var(--color-panel-divider);
|
||||
}
|
||||
#tsd-search.has-focus .field input {
|
||||
top: 0;
|
||||
|
|
@ -2328,7 +2350,7 @@ footer .tsd-legend {
|
|||
.tsd-signature {
|
||||
margin: 0 0 1em 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--color-panel-divider);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
overflow-x: auto;
|
||||
|
|
@ -2353,7 +2375,7 @@ footer .tsd-legend {
|
|||
}
|
||||
|
||||
.tsd-signature-symbol {
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -2365,7 +2387,7 @@ footer .tsd-legend {
|
|||
.tsd-signatures {
|
||||
padding: 0;
|
||||
margin: 0 0 1em 0;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--color-panel-divider);
|
||||
}
|
||||
.tsd-signatures .tsd-signature {
|
||||
margin: 0;
|
||||
|
|
@ -2376,7 +2398,7 @@ footer .tsd-legend {
|
|||
border-top-width: 0;
|
||||
}
|
||||
.tsd-signatures .tsd-signature.current {
|
||||
background-color: #eee;
|
||||
background-color: var(--color-panel-divider);
|
||||
}
|
||||
.tsd-signatures.active > .tsd-signature {
|
||||
cursor: pointer;
|
||||
|
|
@ -2450,11 +2472,11 @@ ul.tsd-type-parameters .tsd-comment {
|
|||
|
||||
.tsd-sources {
|
||||
font-size: 14px;
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
.tsd-sources a {
|
||||
color: #707070;
|
||||
color: var(--color-text-aside);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.tsd-sources ul, .tsd-sources p {
|
||||
|
|
@ -2472,13 +2494,13 @@ ul.tsd-type-parameters .tsd-comment {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: var(--color-toolbar-text);
|
||||
background: var(--color-toolbar);
|
||||
border-bottom: 1px solid var(--color-panel-divider);
|
||||
transition: transform 0.3s linear;
|
||||
}
|
||||
.tsd-page-toolbar a {
|
||||
color: #333;
|
||||
color: var(--color-toolbar-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.tsd-page-toolbar a.title {
|
||||
|
|
@ -2538,7 +2560,7 @@ ul.tsd-type-parameters .tsd-comment {
|
|||
}
|
||||
.tsd-widget.active {
|
||||
opacity: 1;
|
||||
background-color: #eee;
|
||||
background-color: var(--color-panel-divider);
|
||||
}
|
||||
.tsd-widget.no-caption {
|
||||
width: 40px;
|
||||
|
|
@ -2607,16 +2629,16 @@ input[type=checkbox]:checked + .tsd-widget:before {
|
|||
}
|
||||
.tsd-select .tsd-select-list li {
|
||||
padding: 0 20px 0 0;
|
||||
background-color: #fdfdfd;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.tsd-select .tsd-select-list li:before {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
.tsd-select .tsd-select-list li:nth-child(even) {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-panel);
|
||||
}
|
||||
.tsd-select .tsd-select-list li:hover {
|
||||
background-color: #eee;
|
||||
background-color: var(--color-panel-divider);
|
||||
}
|
||||
.tsd-select .tsd-select-list li.selected:before {
|
||||
background-position: -200px 0;
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Viewport\": () => /* binding */ Viewport\n/* harmony export */ });\n/* harmony import */ var _EventTarget__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../EventTarget */ \"./default/assets/js/src/typedoc/EventTarget.ts\");\n/* harmony import */ var _utils_trottle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/trottle */ \"./default/assets/js/src/typedoc/utils/trottle.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\n\n/**\n * A global service that monitors the window size and scroll position.\n */\nvar Viewport = /** @class */ (function (_super) {\n __extends(Viewport, _super);\n /**\n * Create new Viewport instance.\n */\n function Viewport() {\n var _this = _super.call(this) || this;\n /**\n * The current scroll position.\n */\n _this.scrollTop = 0;\n /**\n * The previous scrollTop.\n */\n _this.lastY = 0;\n /**\n * The width of the window.\n */\n _this.width = 0;\n /**\n * The height of the window.\n */\n _this.height = 0;\n /**\n * Boolean indicating whether the toolbar is shown.\n */\n _this.showToolbar = true;\n _this.toolbar = (document.querySelector(\".tsd-page-toolbar\"));\n _this.secondaryNav = (document.querySelector(\".tsd-navigation.secondary\"));\n window.addEventListener(\"scroll\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onScroll(); }, 10));\n window.addEventListener(\"resize\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onResize(); }, 10));\n _this.onResize();\n _this.onScroll();\n return _this;\n }\n /**\n * Trigger a resize event.\n */\n Viewport.prototype.triggerResize = function () {\n var event = new CustomEvent(\"resize\", {\n detail: {\n width: this.width,\n height: this.height,\n },\n });\n this.dispatchEvent(event);\n };\n /**\n * Triggered when the size of the window has changed.\n */\n Viewport.prototype.onResize = function () {\n this.width = window.innerWidth || 0;\n this.height = window.innerHeight || 0;\n var event = new CustomEvent(\"resize\", {\n detail: {\n width: this.width,\n height: this.height,\n },\n });\n this.dispatchEvent(event);\n };\n /**\n * Triggered when the user scrolled the viewport.\n */\n Viewport.prototype.onScroll = function () {\n this.scrollTop = window.scrollY || 0;\n var event = new CustomEvent(\"scroll\", {\n detail: {\n scrollTop: this.scrollTop,\n },\n });\n this.dispatchEvent(event);\n this.hideShowToolbar();\n };\n /**\n * Handle hiding/showing of the toolbar.\n */\n Viewport.prototype.hideShowToolbar = function () {\n var isShown = this.showToolbar;\n this.showToolbar = this.lastY >= this.scrollTop || this.scrollTop === 0;\n if (isShown !== this.showToolbar) {\n this.toolbar.classList.toggle(\"tsd-page-toolbar--hide\");\n this.secondaryNav.classList.toggle(\"tsd-navigation--toolbar-hide\");\n }\n this.lastY = this.scrollTop;\n };\n Viewport.instance = new Viewport();\n return Viewport;\n}(_EventTarget__WEBPACK_IMPORTED_MODULE_0__.EventTarget));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/services/Viewport.ts?");
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Viewport\": () => /* binding */ Viewport\n/* harmony export */ });\n/* harmony import */ var _EventTarget__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../EventTarget */ \"./default/assets/js/src/typedoc/EventTarget.ts\");\n/* harmony import */ var _utils_trottle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/trottle */ \"./default/assets/js/src/typedoc/utils/trottle.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\n\n/**\n * A global service that monitors the window size and scroll position.\n */\nvar Viewport = /** @class */ (function (_super) {\n __extends(Viewport, _super);\n /**\n * Create new Viewport instance.\n */\n function Viewport() {\n var _this = _super.call(this) || this;\n /**\n * The current scroll position.\n */\n _this.scrollTop = 0;\n /**\n * The previous scrollTop.\n */\n _this.lastY = 0;\n /**\n * The width of the window.\n */\n _this.width = 0;\n /**\n * The height of the window.\n */\n _this.height = 0;\n /**\n * Boolean indicating whether the toolbar is shown.\n */\n _this.showToolbar = true;\n _this.toolbar = (document.querySelector(\".tsd-page-toolbar\"));\n _this.secondaryNav = (document.querySelector(\".tsd-navigation.secondary\"));\n window.addEventListener(\"scroll\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onScroll(); }, 10));\n window.addEventListener(\"resize\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onResize(); }, 10));\n _this.onResize();\n _this.onScroll();\n return _this;\n }\n /**\n * Trigger a resize event.\n */\n Viewport.prototype.triggerResize = function () {\n var event = new CustomEvent(\"resize\", {\n detail: {\n width: this.width,\n height: this.height,\n },\n });\n this.dispatchEvent(event);\n };\n /**\n * Triggered when the size of the window has changed.\n */\n Viewport.prototype.onResize = function () {\n this.width = window.innerWidth || 0;\n this.height = window.innerHeight || 0;\n var event = new CustomEvent(\"resize\", {\n detail: {\n width: this.width,\n height: this.height,\n },\n });\n this.dispatchEvent(event);\n };\n /**\n * Triggered when the user scrolled the viewport.\n */\n Viewport.prototype.onScroll = function () {\n this.scrollTop = window.scrollY || 0;\n var event = new CustomEvent(\"scroll\", {\n detail: {\n scrollTop: this.scrollTop,\n },\n });\n this.dispatchEvent(event);\n this.hideShowToolbar();\n };\n /**\n * Handle hiding/showing of the toolbar.\n */\n Viewport.prototype.hideShowToolbar = function () {\n var isShown = this.showToolbar;\n this.showToolbar = this.lastY >= this.scrollTop || this.scrollTop <= 0;\n if (isShown !== this.showToolbar) {\n this.toolbar.classList.toggle(\"tsd-page-toolbar--hide\");\n this.secondaryNav.classList.toggle(\"tsd-navigation--toolbar-hide\");\n }\n this.lastY = this.scrollTop;\n };\n Viewport.instance = new Viewport();\n return Viewport;\n}(_EventTarget__WEBPACK_IMPORTED_MODULE_0__.EventTarget));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/services/Viewport.ts?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export declare const options: {
|
||||
export declare const drawOptions: {
|
||||
color: string;
|
||||
labelColor: string;
|
||||
shadowColor: string;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export declare class Human {
|
|||
};
|
||||
tf: typeof tf;
|
||||
draw: {
|
||||
options?: typeof draw.options;
|
||||
options?: typeof draw.drawOptions;
|
||||
gesture: Function;
|
||||
face: Function;
|
||||
body: Function;
|
||||
|
|
|
|||
Loading…
Reference in New Issue