From f2286cc2991c644af3c43db05f1dfdf0cb5fbb02 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Fri, 11 Aug 2017 22:21:23 +0800
Subject: [PATCH] Draw checkboxes as vector path
---
src/Input.js | 58 +++++++++++++++++++++++++++++++++++++---------------
1 file changed, 42 insertions(+), 16 deletions(-)
diff --git a/src/Input.js b/src/Input.js
index 4e6da36..1e75986 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -7,6 +7,7 @@ import {BACKGROUND_CLIP, BACKGROUND_ORIGIN} from './parsing/background';
import {BORDER_STYLE} from './parsing/border';
import Circle from './drawing/Circle';
+import Vector from './drawing/Vector';
import Color from './Color';
import Length from './Length';
import {Bounds} from './Bounds';
@@ -55,21 +56,38 @@ export const inlineInputElement = (node: HTMLInputElement, container: NodeContai
if (node.type === 'radio' || node.type === 'checkbox') {
if (node.checked) {
const size = Math.min(container.bounds.width, container.bounds.height);
- // TODO draw checkmark with Path Array<Vector>
- container.style.font.fontSize = `${size - 3}px`;
container.childNodes.push(
node.type === 'checkbox'
- ? new TextContainer('\u2714', container, [
- new TextBounds(
- '\u2714',
- new Bounds(
- container.bounds.left + size / 6,
- container.bounds.top + size - 1,
- 0,
- 0
- )
+ ? [
+ new Vector(
+ container.bounds.left + size * 0.39363,
+ container.bounds.top + size * 0.79
+ ),
+ new Vector(
+ container.bounds.left + size * 0.16,
+ container.bounds.top + size * 0.5549
+ ),
+ new Vector(
+ container.bounds.left + size * 0.27347,
+ container.bounds.top + size * 0.44071
+ ),
+ new Vector(
+ container.bounds.left + size * 0.39694,
+ container.bounds.top + size * 0.5649
+ ),
+ new Vector(
+ container.bounds.left + size * 0.72983,
+ container.bounds.top + size * 0.23
+ ),
+ new Vector(
+ container.bounds.left + size * 0.84,
+ container.bounds.top + size * 0.34085
+ ),
+ new Vector(
+ container.bounds.left + size * 0.39363,
+ container.bounds.top + size * 0.79
)
- ])
+ ]
: new Circle(
container.bounds.left + size / 4,
container.bounds.top + size / 4,
@@ -78,7 +96,7 @@ export const inlineInputElement = (node: HTMLInputElement, container: NodeContai
);
}
} else {
- inlineFormElement(getInputValue(node), node, container);
+ inlineFormElement(getInputValue(node), node, container, false);
}
};
@@ -86,12 +104,12 @@ export const inlineTextAreaElement = (
node: HTMLTextAreaElement,
container: NodeContainer
): void => {
- inlineFormElement(node.value, node, container);
+ inlineFormElement(node.value, node, container, true);
};
export const inlineSelectElement = (node: HTMLSelectElement, container: NodeContainer): void => {
const option = node.options[node.selectedIndex || 0];
- inlineFormElement(option ? option.text || '' : '', node, container);
+ inlineFormElement(option ? option.text || '' : '', node, container, false);
};
export const reformatInputBounds = (bounds: Bounds): Bounds => {
@@ -105,7 +123,12 @@ export const reformatInputBounds = (bounds: Bounds): Bounds => {
return bounds;
};
-const inlineFormElement = (value: string, node: HTMLElement, container: NodeContainer): void => {
+const inlineFormElement = (
+ value: string,
+ node: HTMLElement,
+ container: NodeContainer,
+ allowLinebreak: boolean
+): void => {
const body = node.ownerDocument.body;
if (value.length > 0 && body) {
const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
@@ -113,6 +136,9 @@ const inlineFormElement = (value: string, node: HTMLElement, container: NodeCont
wrapper.style.position = 'fixed';
wrapper.style.left = `${container.bounds.left}px`;
wrapper.style.top = `${container.bounds.top}px`;
+ if (!allowLinebreak) {
+ wrapper.style.whiteSpace = 'nowrap';
+ }
const text = node.ownerDocument.createTextNode(value);
wrapper.appendChild(text);
body.appendChild(wrapper);