1"use strict";(self.webpackChunknodality=self.webpackChunknodality||[]).push([[1387],{3893:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"id":"nodes/copy","title":"Copy","description":"Default copy","source":"@site/docs/nodes/copy.md","sourceDirName":"nodes","slug":"/nodes/copy","permalink":"/docs/nodes/copy","draft":false,"unlisted":false,"editUrl":"https://github.com/nodalityjs/docs/edit/main/docs/nodes/copy.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Shadow","permalink":"/docs/nodes/shadow"},"next":{"title":"Filter","permalink":"/docs/nodes/filter"}}');var s=t(4848),a=t(8453);const r={},i="Copy",c={},d=[{value:"Default copy",id:"default-copy",level:2},{value:"Animating items",id:"animating-items",level:2}];function l(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,a.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.header,{children:(0,s.jsx)(e.h1,{id:"copy",children:"Copy"})}),"\n",(0,s.jsx)(e.h2,{id:"default-copy",children:"Default copy"}),"\n",(0,s.jsx)(e.p,{children:"To use the copy operation, we use these nodes:"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-js",children:'let nodes = [\n {\n op: "copy"\n }\n];\n\nlet elements = [\n {\n type: "copy",\n }\n];\n'})}),"\n",(0,s.jsxs)(e.p,{children:["This generates defaults ",(0,s.jsx)(e.code,{children:"Wrapper"})," with rotated ",(0,s.jsx)(e.code,{children:"Text"})," elements. You use ",(0,s.jsx)(e.code,{children:"static: true"})," property and ",(0,s.jsx)(e.code,{children:"keep: true"})," property to transform element without animation."]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-js",children:'new Wrapper()\n.set({\n width: "300px",\n height: "300px",\n display: "flex",\n justifyContent: "center",\n alignItems: "center",\n position: "absolute",\n id: "#first",\n scale: 0.3,\n \n})\n.add(\n Array.from({ length: 7 }).map((_, i) => {\n\n const bbox = {width: "300px", height: "300px"};\n\n const elHeight = bbox.height;\n\n const cx = 150;\n const cy = 150;\n\n const R = 150;\n\n const n = 7;\n\n // Evenly spaced angles, starting at top (-90\xb0)\n const angle = (i / n) * Math.PI * 2 - Math.PI/2;\n const dist = R + parseFloat(elHeight)/2;\n\n const x = cx + dist * Math.cos(angle);\n const y = cy + dist * Math.sin(angle);\n\n let rot = angle * 180 / Math.PI + 90;\n rot = (rot % 360 + 360) % 360;\n rot = (rot % 360 + 360) % 360;\n\n return new Text("Hello").set({\n size: "S1",\n color: "green",\n font: "Arial",\n left: `${x}px`,\n top: `${y}px`,\n transform: {\n op: {\n name: "transform",\n transform: {\n static: true,\n keep: true,\n values: [\n "tx:-50%",\n "ty:-50%",\n `rotate(${rot}deg)`\n ]\n }\n }\n }\n })\n\n \n })\n).render("#mount"); \n'})}),"\n",(0,s.jsx)(e.h2,{id:"animating-items",children:"Animating items"}),"\n",(0,s.jsxs)(e.p,{children:["You can also add animation using the ",(0,s.jsx)(e.code,{children:"animation"})," key.\nYou can then customize the ",(0,s.jsx)(e.a,{href:"/docs/nodes/animation",children:"animation"})," in the generated code."]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-js",children:'let nodes = [\n {\n op: "copy",\n animation: true\n }\n];\n'})})]})}function p(n={}){const{wrapper:e}={...(0,a.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(l,{...n})}):l(n)}},8453:(n,e,t)=>{t.d(e,{R:()=>r,x:()=>i});var o=t(6540);const s={},a=o.createContext(s);function r(n){const e=o.useContext(a);return o.useMemo(function(){return"function"==typeof n?n(e):{...e,...n}},[e,n])}function i(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:r(n.components),o.createElement(a.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.