Skip to content

A
algorithm-visualizer

tianyazhichiC / algorithm-visualizer
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
A
algorithm-visualizer
提交 fbeffec2 编写于 作者: J Jason Park
浏览文件
操作

es6-style tracers

上级 59909947
展开全部 隐藏空白更改
内联 并排
Showing with 2095 addition and 1854 deletion
js/app/constructor.js
浏览文件 @ fbeffec2
......@@ -9,10 +9,6 @@ const {
hideLoadingSlider
} = require('../dom/loading_slider');
const {
getFileDir
} = require('../utils');
const Cache = require('./cache');
const state = {
......
js/module/data/array2d.js
浏览文件 @ fbeffec2
......@@ -13,8 +13,8 @@ const random = (N, M, min, max) => {
return D;
};
const randomSorted = (N, M, min, max)=> {
return this.random(N, M, min, max).map(function (arr) {
const randomSorted = (N, M, min, max) => {
return random(N, M, min, max).map(function (arr) {
return arr.sort(function (a, b) {
return a - b;
});
......
js/module/tracer/array1d.js
浏览文件 @ fbeffec2
const Array2DTracer = require('./array2d');
function Array1DTracer() {
return Array2DTracer.apply(this, arguments);
}
class Array1DTracer extends Array2DTracer {
static getClassName() {
return 'Array1DTracer';
}
constructor(name) {
super(name);
}
Array1DTracer.prototype = $.extend(true, Object.create(Array2DTracer.prototype), {
constructor: Array1DTracer,
name: "Array1DTracer",
_notify: function (idx, v) {
Array2DTracer.prototype._notify.call(this, 0, idx, v);
_notify(idx, v) {
super._notify(0, idx, v);
return this;
},
_denotify: function (idx) {
Array2DTracer.prototype._denotify.call(this, 0, idx);
}
_denotify(idx) {
super._denotify(0, idx);
return this;
},
_select: function (s, e) {
}
_select(s, e) {
if (e === undefined) {
Array2DTracer.prototype._select.call(this, 0, s);
super._select(0, s);
} else {
Array2DTracer.prototype._selectRow.call(this, 0, s, e);
super._selectRow(0, s, e);
}
return this;
},
_deselect: function (s, e) {
}
_deselect(s, e) {
if (e === undefined) {
Array2DTracer.prototype._deselect.call(this, 0, s);
super._deselect(0, s);
} else {
Array2DTracer.prototype._deselectRow.call(this, 0, s, e);
super._deselectRow(0, s, e);
}
return this;
},
setData: function (D) {
return Array2DTracer.prototype.setData.call(this, [D]);
}
});
setData(D) {
return super.setData([D]);
}
}
module.exports = Array1DTracer;
\ No newline at end of file
js/module/tracer/array2d.js
浏览文件 @ fbeffec2
......@@ -4,22 +4,23 @@ const {
refineByType
} = require('../../tracer_manager/util/index');
function Array2DTracer() {
if (Tracer.apply(this, arguments)) {
Array2DTracer.prototype.init.call(this);
return true;
class Array2DTracer extends Tracer {
static getClassName() {
return 'Array2DTracer';
}
return false;
}
Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
constructor: Array2DTracer,
name: 'Array2DTracer',
init: function () {
this.$table = this.capsule.$table = $('<div class="mtbl-table">');
this.$container.append(this.$table);
},
_notify: function (x, y, v) {
constructor(name) {
super(name);
this.colorClass = {
selected: 'selected',
notified: 'notified'
};
if (this.isNew) initView(this);
}
_notify(x, y, v) {
this.manager.pushStep(this.capsule, {
type: 'notify',
x: x,
......@@ -27,72 +28,86 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
v: v
});
return this;
},
_denotify: function (x, y) {
}
_denotify(x, y) {
this.manager.pushStep(this.capsule, {
type: 'denotify',
x: x,
y: y
});
return this;
},
_select: function (sx, sy, ex, ey) {
}
_select(sx, sy, ex, ey) {
this.pushSelectingStep('select', null, arguments);
return this;
},
_selectRow: function (x, sy, ey) {
}
_selectRow(x, sy, ey) {
this.pushSelectingStep('select', 'row', arguments);
return this;
},
_selectCol: function (y, sx, ex) {
}
_selectCol(y, sx, ex) {
this.pushSelectingStep('select', 'col', arguments);
return this;
},
_deselect: function (sx, sy, ex, ey) {
}
_deselect(sx, sy, ex, ey) {
this.pushSelectingStep('deselect', null, arguments);
return this;
},
_deselectRow: function (x, sy, ey) {
}
_deselectRow(x, sy, ey) {
this.pushSelectingStep('deselect', 'row', arguments);
return this;
},
_deselectCol: function (y, sx, ex) {
}
_deselectCol(y, sx, ex) {
this.pushSelectingStep('deselect', 'col', arguments);
return this;
},
_separate: function (x, y) {
}
_separate(x, y) {
this.manager.pushStep(this.capsule, {
type: 'separate',
x: x,
y: y
});
return this;
},
_separateRow: function (x) {
}
_separateRow(x) {
this._separate(x, -1);
return this;
},
_separateCol: function (y) {
}
_separateCol(y) {
this._separate(-1, y);
return this;
},
_deseparate: function (x, y) {
}
_deseparate(x, y) {
this.manager.pushStep(this.capsule, {
type: 'deseparate',
x: x,
y: y
});
return this;
},
_deseparateRow: function (x) {
}
_deseparateRow(x) {
this._deseparate(x, -1);
return this;
},
_deseparateCol: function (y) {
}
_deseparateCol(y) {
this._deseparate(-1, y);
return this;
},
pushSelectingStep: function () {
}
pushSelectingStep() {
var args = Array.prototype.slice.call(arguments);
var type = args.shift();
var mode = args.shift();
......@@ -133,8 +148,9 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
};
$.extend(step, coord);
this.manager.pushStep(this.capsule, step);
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'notify':
if (step.v !== undefined) {
......@@ -165,16 +181,17 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
this.deseparate(step.x, step.y);
break;
default:
Tracer.prototype.processStep.call(this, step, options);
super.processStep(step, options);
}
},
setData: function (D) {
}
setData(D) {
this.viewX = this.viewY = 0;
this.paddingH = 6;
this.paddingV = 3;
this.fontSize = 16;
if (Tracer.prototype.setData.apply(this, arguments)) {
if (super.setData.apply(this, arguments)) {
this.$table.find('.mtbl-row').each(function (i) {
$(this).find('.mtbl-col').each(function (j) {
$(this).text(refineByType(D[i][j]));
......@@ -197,42 +214,48 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
this.resize();
return false;
},
resize: function () {
Tracer.prototype.resize.call(this);
}
resize() {
super.resize();
this.refresh();
},
clear: function () {
Tracer.prototype.clear.call(this);
}
clear() {
super.clear();
this.clearColor();
this.deseparateAll();
},
getCellCss: function () {
}
getCellCss() {
return {
padding: this.paddingV.toFixed(1) + 'px ' + this.paddingH.toFixed(1) + 'px',
'font-size': this.fontSize.toFixed(1) + 'px'
};
},
refresh: function () {
Tracer.prototype.refresh.call(this);
}
refresh() {
super.refresh();
var $parent = this.$table.parent();
var top = $parent.height() / 2 - this.$table.height() / 2 + this.viewY;
var left = $parent.width() / 2 - this.$table.width() / 2 + this.viewX;
this.$table.css('margin-top', top);
this.$table.css('margin-left', left);
},
mousedown: function (e) {
Tracer.prototype.mousedown.call(this, e);
}
mousedown(e) {
super.mousedown(e);
this.dragX = e.pageX;
this.dragY = e.pageY;
this.dragging = true;
},
mousemove: function (e) {
Tracer.prototype.mousemove.call(this, e);
}
mousemove(e) {
super.mousemove(e);
if (this.dragging) {
this.viewX += e.pageX - this.dragX;
......@@ -241,14 +264,16 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
this.dragY = e.pageY;
this.refresh();
}
},
mouseup: function (e) {
Tracer.prototype.mouseup.call(this, e);
}
mouseup(e) {
super.mouseup(e);
this.dragging = false;
},
mousewheel: function (e) {
Tracer.prototype.mousewheel.call(this, e);
}
mousewheel(e) {
super.mousewheel(e);
e.preventDefault();
e = e.originalEvent;
......@@ -263,8 +288,9 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
this.fontSize *= ratio;
this.$table.find('.mtbl-col').css(this.getCellCss());
this.refresh();
},
paintColor: function (sx, sy, ex, ey, colorClass, addClass) {
}
paintColor(sx, sy, ex, ey, colorClass, addClass) {
for (var i = sx; i <= ex; i++) {
var $row = this.$table.find('.mtbl-row').eq(i);
for (var j = sy; j <= ey; j++) {
......@@ -273,15 +299,13 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
else $col.removeClass(colorClass);
}
}
},
clearColor: function () {
}
clearColor() {
this.$table.find('.mtbl-col').removeClass(Object.keys(this.colorClass).join(' '));
},
colorClass: {
selected: 'selected',
notified: 'notified'
},
separate: function (x, y) {
}
separate(x, y) {
this.$table.find('.mtbl-row').each(function (i) {
var $row = $(this);
if (i == x) {
......@@ -294,14 +318,21 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
}
});
});
},
deseparate: function (x, y) {
}
deseparate(x, y) {
this.$table.find('[data-row=' + x + ']').remove();
this.$table.find('[data-col=' + y + ']').remove();
},
deseparateAll: function () {
}
deseparateAll() {
this.$table.find('.mtbl-empty-row, .mtbl-empty-col').remove();
}
});
}
const initView = (tracer) => {
tracer.$table = tracer.capsule.$table = $('<div class="mtbl-table">');
tracer.$container.append(tracer.$table);
};
module.exports = Array2DTracer;
\ No newline at end of file
js/module/tracer/chart.js
浏览文件 @ fbeffec2
const Tracer = require('./tracer');
function ChartTracer() {
if (Tracer.apply(this, arguments)) {
ChartTracer.prototype.init.call(this, arguments);
return true;
class ChartTracer extends Tracer {
static getClassName() {
return 'ChartTracer';
}
constructor(name) {
super(name);
if (this.isNew) initView(this);
}
return false;
}
ChartTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
constructor: ChartTracer,
name: 'ChartTracer',
init: function () {
this.$wrapper = this.capsule.$wrapper = $('<canvas id="chart">');
this.$container.append(this.$wrapper);
},
setData: function (C) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
var tracer = this;
setData(C) {
if (super.setData.apply(this, arguments)) return true;
var color = [];
for (var i = 0; i < C.length; i++) color.push('rgba(136, 136, 136, 1)');
var data = {
......@@ -40,39 +35,44 @@ ChartTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
}
};
this.chart = this.capsule.chart = new Chart(this.$wrapper, data);
},
_notify: function (s, v) {
}
_notify(s, v) {
this.manager.pushStep(this.capsule, {
type: 'notify',
s: s,
v: v
});
return this;
},
_denotify: function (s) {
}
_denotify(s) {
this.manager.pushStep(this.capsule, {
type: 'denotify',
s: s
});
return this;
},
_select: function (s, e) {
}
_select(s, e) {
this.manager.pushStep(this.capsule, {
type: 'select',
s: s,
e: e
});
return this;
},
_deselect: function (s, e) {
}
_deselect(s, e) {
this.manager.pushStep(this.capsule, {
type: 'deselect',
s: s,
e: e
});
return this;
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'notify':
if (step.v !== undefined) {
......@@ -92,9 +92,14 @@ ChartTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
this.chart.update();
break;
default:
Tracer.prototype.processStep.call(this, step, options);
super.processStep(step, options);
}
}
});
}
const initView = (tracer) => {
tracer.$wrapper = tracer.capsule.$wrapper = $('<canvas id="chart">');
tracer.$container.append(tracer.$wrapper);
};
module.exports = ChartTracer;
\ No newline at end of file
js/module/tracer/coordinate_system.js
浏览文件 @ fbeffec2
const DirectedGraphTracer = require('./directed_graph');
function CoordinateSystemTracer() {
if (DirectedGraphTracer.apply(this, arguments)) {
CoordinateSystemTracer.prototype.init.call(this);
return true;
class CoordinateSystemTracer extends DirectedGraphTracer {
static getClassName() {
return 'CoordinateSystemTracer';
}
return false;
}
CoordinateSystemTracer.prototype = $.extend(true, Object.create(DirectedGraphTracer.prototype), {
constructor: CoordinateSystemTracer,
name: 'CoordinateSystemTracer',
init: function () {
var tracer = this;
constructor(name) {
super(name);
this.s.settings({
defaultEdgeType: 'def',
funcEdgesDef: function (edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
}
});
},
setData: function (C) {
if (this.isNew) initView(this);
}
setData(C) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
this.graph.clear();
......@@ -50,8 +39,9 @@ CoordinateSystemTracer.prototype = $.extend(true, Object.create(DirectedGraphTra
this.refresh();
return false;
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'visit':
case 'leave':
......@@ -82,18 +72,20 @@ CoordinateSystemTracer.prototype = $.extend(true, Object.create(DirectedGraphTra
}
break;
default:
Tracer.prototype.processStep.call(this, step, options);
super.processStep(step, options);
}
},
e: function (v1, v2) {
}
e(v1, v2) {
if (v1 > v2) {
var temp = v1;
v1 = v2;
v2 = temp;
}
return 'e' + v1 + '_' + v2;
},
drawOnHover: function (node, context, settings, next) {
}
drawOnHover(node, context, settings, next) {
var tracer = this;
context.setLineDash([5, 5]);
......@@ -114,8 +106,9 @@ CoordinateSystemTracer.prototype = $.extend(true, Object.create(DirectedGraphTra
if (next) next(edge, source, target, color, context, settings);
}
});
},
drawEdge: function (edge, source, target, color, context, settings) {
}
drawEdge(edge, source, target, color, context, settings) {
var prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1;
......@@ -132,6 +125,16 @@ CoordinateSystemTracer.prototype = $.extend(true, Object.create(DirectedGraphTra
);
context.stroke();
}
});
}
const initView = (tracer) => {
tracer.s.settings({
defaultEdgeType: 'def',
funcEdgesDef(edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
}
});
};
module.exports = CoordinateSystemTracer;
\ No newline at end of file
js/module/tracer/directed_graph.js
浏览文件 @ fbeffec2
const Tracer = require('./tracer');
function DirectedGraphTracer() {
if (Tracer.apply(this, arguments)) {
DirectedGraphTracer.prototype.init.call(this);
return true;
const {
refineByType
} = require('../../tracer_manager/util/index');
class DirectedGraphTracer extends Tracer {
static getClassName() {
return 'DirectedGraphTracer';
}
return false;
}
DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
constructor: DirectedGraphTracer,
name: 'DirectedGraphTracer',
init: function () {
var tracer = this;
constructor(name) {
super(name);
this.s = this.capsule.s = new sigma({
renderer: {
container: this.$container[0],
type: 'canvas'
},
settings: {
minArrowSize: 8,
defaultEdgeType: 'arrow',
maxEdgeSize: 2.5,
labelThreshold: 4,
font: 'Roboto',
defaultLabelColor: '#fff',
zoomMin: 0.6,
zoomMax: 1.2,
skipErrors: true,
minNodeSize: .5,
maxNodeSize: 12,
labelSize: 'proportional',
labelSizeRatio: 1.3,
funcLabelsDef: function (node, context, settings) {
tracer.drawLabel(node, context, settings);
},
funcHoversDef: function (node, context, settings, next) {
tracer.drawOnHover(node, context, settings, next);
},
funcEdgesArrow: function (edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawArrow(edge, source, target, color, context, settings);
}
}
});
sigma.plugins.dragNodes(this.s, this.s.renderers[0]);
this.graph = this.capsule.graph = this.s.graph;
},
_setTreeData: function (G, root) {
this.color = {
visited: '#f00',
left: '#000',
default: '#888'
};
if (this.isNew) initView(this);
}
_setTreeData(G, root) {
this.manager.pushStep(this.capsule, {
type: 'setTreeData',
arguments: arguments
});
return this;
},
_visit: function (target, source) {
}
_visit(target, source) {
this.manager.pushStep(this.capsule, {
type: 'visit',
target: target,
source: source
});
return this;
},
_leave: function (target, source) {
}
_leave(target, source) {
this.manager.pushStep(this.capsule, {
type: 'leave',
target: target,
source: source
});
return this;
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'setTreeData':
this.setTreeData.apply(this, step.arguments);
......@@ -95,10 +71,11 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
}
break;
default:
Tracer.prototype.processStep.call(this, step, options);
super.processStep(step, options);
}
},
setTreeData: function (G, root) {
}
setTreeData(G, root) {
var tracer = this;
root = root || 0;
......@@ -115,7 +92,7 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
};
getDepth(root, 1);
if (this.setData.apply(this, arguments)) return true;
if (this.setData(G)) return true;
var place = function (node, x, y) {
var temp = tracer.graph.nodes(tracer.n(node));
......@@ -139,16 +116,17 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
dfs(root, 0, 0, 1);
this.refresh();
},
setData: function (G) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
}
setData(G, undirected) {
if (super.setData.apply(this, arguments)) return true;
this.graph.clear();
var nodes = [];
var edges = [];
var unitAngle = 2 * Math.PI / G.length;
var currentAngle = 0;
for (var i = 0; i < G.length; i++) {
const nodes = [];
const edges = [];
const unitAngle = 2 * Math.PI / G.length;
let currentAngle = 0;
for (let i = 0; i < G.length; i++) {
currentAngle += unitAngle;
nodes.push({
id: this.n(i),
......@@ -156,17 +134,35 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
x: .5 + Math.sin(currentAngle) / 2,
y: .5 + Math.cos(currentAngle) / 2,
size: 1,
color: this.color.default
color: this.color.default,
weight: 0
});
for (var j = 0; j < G[i].length; j++) {
if (G[i][j]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1
});
if (undirected) {
for (let j = 0; j <= i; j++) {
if (G[i][j] || G[j][i]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1,
weight: refineByType(G[i][j])
});
}
}
} else {
for (let j = 0; j < G[i].length; j++) {
if (G[i][j]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1,
weight: refineByType(G[i][j])
});
}
}
}
}
......@@ -184,29 +180,28 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
this.refresh();
return false;
},
resize: function () {
Tracer.prototype.resize.call(this);
}
resize() {
super.resize();
this.s.renderers[0].resize();
this.refresh();
},
refresh: function () {
Tracer.prototype.refresh.call(this);
}
refresh() {
super.refresh();
this.s.refresh();
},
clear: function () {
Tracer.prototype.clear.call(this);
}
clear() {
super.clear();
this.clearGraphColor();
},
color: {
visited: '#f00',
left: '#000',
default: '#888'
},
clearGraphColor: function () {
}
clearGraphColor() {
var tracer = this;
this.graph.nodes().forEach(function (node) {
......@@ -215,14 +210,17 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
this.graph.edges().forEach(function (edge) {
edge.color = tracer.color.default;
});
},
n: function (v) {
}
n(v) {
return 'n' + v;
},
e: function (v1, v2) {
}
e(v1, v2) {
return 'e' + v1 + '_' + v2;
},
getColor: function (edge, source, target, settings) {
}
getColor(edge, source, target, settings) {
var color = edge.color,
edgeColor = settings('edgeColor'),
defaultNodeColor = settings('defaultNodeColor'),
......@@ -241,8 +239,9 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
}
return color;
},
drawLabel: function (node, context, settings) {
}
drawLabel(node, context, settings) {
var fontSize,
prefix = settings('prefix') || '',
size = node[prefix + 'size'];
......@@ -269,8 +268,9 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
Math.round(node[prefix + 'x']),
Math.round(node[prefix + 'y'] + fontSize / 3)
);
},
drawArrow: function (edge, source, target, color, context, settings) {
}
drawArrow(edge, source, target, color, context, settings) {
var prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
tSize = target[prefix + 'size'],
......@@ -309,8 +309,9 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
context.lineTo(aX + vX, aY + vY);
context.closePath();
context.fill();
},
drawOnHover: function (node, context, settings, next) {
}
drawOnHover(node, context, settings, next) {
var tracer = this;
context.setLineDash([5, 5]);
......@@ -332,7 +333,43 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
}
});
}
});
}
const initView = (tracer) => {
tracer.s = tracer.capsule.s = new sigma({
renderer: {
container: tracer.$container[0],
type: 'canvas'
},
settings: {
minArrowSize: 8,
defaultEdgeType: 'arrow',
maxEdgeSize: 2.5,
labelThreshold: 4,
font: 'Roboto',
defaultLabelColor: '#fff',
zoomMin: 0.6,
zoomMax: 1.2,
skipErrors: true,
minNodeSize: .5,
maxNodeSize: 12,
labelSize: 'proportional',
labelSizeRatio: 1.3,
funcLabelsDef(node, context, settings) {
tracer.drawLabel(node, context, settings);
},
funcHoversDef(node, context, settings, next) {
tracer.drawOnHover(node, context, settings, next);
},
funcEdgesArrow(edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawArrow(edge, source, target, color, context, settings);
}
}
});
sigma.plugins.dragNodes(tracer.s, tracer.s.renderers[0]);
tracer.graph = tracer.capsule.graph = tracer.s.graph;
};
sigma.canvas.labels.def = function (node, context, settings) {
var func = settings('funcLabelsDef');
......
js/module/tracer/log.js
浏览文件 @ fbeffec2
const Tracer = require('./tracer');
function LogTracer() {
if (Tracer.apply(this, arguments)) {
LogTracer.prototype.init.call(this);
return true;
class LogTracer extends Tracer {
static getClassName() {
return 'LogTracer';
}
constructor(name) {
super(name);
if (this.isNew) initView(this);
}
return false;
}
LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
constructor: LogTracer,
name: 'LogTracer',
init: function () {
this.$wrapper = this.capsule.$wrapper = $('<div class="wrapper">');
this.$container.append(this.$wrapper);
},
_print: function (msg) {
_print(msg) {
this.manager.pushStep(this.capsule, {
type: 'print',
msg: msg
});
return this;
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'print':
this.print(step.msg);
break;
}
},
refresh: function () {
}
refresh() {
this.scrollToEnd(Math.min(50, this.interval));
},
clear: function () {
Tracer.prototype.clear.call(this);
}
clear() {
super.clear();
this.$wrapper.empty();
},
print: function (message) {
}
print(message) {
this.$wrapper.append($('<span>').append(message + '<br/>'));
},
scrollToEnd: function (duration) {
}
scrollToEnd(duration) {
this.$container.animate({
scrollTop: this.$container[0].scrollHeight
}, duration);
}
});
}
const initView = (tracer) => {
tracer.$wrapper = tracer.capsule.$wrapper = $('<div class="wrapper">');
tracer.$container.append(tracer.$wrapper);
};
module.exports = LogTracer;
\ No newline at end of file
js/module/tracer/tracer.js
浏览文件 @ fbeffec2
const app = require('../../app');
const {
toJSON,
fromJSON
} = require('../../tracer_manager/util/index');
function Tracer(name) {
this.module = this.constructor;
this.capsule = this.manager.allocate(this);
$.extend(this, this.capsule);
this.setName(name);
return this.isNew;
}
class Tracer {
static getClassName() {
return 'Tracer';
}
constructor(name) {
this.module = this.constructor;
Tracer.prototype = {
this.manager = app.getTracerManager();
this.capsule = this.manager.allocate(this);
$.extend(this, this.capsule);
constructor: Tracer,
name: 'Tracer',
manager: null,
this.setName(name);
}
_setData(...args) {
this.manager.pushStep(this.capsule, {
......@@ -23,19 +26,19 @@ Tracer.prototype = {
args: toJSON(args)
});
return this;
},
}
_clear() {
this.manager.pushStep(this.capsule, {
type: 'clear'
});
return this;
},
}
_wait() {
this.manager.newStep();
return this;
},
}
processStep(step, options) {
const {
......@@ -51,7 +54,7 @@ Tracer.prototype = {
this.clear();
break;
}
},
}
setName(name) {
let $name;
......@@ -62,7 +65,7 @@ Tracer.prototype = {
$name = this.$container.find('span.name');
}
$name.text(name || this.defaultName);
},
}
setData() {
const data = toJSON(arguments);
......@@ -72,30 +75,35 @@ Tracer.prototype = {
this.isNew = this.capsule.isNew = false;
this.lastData = this.capsule.lastData = data;
return false;
},
}
resize() {
},
}
refresh() {
},
}
clear() {
},
}
attach(tracer) {
if (tracer.module === LogTracer) {
this.logTracer = tracer;
}
return this;
},
}
mousedown(e) {
},
}
mousemove(e) {
},
}
mouseup(e) {
},
}
mousewheel(e) {
}
};
}
module.exports = Tracer;
\ No newline at end of file
js/module/tracer/undirected_graph.js
浏览文件 @ fbeffec2
const DirectedGraphTracer = require('./directed_graph');
function UndirectedGraphTracer() {
if (DirectedGraphTracer.apply(this, arguments)) {
UndirectedGraphTracer.prototype.init.call(this);
return true;
class UndirectedGraphTracer extends DirectedGraphTracer {
static getClassName() {
return 'UndirectedGraphTracer';
}
return false;
}
UndirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGraphTracer.prototype), {
constructor: UndirectedGraphTracer,
name: 'UndirectedGraphTracer',
init: function () {
var tracer = this;
this.s.settings({
defaultEdgeType: 'def',
funcEdgesDef: function (edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
}
});
},
setData: function (G) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
constructor(name) {
super(name);
this.graph.clear();
var nodes = [];
var edges = [];
var unitAngle = 2 * Math.PI / G.length;
var currentAngle = 0;
for (var i = 0; i < G.length; i++) {
currentAngle += unitAngle;
nodes.push({
id: this.n(i),
label: '' + i,
x: .5 + Math.sin(currentAngle) / 2,
y: .5 + Math.cos(currentAngle) / 2,
size: 1,
color: this.color.default
});
}
for (var i = 0; i < G.length; i++) {
for (var j = 0; j <= i; j++) {
if (G[i][j] || G[j][i]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1
});
}
}
}
if (this.isNew) initView(this);
}
this.graph.read({
nodes: nodes,
edges: edges
});
this.s.camera.goTo({
x: 0,
y: 0,
angle: 0,
ratio: 1
});
this.refresh();
setData(G) {
return super.setData(G, true);
}
return false;
},
e: function (v1, v2) {
e(v1, v2) {
if (v1 > v2) {
var temp = v1;
v1 = v2;
v2 = temp;
}
return 'e' + v1 + '_' + v2;
},
drawOnHover: function (node, context, settings, next) {
}
drawOnHover(node, context, settings, next) {
var tracer = this;
context.setLineDash([5, 5]);
......@@ -98,8 +45,9 @@ UndirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGraphTrac
if (next) next(edge, source, target, color, context, settings);
}
});
},
drawEdge: function (edge, source, target, color, context, settings) {
}
drawEdge(edge, source, target, color, context, settings) {
var prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1;
......@@ -116,6 +64,16 @@ UndirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGraphTrac
);
context.stroke();
}
});
}
const initView = (tracer) => {
tracer.s.settings({
defaultEdgeType: 'def',
funcEdgesDef(edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
}
});
};
module.exports = UndirectedGraphTracer;
\ No newline at end of file
js/module/tracer/weighted_directed_graph.js
浏览文件 @ fbeffec2
......@@ -4,47 +4,27 @@ const {
refineByType
} = require('../../tracer_manager/util/index');
function WeightedDirectedGraphTracer() {
if (DirectedGraphTracer.apply(this, arguments)) {
WeightedDirectedGraphTracer.prototype.init.call(this);
return true;
class WeightedDirectedGraphTracer extends DirectedGraphTracer {
static getClassName() {
return 'WeightedDirectedGraphTracer';
}
return false;
}
WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGraphTracer.prototype), {
constructor: WeightedDirectedGraphTracer,
name: 'WeightedDirectedGraphTracer',
init: function () {
var tracer = this;
this.s.settings({
edgeLabelSize: 'proportional',
defaultEdgeLabelSize: 20,
edgeLabelSizePowRatio: 0.8,
funcLabelsDef: function (node, context, settings) {
tracer.drawNodeWeight(node, context, settings);
tracer.drawLabel(node, context, settings);
},
funcHoversDef: function (node, context, settings) {
tracer.drawOnHover(node, context, settings, tracer.drawEdgeWeight);
},
funcEdgesArrow: function (edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawArrow(edge, source, target, color, context, settings);
tracer.drawEdgeWeight(edge, source, target, color, context, settings);
}
});
},
_weight: function (target, weight) {
constructor(name) {
super(name);
if (this.isNew) initView(this);
}
_weight(target, weight) {
this.manager.pushStep(this.capsule, {
type: 'weight',
target: target,
weight: weight
});
return this;
},
_visit: function (target, source, weight) {
}
_visit(target, source, weight) {
this.manager.pushStep(this.capsule, {
type: 'visit',
target: target,
......@@ -52,8 +32,9 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
weight: weight
});
return this;
},
_leave: function (target, source, weight) {
}
_leave(target, source, weight) {
this.manager.pushStep(this.capsule, {
type: 'leave',
target: target,
......@@ -61,8 +42,9 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
weight: weight
});
return this;
},
processStep: function (step, options) {
}
processStep(step, options) {
switch (step.type) {
case 'weight':
var targetNode = this.graph.nodes(this.n(step.target));
......@@ -88,67 +70,23 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
}
break;
default:
DirectedGraphTracer.prototype.processStep.call(this, step, options);
}
},
setData: function (G) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
this.graph.clear();
var nodes = [];
var edges = [];
var unitAngle = 2 * Math.PI / G.length;
var currentAngle = 0;
for (var i = 0; i < G.length; i++) {
currentAngle += unitAngle;
nodes.push({
id: this.n(i),
label: '' + i,
x: .5 + Math.sin(currentAngle) / 2,
y: .5 + Math.cos(currentAngle) / 2,
size: 1,
color: this.color.default,
weight: 0
});
for (var j = 0; j < G[i].length; j++) {
if (G[i][j]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1,
weight: refineByType(G[i][j])
});
}
}
super.processStep(step, options);
}
}
this.graph.read({
nodes: nodes,
edges: edges
});
this.s.camera.goTo({
x: 0,
y: 0,
angle: 0,
ratio: 1
});
this.refresh();
return false;
},
clear: function () {
DirectedGraphTracer.prototype.clear.call(this);
clear() {
super.clear();
this.clearWeights();
},
clearWeights: function () {
}
clearWeights() {
this.graph.nodes().forEach(function (node) {
node.weight = 0;
});
},
drawEdgeWeight: function (edge, source, target, color, context, settings) {
}
drawEdgeWeight(edge, source, target, color, context, settings) {
if (source == target)
return;
......@@ -206,8 +144,9 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
);
context.restore();
},
drawNodeWeight: function (node, context, settings) {
}
drawNodeWeight(node, context, settings) {
var fontSize,
prefix = settings('prefix') || '',
size = node[prefix + 'size'];
......@@ -232,6 +171,26 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
Math.round(node[prefix + 'y'] + fontSize / 3)
);
}
});
}
const initView = (tracer) => {
tracer.s.settings({
edgeLabelSize: 'proportional',
defaultEdgeLabelSize: 20,
edgeLabelSizePowRatio: 0.8,
funcLabelsDef(node, context, settings) {
tracer.drawNodeWeight(node, context, settings);
tracer.drawLabel(node, context, settings);
},
funcHoversDef(node, context, settings) {
tracer.drawOnHover(node, context, settings, tracer.drawEdgeWeight);
},
funcEdgesArrow(edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawArrow(edge, source, target, color, context, settings);
tracer.drawEdgeWeight(edge, source, target, color, context, settings);
}
});
};
module.exports = WeightedDirectedGraphTracer;
\ No newline at end of file
js/module/tracer/weighted_undirected_graph.js
浏览文件 @ fbeffec2
const WeightedDirectedGraphTracer = require('./weighted_directed_graph');
const UndirectedGraphTracer = require('./undirected_graph');
function WeightedUndirectedGraphTracer() {
if (WeightedDirectedGraphTracer.apply(this, arguments)) {
WeightedUndirectedGraphTracer.prototype.init.call(this);
return true;
class WeightedUndirectedGraphTracer extends WeightedDirectedGraphTracer {
static getClassName() {
return 'WeightedUndirectedGraphTracer';
}
return false;
}
WeightedUndirectedGraphTracer.prototype = $.extend(true, Object.create(WeightedDirectedGraphTracer.prototype), {
constructor: WeightedUndirectedGraphTracer,
name: 'WeightedUndirectedGraphTracer',
init: function () {
var tracer = this;
constructor(name) {
super(name);
this.s.settings({
defaultEdgeType: 'def',
funcEdgesDef: function (edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
tracer.drawEdgeWeight(edge, source, target, color, context, settings);
}
});
},
setData: function (G) {
if (Tracer.prototype.setData.apply(this, arguments)) return true;
this.e = UndirectedGraphTracer.prototype.e;
this.drawOnHover = UndirectedGraphTracer.prototype.drawOnHover;
this.drawEdge = UndirectedGraphTracer.prototype.drawEdge;
this.graph.clear();
var nodes = [];
var edges = [];
var unitAngle = 2 * Math.PI / G.length;
var currentAngle = 0;
for (var i = 0; i < G.length; i++) {
currentAngle += unitAngle;
nodes.push({
id: this.n(i),
label: '' + i,
x: .5 + Math.sin(currentAngle) / 2,
y: .5 + Math.cos(currentAngle) / 2,
size: 1,
color: this.color.default,
weight: 0
});
}
for (var i = 0; i < G.length; i++) {
for (var j = 0; j <= i; j++) {
if (G[i][j] || G[j][i]) {
edges.push({
id: this.e(i, j),
source: this.n(i),
target: this.n(j),
color: this.color.default,
size: 1,
weight: G[i][j]
});
}
}
}
if (this.isNew) initView(this);
}
this.graph.read({
nodes: nodes,
edges: edges
});
this.s.camera.goTo({
x: 0,
y: 0,
angle: 0,
ratio: 1
});
this.refresh();
setData(G) {
return super.setData(G, true);
}
return false;
},
e: UndirectedGraphTracer.prototype.e,
drawOnHover: UndirectedGraphTracer.prototype.drawOnHover,
drawEdge: UndirectedGraphTracer.prototype.drawEdge,
drawEdgeWeight: function (edge, source, target, color, context, settings) {
drawEdgeWeight(edge, source, target, color, context, settings) {
var prefix = settings('prefix') || '';
if (source[prefix + 'x'] > target[prefix + 'x']) {
var temp = source;
......@@ -85,6 +29,17 @@ WeightedUndirectedGraphTracer.prototype = $.extend(true, Object.create(WeightedD
}
WeightedDirectedGraphTracer.prototype.drawEdgeWeight.call(this, edge, source, target, color, context, settings);
}
});
}
const initView = (tracer) => {
tracer.s.settings({
defaultEdgeType: 'def',
funcEdgesDef(edge, source, target, context, settings) {
var color = tracer.getColor(edge, source, target, settings);
tracer.drawEdge(edge, source, target, color, context, settings);
tracer.drawEdgeWeight(edge, source, target, color, context, settings);
}
});
};
module.exports = WeightedUndirectedGraphTracer;
\ No newline at end of file
js/tracer_manager/manager.js
浏览文件 @ fbeffec2
......@@ -51,7 +51,8 @@ TracerManager.prototype = {
selectedCapsule = this.add(newTracer);
}
selectedCapsule.defaultName = `${newTracer.name} ${count}`;
const className = newTracer.module.getClassName();
selectedCapsule.defaultName = `${className} ${count}`;
selectedCapsule.order = this.order++;
return selectedCapsule;
},
......
public/algorithm_visualizer.js
浏览文件 @ fbeffec2
此差异已折叠。
public/algorithm_visualizer.js.map
浏览文件 @ fbeffec2
此差异已折叠。
public/algorithm_visualizer.min.js
浏览文件 @ fbeffec2
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或