Update format, edit FamilyTree.gradientCircleForDefs + New color #F57C00 -> #ff6f6f
This commit is contained in:
unknown
parent
d6f11b540a
commit
50e717c227
@ -3451,23 +3451,32 @@ FamilyTree.isNEU = function(e) {
|
||||
return null == e || "" === e
|
||||
}
|
||||
,
|
||||
FamilyTree.gradientCircleForDefs = function(e, t, i, r) {
|
||||
function a(e, t, i, r) {
|
||||
var a = (r - 90) * Math.PI / 180;
|
||||
return {
|
||||
x: e + i * Math.cos(a),
|
||||
y: t + i * Math.sin(a)
|
||||
FamilyTree.gradientCircleForDefs = function (id, color, size, strokeWidth, borderRadius = 20, shape = "s") {
|
||||
if (Array.isArray(color)) color = color[0];
|
||||
if (shape === "c") {
|
||||
return `
|
||||
<g id="${id}">
|
||||
<circle cx="${size}" cy="${size}" r="${size - strokeWidth}"
|
||||
fill="${color}"
|
||||
stroke="${color}"
|
||||
stroke-width="${strokeWidth}">
|
||||
</circle>
|
||||
</g>
|
||||
`;
|
||||
} else if (shape === "s") {
|
||||
return `
|
||||
<g id="${id}">
|
||||
<rect x="2" y="2" width="${size*1.92}" height="${size*1.92}"
|
||||
fill="${color}"
|
||||
stroke="${color}"
|
||||
stroke-width="${strokeWidth}"
|
||||
rx="${borderRadius}"
|
||||
ry="${borderRadius}">
|
||||
</rect>
|
||||
</g>
|
||||
`;
|
||||
}
|
||||
}
|
||||
function n(e, t, i, r, n) {
|
||||
var o = a(e, t, i, n)
|
||||
, l = a(e, t, i, r)
|
||||
, s = n - r <= 180 ? "0" : "1";
|
||||
return ["M", o.x, o.y, "A", i, i, 0, s, 0, l.x, l.y].join(" ")
|
||||
}
|
||||
return Array.isArray(t) || (t = [t, t, t, t, t, t]),
|
||||
`<linearGradient id="${e}_linearColors1" x1="0" y1="0" x2="1" y2="1">\n <stop offset="0%" stop-color="${t[0]}"></stop>\n <stop offset="100%" stop-color="${t[1]}"></stop>\n </linearGradient>\n <linearGradient id="${e}_linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">\n <stop offset="0%" stop-color="${t[1]}"></stop>\n <stop offset="100%" stop-color="${t[2]}"></stop>\n </linearGradient>\n <linearGradient id="${e}_linearColors3" x1="1" y1="0" x2="0" y2="1">\n <stop offset="0%" stop-color="${t[2]}"></stop>\n <stop offset="100%" stop-color="${t[3]}"></stop>\n </linearGradient>\n <linearGradient id="${e}_linearColors4" x1="1" y1="1" x2="0" y2="0">\n <stop offset="0%" stop-color="${t[3]}"></stop>\n <stop offset="100%" stop-color="${t[4]}"></stop>\n </linearGradient>\n <linearGradient id="${e}_linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">\n <stop offset="0%" stop-color="${t[4]}"></stop>\n <stop offset="100%" stop-color="${t[5]}"></stop>\n </linearGradient>\n <linearGradient id="${e}_linearColors6" x1="0" y1="1" x2="1" y2="0">\n <stop offset="0%" stop-color="${t[5]}"></stop>\n <stop offset="100%" stop-color="${t[0]}"></stop>\n </linearGradient> \n <g id="${e}">\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors1)" d="${n(i, i, i, 1, 60)}" />\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors2)" d="${n(i, i, i, 60, 120)}"/>\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors3)" d="${n(i, i, i, 120, 180)}" />\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors4)" d="${n(i, i, i, 180, 240)}" />\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors5)" d="${n(i, i, i, 240, 300)}" />\n <path stroke-width="${r}" fill="none" stroke="url(#${e}_linearColors6)" d="${n(i, i, i, 300, 1)}"/>\n </g>`
|
||||
}
|
||||
,
|
||||
FamilyTree._intersectionObserver = function (e, t) {
|
||||
"function" == typeof IntersectionObserver ? new IntersectionObserver((function (e, i) {
|
||||
@ -7648,7 +7657,10 @@ FamilyTree.templates.dot.nodeTreeMenuCloseButton = "",
|
||||
FamilyTree.templates.dot.up = "",
|
||||
FamilyTree.templates.john = Object.assign({}, FamilyTree.templates.base),
|
||||
FamilyTree.templates.john.nodeMenuButton = `<use ${FamilyTree.attr.control_node_menu_id}="{id}" x="90" y="50" xlink:href="#base_node_menu"/>`,
|
||||
FamilyTree.templates.john.defs = `<style> \n .{randId} .bft-edit-form-header, .{randId} .bft-img-button{\n background-color: #aeaeae;\n }\n .{randId}.male .bft-edit-form-header, .{randId}.male .bft-img-button{\n background-color: #039BE5;\n } \n .{randId}.male div.bft-img-button:hover{\n background-color: #F57C00;\n }\n .{randId}.female .bft-edit-form-header, .{randId}.female .bft-img-button{\n background-color: #F57C00;\n } \n .{randId}.female div.bft-img-button:hover{\n background-color: #039BE5;\n }\n </style>\n <clipPath id="john_img_0"><rect x="6" y="6" rx="54" ry="54" width="108" height="108"></rect></clipPath>\n ${FamilyTree.gradientCircleForDefs("circle", "#aeaeae", 60, 5)}\n ${FamilyTree.gradientCircleForDefs("male_circle", "#039BE5", 60, 5)}\n ${FamilyTree.gradientCircleForDefs("female_circle", "#F57C00", 60, 5)}`,
|
||||
FamilyTree.templates.john.defs = `<style> \n .{randId} .bft-edit-form-header, .{randId} .bft-img-button{\n background-color: #aeaeae;\n }\n .{randId}.male .bft-edit-form-header, .{randId}.male .bft-img-button{\n background-color: #039BE5;\n } \n .{randId}.male div.bft-img-button:hover{\n background-color: #F57C00;\n }\n .{randId}.female .bft-edit-form-header, .{randId}.female .bft-img-button{\n background-color: #F57C00;\n } \n .{randId}.female div.bft-img-button:hover{\n background-color: #039BE5;\n }\n </style>\n <clipPath id="john_img_0"><rect x="6" y="6" rx="54" ry="54" width="108" height="108"></rect></clipPath>\n
|
||||
${FamilyTree.gradientCircleForDefs("circle", "#aeaeae", 60, 5)}\n
|
||||
${FamilyTree.gradientCircleForDefs("male_circle", "#039be5", 60, 5)}\n
|
||||
${FamilyTree.gradientCircleForDefs("female_circle", "#ff6f6f", 60, 5)}`,
|
||||
FamilyTree.templates.john.field_0 = "<text " + FamilyTree.attr.width + '="230" style="font-size: 16px;font-weight:bold;" fill="#aeaeae" x="60" y="135" text-anchor="middle">{val}</text>',
|
||||
FamilyTree.templates.john.field_1 = "<text " + FamilyTree.attr.width + '="150" style="font-size: 13px;" fill="#aeaeae" x="60" y="150" text-anchor="middle">{val}</text>',
|
||||
FamilyTree.templates.john.node = '<use x="0" y="0" xlink:href="#circle" />',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user