inline-style-editor 1.3.7 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/index.js DELETED
@@ -1,7 +0,0 @@
1
- import StyleEditor from './components/InlineStyleEditor.svelte';
2
-
3
- export default class InlineStyleEditor {
4
- constructor(options) {
5
- return new StyleEditor({target: document.body, props: options});
6
- }
7
- }
@@ -1,91 +0,0 @@
1
- import { contours } from 'd3-contour';
2
-
3
- function pointInBox(p, box) {
4
- return !(p.x < box.left || p.x > box.right || p.y > box.bottom || p.y < box.top)
5
- }
6
-
7
- function pointInBoxes(point, boxes) {
8
- for (const box of boxes){
9
- if (pointInBox(point, box)) return true;
10
- }
11
- return false;
12
- }
13
-
14
- function defineRectangleClockWise({width, height, top = 0, left = 0}) {
15
- return `M${left} ${top} h${width} v${height} h-${width}z`
16
- }
17
-
18
- function defineRectangleAntiClockWise({width, height, top = 0, left = 0}) {
19
- return `M${left} ${top} v${height} h${width} v-${height}z`
20
- }
21
-
22
- function boxOverlap(box1, box2) {
23
- return (box1.right >= box2.left && box2.right >= box1.left)
24
- && (box1.bottom >= box2.top && box2.bottom >= box1.top)
25
- }
26
-
27
- function boxesHaveOverlap(boundingBoxes) {
28
- for (let i = 0; i < boundingBoxes.length - 1; ++i) {
29
- const ref = boundingBoxes[i];
30
- for (let j = i + 1; j < boundingBoxes.length; ++j) {
31
- if (boxOverlap(ref, boundingBoxes[j])) return true;
32
- }
33
- }
34
- return false;
35
- }
36
-
37
- function computeContours(boundingBoxes, pageDimensions) {
38
- let _pathWithHoles = defineRectangleAntiClockWise({width: pageDimensions.width, height: pageDimensions.height});
39
- if (boundingBoxes.length < 10 && !boxesHaveOverlap(boundingBoxes)) {
40
- for (const bbox of boundingBoxes) {
41
- _pathWithHoles = `${_pathWithHoles} ${defineRectangleClockWise(bbox)}`;
42
- }
43
- return _pathWithHoles;
44
- }
45
- const minX = Math.min(...boundingBoxes.map(rect => rect.left));
46
- const minY = Math.min(...boundingBoxes.map(rect => rect.top));
47
- const offsetBoxes = boundingBoxes.map(rect => {
48
- rect.left = rect.left - minX;
49
- rect.right = rect.right - minX;
50
- rect.top = rect.top - minY;
51
- rect.bottom = rect.bottom - minY;
52
- return rect;
53
- });
54
- offsetBoxes.sort((a, b) => {
55
- if (a.left > b.left) return 1;
56
- if (a.left < b.left) return -1;
57
- return 0;
58
- });
59
- const maxX = Math.ceil(Math.max(...offsetBoxes.map(rect => rect.right)));
60
- const maxY = Math.ceil(Math.max(...offsetBoxes.map(rect => rect.bottom)));
61
- const maxNbPixels = 20000;
62
- const downscaleFactor = (maxX * maxY) / maxNbPixels;
63
- const widthArrayX = Math.ceil(maxX / downscaleFactor);
64
- const widthArrayY = Math.ceil(maxY / downscaleFactor);
65
- const pixelsByStepX = (maxX) / widthArrayX;
66
- const pixelsByStepY = (maxY) / widthArrayY;
67
- const values = new Array(widthArrayX * widthArrayY); // one coordinate per pixel
68
- for (let j = 0, k = 0; j < widthArrayY; ++j) {
69
- for (let i = 0; i < widthArrayX; ++i, ++k) {
70
- values[k] = pointInBoxes({x: i * downscaleFactor, y: j * downscaleFactor}, offsetBoxes) ? 1 : 0;
71
- }
72
- }
73
-
74
- const computedContours = contours().size([widthArrayX, widthArrayY]).thresholds([1])(values)[0];
75
- let holes = '';
76
- for (let polygon of computedContours.coordinates) {
77
- for (let ring of polygon) {
78
- for (let i = 0; i < ring.length; ++i) {
79
- const point = ring[i];
80
- const x = point[0] * pixelsByStepX + minX;
81
- const y = point[1] * pixelsByStepY + minY;
82
- if (!i) holes += `M${x} ${y}`;
83
- else holes += `L ${x} ${y}`;
84
- }
85
- holes += 'Z'
86
- }
87
- }
88
- return `${_pathWithHoles} ${holes}`;
89
- }
90
-
91
- export { computeContours };
package/src/util/fonts.js DELETED
@@ -1,89 +0,0 @@
1
- // https://stackoverflow.com/a/3368855
2
- function getAvailableFonts() {
3
- const fontsToCheck = new Set([
4
- 'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
5
- 'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
6
- 'Comic Sans MS', 'Comic Sans', 'Apple Chancery', 'Bradley Hand', 'Brush Script MT', 'Brush Script Std', 'Snell Roundhand', 'URW Chancery L'
7
- ].sort());
8
- const defaultWidth = {};
9
- const defaultHeight = {};
10
- // a font will be compared against all the three default fonts.
11
- // and if it doesn't match all 3 then that font is not available.
12
- const baseFonts = ['monospace', 'sans-serif', 'serif', 'cursive'];
13
-
14
- // we use m or w because these two characters take up the maximum width.
15
- // And we use a LLi so that the same matching fonts can get separated
16
- const testString = "mmmmmmmmmmlli";
17
-
18
- // we test using 72px font size, we may use any size. I guess larger the better.
19
- const testSize = '72px';
20
-
21
- const container = document.getElementsByTagName("body")[0];
22
-
23
- // create a SPAN in the document to get the width of the text we use to test
24
- const spanTester = document.createElement("span");
25
- spanTester.style.fontSize = testSize;
26
- spanTester.innerHTML = testString;
27
- baseFonts.forEach(font => {
28
- //get the default width for the three base fonts
29
- spanTester.style.fontFamily = font;
30
- container.appendChild(spanTester);
31
- defaultWidth[font] = spanTester.offsetWidth; // width for the default font
32
- defaultHeight[font] = spanTester.offsetHeight; // height for the default font
33
- container.removeChild(spanTester);
34
- });
35
-
36
- const availableFonts = [];
37
-
38
- const fontExists = (fontName) => {
39
- let detected = false;
40
- for (const font of baseFonts) {
41
- spanTester.style.fontFamily = fontName + ',' + font; // name of the font along with the base font for fallback.
42
- container.appendChild(spanTester);
43
- const matched = (spanTester.offsetWidth != defaultWidth[font] || spanTester.offsetHeight != defaultHeight[font]);
44
- container.removeChild(spanTester);
45
- detected = detected || matched;
46
- }
47
- return detected;
48
- }
49
- for (const font of fontsToCheck.values()) {
50
- if (fontExists(font)) {
51
- availableFonts.push(font);
52
- }
53
- }
54
- return availableFonts.sort();
55
-
56
- }
57
-
58
- const availableFonts = getAvailableFonts();
59
- function getFonts() {
60
- return [...listFonts(), ...availableFonts]
61
- }
62
-
63
- function listFonts() {
64
- let { fonts } = document;
65
- const it = fonts.entries();
66
-
67
- let arr = [];
68
- let done = false;
69
-
70
- while (!done) {
71
- const font = it.next();
72
- if (!font.done) {
73
- const value = font.value;
74
- let fontName;
75
- // webkit returns directly an object
76
- if (value.length) fontName = value[0].family;
77
- else fontName = value.family;
78
- arr.push(fontName);
79
- } else {
80
- done = font.done;
81
- }
82
- }
83
-
84
- // converted to set then arr to filter repetitive values
85
- return [...new Set(arr)];
86
- }
87
-
88
-
89
- export { getFonts };
package/src/util/path.js DELETED
@@ -1,46 +0,0 @@
1
- import parsePath from 'parse-svg-path';
2
-
3
- export function simplifyLinesPath(path) {
4
- const parsed = parsePath(path).map(values => values.map((v, i) => {
5
- if (i > 0) return Math.round(v);
6
- return v;
7
- }));
8
- const simplifiedPath = [];
9
- for (let i = 0; i < parsed.length - 1; ++i) {
10
- const current = parsed[i];
11
- let next = parsed[i + 1];
12
- simplifiedPath.push(current);
13
- let sameX = current[1] === next[1];
14
- let sameY = current[2] === next[2];
15
- if (sameX) {
16
- while(sameX) {
17
- i += 1;
18
- next = parsed[i + 1];
19
- sameX = next[0] === "L" && current[1] === next[1];
20
- }
21
- i -= 1;
22
- }
23
- if (sameY) {
24
- while(sameY) {
25
- i += 1;
26
- next = parsed[i + 1];
27
- sameY = next[0] === "L" && current[2] === next[2];
28
- }
29
- i -= 1;
30
- }
31
- }
32
- simplifiedPath.push(parsed[parsed.length - 1]);
33
- return instructionsToPath(simplifiedPath);
34
- }
35
-
36
- function instructionsToPath(data) {
37
- let str = '';
38
- data.forEach(ins => {
39
- for (let i = 0; i < ins.length; ++i) {
40
- let val = ins[i];
41
- if (i > 0) val = Math.round(val);
42
- str += val + (i === ins.length - 1 ? '' : ' ');
43
- }
44
- });
45
- return str;
46
- }
package/src/util/util.js DELETED
@@ -1,23 +0,0 @@
1
- function pick(obj, keys) {
2
- return keys.reduce((picked, curKey) => {
3
- picked[curKey] = obj[curKey];
4
- return picked;
5
- }, {});
6
- }
7
-
8
- function debounce(func, wait, immediate = false) {
9
- let timeout;
10
- return function() {
11
- const context = this, args = arguments;
12
- const later = function() {
13
- timeout = null;
14
- if (!immediate) func.apply(context, args);
15
- };
16
- const callNow = immediate && !timeout;
17
- clearTimeout(timeout);
18
- timeout = setTimeout(later, wait);
19
- if (callNow) func.apply(context, args);
20
- };
21
- };
22
-
23
- export { pick, debounce };