Skip to content

Commit 3dd571c

Browse files
dhowedhowe
committed
redo fixes for #7486 
1 parent 896d2e9 commit 3dd571c

File tree

5 files changed

+41
-478
lines changed

5 files changed

+41
-478
lines changed

‎src/core/p5.Renderer.js

Lines changed: 0 additions & 358 deletions
Original file line numberDiff line numberDiff line change
@@ -329,368 +329,10 @@ class Renderer {
329329
}
330330
}
331331

332-
textSize(s) {
333-
if (typeof s === 'number') {
334-
this.states.setValue('textSize', s);
335-
if (!this.states.leadingSet) {
336-
// only use a default value if not previously set (#5181)
337-
this.states.setValue('textLeading', s * constants._DEFAULT_LEADMULT);
338-
}
339-
return this._applyTextProperties();
340-
}
341-
342-
return this.states.textSize;
343-
}
344-
345-
textLeading (l) {
346-
if (typeof l === 'number') {
347-
this.states.setValue('leadingSet', true);
348-
this.states.setValue('textLeading', l);
349-
return this._pInst;
350-
}
351-
352-
return this.states.textLeading;
353-
}
354-
355-
textStyle (s) {
356-
if (s) {
357-
if (
358-
s === constants.NORMAL ||
359-
s === constants.ITALIC ||
360-
s === constants.BOLD ||
361-
s === constants.BOLDITALIC
362-
) {
363-
this.states.setValue('fontStyle', s);
364-
}
365-
366-
return this._applyTextProperties();
367-
}
368-
369-
return this.states.fontStyle;
370-
}
371-
372-
textAscent () {
373-
if (this.states.textAscent === null) {
374-
this._updateTextMetrics();
375-
}
376-
return this.states.textAscent;
377-
}
378-
379-
textDescent () {
380-
if (this.states.textDescent === null) {
381-
this._updateTextMetrics();
382-
}
383-
return this.states.textDescent;
384-
}
385-
386-
textAlign (h, v) {
387-
if (typeof h !== 'undefined') {
388-
this.states.setValue('textAlign', h);
389-
390-
if (typeof v !== 'undefined') {
391-
this.states.setValue('textBaseline', v);
392-
}
393-
394-
return this._applyTextProperties();
395-
} else {
396-
return {
397-
horizontal: this.states.textAlign,
398-
vertical: this.states.textBaseline
399-
};
400-
}
401-
}
402-
403-
textWrap (wrapStyle) {
404-
this.states.setValue('textWrap', wrapStyle);
405-
return this.states.textWrap;
406-
}
407-
408-
text(str, x, y, maxWidth, maxHeight) {
409-
const p = this._pInst;
410-
const textWrapStyle = this.states.textWrap;
411-
412-
let lines;
413-
let line;
414-
let testLine;
415-
let testWidth;
416-
let words;
417-
let chars;
418-
let shiftedY;
419-
let finalMaxHeight = Number.MAX_VALUE;
420-
// fix for #5785 (top of bounding box)
421-
let finalMinHeight = y;
422-
423-
if (!(this.states.fillColor || this.states.strokeColor)) {
424-
return;
425-
}
426-
427-
if (typeof str === 'undefined') {
428-
return;
429-
} else if (typeof str !== 'string') {
430-
str = str.toString();
431-
}
432-
433-
// Replaces tabs with double-spaces and splits string on any line
434-
// breaks present in the original string
435-
str = str.replace(/(\t)/g, ' ');
436-
lines = str.split('\n');
437-
438-
if (typeof maxWidth !== 'undefined') {
439-
if (this.states.rectMode === constants.CENTER) {
440-
x -= maxWidth / 2;
441-
}
442-
443-
switch (this.states.textAlign) {
444-
case constants.CENTER:
445-
x += maxWidth / 2;
446-
break;
447-
case constants.RIGHT:
448-
x += maxWidth;
449-
break;
450-
}
451-
452-
if (typeof maxHeight !== 'undefined') {
453-
if (this.states.rectMode === constants.CENTER) {
454-
y -= maxHeight / 2;
455-
finalMinHeight -= maxHeight / 2;
456-
}
457-
458-
let originalY = y;
459-
let ascent = p.textAscent();
460-
461-
switch (this.states.textBaseline) {
462-
case constants.BOTTOM:
463-
shiftedY = y + maxHeight;
464-
y = Math.max(shiftedY, y);
465-
// fix for #5785 (top of bounding box)
466-
finalMinHeight += ascent;
467-
break;
468-
case constants.CENTER:
469-
shiftedY = y + maxHeight / 2;
470-
y = Math.max(shiftedY, y);
471-
// fix for #5785 (top of bounding box)
472-
finalMinHeight += ascent / 2;
473-
break;
474-
}
475-
476-
// remember the max-allowed y-position for any line (fix to #928)
477-
finalMaxHeight = y + maxHeight - ascent;
478-
479-
// fix for #5785 (bottom of bounding box)
480-
if (this.states.textBaseline === constants.CENTER) {
481-
finalMaxHeight = originalY + maxHeight - ascent / 2;
482-
}
483-
} else {
484-
// no text-height specified, show warning for BOTTOM / CENTER
485-
if (this.states.textBaseline === constants.BOTTOM ||
486-
this.states.textBaseline === constants.CENTER) {
487-
// use rectHeight as an approximation for text height
488-
let rectHeight = p.textSize() * this.states.textLeading;
489-
finalMinHeight = y - rectHeight / 2;
490-
finalMaxHeight = y + rectHeight / 2;
491-
}
492-
}
493-
494-
// Render lines of text according to settings of textWrap
495-
// Splits lines at spaces, for loop adds one word + space
496-
// at a time and tests length with next word added
497-
if (textWrapStyle === constants.WORD) {
498-
let nlines = [];
499-
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
500-
line = '';
501-
words = lines[lineIndex].split(' ');
502-
for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
503-
testLine = `${line + words[wordIndex]}` + ' ';
504-
testWidth = this.textWidth(testLine);
505-
if (testWidth > maxWidth && line.length > 0) {
506-
nlines.push(line);
507-
line = `${words[wordIndex]}` + ' ';
508-
} else {
509-
line = testLine;
510-
}
511-
}
512-
nlines.push(line);
513-
}
514-
515-
let offset = 0;
516-
if (this.states.textBaseline === constants.CENTER) {
517-
offset = (nlines.length - 1) * p.textLeading() / 2;
518-
} else if (this.states.textBaseline === constants.BOTTOM) {
519-
offset = (nlines.length - 1) * p.textLeading();
520-
}
521-
522-
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
523-
line = '';
524-
words = lines[lineIndex].split(' ');
525-
for (let wordIndex = 0; wordIndex < words.length; wordIndex++) {
526-
testLine = `${line + words[wordIndex]}` + ' ';
527-
testWidth = this.textWidth(testLine);
528-
if (testWidth > maxWidth && line.length > 0) {
529-
this._renderText(
530-
p,
531-
line.trim(),
532-
x,
533-
y - offset,
534-
finalMaxHeight,
535-
finalMinHeight
536-
);
537-
line = `${words[wordIndex]}` + ' ';
538-
y += p.textLeading();
539-
} else {
540-
line = testLine;
541-
}
542-
}
543-
this._renderText(
544-
p,
545-
line.trim(),
546-
x,
547-
y - offset,
548-
finalMaxHeight,
549-
finalMinHeight
550-
);
551-
y += p.textLeading();
552-
}
553-
} else {
554-
let nlines = [];
555-
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
556-
line = '';
557-
chars = lines[lineIndex].split('');
558-
for (let charIndex = 0; charIndex < chars.length; charIndex++) {
559-
testLine = `${line + chars[charIndex]}`;
560-
testWidth = this.textWidth(testLine);
561-
if (testWidth <= maxWidth) {
562-
line += chars[charIndex];
563-
} else if (testWidth > maxWidth && line.length > 0) {
564-
nlines.push(line);
565-
line = `${chars[charIndex]}`;
566-
}
567-
}
568-
}
569-
570-
nlines.push(line);
571-
let offset = 0;
572-
if (this.states.textBaseline === constants.CENTER) {
573-
offset = (nlines.length - 1) * p.textLeading() / 2;
574-
} else if (this.states.textBaseline === constants.BOTTOM) {
575-
offset = (nlines.length - 1) * p.textLeading();
576-
}
577-
578-
// Splits lines at characters, for loop adds one char at a time
579-
// and tests length with next char added
580-
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
581-
line = '';
582-
chars = lines[lineIndex].split('');
583-
for (let charIndex = 0; charIndex < chars.length; charIndex++) {
584-
testLine = `${line + chars[charIndex]}`;
585-
testWidth = this.textWidth(testLine);
586-
if (testWidth <= maxWidth) {
587-
line += chars[charIndex];
588-
} else if (testWidth > maxWidth && line.length > 0) {
589-
this._renderText(
590-
p,
591-
line.trim(),
592-
x,
593-
y - offset,
594-
finalMaxHeight,
595-
finalMinHeight
596-
);
597-
y += p.textLeading();
598-
line = `${chars[charIndex]}`;
599-
}
600-
}
601-
}
602-
this._renderText(
603-
p,
604-
line.trim(),
605-
x,
606-
y - offset,
607-
finalMaxHeight,
608-
finalMinHeight
609-
);
610-
y += p.textLeading();
611-
}
612-
} else {
613-
// Offset to account for vertically centering multiple lines of text - no
614-
// need to adjust anything for vertical align top or baseline
615-
let offset = 0;
616-
if (this.states.textBaseline === constants.CENTER) {
617-
offset = (lines.length - 1) * p.textLeading() / 2;
618-
} else if (this.states.textBaseline === constants.BOTTOM) {
619-
offset = (lines.length - 1) * p.textLeading();
620-
}
621-
622-
// Renders lines of text at any line breaks present in the original string
623-
for (let i = 0; i < lines.length; i++) {
624-
this._renderText(
625-
p,
626-
lines[i],
627-
x,
628-
y - offset,
629-
finalMaxHeight,
630-
finalMinHeight - offset
631-
);
632-
y += p.textLeading();
633-
}
634-
}
635-
636-
return p;
637-
}
638-
639332
_applyDefaults() {
640333
return this;
641334
}
642335

643-
/**
644-
* Helper function to check font type (system or otf)
645-
*/
646-
_isOpenType({ font: f } = this.states.textFont) {
647-
return typeof f === 'object' && f.data;
648-
}
649-
650-
_updateTextMetrics() {
651-
if (this._isOpenType()) {
652-
this.states.setValue('textAscent', this.states.textFont._textAscent());
653-
this.states.setValue('textDescent', this.states.textFont._textDescent());
654-
return this;
655-
}
656-
657-
// Adapted from http://stackoverflow.com/a/25355178
658-
const text = document.createElement('span');
659-
text.style.fontFamily = this.states.textFont;
660-
text.style.fontSize = `${this.states.textSize}px`;
661-
text.innerHTML = 'ABCjgq|';
662-
663-
const block = document.createElement('div');
664-
block.style.display = 'inline-block';
665-
block.style.width = '1px';
666-
block.style.height = '0px';
667-
668-
const container = document.createElement('div');
669-
container.appendChild(text);
670-
container.appendChild(block);
671-
672-
container.style.height = '0px';
673-
container.style.overflow = 'hidden';
674-
document.body.appendChild(container);
675-
676-
block.style.verticalAlign = 'baseline';
677-
let blockOffset = calculateOffset(block);
678-
let textOffset = calculateOffset(text);
679-
const ascent = blockOffset[1] - textOffset[1];
680-
681-
block.style.verticalAlign = 'bottom';
682-
blockOffset = calculateOffset(block);
683-
textOffset = calculateOffset(text);
684-
const height = blockOffset[1] - textOffset[1];
685-
const descent = height - ascent;
686-
687-
document.body.removeChild(container);
688-
689-
this.states.setValue('textAscent', ascent);
690-
this.states.setValue('textDescent', descent);
691-
692-
return this;
693-
}
694336
};
695337

696338
function renderer(p5, fn){

0 commit comments

Comments
 (0)