2c:null 2d:["$","title",null,{"children":"Teaching myself svg.js rotations | Ben | Observable"}] 32:T5e1,There are 4 ways of rotating something in svg.js (if you include the default). From the docs: > - origin: `origin: {x: 50, y: 50}, origin: [50, 50], origin: 50, originX: 50, originY: 50, ox: 50, oy: 50` - origin can also be a up to 2 words speciying the corners of the element: center, top, bottom, left, right - position: `position: {x: 50, y: 50}, position: [50, 50], positionX: 50, positionY: 50, px: 50, py: 50` - absolute position of the origin after all transformations are applied - relative: `relative: {x: 50, y: 50}, relative: [50, 50], relativeX: 50, relativeY: 50, rx: 50, ry: 50` -relative position of the origin after all transformations are applied So to go through these as they're shown above: - A: simple rotation, around the centre of the object. (This is super nice because the default SVG rotation is [around the insertion point](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations#rotation)) - B: `origin` rotation around an origin that you define. That's in model space, in this case `origin: {x: 140, y: 10}`. I.e. you put a pin in the canvas and rotate the element around that. - C: `position` Rotation around a point that is relative to the element's [TODO: centre or insertion? Understand this more?] - D: `relative` do all the transforms and then move the element to that new insertion? [TODO: Understand this more?] I don't really understand `position` or `relative`, but I don't think I need to, as `origin` seems to do what I need it to.33:T409,{ boxes.box1 .x(20) .y(20) .width(100) .height(100) .fill('#f06') .opacity(0.8) .transform({rotate: form.rotation1}) boxes.box1_ghost.x(20).y(20).width(100).height(100).fill('#f06').opacity(0.1) boxes.box2 .x(160) .y(20) .width(100) .height(100) .fill('#0732c3') .opacity(0.8) .transform({rotate: form.rotation2, origin: {x: 140, y: 10}}) boxes.box2_ghost.x(160).y(20).width(100).height(100).fill('#0732c3').opacity(0.1) boxes.box3 .x(300) .y(20) .width(100) .height(100) .fill('#07c36c') .opacity(0.8) .transform({rotate: form.rotation3, relative: {x: 40, y: 40}}) boxes.box3_ghost.x(300).y(20).width(100).height(100).fill('#07c36c').opacity(0.1) boxes.box4 .x(380) .y(20) .width(100) .height(100) .fill('#f4d708') .opacity(0.8) .transform({rotate: form.rotation4, position: {x: 550, y: 150}}) boxes.box4_ghost.x(380).y(20).width(100).height(100).fill('#f4d708').opacity(0.1) return "Draw the boxes" }34:T4d6,{ const boxWidth = 100; const b1x = 100; const b1y = 70; const b2x = 400; altBoxes.box1 .x(b1x) .y(b1y) .width(boxWidth) .height(boxWidth) .fill('#f06') .opacity(0.8) .rotate(rot7, b1x + boxWidth , b1y + boxWidth/2) altBoxes.box1_ghost.x(b1x).y(b1y).width(boxWidth).height(boxWidth).fill('#f06').opacity(0.1) altBoxes.box2 .x(b2x) .y(b1y) .width(boxWidth) .height(boxWidth) .fill('#0732c3') .opacity(0.8) .transform({rotate: rot7, origin: "right center"}) altBoxes.box2_ghost.x(b2x).y(b1y).width(boxWidth).height(boxWidth).fill('#0732c3').opacity(0.1) // altBoxes.box3 // .x(300) // .y(20) // .width(100) // .height(100) // .fill('#07c36c') // .opacity(0.8) // .transform({rotate: form.rotation3, relative: {x: 40, y: 40}}) // altBoxes.box3_ghost.x(300).y(20).width(100).height(100).fill('#07c36c').opacity(0.1) // altBoxes.box4 // .x(380) // .y(20) // .width(100) // .height(100) // .fill('#f4d708') // .opacity(0.8) // .transform({rotate: form.rotation4, position: {x: 550, y: 150}}) // altBoxes.box4_ghost.x(380).y(20).width(100).height(100).fill('#f4d708').opacity(0.1) return "Draw the boxes" }35:[{"id":"0f8635dd46c8e315cdff8b8d4ec7e0109d7dae2f6c5c1e5c1ce764293a722add212410ca481f0c542db23320949280a8206f580d5e15904a9cf46b061dc2476d","href":"https://static.observableusercontent.com/files/0f8635dd46c8e315cdff8b8d4ec7e0109d7dae2f6c5c1e5c1ce764293a722add212410ca481f0c542db23320949280a8206f580d5e15904a9cf46b061dc2476d","name":"desk_playground_3.svg","type":"image/svg+xml","lastModified":1673412968198.377,"size":4748}] 30:{"id":"4235e06ec46c9bd4","slug":"teaching-myself-svg-js","title":"Teaching myself svg.js rotations","thumbnail":"92ef2a8308841f4e666c4a518bae7342840f4dd5434739a30c74770df5f5ab32","access_level":"public","create_time":"$D2023-01-10T22:20:14.032Z","update_time":"$D2023-01-20T02:10:21.063Z","view_time":null,"first_public_time":"$D2023-01-10T22:20:14.032Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"87ed458e5c9c1a1f","login":"notionparallax","name":"Ben","avatar_url":"https://avatars-next.observableusercontent.com/15f18c20ab5c67b8bbf0b94509ff8735aebfa4d9fd187f74d0f10431fe49832e","tier":"starter_2024","bio":""},"version":796,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19925ac5d3c4a986","login":"notionparallax","name":"Ben","avatar_url":"https://avatars-next.observableusercontent.com/15f18c20ab5c67b8bbf0b94509ff8735aebfa4d9fd187f74d0f10431fe49832e","tier":null,"bio":""}],"members":[{"type":"individual","id":"19925ac5d3c4a986","login":"notionparallax","name":"Ben","avatar_url":"https://avatars-next.observableusercontent.com/15f18c20ab5c67b8bbf0b94509ff8735aebfa4d9fd187f74d0f10431fe49832e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Teaching myself svg.js rotations","cells":[{"id":26,"value":"# Teaching myself svg.js rotations\n\nI've been looking for an svg library that lets me rotate elements around an arbitrary point. [I stayed up late doing the maths once, but got stuck, and gave up](https://observablehq.com/@notionparallax/where-is-the-insertion-point-where-should-it-be). [SVG.js](https://svgjs.dev/docs/3.0/) seems like it's a good answer to that problem!\n\nI'm going to try and work out how to use it for my very specific use case of rotating desks on a floor plan. But first, let's see how it works in general:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"SVG = (await import('https://unpkg.com/@svgdotjs/svg.js?module')).SVG \n// Import solution from: https://stackoverflow.com/a/55971059/1835727\n// The CDN given in the docs is: https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js but I haven't tried that yet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"☝ Import the svg.js library from a CDN\n\n👇 This HTML section contains a `div` with the ID `box1`. It's just an element that the js can look for to inject an svg into.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"draw = SVG().addTo('#box1').size(250, 250);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"☝ actually _make_ an SVG element. This is in a statement of its own, because the next time it's called it'll make another, and another....","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"c = draw.circle(100).fill('#f06')// if you add: .center(0, 0) it'll draw the circle with its centre at 0, 0 (https://gitter.im/svgdotjs/svg.js?at=63bfb90b378d512c185aa738)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"☝ This makes a [circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle), which is super simple, but it is a bit confusing, because it makes the circle fit onto the canvas, so it's kind of the equivalent of `` because it automatically moves the centre for you. \n\nThis is great if you just want to bang a thing onto the canvas, but is a bit of extra work to calculate the transforms if you're trying to treat the `0, 0` as the origin for transforms. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"draw2 = SVG().addTo('#box2').size(250, 250);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof o_diameter = Inputs.range([0, 255], {value: 25, label: \"Diameter\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"o_pt = draw2.circle(o_diameter)\n .fill('rgb(255, 0, ' + o_diameter + ')')\n .move(-0.5 * o_diameter, -0.5 * o_diameter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"This looks good, except that it seems that that call is making a new circle every time, not updating the one that exists there already. \n\nYou can tell as the pretty gradient appears on the way back down the slider that we're actually stacking a load of circles.\n\nHow do we modify what we've got?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"draw3 = SVG().addTo('#box3').size(250, 250);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof o_diameter2 = Inputs.range([0, 255], {value: 45, label: \"Diameter\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"o_pt2 = draw3.circle()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"o_pt2.attr({cx:0, cy:0, r:o_diameter2/2}).fill('rgb(255, 0, '+o_diameter2+')')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"That works, it's not super elegant, but I'll live. Some things to note:\n- Creating the circle without any args, and then using an explicit args object ([docs for this](https://svgjs.dev/docs/3.0/manipulating/#positioning)) makes it behave as you'd expect an svg circle to behave.\n- You need to make all your elements in a kind of _without form and void_ kind of way, before you start doing stuff to them. Seems obvious in hindsight, but, it tripped me up!\n\n---\n\n## Moving onto something I can rotate!\n\ncircles aren't great for playing with rotation, they look pretty similar when they spin. Let's try some rectangles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"viewof form = Inputs.form({\n rotation1: Inputs.range([0, 360], {value: 15, label: \"A rotation (simple)\", step: 1}),\n rotation2: Inputs.range([0, 360], {value: 20, label: \"B rotation (origin)\", step: 1}),\n rotation3: Inputs.range([0, 360], {value: 25, label: \"C rotation (relative)\", step: 1}),\n rotation4: Inputs.range([0, 360], {value: 30, label: \"D rotation (position)\", step: 1}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"draw4 = SVG().addTo('#box4').size(750, 250);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"boxes = {\n const b={\n box1: draw4.rect(),\n box1_ghost: draw4.rect(),\n box2: draw4.rect(),\n box2_ghost: draw4.rect(),\n box3: draw4.rect(),\n box3_ghost: draw4.rect(),\n box4: draw4.rect(),\n box4_ghost: draw4.rect(),\n }\n return b\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"markers = {\n const markers={\n m1: draw4.circle(), \n m2:draw4.circle(), \n m3:draw4.circle(), \n // m4:draw4.circle()\n };\n return markers\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"{\n markers.m1\n .x(boxes.box1.x())\n .y(boxes.box1.y())\n .radius(3)\n .fill('red')\n .stroke({ color: 'white', opacity: 1, width: 2 })\n markers.m2\n .x(140) \n .y(10)\n .radius(3)\n .fill('blue')\n .stroke({ color: 'white', opacity: 1, width: 2 })\n markers.m3\n .x(boxes.box3.x() + 40)\n .y(boxes.box3.y() + 40)\n .radius(3)\n .fill('green')\n .stroke({ color: 'white', opacity: 1, width: 2 })\n\n return \"draw the markers\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"## Trying it with desks\n\nso, we can do this with a simple rectangle, can we do it with something more complex?\n\nHere's the basic desk as an SVG, moved into place in a few different ways, using default SVG tools:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof deskRot1 = Inputs.range([0, 360], {label: \"Desk Rotation in degrees\", step: 1, value: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"All of these are a bit annoying, compared to the way we were doing it [above](https://observablehq.com/@notionparallax/teaching-myself-svg-js#cell-123) with our pretty rectangles.\n\nCan we use SVG.js to manipulate these `use` elements?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"draw5 = SVG().addTo('#box5').size(750, 250);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"desk5 = draw5.use('desk', new URL(\"\", location))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"viewof form1 = Inputs.form({\n deskRot: Inputs.range([0, 360], {label: \"Desk Rotation\", step: 1, value:0}),\n xPos: Inputs.range([0, 740], {label: \"Desk x position\", step: 1, value:10}),\n yPos: Inputs.range([0, 150], {label: \"Desk y position\", step: 1, value:10}),\n xOff: Inputs.range([0, 100], {label: \"Desk x offset\", step: 1}),\n yOff: Inputs.range([0, 100], {label: \"Desk y offset\", step: 1}),\n rotType: Inputs.radio([\"simple\", \"origin\", \"relative\", \"position\"], {label: \"rotation type\", value: \"simple\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"{\n const deskSVG = document.importNode(new DOMParser()\n .parseFromString(await FileAttachment(\"desk_playground_3.svg\").text(), \"image/svg+xml\")\n .documentElement, true)\n const w = 100\n const h = 100\n desk5\n .height(h)\n .width(w)\n .x(form1.xPos)\n .y(form1.yPos)\n if (form1.rotType === \"simple\"){\n desk5.transform({rotate: form1.deskRot})\n } \n else if (form1.rotType === \"origin\"){\n desk5.transform({rotate: form1.deskRot, origin: {x: form1.xPos+ form1.xOff, y: form1.yPos+ form1.yOff}})\n } \n else if (form1.rotType === \"relative\"){\n desk5.transform({rotate: form1.deskRot, relative: {x: form1.xPos+ form1.xOff, y: form1.yPos+ form1.yOff}})\n } \n else if (form1.rotType === \"position\"){\n desk5.transform({rotate: form1.deskRot, position: {x: form1.xPos+ form1.xOff, y: form1.yPos+ form1.yOff}})\n }\n return \"desk rotation explorer\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"My word! That was a tremendous punish, but we got there in the end.\n\nOne way (there may be others) is to insert the element, then rotate it using `origin`. If the insertion (top left) is _(x,y)_ then the rotation origin is _(x+w, y+0.5/h)_. The other options don't seem to be all that helpful.\n\nHere's that, as a simplified bit of code: (still using the sliders above)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":600,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"draw6 = SVG().addTo('#box6').size(750, 250);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"daaask = draw6.use('desk', new URL(\"\", location))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"{\n const deskSVG = document.importNode(new DOMParser()\n .parseFromString(await FileAttachment(\"desk_playground_3.svg\").text(), \"image/svg+xml\")\n .documentElement, true) // I don't know if this is needed, I think the file is in the global namespace, but it's here just in case\n const w = 100\n const h = 100\n daaask\n .height(h)\n .width(w)\n .x(form1.xPos)\n .y(form1.yPos)\n .transform({\n rotate: form1.deskRot, \n origin: {\n x: form1.xPos+ w, \n y: form1.yPos+ h*0.5\n }\n })\n return \"draw the desk, in a way that rotates around the back, middle point\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"## Trying out a few other things\n\nThere are a few other ways of controlling the rotation. \n\n### .rotate\n\n> The rotate() method will automatically rotate elements according to the center of the element:\n```\n// rotate(degrees)\nelement.rotate(45)\n```\nAlthough you can also define a specific rotation point:\n```\n// rotate(degrees, cx, cy)\nelement.rotate(45, 50, 50)\n```\n\nand with the `origin` method of rotation, \"_origin can also be a up to 2 words speciying the corners of the element: center, top, bottom, left, right_\" so for my needs, perhaps `right center` might be what I need. Let's see: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"viewof rot7 = Inputs.range([0, 360], {label: \"Rotation\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"draw7 = SVG().addTo('#box7').size(750, 250);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"altBoxes = {\n const b={\n box1: draw7.rect(),\n box1_ghost: draw7.rect(),\n box2: draw7.rect(),\n box2_ghost: draw7.rect(),\n // box3: draw7.rect(),\n // box3_ghost: draw7.rect(),\n // box4: draw7.rect(),\n // box4_ghost: draw7.rect(),\n }\n return b\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"These work pretty well. \n\nThe left, pink, box looks bonkers, because the rotation function is called each time through the update cycle. So it's great for putting something down, but not for an interactive env like this.\n\nThe right, blue, box, has `.transform({rotate: rot7, origin: \"right center\"})` as the transform, which is even simpler than using the offset method, but less versatile if you don't want the origin point to be on one of the cardinal points or the centre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"

CSS styles

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":687,"value":"---\n## Going further\n\nPart 2 of this is [here](https://observablehq.com/@notionparallax/putting-some-desks-onto-a-map), where we try to show the desks on a map.\n\nIf we want to get fancy, can we make the map be zoom/panable? What about dragging things?\n\nLet's get those two [svg.js plugins](https://svgjs.dev/docs/3.0/plugins/), [panzoom](https://github.com/svgdotjs/svg.panzoom.js) and [draggable](https://github.com/svgdotjs/svg.draggable.js):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":657,"value":"panzoom = (await import('https://unpkg.com/@svgdotjs/svg.panzoom.js?module'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"dragable = (await import('https://unpkg.com/@svgdotjs/svg.draggable.js?module'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"draw8 = SVG()\n .addTo('#box8')\n .size(750, 250)\n .viewbox('0 0 750 250')\n .panZoom({ zoomMin: 0.5, zoomMax: 30 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"fixed_c = draw8.circle()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"drag_group = draw8.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"draggable_c = drag_group.circle()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"labelText = drag_group.text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"{\n fixed_c.cx(100).cy(150).radius(100).fill(\"rgb(255, 0, 102)\").back()//.stroke(\"black\")\n draggable_c.cx(100).cy(150).radius(80).fill(\"#10a778\").stroke(\"black\")\n labelText.text(\"Zoomies\").x(100).y(150).font({family: 'Helvetica', size: 14, anchor: 'middle', leading: '1.5em'}).front()\n drag_group.draggable()\n // TODO: this isn't showing the draggable circle, it's behind the fixed circle, so it thinks it's panning, not dragging Done, by setting the order explicity with .front() and back() https://svgjs.dev/docs/3.0/manipulating/#back\n //TODO: the drag isn't releasing. I suspect it's an interaction between the drag and the pan, and it's getting confused\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"colours = [\n {\"name\":\"Light Blue\",\"rgb\":\"rgb( 63, 218, 223)\"},\n {\"name\":\"Purple\",\"rgb\":\"rgb( 109, 103, 189)\"},\n {\"name\":\"Light Green\",\"rgb\":\"rgb( 224, 245, 50)\"},\n {\"name\":\"Light Orange\",\"rgb\":\"rgb( 255, 166, 0)\"},\n {\"name\":\"Red\",\"rgb\":\"rgb( 150, 19, 27)\"},\n {\"name\":\"Dark Blue\",\"rgb\":\"rgb( 19, 81, 156)\"},\n {\"name\":\"Medium Green\",\"rgb\":\"rgb( 153, 239, 76)\"},\n {\"name\":\"Orange\",\"rgb\":\"rgb( 237, 89, 51)\"},\n {\"name\":\"Light Yellow\",\"rgb\":\"rgb( 247, 252, 204)\"},\n {\"name\":\"Blue\",\"rgb\":\"rgb( 0, 147, 238)\"},\n {\"name\":\"Sea Green\",\"rgb\":\"rgb( 191, 233, 208)\"},\n {\"name\":\"Yellow\",\"rgb\":\"rgb( 252, 219, 0\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"draw9 = SVG()\n .addTo('#box9')\n .size(750, 250)\n .viewbox('0 0 750 250')\n .panZoom({ zoomMin: 0.5, zoomMax: 30 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":" circles = \"ABCDEFG\".split('').map((x,i)=> draw9.circle().data({name:x, number:i}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"{\n circles.forEach(c=>{\n c.x(c.data().number*100+50)\n .y(150)\n .radius(40)\n // .fill(colours[c.data().number].rgb)\n .dblclick(function() {\n console.log(this.data());\n if(this.data().fill_number){\n c.data().fill_number = c.data.number+1;\n } else {\n c.data().fill_number++;\n let num = c.fill_number % 12\n console.log(num)\n c.fill(colours[num].rgb)\n }\n // console.log(this.target);\n } )\n // .on(document, 'keydown', function(e) {\n // if(e.keyCode == 40){console.log(\"up\")}\n // if(e.keyCode == 38){console.log(\"down\")}\n // e.preventDefault()\n // })\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"