print layout renders and remembers changes
This commit is contained in:
Enoch Riese
parent
8dfc54e141
commit
2e2cbf70d2
6 changed files with 445 additions and 402 deletions
|
|
@ -1,13 +1,13 @@
|
|||
const name = 'Pages Plugin'
|
||||
const version = '1.0.0'
|
||||
export const sizes = {
|
||||
a4: [ 210, 297 ],
|
||||
a3: [ 297, 420 ],
|
||||
a2: [ 420, 594 ],
|
||||
a1: [ 594, 841 ],
|
||||
a0: [ 841, 1188 ],
|
||||
letter: [ 215.9, 279.4 ],
|
||||
tabloid: [ 279.4, 431.8 ],
|
||||
a4: [210, 297],
|
||||
a3: [297, 420],
|
||||
a2: [420, 594],
|
||||
a1: [594, 841],
|
||||
a0: [841, 1188],
|
||||
letter: [215.9, 279.4],
|
||||
tabloid: [279.4, 431.8],
|
||||
}
|
||||
|
||||
/** get a letter to represent an index less than 26*/
|
||||
|
|
@ -19,32 +19,35 @@ const indexStr = (i) => {
|
|||
let quotient = i / 26
|
||||
let result
|
||||
|
||||
if (i <= 26) {return indexLetter(i)} //Number is within single digit bounds of our encoding letter alphabet
|
||||
if (i <= 26) {
|
||||
return indexLetter(i)
|
||||
} //Number is within single digit bounds of our encoding letter alphabet
|
||||
|
||||
if (quotient >= 1) {
|
||||
//This number was bigger than the alphabet, recursively perform this function until we're done
|
||||
if (index === 0) {quotient--} //Accounts for the edge case of the last letter in the dictionary string
|
||||
result = indexStr(quotient)
|
||||
//This number was bigger than the alphabet, recursively perform this function until we're done
|
||||
if (index === 0) {
|
||||
quotient--
|
||||
} //Accounts for the edge case of the last letter in the dictionary string
|
||||
result = indexStr(quotient)
|
||||
}
|
||||
|
||||
if (index === 0) {index = 26} //Accounts for the edge case of the final letter; avoids getting an empty string
|
||||
if (index === 0) {
|
||||
index = 26
|
||||
} //Accounts for the edge case of the final letter; avoids getting an empty string
|
||||
|
||||
return result + indexLetter(index)
|
||||
}
|
||||
/**
|
||||
* A plugin to add printer pages
|
||||
* */
|
||||
export const pagesPlugin = ({
|
||||
size='a4',
|
||||
...settings
|
||||
}) => {
|
||||
export const pagesPlugin = ({ size = 'a4', ...settings }) => {
|
||||
const ls = settings.orientation === 'landscape'
|
||||
let sheetHeight = sizes[size][ls ? 0 : 1]
|
||||
let sheetWidth = sizes[size][ls ? 1 : 0]
|
||||
sheetWidth -= settings.margin * 2
|
||||
sheetHeight -= settings.margin * 2
|
||||
|
||||
return basePlugin({...settings, sheetWidth, sheetHeight})
|
||||
return basePlugin({ ...settings, sheetWidth, sheetHeight })
|
||||
}
|
||||
|
||||
const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
||||
|
|
@ -56,10 +59,10 @@ const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
|||
|
||||
// get the position of the part
|
||||
let partLayout = layout.parts[p]
|
||||
let partMinX = (partLayout.tl?.x || (partLayout.move.x + part.topLeft.x))
|
||||
let partMinY = (partLayout.tl?.y || (partLayout.move.y + part.topLeft.y))
|
||||
let partMaxX = (partLayout.br?.x || (partMinX + part.width))
|
||||
let partMaxY = (partLayout.br?.y || (partMinY + part.height))
|
||||
let partMinX = partLayout.tl?.x || partLayout.move.x + part.topLeft.x
|
||||
let partMinY = partLayout.tl?.y || partLayout.move.y + part.topLeft.y
|
||||
let partMaxX = partLayout.br?.x || partMinX + part.width
|
||||
let partMaxY = partLayout.br?.y || partMinY + part.height
|
||||
|
||||
// check if the part overlaps the page extents
|
||||
if (
|
||||
|
|
@ -71,16 +74,17 @@ const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
|||
partMaxX > x &&
|
||||
// and the bottom of the part is below the top to the page
|
||||
partMaxY > y
|
||||
) {
|
||||
) {
|
||||
// the part has content inside the page
|
||||
hasContent = true;
|
||||
hasContent = true
|
||||
// so we stop looking
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return hasContent
|
||||
}
|
||||
|
||||
/**
|
||||
* The base plugin for adding a layout helper part like pages or fabric
|
||||
* sheetWidth: the width of the helper part
|
||||
|
|
@ -92,217 +96,242 @@ const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
|||
const basePlugin = ({
|
||||
sheetWidth,
|
||||
sheetHeight,
|
||||
boundary=false,
|
||||
partName="pages",
|
||||
responsiveColumns=true,
|
||||
printStyle=false,
|
||||
scanForBlanks=true,
|
||||
renderBlanks=true,
|
||||
setPatternSize=false
|
||||
boundary = false,
|
||||
partName = 'pages',
|
||||
responsiveColumns = true,
|
||||
printStyle = false,
|
||||
scanForBlanks = true,
|
||||
renderBlanks = true,
|
||||
setPatternSize = false,
|
||||
}) => ({
|
||||
name,
|
||||
version,
|
||||
hooks: {
|
||||
postLayout: function(pattern) {
|
||||
// Add part
|
||||
pattern.parts[partName] = pattern.Part(partName)
|
||||
// Keep part out of layout
|
||||
pattern.parts[partName].layout = false
|
||||
preDraft: function (pattern) {
|
||||
// But add the part to the autoLayout property
|
||||
pattern.autoLayout.parts[partName] = {
|
||||
move: { x: 0, y: 0 }
|
||||
}
|
||||
// pattern.autoLayout.parts[partName] = {
|
||||
// move: { x: 0, y: 0 }
|
||||
// }
|
||||
|
||||
// TODO migrate this to v3 parts adding
|
||||
// Add pages
|
||||
const { macro } = pattern.parts[partName].shorthand()
|
||||
// const { macro } = pattern.config.parts[partName].shorthand()
|
||||
let { height, width } = pattern
|
||||
if (!responsiveColumns) width = sheetWidth;
|
||||
if (!responsiveColumns) width = sheetWidth
|
||||
if (pattern.settings.layout?.topLeft) {
|
||||
height += pattern.settings.layout.topLeft.y
|
||||
responsiveColumns && (width += pattern.settings.layout.topLeft.x)
|
||||
}
|
||||
|
||||
const layout = typeof pattern.settings.layout === 'object' ? pattern.settings.layout : pattern.autoLayout
|
||||
// Add part
|
||||
pattern.addPart({
|
||||
name: partName,
|
||||
layout: false,
|
||||
draft: (shorthand) => {
|
||||
pluginMacros.addPages(
|
||||
{ size: [sheetHeight, sheetWidth], height, width, layout },
|
||||
shorthand
|
||||
)
|
||||
return shorthand.part
|
||||
},
|
||||
})
|
||||
pattern.getConfig()
|
||||
console.log(pattern.config, pattern.designConfig)
|
||||
|
||||
macro('addPages', { size: [sheetHeight,sheetWidth, ], height, width, layout })
|
||||
const layout =
|
||||
typeof pattern.settings.layout === 'object' ? pattern.settings.layout : pattern.autoLayout
|
||||
|
||||
if (boundary) pattern.parts[partName].boundary();
|
||||
// macro('addPages', { size: [sheetHeight,sheetWidth, ], height, width, layout })
|
||||
|
||||
if (boundary) pattern.parts[partName].boundary()
|
||||
if (setPatternSize) {
|
||||
pattern.width = sheetWidth * pattern.parts[partName].pages.cols
|
||||
pattern.height = sheetHeight * pattern.parts[partName].pages.rows
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
macros: {
|
||||
/** draft the pages */
|
||||
addPages: function(so) {
|
||||
const [h,w] = so.size
|
||||
const cols = Math.ceil(so.width / w)
|
||||
const rows = Math.ceil(so.height / h)
|
||||
const { points, Point, paths, Path, macro } = this.shorthand()
|
||||
let count = 0
|
||||
let withContent = {}
|
||||
// get the layout from the pattern
|
||||
const {layout} = so;
|
||||
for (let row=0;row<rows;row++) {
|
||||
let y = row * h
|
||||
withContent[row] = {}
|
||||
for (let col=0;col<cols;col++) {
|
||||
let x = col * w
|
||||
let hasContent = true
|
||||
if (scanForBlanks && layout) {
|
||||
hasContent = doScanForBlanks(this.context.parts, layout, x, y, w, h)
|
||||
}
|
||||
withContent[row][col] = hasContent
|
||||
if (!renderBlanks && !hasContent) continue
|
||||
if (hasContent) count++
|
||||
const pageName = `_pages__row${row}-col${col}`
|
||||
points[`${pageName}-tl`] = new Point(x,y)
|
||||
points[`${pageName}-tr`] = new Point(x+w,y)
|
||||
points[`${pageName}-br`] = new Point(x+w,y+h)
|
||||
points[`${pageName}-bl`] = new Point(x,y+h)
|
||||
points[`${pageName}-circle`] = new Point(x+w/2,y+h/2)
|
||||
.attr('data-circle', 56)
|
||||
.attr('data-circle-class', 'stroke-4xl muted fabric')
|
||||
.attr('data-circle-id', `${pageName}-circle`)
|
||||
points[`${pageName}-text`] = new Point(x+w/2,y+h/2)
|
||||
.attr('data-text', `${indexStr(col + 1)}${row + 1}`)
|
||||
.attr('data-text-class', 'text-4xl center baseline-center bold muted fill-fabric')
|
||||
.attr('data-text-id', `${pageName}-text`)
|
||||
})
|
||||
|
||||
paths[pageName] = new Path()
|
||||
.attr('id', pageName)
|
||||
.move(points[`${pageName}-tl`])
|
||||
.line(points[`${pageName}-bl`])
|
||||
.line(points[`${pageName}-br`])
|
||||
.line(points[`${pageName}-tr`])
|
||||
.close()
|
||||
const pluginMacros = {
|
||||
/** draft the pages */
|
||||
addPages: function (so, shorthand) {
|
||||
const [h, w] = so.size
|
||||
const cols = Math.ceil(so.width / w)
|
||||
const rows = Math.ceil(so.height / h)
|
||||
const { points, Point, paths, Path, macro } = shorthand
|
||||
let count = 0
|
||||
let withContent = {}
|
||||
// get the layout from the pattern
|
||||
const { layout } = so
|
||||
for (let row = 0; row < rows; row++) {
|
||||
let y = row * h
|
||||
withContent[row] = {}
|
||||
for (let col = 0; col < cols; col++) {
|
||||
let x = col * w
|
||||
let hasContent = true
|
||||
if (scanForBlanks && layout) {
|
||||
hasContent = doScanForBlanks(this.context.parts, layout, x, y, w, h)
|
||||
}
|
||||
withContent[row][col] = hasContent
|
||||
if (!renderBlanks && !hasContent) continue
|
||||
if (hasContent) count++
|
||||
const pageName = `_pages__row${row}-col${col}`
|
||||
points[`${pageName}-tl`] = new Point(x, y)
|
||||
points[`${pageName}-tr`] = new Point(x + w, y)
|
||||
points[`${pageName}-br`] = new Point(x + w, y + h)
|
||||
points[`${pageName}-bl`] = new Point(x, y + h)
|
||||
points[`${pageName}-circle`] = new Point(x + w / 2, y + h / 2)
|
||||
.attr('data-circle', 56)
|
||||
.attr('data-circle-class', 'stroke-4xl muted fabric')
|
||||
.attr('data-circle-id', `${pageName}-circle`)
|
||||
points[`${pageName}-text`] = new Point(x + w / 2, y + h / 2)
|
||||
.attr('data-text', `${indexStr(col + 1)}${row + 1}`)
|
||||
.attr('data-text-class', 'text-4xl center baseline-center bold muted fill-fabric')
|
||||
.attr('data-text-id', `${pageName}-text`)
|
||||
|
||||
if (!printStyle) {
|
||||
paths[pageName].attr('class', 'fill-fabric')
|
||||
.attr('style', `stroke-opacity: 0; fill-opacity: ${(col+row)%2===0 ? 0.03 : 0.09};`)
|
||||
}
|
||||
else {
|
||||
paths[pageName].attr('class', 'interfacing stroke-xs')
|
||||
// add markers and rulers
|
||||
macro('addPageMarkers', {row, col, pageName, withContent})
|
||||
macro('addRuler', {xAxis: true, pageName})
|
||||
macro('addRuler', {xAxis: false, pageName})
|
||||
}
|
||||
paths[pageName] = new Path()
|
||||
.attr('id', pageName)
|
||||
.move(points[`${pageName}-tl`])
|
||||
.line(points[`${pageName}-bl`])
|
||||
.line(points[`${pageName}-br`])
|
||||
.line(points[`${pageName}-tr`])
|
||||
.close()
|
||||
|
||||
if (!printStyle) {
|
||||
paths[pageName]
|
||||
.attr('class', 'fill-fabric')
|
||||
.attr(
|
||||
'style',
|
||||
`stroke-opacity: 0; fill-opacity: ${(col + row) % 2 === 0 ? 0.03 : 0.09};`
|
||||
)
|
||||
} else {
|
||||
paths[pageName].attr('class', 'interfacing stroke-xs')
|
||||
// add markers and rulers
|
||||
pluginMacros.addPageMarkers({ row, col, pageName, withContent }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: true, pageName }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: false, pageName }, shorthand)
|
||||
}
|
||||
}
|
||||
// Store page count in part
|
||||
this.pages = { cols, rows, count, withContent, width: w, height: h}
|
||||
}
|
||||
// Store page count in part
|
||||
shorthand.part.pages = { cols, rows, count, withContent, width: w, height: h }
|
||||
},
|
||||
/** add a ruler to the top left corner of the page */
|
||||
addRuler({ xAxis, pageName }, shorthand) {
|
||||
const { points, paths, Path } = shorthand
|
||||
// arbitrary number of units for the ruler
|
||||
const rulerLength = 2
|
||||
const isMetric = this.context.settings.units === 'metric'
|
||||
// distance to the end of the ruler
|
||||
const endPointDist = [(isMetric ? 10 : 25.4) * rulerLength, 0]
|
||||
|
||||
},
|
||||
/** add a ruler to the top left corner of the page */
|
||||
addRuler({xAxis, pageName}) {
|
||||
const { points, paths, Path } = this.shorthand()
|
||||
// arbitrary number of units for the ruler
|
||||
const rulerLength = 2
|
||||
const isMetric = this.context.settings.units === 'metric'
|
||||
// distance to the end of the ruler
|
||||
const endPointDist = [(isMetric ? 10 : 25.4) * rulerLength, 0]
|
||||
const axisName = xAxis ? 'x' : 'y'
|
||||
const rulerName = `${pageName}-${axisName}`
|
||||
// start by making an endpoint for the ruler based on the axis
|
||||
const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
|
||||
points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(endPoint[0], endPoint[1])
|
||||
// also make a tick for the end of the ruler
|
||||
points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`]
|
||||
.translate(xAxis ? 0 : 3, xAxis ? 3 : 0)
|
||||
// add a label to it
|
||||
.attr('data-text', rulerLength + (isMetric ? 'cm' : '"'))
|
||||
// space the text properly from the end of the line
|
||||
.attr('data-text-class', 'fill-interfacing baseline-center' + (xAxis ? ' center' : ''))
|
||||
.attr(`data-text-d${xAxis ? 'y' : 'x'}`, xAxis ? 5 : 3)
|
||||
// give the text an explicit id in case we need to hide it later
|
||||
.attr('data-text-id', `${rulerName}-ruler-text`)
|
||||
|
||||
const axisName = xAxis ? 'x' : 'y'
|
||||
const rulerName = `${pageName}-${axisName}`
|
||||
// start by making an endpoint for the ruler based on the axis
|
||||
const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
|
||||
points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(endPoint[0], endPoint[1])
|
||||
// also make a tick for the end of the ruler
|
||||
points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`].translate(xAxis ? 0 : 3, xAxis ? 3 : 0)
|
||||
// add a label to it
|
||||
.attr('data-text', rulerLength + (isMetric ? 'cm' : '"'))
|
||||
// space the text properly from the end of the line
|
||||
.attr('data-text-class', 'fill-interfacing baseline-center' + (xAxis ? ' center' : ''))
|
||||
.attr(`data-text-d${xAxis ? 'y' : 'x'}`, xAxis ? 5 : 3)
|
||||
// give the text an explicit id in case we need to hide it later
|
||||
.attr('data-text-id', `${rulerName}-ruler-text`)
|
||||
// start the path
|
||||
paths[`${rulerName}-ruler`] = new Path()
|
||||
.move(points[`${pageName}-tl`])
|
||||
// give it an explicit id in case we need to hide it later
|
||||
.attr('id', `${rulerName}-ruler`)
|
||||
.attr('class', 'interfacing stroke-xs')
|
||||
|
||||
// start the path
|
||||
paths[`${rulerName}-ruler`] = new Path()
|
||||
.move(points[`${pageName}-tl`])
|
||||
// give it an explicit id in case we need to hide it later
|
||||
.attr('id', `${rulerName}-ruler`)
|
||||
.attr('class', 'interfacing stroke-xs')
|
||||
// get the distance between the smaller ticks on the rule
|
||||
const division = (isMetric ? 0.1 : 0.125) / rulerLength
|
||||
// we're going to go by fraction, so we want to do this up to 1
|
||||
for (var d = division; d < 1; d += division) {
|
||||
// make a start point
|
||||
points[`${rulerName}-ruler-${d}-end`] = points[`${pageName}-tl`].shiftFractionTowards(
|
||||
points[`${rulerName}-ruler-end`],
|
||||
d
|
||||
)
|
||||
|
||||
// get the distance between the smaller ticks on the rule
|
||||
const division = (isMetric ? 0.1 : 0.125) / rulerLength
|
||||
// we're going to go by fraction, so we want to do this up to 1
|
||||
for (var d = division; d < 1; d+= division) {
|
||||
// make a start point
|
||||
points[`${rulerName}-ruler-${d}-end`] = points[`${pageName}-tl`].shiftFractionTowards(points[`${rulerName}-ruler-end`], d)
|
||||
// base tick size on whether this is a major interval or a minor one
|
||||
let tick = 1
|
||||
// if this tick indicates a whole unit, extra long
|
||||
if (d.toFixed(3) % (1 / rulerLength) === 0) tick = 3
|
||||
// if this tick indicates half a unit, long
|
||||
else if (d.toFixed(3) % (0.5 / rulerLength) === 0) tick = 2
|
||||
|
||||
// base tick size on whether this is a major interval or a minor one
|
||||
let tick = 1;
|
||||
// if this tick indicates a whole unit, extra long
|
||||
if (d.toFixed(3) % (1/rulerLength) === 0) tick = 3
|
||||
// if this tick indicates half a unit, long
|
||||
else if (d.toFixed(3) % (0.5/rulerLength) === 0) tick = 2
|
||||
// make a point for the end of the tick
|
||||
points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(
|
||||
xAxis ? 0 : tick,
|
||||
xAxis ? tick : 0
|
||||
)
|
||||
|
||||
// make a point for the end of the tick
|
||||
points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(xAxis ? 0 : tick, xAxis ? tick : 0)
|
||||
|
||||
// add the whole set to the ruler path
|
||||
paths[`${rulerName}-ruler`]
|
||||
.line(points[`${rulerName}-ruler-${d}-end`])
|
||||
.line(points[`${rulerName}-ruler-${d}-tick`])
|
||||
.line(points[`${rulerName}-ruler-${d}-end`])
|
||||
}
|
||||
|
||||
// add the end
|
||||
// add the whole set to the ruler path
|
||||
paths[`${rulerName}-ruler`]
|
||||
.line(points[`${rulerName}-ruler-${d}-end`])
|
||||
.line(points[`${rulerName}-ruler-${d}-tick`])
|
||||
.line(points[`${rulerName}-ruler-${d}-end`])
|
||||
}
|
||||
|
||||
// add the end
|
||||
paths[`${rulerName}-ruler`]
|
||||
.line(points[`${rulerName}-ruler-end`])
|
||||
.line(points[`${rulerName}-ruler-tick`])
|
||||
},
|
||||
/** add page markers to the given page */
|
||||
addPageMarkers({row, col, pageName, withContent}) {
|
||||
const {macro, points} = this.shorthand()
|
||||
// these markers are placed on the top and left of the page,
|
||||
// so skip markers for the top row or leftmost column
|
||||
if (row !== 0 && withContent[row-1][col]) macro('addPageMarker', {
|
||||
},
|
||||
/** add page markers to the given page */
|
||||
addPageMarkers({ row, col, pageName, withContent }, shorthand) {
|
||||
const { macro, points } = shorthand
|
||||
// these markers are placed on the top and left of the page,
|
||||
// so skip markers for the top row or leftmost column
|
||||
if (row !== 0 && withContent[row - 1][col])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-tr`]],
|
||||
label: '' + row,
|
||||
isRow: true,
|
||||
pageName
|
||||
pageName,
|
||||
})
|
||||
if (col !== 0 && withContent[row][col-1]) macro('addPageMarker', {
|
||||
if (col !== 0 && withContent[row][col - 1])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
|
||||
label: indexStr(col),
|
||||
isRow: false,
|
||||
pageName
|
||||
pageName,
|
||||
})
|
||||
},
|
||||
/** add a page marker for either the row of the column */
|
||||
addPageMarker({along, label, isRow, pageName}) {
|
||||
const {points, paths, Path} = this.shorthand()
|
||||
const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`
|
||||
},
|
||||
/** add a page marker for either the row of the column */
|
||||
addPageMarker({ along, label, isRow, pageName }) {
|
||||
const { points, paths, Path } = this.shorthand()
|
||||
const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`
|
||||
|
||||
// get a point on the center of the appropriate side
|
||||
points[`${markerName}-center`] = along[0].shiftFractionTowards(along[1], 0.5)
|
||||
// add the label to it
|
||||
.attr('data-text', label)
|
||||
.attr('data-text-class', 'text-sm center baseline-center bold')
|
||||
// give it an explicit ID in case we need to hide it later
|
||||
.attr('data-text-id', markerName + '-text')
|
||||
// get a point on the center of the appropriate side
|
||||
points[`${markerName}-center`] = along[0]
|
||||
.shiftFractionTowards(along[1], 0.5)
|
||||
// add the label to it
|
||||
.attr('data-text', label)
|
||||
.attr('data-text-class', 'text-sm center baseline-center bold')
|
||||
// give it an explicit ID in case we need to hide it later
|
||||
.attr('data-text-id', markerName + '-text')
|
||||
|
||||
// get points to make a diamond around the center point
|
||||
points[`${markerName}-r`] = points[`${markerName}-center`].translate(-5, 0)
|
||||
points[`${markerName}-l`] = points[`${markerName}-center`].translate(5, 0)
|
||||
points[`${markerName}-t`] = points[`${markerName}-center`].translate(0, -5)
|
||||
points[`${markerName}-b`] = points[`${markerName}-center`].translate(0, 5)
|
||||
// get points to make a diamond around the center point
|
||||
points[`${markerName}-r`] = points[`${markerName}-center`].translate(-5, 0)
|
||||
points[`${markerName}-l`] = points[`${markerName}-center`].translate(5, 0)
|
||||
points[`${markerName}-t`] = points[`${markerName}-center`].translate(0, -5)
|
||||
points[`${markerName}-b`] = points[`${markerName}-center`].translate(0, 5)
|
||||
|
||||
// make a path for the diamond
|
||||
paths[markerName] = new Path()
|
||||
.move(points[`${markerName}-r`])
|
||||
.line(points[`${markerName}-t`])
|
||||
.line(points[`${markerName}-l`])
|
||||
.line(points[`${markerName}-b`])
|
||||
.close()
|
||||
.attr('class', 'fill-interfacing interfacing')
|
||||
// give it an explicit ID in case we need to hide it later
|
||||
.attr('id', markerName)
|
||||
}
|
||||
}
|
||||
})
|
||||
// make a path for the diamond
|
||||
paths[markerName] = new Path()
|
||||
.move(points[`${markerName}-r`])
|
||||
.line(points[`${markerName}-t`])
|
||||
.line(points[`${markerName}-l`])
|
||||
.line(points[`${markerName}-b`])
|
||||
.close()
|
||||
.attr('class', 'fill-interfacing interfacing')
|
||||
// give it an explicit ID in case we need to hide it later
|
||||
.attr('id', markerName)
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue