Skip to content

Add preview Google font family feature #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add preview Google font family feature #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,49 @@ textarea:focus{
.input:focus{
border: 2px solid #FF7F50;
}

#preview-render{
padding: 20px 0;
width: 100%;
max-height: 200px;
overflow-y:auto;
}

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 80%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
7 changes: 7 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ <h1>Google Font to Svg Path</h1>
<div class="input-holder">
<label>Google font: <select id="font-select" class="input"></select></label>
</div>
<div class="input-holder ">
<label >Show some Google Font Preview:
<button id="font-preview-btn">Load More</button>
<button id="font-preview-clear-btn">Clear</button>
</label>
</div>
<div id="preview-render"></div>

<div class="input-holder">
<label>(optional) upload font: <input id="font-upload" type="file" class="input" /></label>
Expand Down
55 changes: 48 additions & 7 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,34 @@ var App = /** @class */ (function () {
size = parseFloat(_this.sizeInput.value);
if (!size)
size = 100;
_this.render(_this.selectFamily.selectedIndex, _this.selectVariant.selectedIndex, _this.textInput.value, size, _this.unionCheckbox.checked, _this.filledCheckbox.checked, _this.kerningCheckbox.checked, _this.separateCheckbox.checked, parseFloat(_this.bezierAccuracy.value) || undefined, _this.selectUnits.value, _this.fillInput.value, _this.strokeInput.value, _this.strokeWidthInput.value, _this.strokeNonScalingCheckbox.checked, _this.fillRuleInput.value);
_this.render(_this.selectFamily.selectedIndex, _this.selectVariant.selectedIndex, _this.textInput.value, size, _this.unionCheckbox.checked, _this.filledCheckbox.checked, _this.kerningCheckbox.checked, _this.separateCheckbox.checked, parseFloat(_this.bezierAccuracy.value) || undefined, _this.selectUnits.value, _this.fillInput.value, _this.strokeInput.value, _this.strokeWidthInput.value, _this.strokeNonScalingCheckbox.checked, _this.fillRuleInput.value, _this.renderSvgDiv);
};
this.loadVariants = function () {
_this.selectVariant.options.length = 0;
var f = _this.fontList.items[_this.selectFamily.selectedIndex];
var v = f.variants.forEach(function (v) { return _this.addOption(_this.selectVariant, v); });
_this.renderCurrent();
};
this.appendPreviewFontDivElement = function (family, _a) {
var svg = _a.svg, dxf = _a.dxf;
var previewFontDiv = document.createElement('div');
var tooltip = document.createElement('span');
previewFontDiv.classList.add('tooltip');
tooltip.classList.add('tooltiptext');
previewFontDiv.innerHTML = svg;
tooltip.innerText = family;
previewFontDiv.append(tooltip);
previewFontDiv.addEventListener('click', function () {
_this.renderSvgDiv(family, { svg: svg, dxf: dxf });
});
_this.previewRenderDiv.append(previewFontDiv);
};
this.loadFontPreviewDivs = function (additionalFontSize) {
_this.fontList.items.slice().slice(_this.previewFontLength, _this.previewFontLength + additionalFontSize).forEach(function (font, index) {
_this.render(index, _this.selectVariant.selectedIndex, _this.textInput.value, 50, _this.unionCheckbox.checked, _this.filledCheckbox.checked, _this.kerningCheckbox.checked, _this.separateCheckbox.checked, parseFloat(_this.bezierAccuracy.value) || undefined, _this.selectUnits.value, _this.fillInput.value, _this.strokeInput.value, _this.strokeWidthInput.value, _this.strokeNonScalingCheckbox.checked, _this.fillRuleInput.value, _this.appendPreviewFontDivElement);
});
_this.previewFontLength += additionalFontSize;
};
this.downloadSvg = function () {
var SvgFile = window.btoa(_this.outputTextarea.value);
_this.downloadButton.href = 'data:image/svg+xml;base64,' + SvgFile;
Expand All @@ -71,6 +91,20 @@ var App = /** @class */ (function () {
_this.copyToClipboardBtn.innerText = 'copy to clipboard';
}, 2000);
};
this.renderSvgDiv = function (family, _a) {
var svg = _a.svg, dxf = _a.dxf;
_this.renderDiv.innerHTML = svg;
_this.renderDiv.setAttribute('data-dxf', dxf);
_this.outputTextarea.value = svg;
};
this.appendPreviewFont = function () {
_this.loadFontPreviewDivs(30);
_this.previewRenderDiv.hidden = false;
};
this.clickHiddenPreviewButton = function () {
_this.previewRenderDiv.hidden = _this.previewRenderDiv.hidden ? false : true;
_this.previewClearButton.innerHTML = _this.previewRenderDiv.hidden ? "Show" : "Hidden";
};
this.updateUrl = function () {
var urlSearchParams = new URLSearchParams(window.location.search);
urlSearchParams.set('font-select', _this.selectFamily.value);
Expand Down Expand Up @@ -161,6 +195,10 @@ var App = /** @class */ (function () {
this.strokeWidthInput = this.$('#input-stroke-width');
this.strokeNonScalingCheckbox = this.$('#input-stroke-non-scaling');
this.fillRuleInput = this.$("#input-fill-rule");
this.previewRenderDiv = this.$('#preview-render');
this.previewButton = this.$('#font-preview-btn');
this.previewClearButton = this.$('#font-preview-clear-btn');
this.previewFontLength = 0;
// Init units select.
Object.values(makerjs.unitType).forEach(function (unit) { return _this.addOption(_this.selectUnits, unit); });
};
Expand Down Expand Up @@ -240,6 +278,8 @@ var App = /** @class */ (function () {
document.addEventListener("coloris:pick", debounce(this.renderCurrent));
this.copyToClipboardBtn.onclick = this.copyToClipboard;
this.downloadButton.onclick = this.downloadSvg;
this.previewClearButton.onclick = this.clickHiddenPreviewButton;
this.previewButton.onclick = this.appendPreviewFont;
this.dxfButton.onclick = this.downloadDxf;
this.createLinkButton.onclick = this.updateUrl;
};
Expand Down Expand Up @@ -282,21 +322,22 @@ var App = /** @class */ (function () {
scalingStroke: !strokeNonScaling
});
var dxf = makerjs.exporter.toDXF(textModel, { units: units, usePOLYLINE: true });
this.renderDiv.innerHTML = svg;
this.renderDiv.setAttribute('data-dxf', dxf);
this.outputTextarea.value = svg;
return {
svg: svg,
dxf: dxf
};
};
App.prototype.render = function (fontIndex, variantIndex, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule) {
App.prototype.render = function (fontIndex, variantIndex, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule, callback) {
var _this = this;
var f = this.fontList.items[fontIndex];
var v = f.variants[variantIndex];
var url = f.files[v].substring(5); //remove http:
if (this.customFont !== undefined) {
this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
callback(f.family, this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule));
}
else {
opentype.load(url, function (err, font) {
_this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
callback(f.family, _this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule));
});
}
};
Expand Down
125 changes: 99 additions & 26 deletions index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ class App {
private strokeWidthInput: HTMLInputElement;
private strokeNonScalingCheckbox: HTMLInputElement;
private fillRuleInput: HTMLSelectElement;
private previewRenderDiv: HTMLDivElement;
private previewButton: HTMLButtonElement;
private previewClearButton : HTMLButtonElement;
private previewFontLength: number;

private renderCurrent = () => {
var size = this.sizeInput.valueAsNumber;
Expand All @@ -56,6 +60,7 @@ class App {
this.strokeWidthInput.value,
this.strokeNonScalingCheckbox.checked,
this.fillRuleInput.value,
this.renderSvgDiv,
);
};

Expand All @@ -65,6 +70,47 @@ class App {
var v = f.variants.forEach(v => this.addOption(this.selectVariant, v));
this.renderCurrent();
};

private appendPreviewFontDivElement = (family: string, {svg, dxf}) => {
const previewFontDiv = document.createElement('div');
const tooltip = document.createElement('span');

previewFontDiv.classList.add('tooltip');
tooltip.classList.add('tooltiptext');

previewFontDiv.innerHTML = svg;
tooltip.innerText = family;
previewFontDiv.append(tooltip)

previewFontDiv.addEventListener('click', () => {
this.renderSvgDiv(family, {svg, dxf});
})
this.previewRenderDiv.append(previewFontDiv);
}

private loadFontPreviewDivs = (additionalFontSize : number) => {
[...this.fontList.items].slice(this.previewFontLength, this.previewFontLength + additionalFontSize ).forEach((font, index) => {
this.render(
index,
this.selectVariant.selectedIndex,
this.textInput.value,
50,
this.unionCheckbox.checked,
this.filledCheckbox.checked,
this.kerningCheckbox.checked,
this.separateCheckbox.checked,
parseFloat(this.bezierAccuracy.value) || undefined,
this.selectUnits.value,
this.fillInput.value,
this.strokeInput.value,
this.strokeWidthInput.value,
this.strokeNonScalingCheckbox.checked,
this.fillRuleInput.value,
this.appendPreviewFontDivElement,
);
});
this.previewFontLength += additionalFontSize;
}
private downloadSvg = () => {
var SvgFile = window.btoa(this.outputTextarea.value);
this.downloadButton.href = 'data:image/svg+xml;base64,' + SvgFile;
Expand All @@ -83,6 +129,25 @@ class App {
this.copyToClipboardBtn.innerText = 'copy to clipboard';
}, 2000)
};

private renderSvgDiv = (family: string, {svg, dxf}) =>{
this.renderDiv.innerHTML = svg;
this.renderDiv.setAttribute('data-dxf', dxf);
this.outputTextarea.value = svg;
};

private appendPreviewFont = () => {
this.loadFontPreviewDivs(30);
this.previewRenderDiv.hidden = false;
}

private clickHiddenPreviewButton = () => {
this.previewRenderDiv.hidden = this.previewRenderDiv.hidden ? false : true;
this.previewClearButton.innerHTML = this.previewRenderDiv.hidden ? "Show" : "Hidden";

}


private updateUrl = () => {
var urlSearchParams = new URLSearchParams(window.location.search);

Expand Down Expand Up @@ -174,7 +239,10 @@ class App {
this.strokeWidthInput = this.$('#input-stroke-width') as HTMLInputElement;
this.strokeNonScalingCheckbox = this.$('#input-stroke-non-scaling') as HTMLInputElement;
this.fillRuleInput = this.$("#input-fill-rule") as HTMLSelectElement;

this.previewRenderDiv = this.$('#preview-render') as HTMLDivElement;
this.previewButton = this.$('#font-preview-btn') as HTMLButtonElement;
this.previewClearButton = this.$('#font-preview-clear-btn') as HTMLButtonElement;
this.previewFontLength = 0;
// Init units select.
Object.values(makerjs.unitType).forEach(unit => this.addOption(this.selectUnits, unit));
}
Expand Down Expand Up @@ -277,6 +345,8 @@ class App {

this.copyToClipboardBtn.onclick = this.copyToClipboard;
this.downloadButton.onclick = this.downloadSvg;
this.previewClearButton.onclick = this.clickHiddenPreviewButton;
this.previewButton.onclick = this.appendPreviewFont;
this.dxfButton.onclick = this.downloadDxf;
this.createLinkButton.onclick = this.updateUrl;
}
Expand Down Expand Up @@ -309,29 +379,31 @@ class App {
}

callMakerjs(font: opentype.Font, text: string, size: number, union: boolean, filled: boolean, kerning: boolean, separate: boolean,
bezierAccuracy: number, units: string, fill: string, stroke: string, strokeWidth: string, strokeNonScaling: boolean, fillRule: FillRule) {
//generate the text using a font
var textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy, { kerning });

if (separate) {
for (var i in textModel.models) {
textModel.models[i].layer = i;
}
}

var svg = makerjs.exporter.toSVG(textModel, {
fill: filled ? fill : undefined,
stroke: stroke ? stroke : undefined,
strokeWidth: strokeWidth ? strokeWidth : undefined,
fillRule: fillRule ? fillRule : undefined,
scalingStroke: !strokeNonScaling,
});
var dxf = makerjs.exporter.toDXF(textModel, {units: units, usePOLYLINE: true});

this.renderDiv.innerHTML = svg;
this.renderDiv.setAttribute('data-dxf', dxf);
this.outputTextarea.value = svg;
}
bezierAccuracy: number, units: string, fill: string, stroke: string, strokeWidth: string, strokeNonScaling: boolean, fillRule: FillRule) {
//generate the text using a font
var textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy, { kerning });

if (separate) {
for (var i in textModel.models) {
textModel.models[i].layer = i;
}
}

var svg = makerjs.exporter.toSVG(textModel, {
fill: filled ? fill : undefined,
stroke: stroke ? stroke : undefined,
strokeWidth: strokeWidth ? strokeWidth : undefined,
fillRule: fillRule ? fillRule : undefined,
scalingStroke: !strokeNonScaling,
});
var dxf = makerjs.exporter.toDXF(textModel, {units: units, usePOLYLINE: true});

return {
svg,
dxf
};

}

render(
fontIndex: number,
Expand All @@ -349,17 +421,18 @@ class App {
strokeWidth: string,
strokeNonScaling: boolean,
fillRule: string,
callback: Function,
) {

var f = this.fontList.items[fontIndex];
var v = f.variants[variantIndex];
var url = f.files[v].substring(5); //remove http:

if (this.customFont !== undefined) {
this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
callback(f.family, this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule));
} else {
opentype.load(url, (err, font) => {
this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
callback(f.family, this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule));
});
}
}
Expand Down