async function selectRects(pdfDocument, options = {}) { const fw = options.width || 800; const fh = options.height || 600; let Rectangles = options.value || []; let audios_list_blb = options.audios || []; const wBar = 250; const margins = `top:${0}px;left:${10}px;`; console.log("pageRectangles", { Rectangles }); const frame = htl.html`

`; frame.style.cssText = `width:${fw}px;height:${fh}px;background:gray;border:1px solid gray;overflow:scroll;position:relative;${margins}`; const content = htl.html`

`; content.style.cssText = `position:relative;`; //const sidebar = htl.html`

`; const soundClips = htl.html`

`; //let currentEventSidebar = {}; //new sidebar let sidebarRectW = wBar - 20; let sidebarRectH = sidebarRectW * (9/16); let marginRect = 5; var rectOrder = []; Rectangles.forEach(function(node, i) { node.index = i; node.y = i; rectOrder.push(i); //node.audio = null; }); let dragging = {index:null,y:null,order:null}; console.log("pageRectangles", { Rectangles }); //end new Sidebar const mI = await mapImages(Rectangles,pdfDocument, wBar) const hBar = mI.length ? Math.max( mI[mI.length -1].y + mI[mI.length -1].h,fh) : fh //const sidebar = htl.html`

${pageRange}

${buttonsPage}

${buttonsSelection}

${frame}

`; panel.value = Rectangles; let scale = 1; const DictaphoneObj = await Dictaphone.build(soundClips ); //console.log("DictaphoneObj",DictaphoneObj); for (let aud in audios_list_blb){ console.log("psc aud", aud); console.log("psc audios_list_blb[aud]", audios_list_blb[aud]); DictaphoneObj.uploadAudio( audios_list_blb[aud]); } var audio = null; // The main d3 svg selections //const sidebarSel = d3.select(sidebar); // Group for images on sidebar //const imgGroup = sidebarSel.append("g").attr("class", "imgGroup"); // // Handles one page // async function editPage(page, pageNo) { let [scrollLeft, scrollTop] = [0, 0]; let [sideBarScrollLeft, sideBarScrollTop] = [0, 0]; const { width, height } = page.getViewport({ scale: 1 }); // // Rectangle Interaction // let selectedRect = null; let mouse = Vec(0, 0); let dragFunction = null; let top = 0; let left = 0; const drawRectangles = (ctx) => { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.strokeStyle = "red"; ctx.fillStyle = "rgba(128,128,128,0.2)"; for (let pr of Rectangles) { if (pr.pageNo == pageNo) { let [x, y, w, h] = pr.box.map((x) => x * scale); if (pr == selectedRect) ctx.fillRect(x, y, w, h); ctx.strokeRect(x, y, w, h); } } //console.log("Rectangles", { Rectangles }); }; const mouseDragged = (ctx, x, y) => { if (dragFunction) dragFunction(ctx, x, y); }; const dragSelected = (ctx, x, y) => { selectedRect.box[0] += (x - mouse.x) * scale; selectedRect.box[1] += (y - mouse.y) * scale; drawRectangles(ctx); mouse = Vec(x, y); }; let extentPoints = []; const extendSelected = (ctx, x, y) => { let points = [...extentPoints, Vec(x, y)]; let mbr = new MBR(...points); let size = mbr.size(); selectedRect.box = [mbr.min.x, mbr.min.y, size.x, size.y].map( (x) => x / scale ); drawRectangles(ctx); }; const mousePressed = (ctx, x, y) => { mouse = Vec(x, y); const dmin = 3; for (let pr of Rectangles) { if (pr.pageNo == pageNo) { let [x0, y0, w, h] = pr.box.map((x) => x * scale); let p = Vec(x0, y0); let q = p.add(Vec(w + 1, h + 1)); let mbr = new MBR(p, q); if (mbr.pointDist(mouse) <= dmin) { selectedRect = pr; const [l, r, t, b] = [ Math.abs(x - p.x) <= dmin, Math.abs(x - q.x) <= dmin, Math.abs(y - p.y) <= dmin, Math.abs(y - q.y) <= dmin ]; if (l || r || t || b) { dragFunction = extendSelected; if (l && t) extentPoints = [q]; else if (l && b) extentPoints = [Vec(q.x, p.y)]; else if (r && t) extentPoints = [Vec(p.x, q.y)]; else if (r && b) extentPoints = [p]; else if (l) extentPoints = [q, Vec(q.x, p.y)]; else if (r) extentPoints = [p, Vec(p.x, q.y)]; else if (t) extentPoints = [q, Vec(p.x, q.y)]; else if (b) extentPoints = [p, Vec(q.x, p.y)]; } else dragFunction = dragSelected; set(Selection,Rectangles.findIndex(x => x === pr)); return; } } } rectOrder.push(Rectangles.length); selectedRect = { pageNo, box: [mouse.x / scale, mouse.y / scale, 1, 1], index: Rectangles.length, y: Rectangles.length, audio:null }; Rectangles.push(selectedRect); console.log("rectOrder", rectOrder); extentPoints = [mouse]; dragFunction = extendSelected; set(Selection,Rectangles.length); //drawNewSidebar(); }; const mouseReleased = (ctx) => { dragFunction = null; drawRectangles(ctx); panel.dispatchEvent(new CustomEvent("input")); // Signal a change in the selections drawNewSidebar(ctx) }; // new sidebar function ypos(d){ let defaultPos = rectOrder[d.index]*(sidebarRectH + marginRect); if (dragging["y"] != null && dragging["index"] != null){ let defaultposdrag = dragging["order"]*(sidebarRectH + marginRect); //subindo if( defaultposdrag > dragging["y"] && dragging["y"]<= defaultPos && defaultposdrag > defaultPos ){ defaultPos = (rectOrder[d.index]+1)*(sidebarRectH + marginRect); } //descendo else if (defaultposdrag < dragging["y"] && dragging["y"]>= defaultPos && defaultposdrag < defaultPos){ defaultPos = (rectOrder[d.index]-1)*(sidebarRectH + marginRect); } } return defaultPos; } function position(d) { var v = dragging["y"]; var idx = dragging["index"]; return idx == null || idx != d.index ? ypos(d) : v; } function fdrag (ctx) { var drag_behavior = d3.behavior.drag(); var trigger; d3.selectAll(".row").call(d3.behavior.drag() .origin(function(d) { console.log("Origin=", rectOrder[d.element.index]); selectedRect = d.element; set(pageRange, d.element.pageNo); set(Selection,d.element.index); drawRectangles(ctx); console.log("rectOrder-origin", rectOrder); return {y: ypos(d.element)}; }) .on("dragstart", function(d) { console.log('trigger = ' + trigger); trigger = d3.event.sourceEvent.target.className.baseVal; if (trigger == "cellrowImg" || trigger == "cellrow" || trigger == "label") { d3.selectAll(".cellrowImg").attr("opacity", 1); dragging["y"] = position(d.element); dragging["index"] = d.element.index; dragging["order"] = rectOrder[d.element.index]; console.log("dragging[d.y]=", dragging["y"]) // Move the row that is moving on the front let sel = d3.select(this); sel.moveToFront(); console.log("rectOrder-start", rectOrder); } }) .on("drag", function(d) { if (trigger == "cellrowImg" || trigger == "cellrow" || trigger == "label") { const max = Math.max(... rectOrder); const index = rectOrder.indexOf(max); dragging["y"] = Math.min(Math.max(fh, position( Rectangles[index]) + sidebarRectH) , Math.max(0, d3.event.y)); d3.selectAll(".row").attr("transform", function(d, i) { return "translate(0," + position(d.element) + ")"; }); console.log("rectOrder-drag", rectOrder); } }) .on("dragend", function(d) { if (trigger == "cellrowImg" || trigger == "cellrow" || trigger == "label") { var order = []; Rectangles.forEach(function(node, i) { order.push(position(node)) }); console.log("order: "); console.log(order); order.forEach(function(p, i) { rectOrder[i] = order.filter(obj => obj < p ).length ; Rectangles[i].y = rectOrder[i]; }); console.log("Rectangles: "); console.log(Rectangles); console.log("rectOrder: "); console.log(Rectangles); dragging["y"] = null; dragging["index"] = null; dragging["order"] = null; d3.selectAll(".row") .transition() .duration(500) .attr("transform", function(data, i) { if(d.element.index === data.element.index){ return "transform", "translate(0," + ypos(d.element) + ")" } return "translate(0," + position(data.element) + ")"; }); d3.selectAll(".row") .selectAll(".label") .transition() .delay(500) .text(function(d, i) { return rectOrder[ d.element.index]; }); order.forEach(function(p, index) { let sel = d3.selectAll(".row") .filter(function(d, i) { return d.element.index === index }); sel.moveToFront(); }); console.log("rectOrder-end", rectOrder); } else if (trigger == "rec-ico"){ var beginRec = recorderStartCallback() console.log("beginRec", beginRec); if(beginRec) { //https://img.icons8.com/color/344/record.png 2x //var currAudio //if (typeof currAudio =="number"){ recorderDeleteCallback() //} d3.selectAll(".rec-ico") .filter(function(p, i) { return p.element.index === d.element.index }) .attr("xlink:href", "https://img.icons8.com/color/344/record.png"); } else { recorderStopCallback() d3.selectAll(".rec-ico") .filter(function(p, i) { return p.element.index === d.element.index}) .attr("xlink:href", "https://img.icons8.com/ios-glyphs/452/record.png"); d3.selectAll(".rmv-ico") .style("display", function(d, i) {return (typeof( d.element.audio) == "number"?"unset":"none" ) }); d3.selectAll(".playpause-ico") .style("display", function(d, i) {return (typeof( d.element.audio) == "number"?"unset":"none" ) }); } }//rmv-ico else if (trigger == "rmv-ico"){ recorderDeleteCallback() d3.selectAll(".rmv-ico") .style("display", function(d, i) {return (typeof( d.element.audio) == "number"?"unset":"none" ) }); d3.selectAll(".playpause-ico") .style("display", function(d, i) {return (typeof( d.element.audio) == "number"?"unset":"none" ) }); } //playpause-ico else if (trigger == "playpause-ico"){ if (typeof( d.element.audio) == "number"){ if (audio){ if (!audio.paused){ audio.pause(); } audio = null; } else { audio = new Audio(DictaphoneObj.getAudio(d.element.audio).src); audio.play(); } } } }) ); } const drawNewSidebar = async (ctx) => { //let c = d3.scale.category20().domain(d3.range(36)); let data = await mapImages(Rectangles,pdfDocument, sidebarRectW - 20, sidebarRectH); var offsetX = 20; var svg = d3.select(".newSidebarSVG") .attr("width", wBar) .attr("height", function() { const max = Math.max(... rectOrder); const index = rectOrder.indexOf(max); console.log("max", max); console.log("data[index].element", data[index].element); return position( data[index].element) + 2*sidebarRectH }) var matrix = d3.select("#matrix"); var row = matrix.selectAll(".row") .data(data) .enter() .append("g") .attr("class", "row") .attr("transform", function(d, i) { return "translate(0," + position(d.element) + ")"; }); var rect = row.append("rect") .attr("class", "cellrow") .attr("x", function(d) { return 0;}) .attr("width", sidebarRectW) .attr("height",sidebarRectH) .style("fill", function (d, i){return "#F3F3F3"; }) .attr('stroke', '#000') .attr('stroke-width', '1'); row.append('svg:image') .attr("class", "cellrowImg") .attr("x", function(d) { return 0; }) .attr("width",function (d, i){ return d.wsize }) .attr("height",function (d, i){ return d.h }) .attr("transform", function(d, i) { //console.log("d", d); console.log("sidebarRectW", sidebarRectW); return "translate("+ (offsetX + (sidebarRectW - d.wsize - offsetX) / 2) +"," + (sidebarRectH - d.h)/2 + ")"; }) .attr('xlink:href', function(d) { return d.url; }); row.append("rect") .attr("class", "cellrow") .attr("x", function(d) { return 0;}) .attr("width", offsetX) .attr("height",sidebarRectH) .style("fill", function (d, i){return "#808080";}); row.append("text") .attr("class", "label") .attr("x", offsetX/2) .attr("y", function(d, i) { return (sidebarRectH)/2; }) .text(function(d, i) { return d.element.index; }) .style("text-anchor", "middle"); row.append("rect") .attr("class", "cellrow") .attr("x", function(d) { return sidebarRectW - 30 ;}) .attr("y", function(d) { return sidebarRectH - 15 ;}) .attr("width", 30) .attr("height", 15) .style("fill", function (d, i){return "#808080";}); row.append("text") .attr("class", "labelpg") .attr("x", sidebarRectW - 2) .attr("y", sidebarRectH - 5) .text(function(d, i) { return "pg. " + d.element.pageNo; }) .style("text-anchor", "end") .style("font-size", "12px"); //gravador row.append("image") .attr("class", "rec-ico") .attr("xlink:href", "https://img.icons8.com/ios-glyphs/452/record.png") .attr("x", sidebarRectW + 2) .attr("y", 10) .attr("width", 16) .attr("height", 16) .style("cursor", "pointer"); //.on('click', function(d,i){ recorderStartCallback }); //https://static.thenounproject.com/png/159152-200.png row.append("image") .attr("class", "playpause-ico") .attr("xlink:href", "https://static.thenounproject.com/png/159152-200.png") .attr("x", sidebarRectW + 2) .attr("y", 50) .attr("width", 16) .attr("height", 16) .style("cursor", "pointer") .style("display", function(d, i) { return (typeof d.element.audio == "number"? 1:"none") ; }) .style("text-anchor", "middle"); //lixeira row.append("image") .attr("class", "rmv-ico") .attr("xlink:href", "https://img.icons8.com/windows/344/delete.png") .attr("x", sidebarRectW + 2) .attr("y", 90) .attr("width", 16) .attr("height", 16) .style("cursor", "pointer") .style("display", function(d, i) { return (typeof d.element.audio == "number"? 1:"none") ; }); fdrag(ctx); } d3.selection.prototype.moveToFront = function() { return this.each(function(){ this.parentNode.appendChild(this); }); }; function transition(g) { return g.transition().duration(500); } //new sidebar end // // pdf rendering // const refresh = async() => { const viewport = page.getViewport({ scale }); const { width: w, height: h } = viewport; console.log("viewport: ", viewport); const top = h < fh ? (fh - h) / 2 : 0; const left = ( w < fw ? (fw - w) / 2 : 0); //centralizando const margins = `top:${top}px;left:${left}px;`; const ctx = DOM.context2d(w, h, 1); ctx.canvas.style.cssText = `position:absolute;${margins}`; const ctx2 = DOM.context2d(w, h, 1); ctx2.canvas.style.cssText = `z-index:1;position:absolute;${margins}`; ctx2.canvas.onmousedown = (e) => { mousePressed(ctx2, e.offsetX, e.offsetY); }; ctx2.canvas.onmouseup = (e) => { mouseReleased(ctx2, e.offsetX, e.offsetY); }; ctx2.canvas.onmousemove = (e) => { mouseDragged(ctx2, e.offsetX, e.offsetY); }; const barLeft = 0;//w + left + 5 const marginsBar = `top:${top}px;left:${barLeft}px;`; const ctxBar = DOM.context2d(wBar, h, 1); ctxBar.canvas.style.cssText = `z-index:2;position:absolute;${marginsBar};background:grey`; const renderPromise = page.render({ canvasContext: ctx, transform: null, viewport }).promise; renderPromise.then(() => { content.innerHTML = ""; content.append(ctx.canvas); content.append(ctx2.canvas); //sidebar.append(ctxBar.canvas); drawRectangles(ctx2); //drawRectanglesBar(ctxBar); console.log("ctxBar", { ctxBar }); const svg = d3.select("#matrix").node() ? d3.select('#matrix') : d3.select(".newSidebar") .append("svg") .attr("class","newSidebarSVG") .append("g") .attr("id", "matrix"); drawNewSidebar(ctx2); //viewport.width += ctxBar.canvas.width + 5; //viewport.viewBox[2] = viewport.width; console.log("viewport", { viewport }); console.log("frame", { frame }); //frame.clientWidth = viewport.width; setTimeout(() => { frame.scrollTop = scrollTop; frame.scrollLeft = scrollLeft; }, 100); }); const removerectCallback = () => { if (selectedRect) { recorderDeleteCallback(); console.log("selectedRect",selectedRect); const i = selectedRect.index; d3.selectAll(".row") .filter((d,ind) => {return d.element.index == i}) .remove(); Rectangles.splice(i, 1); rectOrder.splice(i, 1); Rectangles.forEach(function(p, i) { rectOrder[i] = rectOrder.filter(obj => obj < rectOrder[i]).length; Rectangles[i].y = rectOrder[i]; Rectangles[i].index = i; }); console.log("Rectangles",Rectangles); console.log("rectOrder", rectOrder); d3.selectAll(".row") .transition() .duration(500) .attr("transform", function(data, i) { return "translate(0," + position(data.element) + ")"; }); d3.selectAll(".row") .selectAll(".label") .transition() .delay(500) .text(function(d, i) { return d.element.index; }); mouseReleased(ctx2); //drawNewSidebar(); } }; removerect.onclick = removerectCallback; let data = await mapImages(Rectangles,pdfDocument); }; refresh(); //fdrag(); frame.onscroll = () => { [scrollTop, scrollLeft] = [frame.scrollTop, frame.scrollLeft]; }; var newSidebar = d3.select(".newSidebar"); newSidebar.onscroll = () => { [sideBarScrollLeft, sideBarScrollLeft] = [newSidebar.scrollTop, newSidebar.scrollLeft]; }; const zoominCallback = () => { scale *= 1.1; refresh(); }; const zoomoutCallback = () => { scale /= 1.1; refresh(); }; zoomin.onclick = zoominCallback; zoomout.onclick = zoomoutCallback; var recorderStartCallback = function () { //console.log("DictaphoneObj",DictaphoneObj) console.log("recorderStartCallback"); if (selectedRect){ var recorderStartCallbackret = DictaphoneObj.fRecord(); console.log("recorderStartCallback", recorderStartCallbackret) return recorderStartCallbackret; } else{ console.log("Precisa selecionar um retangulo para gravar.") } }; const recorderStopCallback = () => { console.log("recorderStopCallback"); if(selectedRect){ var audioId = DictaphoneObj.fStop(); console.log("selectedRect",selectedRect); var audios = DictaphoneObj.getAudios(); console.log("audios",audios); Rectangles[selectedRect.index].audio = audioId; console.log("Rectangles", Rectangles); }else{ console.log("Precisa selecionar um retangulo para gravar.") } }; const recorderDeleteCallback = () => { console.log("selectedRect",selectedRect); console.log("recorderDeleteCallback"); if(selectedRect && typeof(selectedRect.audio) == 'number' ){ var audioId = selectedRect.audio DictaphoneObj.removeAudio(audioId) Rectangles[selectedRect.index].audio = null; Rectangles.forEach(function(d, index) { if(d.audio && d.audio > audioId){ d.audio = d.audio-1; } }) console.log("Rectangles", Rectangles); }else{ console.log("Precisa selecionar um retangulo com audio para excluir gravação.") } }; recorderStart.onclick = recorderStartCallback; recorderStop.onclick = recorderStopCallback; recorderDelete.onclick = recorderDeleteCallback; } let page; async function loadPage() { page = await pdfDocument.getPage(pageRange.value); editPage(page, pageRange.value); } await loadPage(); pageRange.addEventListener("input", loadPage); return panel; }