github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move to standard linter for simpler configuration

Browse Source
This commit is contained in:
JFH
2021-12-28 11:02:29 -03:00
parent 258e2bd6a1
commit fdcfc8a253
251 changed files with 19760 additions and 19935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
src/svgcanvas/text-actions.js
View File

@@ -5,19 +5,18 @@
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
*/
import { NS } from './namespaces.js';
import { NS } from './namespaces.js'
import {
transformPoint, getMatrix
} from './math.js';
} from './math.js'
import {
assignAttributes, getElem, getBBox as utilsGetBBox
} from './utilities.js';
} from './utilities.js'
import {
supportsGoodTextCharPos
} from '../common/browser.js';
} from '../common/browser.js'
let svgCanvas = null;
let svgCanvas = null
/**
* @function module:text-actions.init
@@ -25,8 +24,8 @@ let svgCanvas = null;
* @returns {void}
*/
export const init = function (canvas) {
svgCanvas = canvas;
};
svgCanvas = canvas
}
/**
* Group: Text edit functions
@@ -35,16 +34,16 @@ export const init = function (canvas) {
* @memberof module:svgcanvas.SvgCanvas#
*/
export const textActionsMethod = (function () {
let curtext;
let textinput;
let cursor;
let selblock;
let blinker;
let chardata = [];
let textbb; // , transbb;
let matrix;
let lastX; let lastY;
let allowDbl;
let curtext
let textinput
let cursor
let selblock
let blinker
let chardata = []
let textbb // , transbb;
let matrix
let lastX; let lastY
let allowDbl
/**
*
@@ -52,42 +51,42 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
function setCursor (index) {
const empty = (textinput.value === '');
textinput.focus();
const empty = (textinput.value === '')
textinput.focus()
if (!arguments.length) {
if (empty) {
index = 0;
index = 0
} else {
if (textinput.selectionEnd !== textinput.selectionStart) { return; }
index = textinput.selectionEnd;
if (textinput.selectionEnd !== textinput.selectionStart) { return }
index = textinput.selectionEnd
}
}
const charbb = chardata[index];
const charbb = chardata[index]
if (!empty) {
textinput.setSelectionRange(index, index);
textinput.setSelectionRange(index, index)
}
cursor = getElem('text_cursor');
cursor = getElem('text_cursor')
if (!cursor) {
cursor = document.createElementNS(NS.SVG, 'line');
cursor = document.createElementNS(NS.SVG, 'line')
assignAttributes(cursor, {
id: 'text_cursor',
stroke: '#333',
'stroke-width': 1
});
getElem('selectorParentGroup').append(cursor);
})
getElem('selectorParentGroup').append(cursor)
}
if (!blinker) {
blinker = setInterval(function () {
const show = (cursor.getAttribute('display') === 'none');
cursor.setAttribute('display', show ? 'inline' : 'none');
}, 600);
const show = (cursor.getAttribute('display') === 'none')
cursor.setAttribute('display', show ? 'inline' : 'none')
}, 600)
}
const startPt = ptToScreen(charbb.x, textbb.y);
const endPt = ptToScreen(charbb.x, (textbb.y + textbb.height));
const startPt = ptToScreen(charbb.x, textbb.y)
const endPt = ptToScreen(charbb.x, (textbb.y + textbb.height))
assignAttributes(cursor, {
x1: startPt.x,
@@ -96,9 +95,9 @@ export const textActionsMethod = (function () {
y2: endPt.y,
visibility: 'visible',
display: 'inline'
});
})
if (selblock) { selblock.setAttribute('d', ''); }
if (selblock) { selblock.setAttribute('d', '') }
}
/**
@@ -110,45 +109,45 @@ export const textActionsMethod = (function () {
*/
function setSelection (start, end, skipInput) {
if (start === end) {
setCursor(end);
return;
setCursor(end)
return
}
if (!skipInput) {
textinput.setSelectionRange(start, end);
textinput.setSelectionRange(start, end)
}
selblock = getElem('text_selectblock');
selblock = getElem('text_selectblock')
if (!selblock) {
selblock = document.createElementNS(NS.SVG, 'path');
selblock = document.createElementNS(NS.SVG, 'path')
assignAttributes(selblock, {
id: 'text_selectblock',
fill: 'green',
opacity: 0.5,
style: 'pointer-events:none'
});
getElem('selectorParentGroup').append(selblock);
})
getElem('selectorParentGroup').append(selblock)
}
const startbb = chardata[start];
const endbb = chardata[end];
const startbb = chardata[start]
const endbb = chardata[end]
cursor.setAttribute('visibility', 'hidden');
cursor.setAttribute('visibility', 'hidden')
const tl = ptToScreen(startbb.x, textbb.y);
const tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y);
const bl = ptToScreen(startbb.x, textbb.y + textbb.height);
const br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height);
const tl = ptToScreen(startbb.x, textbb.y)
const tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y)
const bl = ptToScreen(startbb.x, textbb.y + textbb.height)
const br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height)
const dstr = 'M' + tl.x + ',' + tl.y +
' L' + tr.x + ',' + tr.y +
' ' + br.x + ',' + br.y +
' ' + bl.x + ',' + bl.y + 'z';
' ' + bl.x + ',' + bl.y + 'z'
assignAttributes(selblock, {
d: dstr,
display: 'inline'
});
})
}
/**
@@ -159,29 +158,29 @@ export const textActionsMethod = (function () {
*/
function getIndexFromPoint (mouseX, mouseY) {
// Position cursor here
const pt = svgCanvas.getSvgRoot().createSVGPoint();
pt.x = mouseX;
pt.y = mouseY;
const pt = svgCanvas.getSvgRoot().createSVGPoint()
pt.x = mouseX
pt.y = mouseY
// No content, so return 0
if (chardata.length === 1) { return 0; }
if (chardata.length === 1) { return 0 }
// Determine if cursor should be on left or right of character
let charpos = curtext.getCharNumAtPosition(pt);
let charpos = curtext.getCharNumAtPosition(pt)
if (charpos < 0) {
// Out of text range, look at mouse coords
charpos = chardata.length - 2;
charpos = chardata.length - 2
if (mouseX <= chardata[0].x) {
charpos = 0;
charpos = 0
}
} else if (charpos >= chardata.length - 2) {
charpos = chardata.length - 2;
charpos = chardata.length - 2
}
const charbb = chardata[charpos];
const mid = charbb.x + (charbb.width / 2);
const charbb = chardata[charpos]
const mid = charbb.x + (charbb.width / 2)
if (mouseX > mid) {
charpos++;
charpos++
}
return charpos;
return charpos
}
/**
@@ -191,7 +190,7 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
function setCursorFromPoint (mouseX, mouseY) {
setCursor(getIndexFromPoint(mouseX, mouseY));
setCursor(getIndexFromPoint(mouseX, mouseY))
}
/**
@@ -202,12 +201,12 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
function setEndSelectionFromPoint (x, y, apply) {
const i1 = textinput.selectionStart;
const i2 = getIndexFromPoint(x, y);
const i1 = textinput.selectionStart
const i2 = getIndexFromPoint(x, y)
const start = Math.min(i1, i2);
const end = Math.max(i1, i2);
setSelection(start, end, !apply);
const start = Math.min(i1, i2)
const end = Math.max(i1, i2)
setSelection(start, end, !apply)
}
/**
@@ -220,18 +219,18 @@ export const textActionsMethod = (function () {
const out = {
x: xIn,
y: yIn
};
const zoom = svgCanvas.getZoom();
out.x /= zoom;
out.y /= zoom;
}
const zoom = svgCanvas.getZoom()
out.x /= zoom
out.y /= zoom
if (matrix) {
const pt = transformPoint(out.x, out.y, matrix.inverse());
out.x = pt.x;
out.y = pt.y;
const pt = transformPoint(out.x, out.y, matrix.inverse())
out.x = pt.x
out.y = pt.y
}
return out;
return out
}
/**
@@ -244,18 +243,18 @@ export const textActionsMethod = (function () {
const out = {
x: xIn,
y: yIn
};
}
if (matrix) {
const pt = transformPoint(out.x, out.y, matrix);
out.x = pt.x;
out.y = pt.y;
const pt = transformPoint(out.x, out.y, matrix)
out.x = pt.x
out.y = pt.y
}
const zoom = svgCanvas.getZoom();
out.x *= zoom;
out.y *= zoom;
const zoom = svgCanvas.getZoom()
out.x *= zoom
out.y *= zoom
return out;
return out
}
/**
@@ -264,8 +263,8 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
function selectAll (evt) {
setSelection(0, curtext.textContent.length);
evt.target.removeEventListener('click', selectAll);
setSelection(0, curtext.textContent.length)
evt.target.removeEventListener('click', selectAll)
}
/**
@@ -274,26 +273,26 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
function selectWord (evt) {
if (!allowDbl || !curtext) { return; }
const zoom = svgCanvas.getZoom();
const ept = transformPoint(evt.pageX, evt.pageY, svgCanvas.getrootSctm());
const mouseX = ept.x * zoom;
const mouseY = ept.y * zoom;
const pt = screenToPt(mouseX, mouseY);
if (!allowDbl || !curtext) { return }
const zoom = svgCanvas.getZoom()
const ept = transformPoint(evt.pageX, evt.pageY, svgCanvas.getrootSctm())
const mouseX = ept.x * zoom
const mouseY = ept.y * zoom
const pt = screenToPt(mouseX, mouseY)
const index = getIndexFromPoint(pt.x, pt.y);
const str = curtext.textContent;
const first = str.substr(0, index).replace(/[a-z\d]+$/i, '').length;
const m = str.substr(index).match(/^[a-z\d]+/i);
const last = (m ? m[0].length : 0) + index;
setSelection(first, last);
const index = getIndexFromPoint(pt.x, pt.y)
const str = curtext.textContent
const first = str.substr(0, index).replace(/[a-z\d]+$/i, '').length
const m = str.substr(index).match(/^[a-z\d]+/i)
const last = (m ? m[0].length : 0) + index
setSelection(first, last)
// Set tripleclick
evt.target.addEventListener('click', selectAll);
evt.target.addEventListener('click', selectAll)
setTimeout(function () {
evt.target.removeEventListener('click', selectAll);
}, 300);
evt.target.removeEventListener('click', selectAll)
}, 300)
}
return /** @lends module:svgcanvas.SvgCanvas#textActions */ {
@@ -304,16 +303,16 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
select (target, x, y) {
curtext = target;
svgCanvas.textActions.toEditMode(x, y);
curtext = target
svgCanvas.textActions.toEditMode(x, y)
},
/**
* @param {Element} elem
* @returns {void}
*/
start (elem) {
curtext = elem;
svgCanvas.textActions.toEditMode();
curtext = elem
svgCanvas.textActions.toEditMode()
},
/**
* @param {external:MouseEvent} evt
@@ -323,12 +322,12 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
mouseDown (evt, mouseTarget, startX, startY) {
const pt = screenToPt(startX, startY);
const pt = screenToPt(startX, startY)
textinput.focus();
setCursorFromPoint(pt.x, pt.y);
lastX = startX;
lastY = startY;
textinput.focus()
setCursorFromPoint(pt.x, pt.y)
lastX = startX
lastY = startY
// TODO: Find way to block native selection
},
@@ -338,8 +337,8 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
mouseMove (mouseX, mouseY) {
const pt = screenToPt(mouseX, mouseY);
setEndSelectionFromPoint(pt.x, pt.y);
const pt = screenToPt(mouseX, mouseY)
setEndSelectionFromPoint(pt.x, pt.y)
},
/**
* @param {external:MouseEvent} evt
@@ -348,9 +347,9 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
mouseUp (evt, mouseX, mouseY) {
const pt = screenToPt(mouseX, mouseY);
const pt = screenToPt(mouseX, mouseY)
setEndSelectionFromPoint(pt.x, pt.y, true);
setEndSelectionFromPoint(pt.x, pt.y, true)
// TODO: Find a way to make this work: Use transformed BBox instead of evt.target
// if (lastX === mouseX && lastY === mouseY
@@ -365,7 +364,7 @@ export const textActionsMethod = (function () {
mouseY < lastY + 2 &&
mouseY > lastY - 2
) {
svgCanvas.textActions.toSelectMode(true);
svgCanvas.textActions.toSelectMode(true)
}
},
/**
@@ -380,16 +379,16 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
toEditMode (x, y) {
allowDbl = false;
svgCanvas.setCurrentMode('textedit');
svgCanvas.selectorManager.requestSelector(curtext).showGrips(false);
allowDbl = false
svgCanvas.setCurrentMode('textedit')
svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
// Make selector group accept clicks
/* const selector = */ svgCanvas.selectorManager.requestSelector(curtext); // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
/* const selector = */ svgCanvas.selectorManager.requestSelector(curtext) // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
// const sel = selector.selectorRect;
svgCanvas.textActions.init();
svgCanvas.textActions.init()
curtext.style.cursor = 'text';
curtext.style.cursor = 'text'
// if (supportsEditableText()) {
// curtext.setAttribute('editable', 'simple');
@@ -397,15 +396,15 @@ export const textActionsMethod = (function () {
// }
if (!arguments.length) {
setCursor();
setCursor()
} else {
const pt = screenToPt(x, y);
setCursorFromPoint(pt.x, pt.y);
const pt = screenToPt(x, y)
setCursorFromPoint(pt.x, pt.y)
}
setTimeout(function () {
allowDbl = true;
}, 300);
allowDbl = true
}, 300)
},
/**
* @param {boolean|Element} selectElem
@@ -413,28 +412,28 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
toSelectMode (selectElem) {
svgCanvas.setCurrentMode('select');
clearInterval(blinker);
blinker = null;
if (selblock) { selblock.setAttribute('display', 'none'); }
if (cursor) { cursor.setAttribute('visibility', 'hidden'); }
curtext.style.cursor = 'move';
svgCanvas.setCurrentMode('select')
clearInterval(blinker)
blinker = null
if (selblock) { selblock.setAttribute('display', 'none') }
if (cursor) { cursor.setAttribute('visibility', 'hidden') }
curtext.style.cursor = 'move'
if (selectElem) {
svgCanvas.clearSelection();
curtext.style.cursor = 'move';
svgCanvas.clearSelection()
curtext.style.cursor = 'move'
svgCanvas.call('selected', [ curtext ]);
svgCanvas.addToSelection([ curtext ], true);
svgCanvas.call('selected', [curtext])
svgCanvas.addToSelection([curtext], true)
}
if (curtext && !curtext.textContent.length) {
// No content, so delete
svgCanvas.deleteSelectedElements();
svgCanvas.deleteSelectedElements()
}
textinput.blur();
textinput.blur()
curtext = false;
curtext = false
// if (supportsEditableText()) {
// curtext.removeAttribute('editable');
@@ -445,14 +444,14 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
setInputElem (elem) {
textinput = elem;
textinput = elem
},
/**
* @returns {void}
*/
clear () {
if (svgCanvas.getCurrentMode() === 'textedit') {
svgCanvas.textActions.toSelectMode();
svgCanvas.textActions.toSelectMode()
}
},
/**
@@ -460,8 +459,8 @@ export const textActionsMethod = (function () {
* @returns {void}
*/
init (_inputElem) {
if (!curtext) { return; }
let i; let end;
if (!curtext) { return }
let i; let end
// if (supportsEditableText()) {
// curtext.select();
// return;
@@ -469,43 +468,43 @@ export const textActionsMethod = (function () {
if (!curtext.parentNode) {
// Result of the ffClone, need to get correct element
const selectedElements = svgCanvas.getSelectedElements();
curtext = selectedElements[0];
svgCanvas.selectorManager.requestSelector(curtext).showGrips(false);
const selectedElements = svgCanvas.getSelectedElements()
curtext = selectedElements[0]
svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
}
const str = curtext.textContent;
const len = str.length;
const str = curtext.textContent
const len = str.length
const xform = curtext.getAttribute('transform');
const xform = curtext.getAttribute('transform')
textbb = utilsGetBBox(curtext);
textbb = utilsGetBBox(curtext)
matrix = xform ? getMatrix(curtext) : null;
matrix = xform ? getMatrix(curtext) : null
chardata = [];
chardata.length = len;
textinput.focus();
chardata = []
chardata.length = len
textinput.focus()
curtext.removeEventListener("dblclick", selectWord);
curtext.addEventListener("dblclick", selectWord);
curtext.removeEventListener('dblclick', selectWord)
curtext.addEventListener('dblclick', selectWord)
if (!len) {
end = { x: textbb.x + (textbb.width / 2), width: 0 };
end = { x: textbb.x + (textbb.width / 2), width: 0 }
}
for (i = 0; i < len; i++) {
const start = curtext.getStartPositionOfChar(i);
end = curtext.getEndPositionOfChar(i);
const start = curtext.getStartPositionOfChar(i)
end = curtext.getEndPositionOfChar(i)
if (!supportsGoodTextCharPos()) {
const zoom = svgCanvas.getZoom();
const offset = svgCanvas.contentW * zoom;
start.x -= offset;
end.x -= offset;
const zoom = svgCanvas.getZoom()
const offset = svgCanvas.contentW * zoom
start.x -= offset
end.x -= offset
start.x /= zoom;
end.x /= zoom;
start.x /= zoom
end.x /= zoom
}
// Get a "bbox" equivalent for each character. Uses the
@@ -517,15 +516,15 @@ export const textActionsMethod = (function () {
y: textbb.y, // start.y?
width: end.x - start.x,
height: textbb.height
};
}
}
// Add a last bbox for cursor at end of text
chardata.push({
x: end.x,
width: 0
});
setSelection(textinput.selectionStart, textinput.selectionEnd, true);
})
setSelection(textinput.selectionStart, textinput.selectionEnd, true)
}
};
}());
}
}())