diff options
Diffstat (limited to 'web_src/vendor/gitgraph.js/gitgraph.custom.js')
| -rw-r--r-- | web_src/vendor/gitgraph.js/gitgraph.custom.js | 419 |
1 files changed, 419 insertions, 0 deletions
diff --git a/web_src/vendor/gitgraph.js/gitgraph.custom.js b/web_src/vendor/gitgraph.js/gitgraph.custom.js new file mode 100644 index 0000000000..2c18a2d03e --- /dev/null +++ b/web_src/vendor/gitgraph.js/gitgraph.custom.js @@ -0,0 +1,419 @@ +/* + * @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD 3-Clause + * Copyright (c) 2011, Terrence Lee <kill889@gmail.com> + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * * Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * * Neither the name of the <organization> nor the + * names of its contributors may be used to endorse or promote products + * derived from this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND + * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE + * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY + * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES + * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND + * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS + * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ + +export default function gitGraph(canvas, rawGraphList, config) { + if (!canvas.getContext) { + return; + } + + if (typeof config === 'undefined') { + config = { + unitSize: 20, + lineWidth: 3, + nodeRadius: 4 + }; + } + + const flows = []; + const graphList = []; + + const ctx = canvas.getContext('2d'); + + const devicePixelRatio = window.devicePixelRatio || 1; + const backingStoreRatio = ctx.webkitBackingStorePixelRatio + || ctx.mozBackingStorePixelRatio + || ctx.msBackingStorePixelRatio + || ctx.oBackingStorePixelRatio + || ctx.backingStorePixelRatio || 1; + + const ratio = devicePixelRatio / backingStoreRatio; + + const init = function () { + let maxWidth = 0; + let i; + const l = rawGraphList.length; + let row; + let midStr; + + for (i = 0; i < l; i++) { + midStr = rawGraphList[i].replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, ''); + + maxWidth = Math.max(midStr.replace(/(_|\s)/g, '').length, maxWidth); + + row = midStr.split(''); + + graphList.unshift(row); + } + + const width = maxWidth * config.unitSize; + const height = graphList.length * config.unitSize; + + canvas.width = width * ratio; + canvas.height = height * ratio; + + canvas.style.width = `${width}px`; + canvas.style.height = `${height}px`; + + ctx.lineWidth = config.lineWidth; + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + + ctx.scale(ratio, ratio); + }; + + const genRandomStr = function () { + const chars = '0123456789ABCDEF'; + const stringLength = 6; + let randomString = '', rnum, i; + for (i = 0; i < stringLength; i++) { + rnum = Math.floor(Math.random() * chars.length); + randomString += chars.substring(rnum, rnum + 1); + } + + return randomString; + }; + + const findFlow = function (id) { + let i = flows.length; + + while (i-- && flows[i].id !== id); + + return i; + }; + + const findColomn = function (symbol, row) { + let i = row.length; + + while (i-- && row[i] !== symbol); + + return i; + }; + + const findBranchOut = function (row) { + if (!row) { + return -1; + } + + let i = row.length; + + while (i-- + && !(row[i - 1] && row[i] === '/' && row[i - 1] === '|') + && !(row[i - 2] && row[i] === '_' && row[i - 2] === '|')); + + return i; + }; + + const findLineBreak = function (row) { + if (!row) { + return -1; + } + + let i = row.length; + + while (i-- + && !(row[i - 1] && row[i - 2] && row[i] === ' ' && row[i - 1] === '|' && row[i - 2] === '_')); + + return i; + }; + + const genNewFlow = function () { + let newId; + + do { + newId = genRandomStr(); + } while (findFlow(newId) !== -1); + + return { id: newId, color: `#${newId}` }; + }; + + // Draw methods + const drawLine = function (moveX, moveY, lineX, lineY, color) { + ctx.strokeStyle = color; + ctx.beginPath(); + ctx.moveTo(moveX, moveY); + ctx.lineTo(lineX, lineY); + ctx.stroke(); + }; + + const drawLineRight = function (x, y, color) { + drawLine(x, y + config.unitSize / 2, x + config.unitSize, y + config.unitSize / 2, color); + }; + + const drawLineUp = function (x, y, color) { + drawLine(x, y + config.unitSize / 2, x, y - config.unitSize / 2, color); + }; + + const drawNode = function (x, y, color) { + ctx.strokeStyle = color; + + drawLineUp(x, y, color); + + ctx.beginPath(); + ctx.arc(x, y, config.nodeRadius, 0, Math.PI * 2, true); + ctx.fill(); + }; + + const drawLineIn = function (x, y, color) { + drawLine(x + config.unitSize, y + config.unitSize / 2, x, y - config.unitSize / 2, color); + }; + + const drawLineOut = function (x, y, color) { + drawLine(x, y + config.unitSize / 2, x + config.unitSize, y - config.unitSize / 2, color); + }; + + const draw = function (graphList) { + let colomn, colomnIndex, prevColomn, condenseIndex, breakIndex = -1; + let x, y; + let color; + let nodePos; + let tempFlow; + let prevRowLength = 0; + let flowSwapPos = -1; + let lastLinePos; + let i, l; + let condenseCurrentLength, condensePrevLength = 0; + + let inlineIntersect = false; + + // initiate color array for first row + for (i = 0, l = graphList[0].length; i < l; i++) { + if (graphList[0][i] !== '_' && graphList[0][i] !== ' ') { + flows.push(genNewFlow()); + } + } + + y = (canvas.height / ratio) - config.unitSize * 0.5; + + // iterate + for (i = 0, l = graphList.length; i < l; i++) { + x = config.unitSize * 0.5; + + const currentRow = graphList[i]; + const nextRow = graphList[i + 1]; + const prevRow = graphList[i - 1]; + + flowSwapPos = -1; + + condenseCurrentLength = currentRow.filter((val) => { + return (val !== ' ' && val !== '_'); + }).length; + + // pre process begin + // use last row for analysing + if (prevRow) { + if (!inlineIntersect) { + // intersect might happen + for (colomnIndex = 0; colomnIndex < prevRowLength; colomnIndex++) { + if (prevRow[colomnIndex + 1] + && (prevRow[colomnIndex] === '/' && prevRow[colomnIndex + 1] === '|') + || ((prevRow[colomnIndex] === '_' && prevRow[colomnIndex + 1] === '|') + && (prevRow[colomnIndex + 2] === '/'))) { + flowSwapPos = colomnIndex; + + // swap two flow + tempFlow = { id: flows[flowSwapPos].id, color: flows[flowSwapPos].color }; + + flows[flowSwapPos].id = flows[flowSwapPos + 1].id; + flows[flowSwapPos].color = flows[flowSwapPos + 1].color; + + flows[flowSwapPos + 1].id = tempFlow.id; + flows[flowSwapPos + 1].color = tempFlow.color; + } + } + } + + if (condensePrevLength < condenseCurrentLength + && ((nodePos = findColomn('*', currentRow)) !== -1 + && (findColomn('_', currentRow) === -1))) { + flows.splice(nodePos - 1, 0, genNewFlow()); + } + + if (prevRowLength > currentRow.length + && (nodePos = findColomn('*', prevRow)) !== -1) { + if (findColomn('_', currentRow) === -1 + && findColomn('/', currentRow) === -1 + && findColomn('\\', currentRow) === -1) { + flows.splice(nodePos + 1, 1); + } + } + } // done with the previous row + + prevRowLength = currentRow.length; // store for next round + colomnIndex = 0; // reset index + condenseIndex = 0; + condensePrevLength = 0; + breakIndex = -1; // reset break index + while (colomnIndex < currentRow.length) { + colomn = currentRow[colomnIndex]; + + if (colomn !== ' ' && colomn !== '_') { + ++condensePrevLength; + } + + // check and fix line break in next row + if (colomn === '/' && currentRow[colomnIndex - 1] && currentRow[colomnIndex - 1] === '|') { + if ((breakIndex = findLineBreak(nextRow)) !== -1) { + nextRow.splice(breakIndex, 1); + } + } + // if line break found replace all '/' with '|' after breakIndex in previous row + if (breakIndex !== -1 && colomn === '/' && colomnIndex > breakIndex) { + currentRow[colomnIndex] = '|'; + colomn = '|'; + } + + if (colomn === ' ' + && currentRow[colomnIndex + 1] + && currentRow[colomnIndex + 1] === '_' + && currentRow[colomnIndex - 1] + && currentRow[colomnIndex - 1] === '|') { + currentRow.splice(colomnIndex, 1); + + currentRow[colomnIndex] = '/'; + colomn = '/'; + } + + // create new flow only when no intersect happened + if (flowSwapPos === -1 + && colomn === '/' + && currentRow[colomnIndex - 1] + && currentRow[colomnIndex - 1] === '|') { + flows.splice(condenseIndex, 0, genNewFlow()); + } + + // change \ and / to | when it's in the last position of the whole row + if (colomn === '/' || colomn === '\\') { + if (!(colomn === '/' && findBranchOut(nextRow) === -1)) { + if ((lastLinePos = Math.max(findColomn('|', currentRow), + findColomn('*', currentRow))) !== -1 + && (lastLinePos < colomnIndex - 1)) { + while (currentRow[++lastLinePos] === ' '); + + if (lastLinePos === colomnIndex) { + currentRow[colomnIndex] = '|'; + } + } + } + } + + if (colomn === '*' + && prevRow + && prevRow[condenseIndex + 1] === '\\') { + flows.splice(condenseIndex + 1, 1); + } + + if (colomn !== ' ') { + ++condenseIndex; + } + + ++colomnIndex; + } + + condenseCurrentLength = currentRow.filter((val) => { + return (val !== ' ' && val !== '_'); + }).length; + + // do some clean up + if (flows.length > condenseCurrentLength) { + flows.splice(condenseCurrentLength, flows.length - condenseCurrentLength); + } + + colomnIndex = 0; + + // a little inline analysis and draw process + while (colomnIndex < currentRow.length) { + colomn = currentRow[colomnIndex]; + prevColomn = currentRow[colomnIndex - 1]; + + if (currentRow[colomnIndex] === ' ') { + currentRow.splice(colomnIndex, 1); + x += config.unitSize; + + continue; + } + + // inline interset + if ((colomn === '_' || colomn === '/') + && currentRow[colomnIndex - 1] === '|' + && currentRow[colomnIndex - 2] === '_') { + inlineIntersect = true; + + tempFlow = flows.splice(colomnIndex - 2, 1)[0]; + flows.splice(colomnIndex - 1, 0, tempFlow); + currentRow.splice(colomnIndex - 2, 1); + + colomnIndex -= 1; + } else { + inlineIntersect = false; + } + + color = flows[colomnIndex].color; + + switch (colomn) { + case '_': + drawLineRight(x, y, color); + + x += config.unitSize; + break; + + case '*': + drawNode(x, y, color); + break; + + case '|': + drawLineUp(x, y, color); + break; + + case '/': + if (prevColomn + && (prevColomn === '/' + || prevColomn === ' ')) { + x -= config.unitSize; + } + + drawLineOut(x, y, color); + + x += config.unitSize; + break; + + case '\\': + drawLineIn(x, y, color); + break; + } + + ++colomnIndex; + } + + y -= config.unitSize; + } + }; + + init(); + draw(graphList); +} +// @end-license |