60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
|
'strict';
|
||
|
|
const ROWS = 40 ;
|
||
|
|
const COLUMNS = 30;
|
||
|
|
const DELTA = 40;
|
||
|
|
let corps = document.querySelector('svg defs');
|
||
|
|
const NS = 'http://www.w3.org/2000/svg';
|
||
|
|
|
||
|
|
//():Element, string, string, object, Array<string> => void
|
||
|
|
const addElement = function(parent, ns, type, attributes, classes) {
|
||
|
|
const element = document.createElementNS(ns, type);
|
||
|
|
for (const ATTRIBUTE in attributes) {
|
||
|
|
element.setAttribute(ATTRIBUTE, attributes[ATTRIBUTE]);
|
||
|
|
}
|
||
|
|
parent.appendChild(element);
|
||
|
|
};
|
||
|
|
|
||
|
|
const lineAttrs = {
|
||
|
|
id: 'verBase',
|
||
|
|
stroke: 'gray',
|
||
|
|
'stroke-size': 0.1,
|
||
|
|
x1: 0,
|
||
|
|
y1: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: DELTA*COLUMNS
|
||
|
|
};
|
||
|
|
addElement(corps, NS, 'line', lineAttrs, []);
|
||
|
|
|
||
|
|
lineAttrs.id = 'horBase';
|
||
|
|
lineAttrs.x2 = DELTA*ROWS;
|
||
|
|
lineAttrs.y2 = 0;
|
||
|
|
addElement(corps, NS, 'line', lineAttrs, []);
|
||
|
|
|
||
|
|
corps = document.querySelector('svg');
|
||
|
|
const draw = function(size, angle) {
|
||
|
|
if (angle === 'vertical') {
|
||
|
|
for (let i=0; i<=size; i++) {
|
||
|
|
const useAttrs = {
|
||
|
|
x: i*DELTA,
|
||
|
|
y: 0,
|
||
|
|
href: '#verBase',
|
||
|
|
};
|
||
|
|
addElement(corps, NS, 'use', useAttrs, ['ver']);
|
||
|
|
}
|
||
|
|
} else if (angle === 'horizontal') {
|
||
|
|
for (let i=0; i<=size; i++) {
|
||
|
|
const useAttrs = {
|
||
|
|
x: 0,
|
||
|
|
y: i*DELTA,
|
||
|
|
href: '#horBase',
|
||
|
|
};
|
||
|
|
addElement(corps, NS, 'use', useAttrs, ['hor']);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
throw new Error('vertical or horizontal angles only !');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
draw(ROWS, 'vertical');
|
||
|
|
draw(COLUMNS, 'horizontal');
|