[dev]add comments and some symbolic constants for graphics code - no functional change
This commit is contained in:
parent
67ad17122c
commit
2cfceefacd
72
wires.js
72
wires.js
|
@ -26,6 +26,25 @@ var zoom=1;
|
||||||
var dragMouseX, dragMouseY, moved;
|
var dragMouseX, dragMouseY, moved;
|
||||||
var statbox;
|
var statbox;
|
||||||
|
|
||||||
|
// Some constants for the graphics presentation
|
||||||
|
// the canvas is embedded in an 800x600 clipping div
|
||||||
|
// which gives rise to some of the 300 and 400 values in the code
|
||||||
|
// there are also some 600 values
|
||||||
|
// the 6502D chip coords are in the box (216,179) to (8983,9807)
|
||||||
|
// we have 4 canvases all the same size, now 2000 pixels square
|
||||||
|
// chip background - the layout
|
||||||
|
// overlay - a red/white transparency to show logic high or low
|
||||||
|
// hilite - to show the selected polygon
|
||||||
|
// hitbuffer - abusing color values to return which polygon is under a point
|
||||||
|
// we no longer use a scaling transform - we now scale the chip data at
|
||||||
|
// the point of drawing line segments
|
||||||
|
// if the canvas is any smaller than chip coordinates there will be
|
||||||
|
// rounding artifacts, and at high zoom there will be anti-aliasing on edges.
|
||||||
|
var grMaxZoom=16;
|
||||||
|
var grChipSize=10000;
|
||||||
|
var grCanvasSize=2000;
|
||||||
|
var grLineWidth=1;
|
||||||
|
|
||||||
// Index of layerNames corresponds to index into drawLayers
|
// Index of layerNames corresponds to index into drawLayers
|
||||||
var layernames = ['metal', 'switched diffusion', 'inputdiode', 'grounded diffusion', 'powered diffusion', 'polysilicon'];
|
var layernames = ['metal', 'switched diffusion', 'inputdiode', 'grounded diffusion', 'powered diffusion', 'polysilicon'];
|
||||||
var colors = ['rgba(128,128,192,0.4)','#FFFF00','#FF00FF','#4DFF4D',
|
var colors = ['rgba(128,128,192,0.4)','#FFFF00','#FF00FF','#4DFF4D',
|
||||||
|
@ -184,14 +203,13 @@ function setupLayerVisibility(){
|
||||||
|
|
||||||
function setupBackground(){
|
function setupBackground(){
|
||||||
chipbg = document.getElementById('chipbg');
|
chipbg = document.getElementById('chipbg');
|
||||||
chipbg.width = 2000;
|
chipbg.width = grCanvasSize;
|
||||||
chipbg.height = 2000;
|
chipbg.height = grCanvasSize;
|
||||||
var ctx = chipbg.getContext('2d');
|
var ctx = chipbg.getContext('2d');
|
||||||
// ctx.scale(chipbg.width/10000, chipbg.height/10000);
|
|
||||||
ctx.fillStyle = '#000000';
|
ctx.fillStyle = '#000000';
|
||||||
ctx.strokeStyle = 'rgba(255,255,255,0.5)';
|
ctx.strokeStyle = 'rgba(255,255,255,0.5)';
|
||||||
ctx.lineWidth = 1;
|
ctx.lineWidth = grLineWidth;
|
||||||
ctx.fillRect(0,0,10000,10000);
|
ctx.fillRect(0,0,grCanvasSize,grCanvasSize);
|
||||||
for(var i in segdefs){
|
for(var i in segdefs){
|
||||||
var seg = segdefs[i];
|
var seg = segdefs[i];
|
||||||
var c = seg[2];
|
var c = seg[2];
|
||||||
|
@ -206,27 +224,24 @@ function setupBackground(){
|
||||||
|
|
||||||
function setupOverlay(){
|
function setupOverlay(){
|
||||||
overlay = document.getElementById('overlay');
|
overlay = document.getElementById('overlay');
|
||||||
overlay.width = 2000;
|
overlay.width = grCanvasSize;
|
||||||
overlay.height = 2000;
|
overlay.height = grCanvasSize;
|
||||||
ctx = overlay.getContext('2d');
|
ctx = overlay.getContext('2d');
|
||||||
// ctx.scale(overlay.width/10000, overlay.height/10000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupHilite(){
|
function setupHilite(){
|
||||||
hilite = document.getElementById('hilite');
|
hilite = document.getElementById('hilite');
|
||||||
hilite.width = 2000;
|
hilite.width = grCanvasSize;
|
||||||
hilite.height = 2000;
|
hilite.height = grCanvasSize;
|
||||||
var ctx = hilite.getContext('2d');
|
var ctx = hilite.getContext('2d');
|
||||||
// ctx.scale(hilite.width/10000, hilite.height/10000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupHitBuffer(){
|
function setupHitBuffer(){
|
||||||
hitbuffer = document.getElementById('hitbuffer');
|
hitbuffer = document.getElementById('hitbuffer');
|
||||||
hitbuffer.width = 2000;
|
hitbuffer.width = grCanvasSize;
|
||||||
hitbuffer.height = 2000;
|
hitbuffer.height = grCanvasSize;
|
||||||
hitbuffer.style.visibility = 'hidden';
|
hitbuffer.style.visibility = 'hidden';
|
||||||
var ctx = hitbuffer.getContext('2d');
|
var ctx = hitbuffer.getContext('2d');
|
||||||
// ctx.scale(hitbuffer.width/10000, hitbuffer.height/10000);
|
|
||||||
for(i in nodes) hitBufferNode(ctx, i, nodes[i].segs);
|
for(i in nodes) hitBufferNode(ctx, i, nodes[i].segs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -253,7 +268,7 @@ function hexdigit(n){return '0123456789ABCDEF'.charAt(n);}
|
||||||
function refresh(){
|
function refresh(){
|
||||||
if(!chipLayoutIsVisible)
|
if(!chipLayoutIsVisible)
|
||||||
return;
|
return;
|
||||||
ctx.clearRect(0,0,10000,10000);
|
ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
|
||||||
for(i in nodes){
|
for(i in nodes){
|
||||||
if(isNodeHigh(i)) overlayNode(nodes[i].segs);
|
if(isNodeHigh(i)) overlayNode(nodes[i].segs);
|
||||||
}
|
}
|
||||||
|
@ -269,7 +284,7 @@ function overlayNode(w){
|
||||||
|
|
||||||
function hiliteNode(n){
|
function hiliteNode(n){
|
||||||
var ctx = hilite.getContext('2d');
|
var ctx = hilite.getContext('2d');
|
||||||
ctx.clearRect(0,0,10000,10000);
|
ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
|
||||||
ctx.fillStyle = 'rgba(255,255,255,0.7)';
|
ctx.fillStyle = 'rgba(255,255,255,0.7)';
|
||||||
if(n==-1) return;
|
if(n==-1) return;
|
||||||
if(isNodeHigh(n[0]))
|
if(isNodeHigh(n[0]))
|
||||||
|
@ -284,15 +299,9 @@ function hiliteNode(n){
|
||||||
function drawSeg(ctx, seg){
|
function drawSeg(ctx, seg){
|
||||||
var dx = 400;
|
var dx = 400;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(scale(seg[0]+dx), scale(10000-seg[1]));
|
ctx.moveTo(grScale(seg[0]+dx), grScale(grChipSize-seg[1]));
|
||||||
for(var i=2;i<seg.length;i+=2) ctx.lineTo(scale(seg[i]+dx), scale(10000-seg[i+1]));
|
for(var i=2;i<seg.length;i+=2) ctx.lineTo(grScale(seg[i]+dx), grScale(grChipSize-seg[i+1]));
|
||||||
ctx.lineTo(scale(seg[0]+dx), scale(10000-seg[1]));
|
ctx.lineTo(grScale(seg[0]+dx), grScale(grChipSize-seg[1]));
|
||||||
}
|
|
||||||
|
|
||||||
// we draw the chip data scaled down to the canvas
|
|
||||||
// and so avoid scaling a large canvas
|
|
||||||
function scale(x){
|
|
||||||
return Math.round(x*2000/10000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/////////////////////////
|
/////////////////////////
|
||||||
|
@ -372,8 +381,8 @@ function handleClick(e){
|
||||||
var w = findNodeNumber(x,y);
|
var w = findNodeNumber(x,y);
|
||||||
if(e.shiftKey) hiliteNode(getNodeGroup(w));
|
if(e.shiftKey) hiliteNode(getNodeGroup(w));
|
||||||
else {var a=new Array(); a.push(w); hiliteNode(a);}
|
else {var a=new Array(); a.push(w); hiliteNode(a);}
|
||||||
var cx = Math.round(x*10000/600);
|
var cx = Math.round(x*grChipSize/600);
|
||||||
var cy = Math.round(y*10000/600);
|
var cy = Math.round(y*grChipSize/600);
|
||||||
if(w==-1) {
|
if(w==-1) {
|
||||||
setStatus('x: '+cx, 'y: '+cy);
|
setStatus('x: '+cx, 'y: '+cy);
|
||||||
} else {
|
} else {
|
||||||
|
@ -386,7 +395,7 @@ function handleClick(e){
|
||||||
|
|
||||||
function findNodeNumber(x,y){
|
function findNodeNumber(x,y){
|
||||||
var ctx = hitbuffer.getContext('2d');
|
var ctx = hitbuffer.getContext('2d');
|
||||||
var pixels = ctx.getImageData(x*2000/600, y*2000/600, 2, 2).data;
|
var pixels = ctx.getImageData(x*grCanvasSize/600, y*grCanvasSize/600, 2, 2).data;
|
||||||
if(pixels[0]==0) return -1;
|
if(pixels[0]==0) return -1;
|
||||||
var high = pixels[0]>>4;
|
var high = pixels[0]>>4;
|
||||||
var mid = pixels[1]>>4;
|
var mid = pixels[1]>>4;
|
||||||
|
@ -422,7 +431,7 @@ function updateExpertMode(isOn){
|
||||||
function clearHighlight(){
|
function clearHighlight(){
|
||||||
// remove red/white overlay according to logic value
|
// remove red/white overlay according to logic value
|
||||||
// for easier layout navigation
|
// for easier layout navigation
|
||||||
ctx.clearRect(0,0,10000,10000);
|
ctx.clearRect(0,0,grCanvasSize,grCanvasSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateShow(layer, on){
|
function updateShow(layer, on){
|
||||||
|
@ -498,6 +507,11 @@ function setChipStyle(props){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// we draw the chip data scaled down to the canvas
|
||||||
|
// and so avoid scaling a large canvas
|
||||||
|
function grScale(x){
|
||||||
|
return Math.round(x*grCanvasSize/grChipSize);
|
||||||
|
}
|
||||||
|
|
||||||
function localx(el, gx){
|
function localx(el, gx){
|
||||||
return gx-el.getBoundingClientRect().left;
|
return gx-el.getBoundingClientRect().left;
|
||||||
|
|
Loading…
Reference in New Issue