Skip to content

Commit

Permalink
update...
Browse files Browse the repository at this point in the history
  • Loading branch information
Jiawei committed Dec 6, 2024
1 parent 226f752 commit 7bcd8e8
Show file tree
Hide file tree
Showing 8 changed files with 355 additions and 194 deletions.
5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,13 @@
</svg>
</button>
</div>
<div class="test-div">
<svg id="test-svg" width="32" height="32"></svg>
</div>
</div>
<div class="svg-container">
<div class ="svg-sub-container active" id="container1">
<svg id="citta" width="1440" height="800"></svg>
<svg id="citta" width="1800" height="800"></svg>
<svg>
<a href="https://github.com/juncoflockleader/Abhidharma" target="_blank">
<image href="images/github-square.svg" x="0" y="0" width="32" height="32"></image>
Expand Down
14 changes: 6 additions & 8 deletions js/citta.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,10 @@ function renderCittaTable(parent) {
const cetasikaIdIndex = {};
let cetasikaTableBottom = 0;
function renderCetasikaTable(y) {
if (getLang() === 'en') {
renderCetasikaTableEn(y);
} else {
if (getLang().fixed) {
renderCetasikaTableCn(y);
} else {
renderCetasikaTableEn(y);
}
}

Expand Down Expand Up @@ -142,12 +142,11 @@ function renderAbbrev(x, y, columnWidth, rowHeight, abbreviations) {
for (const key in abbreviations) {
const color = r % 2 === 0 ? 'white' : 'lightgrey';
y += rowHeight;
let item = renderTextBox(cittaSvg, x, y, columnWidth, rowHeight, color, abbreviations[key], {
itemIndex[key] = renderTextBox(cittaSvg, x, y, columnWidth, rowHeight, color, abbreviations[key], {
size: '12px',
wrap: false,
align: 'middle'
});
itemIndex[key] = item;
renderTextBox(cittaSvg, x + columnWidth, y, columnWidth / 3, rowHeight, color, key, {size: '12px', wrap: false, align: 'middle'});
r++;
}
Expand Down Expand Up @@ -239,8 +238,7 @@ function renderCetasikaTableEn(y) {
}

function renderSubTableV2(x, y, def) {
const lang = getLang();
if (lang === 'cn') {
if (getLang().fixed) { // fixed width fonts
return renderSubTableV2CN(x, y, def);
} else {
return renderSubTableV2En(x, y, def);
Expand Down Expand Up @@ -488,7 +486,7 @@ function calculateConnections() {
addConnection(item.id, item_feeling, 'yellow', 'tomato', getIndex(feelings));

const item_name = item.name;
const words = item_name.replace(',', ' ').replace('-', ' ').split(' ');
const words = item_name.replace(/[,\\-]/g, ' ').split(' ');
words.forEach(word => {
if (itemIndex[word]) {
let idIndex = {};
Expand Down
107 changes: 80 additions & 27 deletions js/common.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,55 @@
const langCfg = {
'en': {
name: 'en',
fixed: false, // variable width fonts
px: 10,
vertical: false,
wrap: true,
wide: false,
index: 0
},
'cn': {
name: 'cn',
px: 14,
fixed: true, // fixed width fonts
vertical: true,
wrap: false,
wide: true,
index: 1
}
};

function getLangByIndex(index) {
for (let key in langCfg) {
if (langCfg[key].index === index) {
return langCfg[key];
}
}
return langCfg['cn'];
}

function getLang() {
if (localStorage) {
const lang = localStorage.getItem('lang');
if (lang === 'cn' || lang === 'en') {
return lang;
if (langCfg[lang]) {
return langCfg[lang];
}
localStorage.setItem('lang', 'cn');
}
return 'cn';
return langCfg['cn'];
}

function t(id) {
const lang = getLang();
if (!id || !tr[id]) {
return '';
}
return tr[id][lang] || tr[id]['cn'];
return tr[id][lang.name] || tr[id]['cn'];
}

const container = d3.select('.svg-container');

const svgWidth = 1440;
const svgWidth = 1800;
const svgHeight = 1000;
const cittaSvg = container.select('#citta');

Expand All @@ -36,7 +66,7 @@ const mmSvg = container.select('#container3').append('svg')
const rpSvg = container.select('#container4').append('svg')
.attr('class', 'svg-content')
.attr('width', svgWidth)
.attr('height', svgHeight);
.attr('height', 1200);

const rpgSvg = container.select('#container5').append('svg')
.attr('class', 'svg-content')
Expand All @@ -52,6 +82,9 @@ const rpnsSvg = container.select('#container6').append('svg')
.attr('width', svgWidth)
.attr('height', 1);

const testSvg = d3.select('#test-svg');
const testDiv = d3.select('#test-div');

// Tab switching logic
const tabs = d3.selectAll('.tabs button');
const svgs = d3.selectAll('.svg-sub-container');
Expand All @@ -77,15 +110,15 @@ const langs = d3.selectAll('.lang button');
function setLang(langIndex) {
langs.classed('active', (d, i) => i === langIndex);
if (localStorage) {
localStorage.setItem('lang', langIndex === 0 ? 'en' : 'cn');
localStorage.setItem('lang', getLangByIndex(langIndex).name);
}
}

langs.on('click', function () {
const langIndex = langs.nodes().indexOf(this);
const oldLang = getLang();
const oldLang = getLang().name;
setLang(langIndex);
const newLang = getLang();
const newLang = getLang().name;
if (oldLang !== newLang) {
window.location.reload();
}
Expand Down Expand Up @@ -135,7 +168,7 @@ function renderText(parent, x, y, w, h, text, params={}) {
} else if (params.wrap) {
textElement.selectAll('tspan').remove();
const lang = getLang();
if (lang === 'cn') {
if (lang.fixed) {
const len = Math.floor(w / px);
const n = len === 0 ? 1 : Math.max(Math.ceil(text.length / len), 1);
for (let j = 0; j < n; ++j) {
Expand All @@ -147,20 +180,28 @@ function renderText(parent, x, y, w, h, text, params={}) {
.text(part);
}
} else {
textElement.text(text);
const len = textElement.node().getComputedTextLength();
if (len > w) {
textElement.text('');
const testTE = testSvg.append('text')
.attr('x', 0)
.attr('y', 0)
.attr('text-anchor', params.align)
.attr('dominant-baseline', 'central')
.attr('font-size', params.size);
testTE.text(text);
const len = testTE.node().getComputedTextLength();
if (len <= w) {
textElement.text(text);
} else {
testTE.text('');
const words = text.split(' ');
let line = '';
let j = 0;
let k = 1;
for (let i = 0; i < words.length; i++) {
const maybeLine = line + (line === '' ? '' : ' ') + words[i];
const testTE = textElement.append('tspan')
const testTS = testTE.append('tspan')
.text(maybeLine);
const testLen = testTE.node().getComputedTextLength();
testTE.remove();
const testLen = testTS.node().getComputedTextLength();
testTS.remove();

if (testLen > w) {
let cur = line;
Expand All @@ -176,10 +217,10 @@ function renderText(parent, x, y, w, h, text, params={}) {
line = next;
k = 1;
j++;
const testTE = textElement.append('tspan')
const testTS = testTE.append('tspan')
.text(line);
const testLen = testTE.node().getComputedTextLength();
testTE.remove();
const testLen = testTS.node().getComputedTextLength();
testTS.remove();
if (testLen > w) {
cur = line.substring(0, Math.floor(line.length *0.7)) + '-';
next = '-' + line.substring(Math.floor(line.length * 0.7));
Expand All @@ -204,6 +245,7 @@ function renderText(parent, x, y, w, h, text, params={}) {
}
}
}
testTE.remove();
}
} else {
textElement.text(text);
Expand Down Expand Up @@ -245,15 +287,26 @@ function subArraySum(array, start, end) {
}

function getWordLength(text, px) {
let count = 0;
for (let char of text) {
if (/[\x00-\x7F]/.test(char)) {
count++;
} else {
count += 2;
const lang = getLang();
if (lang.fixed) {
let count = 0;
for (let char of text) {
if (/[\x00-\x7F]/.test(char)) {
count++;
} else {
count += 2;
}
}
return count * px / 2 + 3;
}
return count * px / 2 + 3;
const testTE = testSvg.append('text')
.attr('x', 0)
.attr('y', 0)
.attr('font-size', px)
.text(text);
const len = testTE.node().getComputedTextLength();
testTE.remove();
return len;
}

function renderVerticalTable(parent, x, y, w, h, title, items, padding, itemIndex) {
Expand Down
Loading

0 comments on commit 7bcd8e8

Please sign in to comment.