25:["$","title",null,{"children":"Drag & Click | chenlcacentury | Observable"}] 4b:T4e7,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, data.whCanvas, data.whCanvas]) .attr("stroke-width", 2) .style("margin", 0); svg.selectAll("rect") .data(data.blocks) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .attr("stroke", "#00000009") .attr("stroke-width", 1) .attr("id", d => d.id) .attr("fill", "#00FF0010"); const radius = data.blockWidthHeight / 2; const circles = d3.range(data.filters).map(i => ({ x: Math.random() * (width - radius * 2) + radius, y: Math.random() * (height - radius * 2) + radius, })); svg.selectAll("circle") .data(circles) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", (d, i) => d3.schemeCategory10[i % 10]) .call(drag) .on("click", clicked); function clicked(d, i) { if (d3.event.defaultPrevented) return; // dragged d3.select(this).transition() .attr("fill", "black") .attr("r", radius) .transition() .attr("r", radius) .attr("fill", d3.schemeCategory10[i % 10]); } return svg.node(); }4c:T410,drag = { function dragstarted(d) { d3.select(this).attr("stroke", "red"); console.log(d3.select(this).datum()); } function dragged(d) { d3.select(this).raise().attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); } function dock(value) { value = typeof(value) !== 'number' ? parseFloat(value) : value; const remains = value % data.blockWidthHeight; if (value <= data.blockWidthHeight) return value; if (remains <= (data.blockWidthHeight / 2)) return value - remains; return value + data.blockWidthHeight - remains; } function dragended(d) { const cx = dock(d3.select(this).attr("cx")); const cy = dock(d3.select(this).attr("cy")); console.log("dockX: " + cx + ", dockY:" + cy); d.x = cx; d.y = cy; d3.select(this).attr("stroke", null); d3.select(this).attr("cx", cx).attr("cy", cy); } let handler = d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended); return (selection) => { handler.call(this, selection); }; }4d:Tcec,data = { const whCanvas = Math.min(width, height); const lineBlocks = filter * 2; const blockWidthHeight = (whCanvas - whCanvas % lineBlocks) / lineBlocks; const offset = (whCanvas % lineBlocks) / 2; const marginHSide = (width % filter) / 2; const marginVSide = (height % filter) / 2; const blocks = d3.range(lineBlocks*lineBlocks).map(i => { const x = offset + (i % lineBlocks) * blockWidthHeight; const y = offset + ((i - (i % lineBlocks)) / lineBlocks) * blockWidthHeight; const row = ((i - (i % lineBlocks)) / lineBlocks); const column = (i % lineBlocks); const id = 'block' + i; return { x: x, y: y, id: id, row: row, column: column, width: blockWidthHeight, height: blockWidthHeight }; }); function calculateOverlapArea(x1, y1, w1, h1, x2, y2, w2, h2) { const left1 = x1, right1 = x1 + w1, top1 = y1, bottom1 = y1 + h1; const left2 = x2, right2 = x2 + w2, top2 = y2, bottom2 = y2 + h2; const x_overlap = Math.max(0, Math.min(right1, right2) - Math.max(left1, left2)); const y_overlap = Math.max(0, Math.min(bottom1, bottom2) - Math.max(top1, top2)); return x_overlap * y_overlap; } function findDropableBlockId(xTopLeft, yTopLeft) { let found = -1, area = -1; const top = yTopLeft - offset, left = xTopLeft - offset; const column = (left - left % blockWidthHeight) / left; const row = (top - top % blockWidthHeight) / top; for(let y = row; y <= row + 1; y ++) { for(let x = column; x < column + 1; x++) { const index = y * lineBlocks + x; const intersection = calculateOverlapArea( xTopLeft, yTopLeft, blockWidthHeight, blockWidthHeight, blocks[index].x, blocks[index].y, blockWidthHeight, blockWidthHeight); if (intersection > area) { found = index; area = intersection; } } } return blocks[found].id; } function findDropableBlocks(x, y) { const result = []; const these = blocks.filter(block => { return block.x <= x && x <= block.x + blockWidthHeight && block.y <= y && y <= block.y + blockWidthHeight; }); if (!these || these.length !== 1) return; const block = these[0]; const hasUpperRow = (block.row - 2 >= 0), hasLowerRow = (block.row + 2) < lineBlocks; const hasLeftColumn = (block.column - 2 >= 0), hasRightColumn = (block.column + 2) < lineBlocks; if (hasUpperRow && hasLeftColumn) result.push({row: block.row - 2, column: block.column - 2}); if (hasUpperRow) result.push({row: block.row - 2, column: block.column}); if (hasUpperRow && hasRightColumn) result.push({row: block.row - 2, column: block.column + 2}); if (hasRightColumn) result.push({row: block.row, column: block.column + 2}); if (hasLowerRow && hasRightColumn) result.push({row: block.row + 2, column: block.column + 2}); if (hasLowerRow) result.push({row: block.row + 2, column: block.column}); if (hasLowerRow && hasLeftColumn) result.push({row: block.row + 2, column: block.column - 2}); if (hasLeftColumn) result.push({row: block.row, column: block.column - 2}); } return { whCanvas: whCanvas, blocks: blocks, filters: filter + 2, blockWidthHeight: blockWidthHeight, findDropableBlocks: findDropableBlocks, findDropableBlockId: findDropableBlockId, }; }4e:[] 47:{"id":"cbf17296db7a982c","slug":"drag-click","title":"Drag & Click","thumbnail":"bc8bd25958e4d4333fc5bd18fc4e95be4946886eb043fb69a75119a9ca619fff","access_level":"public","create_time":"$D2020-03-19T13:47:18.355Z","update_time":"$D2020-03-20T14:40:36.623Z","view_time":null,"first_public_time":"$D2020-03-19T20:58:30.697Z","has_unpublished_edits":null,"fork":{"id":"babb56046fda443d","slug":"click-vs-drag","title":"Drag & Click","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"a7385d5951f42745","login":"chenlcacentury","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de9cda580d3ac8fc455908245d42d08f9f4a053a8748508ebfdc37ce63d8f789","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":240,"publish_version":240,"role":null,"authored":false,"authors":[{"type":"individual","id":"32396f9e00978e0d","login":"chenlcacentury","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de9cda580d3ac8fc455908245d42d08f9f4a053a8748508ebfdc37ce63d8f789","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"32396f9e00978e0d","login":"chenlcacentury","name":"","avatar_url":"https://avatars-next.observableusercontent.com/de9cda580d3ac8fc455908245d42d08f9f4a053a8748508ebfdc37ce63d8f789","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drag & Click","cells":[{"id":0,"value":"md`# Drag & Click\n\nYou can disambiguate a click from a drag using *event*.defaultPrevented. Drag a circle below, or click it. Note you must not re-append the element on drag *start*, as this may prevent the browser from dispatching a *click* event! Instead, defer the move-to-front until the first *drag* event.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"filter = 10\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null