Skip to content

Commit 2ee171a

Browse files
沈袁程沈袁程
沈袁程
authored and
沈袁程
committed
🐛
1 parent 7c7384c commit 2ee171a

File tree

2 files changed

+168
-93
lines changed

2 files changed

+168
-93
lines changed

‎src/redux/views/panels/viewWindow.ts

+81-12
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
} from "./panel-consts";
2525
import ViewContent from "./viewContent";
2626
import ViewToolBtn from "./viewToolBtn";
27-
import { Example, IViewBtnProp } from "./interfaces";
27+
import { Example, IViewBtnProp, EXpng } from "./interfaces";
2828
import { ICoord } from "../../global-interfaces";
2929
import { NON_SKETCH_CLS } from "../../global-consts";
3030
import { jsTool } from "../../../util/jsTool";
@@ -34,7 +34,8 @@ import { markSelection } from "../../../util/markSelection";
3434
import { updateManualSelect, updateSelectMarksStep, updateSlectMode } from "../../action/chartAction";
3535
import { random } from "lodash";
3636
import Util from "../../../app/core/util";
37-
import {svgToPngLink } from "../../../util/appTool";
37+
import { svgToPngLink } from "../../../util/appTool";
38+
import util from "../../../app/core/util";
3839
export var multiSelectBtn: boolean = false;
3940
export default class ViewWindow {
4041
viewTitle: string;
@@ -251,22 +252,75 @@ export default class ViewWindow {
251252
{
252253
type: "click",
253254
func: () => {
254-
255+
// store.getState().selectMarksStep.forEach((step) => {
256+
// step.forEach((s) => {
257+
// document.getElementById(s).style.opacity = '0.3';
258+
// });
259+
// });
255260
const marksToconfirm: string[][] = [[...store.getState().manualSelect.marks].sort()];
256261
const svg: HTMLElement = document.getElementById('visChart');
257262
//random id, length = 15
258263
const id: string = Math.random().toString(36).substr(2, 15);
259-
let dataDatum: any[] = [{}];
260-
let collection: any[] = [{}];
261-
marksToconfirm[0].forEach((m) => {
262-
dataDatum.push(document.getElementById(m).getAttribute('data-datum'));
263-
collection.push(document.getElementById(m).getAttribute('collection'));
264-
//let the m svg mark to png
264+
let dataDatum: any[] = [];
265+
let collection: any[] = [];
266+
let allMarksPng: EXpng[] = [];
267+
store.getState().dataTable.forEach((value, id) => {
268+
dataDatum.push({key:id, value:document.getElementById(id).getAttribute('data-datum')});
269+
collection.push({key:id, value:document.getElementById(id).getAttribute('collection')});
270+
});
271+
util.nonDataTable.forEach((value, id) => {
272+
dataDatum.push({key:id, value:document.getElementById(id).getAttribute('data-datum')});
273+
collection.push({key:id, value:document.getElementById(id).getAttribute('collection')});
265274
});
266275
//current trace
267276
const currentTrace: ICoord[][] = store.getState().trace;
268277
//all mark pngs
269-
const allMarksPngFileName = svgToPngLink(svg);
278+
store.getState().dataTable.forEach((mark, markkey) => {
279+
document.getElementById(markkey).style.opacity = '0';
280+
});// all 0
281+
Util.nonDataTable.forEach((mark, markkey) => {
282+
document.getElementById(markkey).style.opacity = '0';
283+
});
284+
store.getState().dataTable.forEach((mark, markkey) => {
285+
if (store.getState().selectMarksStep.length != 0) {
286+
if (store.getState().selectMarksStep[store.getState().selectMarksStep.length - 1].includes(markkey)) {
287+
document.getElementById(markkey).style.opacity = '0.3';
288+
} else {
289+
document.getElementById(markkey).style.opacity = '1';
290+
}
291+
} else {
292+
document.getElementById(markkey).style.opacity = '1';
293+
}
294+
const png = svgToPngLink(svg);
295+
allMarksPng.push({ markId: markkey, png: png });
296+
document.getElementById(markkey).style.opacity = '0';
297+
});
298+
Util.nonDataTable.forEach((mark, markkey) => {
299+
if (store.getState().selectMarksStep.length != 0) {
300+
if (store.getState().selectMarksStep[store.getState().selectMarksStep.length - 1].includes(markkey)) {
301+
document.getElementById(markkey).style.opacity = '0.3';
302+
} else {
303+
document.getElementById(markkey).style.opacity = '1';
304+
}
305+
} else {
306+
document.getElementById(markkey).style.opacity = '1';
307+
}
308+
const png = svgToPngLink(svg);
309+
allMarksPng.push({ markId: markkey, png: png });
310+
document.getElementById(markkey).style.opacity = '0';
311+
});
312+
store.getState().dataTable.forEach((mark, markkey) => {
313+
document.getElementById(markkey).style.opacity = '1';
314+
});
315+
util.nonDataTable.forEach((mark, markkey) => {
316+
document.getElementById(markkey).style.opacity = '1';
317+
});
318+
// store.getState().selectMarksStep.forEach((step) => {
319+
// step.forEach((s) => {
320+
// document.getElementById(s).style.opacity = '0.3';
321+
// });
322+
// });
323+
270324
//previous marks
271325
const previousMarks: string[] = store.getState().selectMarksStep[store.getState().selectMarksStep.length - 1]
272326
//gt marks
@@ -275,17 +329,32 @@ export default class ViewWindow {
275329
const example: Example = {
276330
id: id,
277331
currentTrace: currentTrace,
278-
allMarksPngFileName: [],
332+
allMarksPngFileName: allMarksPng,
279333
previousMarks: previousMarks,
280334
gtMarks: gtMarks,
281335
dataDatum: dataDatum,
282336
collection: collection,
283337
};
338+
// function downloadJSON() {
339+
const filename = example.id + '.json'; // 文件名
340+
341+
const blob = new Blob([JSON.stringify(example, null, 2)], { // 将 JSON 数据转换成 Blob 对象
342+
type: 'application/json'
343+
});
344+
345+
const url = URL.createObjectURL(blob); // 创建一个 URL 对象
346+
347+
const link = document.createElement('a'); // 创建一个 a 标签元素
348+
link.href = url;
349+
link.download = filename; // 设置文件名
350+
link.click(); // 触发下载操作
351+
URL.revokeObjectURL(url); // 释放 URL 对象
352+
// }
284353

285354
store.dispatchSystem(updateSelectMarksStep(marksToconfirm[0]));
286355
marksToconfirm.forEach((mark) => {
287356
mark.forEach((m) => {
288-
document.getElementById(m).setAttribute('style', 'opacity:0.3')
357+
document.getElementById(m).style.opacity = '0.3';
289358
});
290359
});
291360
store.dispatchSystem(updateManualSelect(store.getState().manualSelect.marks, false));

‎src/util/appTool.ts

+87-81
Original file line numberDiff line numberDiff line change
@@ -143,100 +143,106 @@ export const newManualSelect = (oldSelect: ManualStep, mIds: Set<string>, needCo
143143
};
144144

145145
export const addHighlight = (element: HTMLElement) => {
146-
const selectionGuideId = "selectionGuide";
147-
const svg = document.getElementById("visChart");
148-
let selectionGuide = document.getElementById(selectionGuideId) as Element;
149-
const chartContent = document.getElementById("chartContent");
150-
if (selectionGuide == null) {
151-
selectionGuide = document.createElementNS("http://www.w3.org/2000/svg", "g");
152-
selectionGuide.id = selectionGuideId;
153-
chartContent.appendChild(selectionGuide);
154-
}
146+
// const selectionGuideId = "selectionGuide";
147+
// const svg = document.getElementById("visChart");
148+
// let selectionGuide = document.getElementById(selectionGuideId) as Element;
149+
// const chartContent = document.getElementById("chartContent");
150+
// if (selectionGuide == null) {
151+
// selectionGuide = document.createElementNS("http://www.w3.org/2000/svg", "g");
152+
// selectionGuide.id = selectionGuideId;
153+
// chartContent.appendChild(selectionGuide);
154+
// }
155155
const opacityAttr = element.getAttribute("opacity");
156156
let opacity = 1;
157-
if (opacityAttr) {
158-
opacity = Number(opacityAttr);
159-
}
157+
// if (opacityAttr) {
158+
// opacity = Number(opacityAttr);
159+
// }
160160

161-
element.classList.remove("non-framed-mark");
162-
element.setAttribute("opacity", (opacity * 0.3).toString());
163-
return;
164-
let frame: Element;
165-
if (element.tagName == "text") {
166-
frame = document.createElementNS("http://www.w3.org/2000/svg", "rect");
167-
const boundingBox = element.getBoundingClientRect();
168-
const topLeft = jsTool.screenToSvgCoords(svg, boundingBox.left, boundingBox.top);
169-
const bottomRight = jsTool.screenToSvgCoords(svg, boundingBox.right, boundingBox.bottom);
170-
const transform = new Polygon().parseTransform(chartContent);
171-
frame.setAttribute("x", ((topLeft.x - transform.e) / transform.a).toString());
172-
frame.setAttribute("y", ((topLeft.y - transform.f) / transform.a).toString());
173-
frame.setAttribute("height", ((bottomRight.y - topLeft.y) / transform.a).toString());
174-
frame.setAttribute("width", ((bottomRight.x - topLeft.x) / transform.a).toString());
175-
} else {
176-
frame = element.cloneNode() as Element;
177-
frame.removeAttribute("data-datum");
161+
// element.classList.remove("non-framed-mark");
162+
if (element.getAttribute('opacity') == '1') {
163+
element.style.opacity = "0.3";
178164
}
179-
frame.id = "qwert" + element.id;
180-
frame.setAttribute("fill", "none");
181-
frame.setAttribute("stroke", "black");
182-
frame.setAttribute("stroke-width", "1");
183-
frame.setAttribute("stroke-dasharray", "5, 5");
184-
frame.setAttribute("opacity", "1");
185-
frame.setAttribute("transform", new Polygon().getTransformFromChartContent(element).toString());
186-
187-
const animation = document.createElementNS("http://www.w3.org/2000/svg", "animate");
188-
animation.setAttribute("attributeName", "stroke-dashoffset");
189-
animation.setAttribute("from", "0");
190-
animation.setAttribute("to", "10");
191-
animation.setAttribute("dur", "1");
192-
animation.setAttribute("repeatCount", "indefinite");
193-
frame.appendChild(animation);
194-
195-
const animation2 = document.createElementNS("http://www.w3.org/2000/svg", "animate");
196-
animation2.setAttribute("attributeName", "stroke");
197-
animation2.setAttribute("from", "black");
198-
animation2.setAttribute("to", "white");
199-
animation2.setAttribute("dur", "1");
200-
animation2.setAttribute("repeatCount", "indefinite");
201-
frame.appendChild(animation2);
202-
203-
frame.classList.forEach(value => frame.classList.remove(value));
204-
selectionGuide.appendChild(frame);
165+
// return;
166+
// let frame: Element;
167+
// if (element.tagName == "text") {
168+
// frame = document.createElementNS("http://www.w3.org/2000/svg", "rect");
169+
// const boundingBox = element.getBoundingClientRect();
170+
// const topLeft = jsTool.screenToSvgCoords(svg, boundingBox.left, boundingBox.top);
171+
// const bottomRight = jsTool.screenToSvgCoords(svg, boundingBox.right, boundingBox.bottom);
172+
// const transform = new Polygon().parseTransform(chartContent);
173+
// frame.setAttribute("x", ((topLeft.x - transform.e) / transform.a).toString());
174+
// frame.setAttribute("y", ((topLeft.y - transform.f) / transform.a).toString());
175+
// frame.setAttribute("height", ((bottomRight.y - topLeft.y) / transform.a).toString());
176+
// frame.setAttribute("width", ((bottomRight.x - topLeft.x) / transform.a).toString());
177+
// } else {
178+
// frame = element.cloneNode() as Element;
179+
// frame.removeAttribute("data-datum");
180+
// }
181+
// frame.id = "qwert" + element.id;
182+
// frame.setAttribute("fill", "none");
183+
// frame.setAttribute("stroke", "black");
184+
// frame.setAttribute("stroke-width", "1");
185+
// frame.setAttribute("stroke-dasharray", "5, 5");
186+
// frame.setAttribute("opacity", "1");
187+
// frame.setAttribute("transform", new Polygon().getTransformFromChartContent(element).toString());
188+
189+
// const animation = document.createElementNS("http://www.w3.org/2000/svg", "animate");
190+
// animation.setAttribute("attributeName", "stroke-dashoffset");
191+
// animation.setAttribute("from", "0");
192+
// animation.setAttribute("to", "10");
193+
// animation.setAttribute("dur", "1");
194+
// animation.setAttribute("repeatCount", "indefinite");
195+
// frame.appendChild(animation);
196+
197+
// const animation2 = document.createElementNS("http://www.w3.org/2000/svg", "animate");
198+
// animation2.setAttribute("attributeName", "stroke");
199+
// animation2.setAttribute("from", "black");
200+
// animation2.setAttribute("to", "white");
201+
// animation2.setAttribute("dur", "1");
202+
// animation2.setAttribute("repeatCount", "indefinite");
203+
// frame.appendChild(animation2);
204+
205+
// frame.classList.forEach(value => frame.classList.remove(value));
206+
// selectionGuide.appendChild(frame);
205207
};
206208

207209
export const removeHighlight = (element: HTMLElement) => {
208-
const selectionGuideId = "selectionGuide";
209-
let selectionGuide = document.getElementById(selectionGuideId) as Element;
210-
const chartContent = document.getElementById("chartContent");
211-
if (selectionGuide == null) {
212-
selectionGuide = document.createElementNS("http://www.w3.org/2000/svg", "g");
213-
selectionGuide.id = selectionGuideId;
214-
selectionGuide.classList.add("selectionGuide");
215-
chartContent.appendChild(selectionGuide);
216-
}
217-
218-
const opacityAttr = element.getAttribute("opacity");
219-
let opacity = 1;
220-
if (opacityAttr) {
221-
opacity = Number(opacityAttr);
210+
if (element.style.opacity == '0.3') {
211+
element.style.opacity = '1';
222212
}
223-
element.classList.add("non-framed-mark");
224-
element.setAttribute("opacity", (opacity / 0.3).toString());
225-
// selectionGuide.removeChild(document.getElementById("qwert" + element.id))
213+
// const selectionGuideId = "selectionGuide";
214+
// let selectionGuide = document.getElementById(selectionGuideId) as Element;
215+
// const chartContent = document.getElementById("chartContent");
216+
// if (selectionGuide == null) {
217+
// selectionGuide = document.createElementNS("http://www.w3.org/2000/svg", "g");
218+
// selectionGuide.id = selectionGuideId;
219+
// selectionGuide.classList.add("selectionGuide");
220+
// chartContent.appendChild(selectionGuide);
221+
// }
222+
223+
// const opacityAttr = element.getAttribute("opacity");
224+
// let opacity = 1;
225+
// if (opacityAttr) {
226+
// opacity = Number(opacityAttr);
227+
// }
228+
// element.classList.add("non-framed-mark");
229+
// element.setAttribute("opacity", (opacity / 0.3).toString());
230+
// // selectionGuide.removeChild(document.getElementById("qwert" + element.id))
226231
};
227232
//svgToPngBase64
228-
export const svgToPngLink = (svgElement: HTMLElement | SVGElement) => {
233+
export const svgToPngLink = (svgElement: Element) => {
229234
const canvas = document.createElement("canvas");
230235
canvas.width = svgElement.clientWidth;
231236
canvas.height = svgElement.clientHeight;
232237
const ctx = canvas.getContext("2d");
233238
const img = new Image();
234-
ctx.drawImage(img, 0, 0);
235-
let pngLink = ''
236-
const link = document.createElement('a');
237-
link.download = 'my-image.png';
238-
link.href = canvas.toDataURL("image/png");
239+
img.onload = function () {
240+
ctx.drawImage(img, 0, 0);
241+
const link = document.createElement('a');
242+
link.download = 'my-image.png';
243+
link.href = canvas.toDataURL("image/png");
244+
// link.click();
245+
};
239246
img.src = "data:image/svg+xml," + encodeURIComponent(new XMLSerializer().serializeToString(svgElement));
240-
const matches = link.href.match(/^data:image\/png;base64,(.+)$/);
241-
return matches;
242-
}
247+
return img.src;
248+
}

0 commit comments

Comments
 (0)