kirigaya/digital-netlist-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

取消部分组件的颜色参数化

Browse Source
This commit is contained in:
锦恢 2024-12-29 23:08:20 +08:00
parent 099309ade9
commit b0598c3502
15 changed files with 131 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/netlist.css
View File

@ -16,6 +16,7 @@
--instance-color: #CB81DA;
--instance-fill-color: rgba(203, 129, 218, 0.1);
--wire-color: var(--foreground);
--cross-dot-color: var(--foreground);
--port-color: rgb(70, 70, 222);
--port-fill-color: rgba(70, 70, 222, 0.1);

6
src/components/setting/color.js
View File

@ -25,6 +25,12 @@ export const colorManager = reactive({
type: 'instance',
label: t('common.instance'),
color: 'white',
},
{
value: 3,
type: 'cross-dot',
label: t('cross-dot'),
color: 'white'
}
],

101
src/hook/render/cross-dot.js Normal file
View File

@ -0,0 +1,101 @@
import * as d3 from 'd3';
import { globalSetting } from '../global';
import { NetlistRender } from '.';
export class CrossDotRender {
/**
* @param {d3.Selection} selection
* @param {NetlistRender} rootRender
*/
constructor(selection, rootRender) {
this.parentSelection = selection;
this.rootRender = rootRender;
/**
* @type {BasicD3DataItem[]}
*/
this.data = [];
/**
* @description id 到管理数据项的映射
* @type {Map<string, BasicD3ManagmentItem[]>}
*/
this.id2manager = rootRender.id2manager;
this.crossId = 0;
}
/**
* @description 将 elknode 关于 module connection 的数据添加为 d3 数据项目
* @param {ElkPort} cellPort 连接点对象
* @param {ElkNode} node 当前的实体（port/例化模块/器件）
*/
addAsD3DataItem(cellPort, node) {
this.data.push({
id: this.crossId,
x: cellPort.x + node.x,
y: cellPort.y + node.y + 0.5, // 0.5 是为了线宽
width: cellPort.width,
height: cellPort.height,
text: '',
r: 3.5
});
this.crossId ++;
}
render() {
const data = this.data;
const id2manager = this.id2manager;
const _this = this;
let connectionSelections = this.parentSelection.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', data => data.x)
.attr('cy', data => data.y)
.attr('width', data => data.width)
.attr('height', data => data.height)
if (globalSetting.renderAnimation) {
connectionSelections = connectionSelections
.transition()
.duration(1000);
}
connectionSelections
.attr('fill', 'var(--cross-dot-color)')
.attr('r', d => d.r)
.each(function (data) {
const selection = d3.select(this);
const manager = _this.createDataManager(selection, data);
});
this.selections = connectionSelections;
return connectionSelections;
}
/**
*
* @param {d3.Selection} selection
* @param {BasicD3DataItem} data
* @returns {BasicD3ManagmentItem}
*/
createDataManager(selection, data) {
const id2manager = this.id2manager;
// connection 不需要拖拽上下文
const managerItem = {
data,
selection,
type: 'connection'
};
if (!id2manager.has(data.id)) {
id2manager.set(data.id, []);
}
id2manager.get(data.id).push(managerItem);
return managerItem;
}
}

5
src/hook/render/instantiation.js
View File

@ -57,7 +57,6 @@ export class InstantiationRender {
name: node.name,
width: node.width,
height: node.height,
fill: 'var(--instance-fill-color)',
text: node.renderName,
portnames,
rx: 3,
@ -202,7 +201,7 @@ export class InstantiationRender {
.duration(1000)
.attr('fill', d => {
const children = d._self.children || [];
return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : d.fill;
return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
})
.attr('stroke', 'var(--instance-color)')
.attr('stroke-width', 2);
@ -211,7 +210,7 @@ export class InstantiationRender {
instances
.attr('fill', d => {
const children = d._self.children || [];
return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : d.fill;
return children.length > 0 ? 'rgba(203, 129, 218, 0.1)' : 'var(--instance-fill-color)';
})
.attr('stroke', 'var(--instance-color)')
.attr('stroke-width', 2)

3
src/hook/render/port.js
View File

@ -36,7 +36,6 @@ export class PortRender {
y: node.y,
width: node.width,
height: node.height,
fill: 'var(--port-fill-color)',
text: node.renderName,
rx: 3,
ry: 3
@ -59,7 +58,7 @@ export class PortRender {
let ports = portSelections.append('rect')
.attr('width', data => data.width)
.attr('height', data => data.height)
.attr('fill', d => d.fill);
.attr('fill', 'var(--port-fill-color)');
let texts = portSelections.append('text')
.attr('x', data => data.width / 2) // 文本的 x 坐标（居中）

5
src/hook/render/wire.js
View File

@ -37,8 +37,7 @@ export class WireRender {
y1: points[i].y,
x2: points[i + 1].x,
y2: points[i + 1].y,
strokeWidth: 2,
color: 'var(--wire-color)'
strokeWidth: 2
});
}
}
@ -56,7 +55,7 @@ export class WireRender {
.attr('y1', data => data.y1)
.attr('x2', data => data.x2)
.attr('y2', data => data.y2)
.attr('stroke', data => data.color);
.attr('stroke', 'var(--wire-color)');
if (globalSetting.renderAnimation) {
lineSelections = lineSelections

3
src/i18n/ar.json
View File

@ -23,5 +23,6 @@
"common.line": "خط",
"common.port": "المنفذ",
"common.instance": "تجهيز الوحدة",
"setting.general-color-setting": "إعدادات الألوان العامة"
"setting.general-color-setting": "إعدادات الألوان العامة",
"cross-dot": "تقاطع"
}

3
src/i18n/de.json
View File

@ -23,5 +23,6 @@
"common.line": "Linie",
"common.port": "Port",
"common.instance": "Modul instanziieren",
"setting.general-color-setting": "Allgemeine Farbeinstellungen"
"setting.general-color-setting": "Allgemeine Farbeinstellungen",
"cross-dot": "Kreuzung"
}

3
src/i18n/en.json
View File

@ -23,5 +23,6 @@
"common.line": "line",
"common.port": "Port",
"common.instance": "Instantiate module",
"setting.general-color-setting": "General Color Settings"
"setting.general-color-setting": "General Color Settings",
"cross-dot": "Intersection"
}

3
src/i18n/fr.json
View File

@ -23,5 +23,6 @@
"common.line": "ligne",
"common.port": "Port",
"common.instance": "Instancier le module",
"setting.general-color-setting": "Paramètres de couleur généraux"
"setting.general-color-setting": "Paramètres de couleur généraux",
"cross-dot": "Intersection"
}

3
src/i18n/ja.json
View File

@ -23,5 +23,6 @@
"common.line": "線",
"common.port": "ポート",
"common.instance": "モジュールのインスタンス化",
"setting.general-color-setting": "一般的な色設定"
"setting.general-color-setting": "一般的な色設定",
"cross-dot": "交差点"
}

3
src/i18n/ko.json
View File

@ -23,5 +23,6 @@
"common.line": "선",
"common.port": "포트",
"common.instance": "모듈 인스턴스화",
"setting.general-color-setting": "일반 색상 설정"
"setting.general-color-setting": "일반 색상 설정",
"cross-dot": "교차로"
}

3
src/i18n/ru.json
View File

@ -23,5 +23,6 @@
"common.line": "линия",
"common.port": "Порт",
"common.instance": "Создание экземпляра модуля",
"setting.general-color-setting": "Общие настройки цвета"
"setting.general-color-setting": "Общие настройки цвета",
"cross-dot": "Перекресток"
}

3
src/i18n/zh-cn.json
View File

@ -23,5 +23,6 @@
"common.line": "线",
"common.port": "端口",
"common.instance": "例化模块",
"setting.general-color-setting": "通用颜色设置"
"setting.general-color-setting": "通用颜色设置",
"cross-dot": "交叉点"
}

3
src/i18n/zh-tw.json
View File

@ -23,5 +23,6 @@
"common.line": "線",
"common.port": "端口",
"common.instance": "實例化模組",
"setting.general-color-setting": "通用顏色設定"
"setting.general-color-setting": "通用顏色設定",
"cross-dot": "交叉點"
}