From 82f424c86f41a692381cd22857d93413aa10a065 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 6 Mar 2024 06:57:13 +0000 Subject: [PATCH] deploy: b5a856763bd536e273fb09f59d51974479ea79f3 --- 404.html | 2 +- assets/js/0cb07e4e.38b51982.js | 1 - assets/js/0cb07e4e.9b474854.js | 1 + assets/js/15cc4295.691c7a89.js | 1 - assets/js/15cc4295.cad88329.js | 1 + assets/js/19a7aa20.56005e39.js | 1 - assets/js/19a7aa20.774f0535.js | 1 + .../js/{42b33983.9aa762c3.js => 42b33983.f2420e08.js} | 2 +- assets/js/6ecc9e9d.afacd7df.js | 1 + assets/js/6ecc9e9d.d48a781d.js | 1 - assets/js/d81783d9.f39c902d.js | 1 - assets/js/d81783d9.fa912766.js | 1 + assets/js/f3168f4a.3e71971a.js | 1 + assets/js/f3168f4a.3fc781c3.js | 1 - assets/js/f94d6d54.d41e6c23.js | 1 - assets/js/f94d6d54.e9a2af06.js | 1 + ...time~main.ce8c23e5.js => runtime~main.4e027822.js} | 2 +- docs/api/components/Image/index.html | 2 +- docs/api/components/InputStream/index.html | 2 +- docs/api/components/Rescaler/index.html | 11 ++++++++--- docs/api/components/Shader/index.html | 2 +- docs/api/components/Text/index.html | 2 +- docs/api/components/Tiles/index.html | 11 ++++++++--- docs/api/components/View/index.html | 11 ++++++++--- docs/api/components/WebView/index.html | 2 +- docs/api/generated/component-Image/index.html | 2 +- docs/api/generated/component-InputStream/index.html | 2 +- docs/api/generated/component-Rescaler/index.html | 11 ++++++++--- docs/api/generated/component-Text/index.html | 2 +- docs/api/generated/component-Tiles/index.html | 11 ++++++++--- docs/api/generated/component-View/index.html | 11 ++++++++--- docs/api/generated/component-WebView/index.html | 2 +- docs/api/generated/renderer-Mp4/index.html | 2 +- docs/api/generated/renderer-RtpInputStream/index.html | 8 +++----- docs/api/generated/renderer-Shader/index.html | 2 +- docs/api/generated/renderer-WebRenderer/index.html | 2 +- docs/api/inputs/mp4/index.html | 2 +- docs/api/inputs/rtp/index.html | 6 ++---- docs/api/renderers/image/index.html | 2 +- docs/api/renderers/shader/index.html | 2 +- docs/api/renderers/web/index.html | 2 +- docs/api/routes/index.html | 2 +- docs/category/api-reference/index.html | 2 +- docs/category/deployment/index.html | 2 +- docs/common/absolute-position/index.html | 2 +- docs/concept/component/index.html | 2 +- docs/concept/layouts/index.html | 2 +- docs/concept/shaders/index.html | 2 +- docs/concept/web/index.html | 2 +- docs/deployment/configuration/index.html | 2 +- docs/get-started/elixir/index.html | 2 +- docs/get-started/index.html | 2 +- docs/get-started/node/index.html | 2 +- docs/intro/index.html | 2 +- index.html | 2 +- 55 files changed, 93 insertions(+), 67 deletions(-) delete mode 100644 assets/js/0cb07e4e.38b51982.js create mode 100644 assets/js/0cb07e4e.9b474854.js delete mode 100644 assets/js/15cc4295.691c7a89.js create mode 100644 assets/js/15cc4295.cad88329.js delete mode 100644 assets/js/19a7aa20.56005e39.js create mode 100644 assets/js/19a7aa20.774f0535.js rename assets/js/{42b33983.9aa762c3.js => 42b33983.f2420e08.js} (52%) create mode 100644 assets/js/6ecc9e9d.afacd7df.js delete mode 100644 assets/js/6ecc9e9d.d48a781d.js delete mode 100644 assets/js/d81783d9.f39c902d.js create mode 100644 assets/js/d81783d9.fa912766.js create mode 100644 assets/js/f3168f4a.3e71971a.js delete mode 100644 assets/js/f3168f4a.3fc781c3.js delete mode 100644 assets/js/f94d6d54.d41e6c23.js create mode 100644 assets/js/f94d6d54.e9a2af06.js rename assets/js/{runtime~main.ce8c23e5.js => runtime~main.4e027822.js} (94%) diff --git a/404.html b/404.html index 16db90554..d10a5348a 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ Page Not Found | Live Compositor - + diff --git a/assets/js/0cb07e4e.38b51982.js b/assets/js/0cb07e4e.38b51982.js deleted file mode 100644 index 14c7fffa5..000000000 --- a/assets/js/0cb07e4e.38b51982.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[8780,1778,7598],{8169:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>h});var t=i(5893),o=i(1151),s=i(2732),l=i(9342);const r={sidebar_position:3,hide_table_of_contents:!0},d="Rescaler",c={id:"api/components/Rescaler",title:"Rescaler",description:"Rescaler is a layout component responsible for rescaling other components.",source:"@site/pages/api/components/Rescaler.md",sourceDirName:"api/components",slug:"/api/components/Rescaler",permalink:"/docs/api/components/Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"View",permalink:"/docs/api/components/View"},next:{title:"Tiles",permalink:"/docs/api/components/Tiles"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," is a layout component responsible for rescaling other components."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(l.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," ",(0,t.jsx)(n.strong,{children:"does not"})," support absolute positioning for its child components. A child component will still be rendered, but all fields like ",(0,t.jsx)(n.code,{children:"top"}),", ",(0,t.jsx)(n.code,{children:"left"}),", ",(0,t.jsx)(n.code,{children:"right"}),", ",(0,t.jsx)(n.code,{children:"bottom"}),", and ",(0,t.jsx)(n.code,{children:"rotation"})," will be ignored."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," can be absolutely positioned relative to its parent, if the parent component supports it."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," always have exactly one child that will be proportionally rescaled to match the parent."]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["On the scene update, a ",(0,t.jsx)(n.code,{children:"Rescaler"})," component will animate between the original state and the new one if the ",(0,t.jsx)(n.code,{children:"transition"})," field is defined. Both the original and the new scene need to define a component with the same ",(0,t.jsx)(n.code,{children:"id"}),". Currently, only some of the fields support animated transitions:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," / ",(0,t.jsx)(n.code,{children:"height"})," - Only supported within the same positioning mode. If the positioning mode changes between the old scene and the new one, the transition will not work."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," / ",(0,t.jsx)(n.code,{children:"top"})," / ",(0,t.jsx)(n.code,{children:"left"})," / ",(0,t.jsx)(n.code,{children:"right"})," / ",(0,t.jsx)(n.code,{children:"rotation"})," - Only supports transition when changing a value of the same field. If the old scene defines a ",(0,t.jsx)(n.code,{children:"left"})," field and the new one does not, the transition will not work."]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},2732:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"api/generated/component-Rescaler",title:"component-Rescaler",description:"Rescaler",source:"@site/pages/api/generated/component-Rescaler.md",sourceDirName:"api/generated",slug:"/api/generated/component-Rescaler",permalink:"/docs/api/generated/component-Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},d={},c=[{value:"Rescaler",id:"rescaler",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={code:"code",h2:"h2",h4:"h4",li:"li",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Rescaler = {\n id?: string;\n child: Component;\n mode?: "fit" | "fill";\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n width?: f32;\n height?: f32;\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"child"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mode"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"fit"'})]}),") Resize mode:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fill"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},d={},c=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>l});var t=i(7294);const o={},s=t.createContext(o);function l(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0cb07e4e.9b474854.js b/assets/js/0cb07e4e.9b474854.js new file mode 100644 index 000000000..c0c9f007c --- /dev/null +++ b/assets/js/0cb07e4e.9b474854.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[8780,1778,7598],{8169:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>r,metadata:()=>d,toc:()=>h});var t=i(5893),o=i(1151),s=i(2732),l=i(9342);const r={sidebar_position:3,hide_table_of_contents:!0},c="Rescaler",d={id:"api/components/Rescaler",title:"Rescaler",description:"Rescaler is a layout component responsible for rescaling other components.",source:"@site/pages/api/components/Rescaler.md",sourceDirName:"api/components",slug:"/api/components/Rescaler",permalink:"/docs/api/components/Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"View",permalink:"/docs/api/components/View"},next:{title:"Tiles",permalink:"/docs/api/components/Tiles"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," is a layout component responsible for rescaling other components."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(l.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," ",(0,t.jsx)(n.strong,{children:"does not"})," support absolute positioning for its child components. A child component will still be rendered, but all fields like ",(0,t.jsx)(n.code,{children:"top"}),", ",(0,t.jsx)(n.code,{children:"left"}),", ",(0,t.jsx)(n.code,{children:"right"}),", ",(0,t.jsx)(n.code,{children:"bottom"}),", and ",(0,t.jsx)(n.code,{children:"rotation"})," will be ignored."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," can be absolutely positioned relative to its parent, if the parent component supports it."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Rescaler"})," always have exactly one child that will be proportionally rescaled to match the parent."]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["On the scene update, a ",(0,t.jsx)(n.code,{children:"Rescaler"})," component will animate between the original state and the new one if the ",(0,t.jsx)(n.code,{children:"transition"})," field is defined. Both the original and the new scene need to define a component with the same ",(0,t.jsx)(n.code,{children:"id"}),". Currently, only some of the fields support animated transitions:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," / ",(0,t.jsx)(n.code,{children:"height"})," - Only supported within the same positioning mode. If the positioning mode changes between the old scene and the new one, the transition will not work."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," / ",(0,t.jsx)(n.code,{children:"top"})," / ",(0,t.jsx)(n.code,{children:"left"})," / ",(0,t.jsx)(n.code,{children:"right"})," / ",(0,t.jsx)(n.code,{children:"rotation"})," - Only supports transition when changing a value of the same field. If the old scene defines a ",(0,t.jsx)(n.code,{children:"left"})," field and the new one does not, the transition will not work."]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},2732:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"api/generated/component-Rescaler",title:"component-Rescaler",description:"Rescaler",source:"@site/pages/api/generated/component-Rescaler.md",sourceDirName:"api/generated",slug:"/api/generated/component-Rescaler",permalink:"/docs/api/generated/component-Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},d=[{value:"Rescaler",id:"rescaler",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Rescaler = {\n id?: string;\n child: Component;\n mode?: "fit" | "fill";\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n width?: f32;\n height?: f32;\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"child"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mode"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"fit"'})]}),") Resize mode:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fill"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,t.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,t.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,t.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,t.jsx)(n.code,{children:"x1"}),", ",(0,t.jsx)(n.code,{children:"y1"}),", ",(0,t.jsx)(n.code,{children:"x2"})," and ",(0,t.jsx)(n.code,{children:"y2"}),". The ",(0,t.jsx)(n.code,{children:"x1"})," and ",(0,t.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,t.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},d=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>l});var t=i(7294);const o={},s=t.createContext(o);function l(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/15cc4295.691c7a89.js b/assets/js/15cc4295.691c7a89.js deleted file mode 100644 index 7368fdeba..000000000 --- a/assets/js/15cc4295.691c7a89.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1778],{2732:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=i(5893),s=i(1151);const o={},l=void 0,r={id:"api/generated/component-Rescaler",title:"component-Rescaler",description:"Rescaler",source:"@site/pages/api/generated/component-Rescaler.md",sourceDirName:"api/generated",slug:"/api/generated/component-Rescaler",permalink:"/docs/api/generated/component-Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},d={},c=[{value:"Rescaler",id:"rescaler",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={code:"code",h2:"h2",h4:"h4",li:"li",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Rescaler = {\n id?: string;\n child: Component;\n mode?: "fit" | "fill";\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n width?: f32;\n height?: f32;\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"child"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mode"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"fit"'})]}),") Resize mode:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fill"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>l});var t=i(7294);const s={},o=t.createContext(s);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/15cc4295.cad88329.js b/assets/js/15cc4295.cad88329.js new file mode 100644 index 000000000..74c4f69b6 --- /dev/null +++ b/assets/js/15cc4295.cad88329.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1778],{2732:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=i(5893),s=i(1151);const o={},l=void 0,r={id:"api/generated/component-Rescaler",title:"component-Rescaler",description:"Rescaler",source:"@site/pages/api/generated/component-Rescaler.md",sourceDirName:"api/generated",slug:"/api/generated/component-Rescaler",permalink:"/docs/api/generated/component-Rescaler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},d={},c=[{value:"Rescaler",id:"rescaler",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"rescaler",children:"Rescaler"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Rescaler = {\n id?: string;\n child: Component;\n mode?: "fit" | "fill";\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n width?: f32;\n height?: f32;\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"child"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"mode"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"fit"'})]}),") Resize mode:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fill"'})," - Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,t.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,t.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,t.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,t.jsx)(n.code,{children:"x1"}),", ",(0,t.jsx)(n.code,{children:"y1"}),", ",(0,t.jsx)(n.code,{children:"x2"})," and ",(0,t.jsx)(n.code,{children:"y2"}),". The ",(0,t.jsx)(n.code,{children:"x1"})," and ",(0,t.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,t.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>l});var t=i(7294);const s={},o=t.createContext(s);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/19a7aa20.56005e39.js b/assets/js/19a7aa20.56005e39.js deleted file mode 100644 index 345f54e6f..000000000 --- a/assets/js/19a7aa20.56005e39.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[580],{5660:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>c});var t=i(5893),o=i(1151);const s={},r=void 0,d={id:"api/generated/component-View",title:"component-View",description:"View",source:"@site/pages/api/generated/component-View.md",sourceDirName:"api/generated",slug:"/api/generated/component-View",permalink:"/docs/api/generated/component-View",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[{value:"View",id:"view",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={admonition:"admonition",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"view",children:"View"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type View = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n direction?: "row" | "column";\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n overflow?: "visible" | "hidden" | "fit";\n background_color_rgba?: string;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"direction"})," - Direction defines how static children are positioned inside a View component.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"row"'})," - Children positioned from left to right."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"column"'})," - Children positioned from top to bottom."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between the bottom edge of this component and the bottom edge of its parent. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"overflow"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"hidden"'})]}),") Controls what happens to content that is too big to fit into an area.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"visible"'})," - Render everything, including content that extends beyond their parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"hidden"'})," - Render only parts of the children that are inside their parent area."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - If children components are too big to fit inside the parent, resize everything inside to fit.\nComponents that have unknown sizes will be treated as if they had a size 0 when calculating scaling factor.","\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"This will resize everything inside, even absolutely positioned elements. For example, if you have an element in the bottom right corner and the content will be rescaled by a factor 0.5x, then that component will end up in the middle of its parent"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>r});var t=i(7294);const o={},s=t.createContext(o);function r(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/19a7aa20.774f0535.js b/assets/js/19a7aa20.774f0535.js new file mode 100644 index 000000000..e95f5207e --- /dev/null +++ b/assets/js/19a7aa20.774f0535.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[580],{5660:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>c});var t=i(5893),o=i(1151);const s={},r=void 0,d={id:"api/generated/component-View",title:"component-View",description:"View",source:"@site/pages/api/generated/component-View.md",sourceDirName:"api/generated",slug:"/api/generated/component-View",permalink:"/docs/api/generated/component-View",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[{value:"View",id:"view",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"view",children:"View"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type View = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n direction?: "row" | "column";\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n overflow?: "visible" | "hidden" | "fit";\n background_color_rgba?: string;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"direction"})," - Direction defines how static children are positioned inside a View component.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"row"'})," - Children positioned from left to right."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"column"'})," - Children positioned from top to bottom."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between the bottom edge of this component and the bottom edge of its parent. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"overflow"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"hidden"'})]}),") Controls what happens to content that is too big to fit into an area.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"visible"'})," - Render everything, including content that extends beyond their parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"hidden"'})," - Render only parts of the children that are inside their parent area."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - If children components are too big to fit inside the parent, resize everything inside to fit.\nComponents that have unknown sizes will be treated as if they had a size 0 when calculating scaling factor.","\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"This will resize everything inside, even absolutely positioned elements. For example, if you have an element in the bottom right corner and the content will be rescaled by a factor 0.5x, then that component will end up in the middle of its parent"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,t.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,t.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,t.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,t.jsx)(n.code,{children:"x1"}),", ",(0,t.jsx)(n.code,{children:"y1"}),", ",(0,t.jsx)(n.code,{children:"x2"})," and ",(0,t.jsx)(n.code,{children:"y2"}),". The ",(0,t.jsx)(n.code,{children:"x1"})," and ",(0,t.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,t.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>r});var t=i(7294);const o={},s=t.createContext(o);function r(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/42b33983.9aa762c3.js b/assets/js/42b33983.f2420e08.js similarity index 52% rename from assets/js/42b33983.9aa762c3.js rename to assets/js/42b33983.f2420e08.js index 7a5808a9b..6f32e9614 100644 --- a/assets/js/42b33983.9aa762c3.js +++ b/assets/js/42b33983.f2420e08.js @@ -1 +1 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[2402,7598,1792],{2958:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>m,frontMatter:()=>r,metadata:()=>d,toc:()=>h});var t=i(5893),o=i(1151),s=i(3230),l=i(9342);const r={sidebar_position:4,hide_table_of_contents:!0},c="Tiles",d={id:"api/components/Tiles",title:"Tiles",description:"Tiles is a layout component that places all the child components next to each other while maximizing the use of available space. The component divides its area into multiple rectangles/tiles, one for each child component. All of those rectangles are the same size and do not overlap over each other.",source:"@site/pages/api/components/Tiles.md",sourceDirName:"api/components",slug:"/api/components/Tiles",permalink:"/docs/api/components/Tiles",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"Rescaler",permalink:"/docs/api/components/Rescaler"},next:{title:"Text",permalink:"/docs/api/components/Text"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"tiles",children:"Tiles"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," is a layout component that places all the child components next to each other while maximizing the use of available space. The component divides its area into multiple rectangles/tiles, one for each child component. All of those rectangles are the same size and do not overlap over each other."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(l.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," ",(0,t.jsx)(n.strong,{children:"does not"})," support absolute positioning for its child components. All children will still be rendered, but all fields like ",(0,t.jsx)(n.code,{children:"top"}),", ",(0,t.jsx)(n.code,{children:"left"}),", ",(0,t.jsx)(n.code,{children:"right"}),", ",(0,t.jsx)(n.code,{children:"bottom"}),", and ",(0,t.jsx)(n.code,{children:"rotation"})," will be ignored."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," ",(0,t.jsx)(n.strong,{children:"can not"})," be absolutely positioned relative to it's parent."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsx)(n.p,{children:"The component calculates the number of rows and columns that children should be divided into. The result is based on:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The size of the ",(0,t.jsx)(n.code,{children:"Tiles"})," component."]}),"\n",(0,t.jsxs)(n.li,{children:["Aspect ratio of a single tile (",(0,t.jsx)(n.code,{children:"tile_aspect_ratio"})," field)."]}),"\n",(0,t.jsx)(n.li,{children:"Number of children components."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"An optimal number of rows and columns should result in a layout that covers the biggest part of its area. Child components are placed based on their order, from left to right, and row-by-row from top to bottom."}),"\n",(0,t.jsx)(n.p,{children:"When placing a child component inside a tile, the component might change its size."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Non-layout component scales proportionally to fit inside the parent. If the aspect ratios of a child and its parent do not match, then the component will be centered vertically or horizontally."}),"\n",(0,t.jsxs)(n.li,{children:["Layout component takes the ",(0,t.jsx)(n.code,{children:"width"})," and ",(0,t.jsx)(n.code,{children:"height"})," of a tile. It ignores its own ",(0,t.jsx)(n.code,{children:"width"}),"/",(0,t.jsx)(n.code,{children:"height"})," fields if they are defined."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Tiles"})," component does not support size transitions in the same way as ",(0,t.jsx)(n.code,{children:"View"})," or ",(0,t.jsx)(n.code,{children:"Rescaler"})," do. If you want to achieve that effect, you can wrap a ",(0,t.jsx)(n.code,{children:"Tiles"})," component inside a ",(0,t.jsx)(n.code,{children:"View"})," and define a transition on ",(0,t.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Currently supported transitions:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Adding a new component. When a component is added, all of the existing components move to their new location within ",(0,t.jsx)(n.code,{children:"transition.duration_ms"})," time. At the end of a transition, the new child component shows up without an animation."]}),"\n",(0,t.jsxs)(n.li,{children:["Removing an existing component. When a component is removed, a tile with that item disappears immediately without any animation, and the remaining elements move to their new location within ",(0,t.jsx)(n.code,{children:"transition.duration_ms"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"Changing the order of child components."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Adding/removing/changing the order of components can only be properly defined if there is a way to identify child components. We need to know if a specific child in a scene update should be treated as the same item as a child from a previous scene. Currently identity of a child component is resolved in the following way:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If a child component has an ",(0,t.jsx)(n.code,{children:'"id"'})," defined, then this is its primary way of identification."]}),"\n",(0,t.jsxs)(n.li,{children:["If a child component does not have an ",(0,t.jsx)(n.code,{children:'"id"'})," defined, then it's identified by order inside the ",(0,t.jsx)(n.code,{children:"children"})," list, while only counting components without an ",(0,t.jsx)(n.code,{children:'"id"'}),". For example:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["A component without an ",(0,t.jsx)(n.code,{children:'"id"'})," is 1st child in the old scene. After an update, the 1st component has an ",(0,t.jsx)(n.code,{children:'"id"'}),", but the 2nd does not. In this situation, 1st component in the old scene and 2nd in the new one are considered to be the same component. It's the same because 2nd component in a new scene is still 1st if you only count components without an id."]}),"\n",(0,t.jsxs)(n.li,{children:["There are two components without any ",(0,t.jsx)(n.code,{children:'"id"'})," in the old scene. After an update, they switched places (still without any ",(0,t.jsx)(n.code,{children:'"id"'}),"). In that case, there would be no transition. Identification is based on the child components order, so from the ",(0,t.jsx)(n.code,{children:"Tiles"})," component perspective only the content of those children has changed."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},3230:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"api/generated/component-Tiles",title:"component-Tiles",description:"Tiles",source:"@site/pages/api/generated/component-Tiles.md",sourceDirName:"api/generated",slug:"/api/generated/component-Tiles",permalink:"/docs/api/generated/component-Tiles",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},d=[{value:"Tiles",id:"tiles",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={code:"code",h2:"h2",h4:"h4",li:"li",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"tiles",children:"Tiles"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Tiles = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n background_color_rgba?: string;\n tile_aspect_ratio?: string;\n margin?: f32;\n padding?: f32;\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"tile_aspect_ratio"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"16:9"'})]}),") Aspect ratio of a tile in ",(0,t.jsx)(n.code,{children:'"W:H"'})," format, where W and H are integers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"margin"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Margin of each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"padding"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Padding on each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a ",(0,t.jsx)(n.code,{children:"Tiles"})," component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var t=i(5893),o=i(1151);const s={},l=void 0,r={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},d=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>l});var t=i(7294);const o={},s=t.createContext(o);function l(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[2402,7598,1792],{2958:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var t=i(5893),o=i(1151),s=i(3230),c=i(9342);const l={sidebar_position:4,hide_table_of_contents:!0},r="Tiles",d={id:"api/components/Tiles",title:"Tiles",description:"Tiles is a layout component that places all the child components next to each other while maximizing the use of available space. The component divides its area into multiple rectangles/tiles, one for each child component. All of those rectangles are the same size and do not overlap over each other.",source:"@site/pages/api/components/Tiles.md",sourceDirName:"api/components",slug:"/api/components/Tiles",permalink:"/docs/api/components/Tiles",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"Rescaler",permalink:"/docs/api/components/Rescaler"},next:{title:"Text",permalink:"/docs/api/components/Text"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"tiles",children:"Tiles"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," is a layout component that places all the child components next to each other while maximizing the use of available space. The component divides its area into multiple rectangles/tiles, one for each child component. All of those rectangles are the same size and do not overlap over each other."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(c.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," ",(0,t.jsx)(n.strong,{children:"does not"})," support absolute positioning for its child components. All children will still be rendered, but all fields like ",(0,t.jsx)(n.code,{children:"top"}),", ",(0,t.jsx)(n.code,{children:"left"}),", ",(0,t.jsx)(n.code,{children:"right"}),", ",(0,t.jsx)(n.code,{children:"bottom"}),", and ",(0,t.jsx)(n.code,{children:"rotation"})," will be ignored."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"Tiles"})," ",(0,t.jsx)(n.strong,{children:"can not"})," be absolutely positioned relative to it's parent."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsx)(n.p,{children:"The component calculates the number of rows and columns that children should be divided into. The result is based on:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The size of the ",(0,t.jsx)(n.code,{children:"Tiles"})," component."]}),"\n",(0,t.jsxs)(n.li,{children:["Aspect ratio of a single tile (",(0,t.jsx)(n.code,{children:"tile_aspect_ratio"})," field)."]}),"\n",(0,t.jsx)(n.li,{children:"Number of children components."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"An optimal number of rows and columns should result in a layout that covers the biggest part of its area. Child components are placed based on their order, from left to right, and row-by-row from top to bottom."}),"\n",(0,t.jsx)(n.p,{children:"When placing a child component inside a tile, the component might change its size."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Non-layout component scales proportionally to fit inside the parent. If the aspect ratios of a child and its parent do not match, then the component will be centered vertically or horizontally."}),"\n",(0,t.jsxs)(n.li,{children:["Layout component takes the ",(0,t.jsx)(n.code,{children:"width"})," and ",(0,t.jsx)(n.code,{children:"height"})," of a tile. It ignores its own ",(0,t.jsx)(n.code,{children:"width"}),"/",(0,t.jsx)(n.code,{children:"height"})," fields if they are defined."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Tiles"})," component does not support size transitions in the same way as ",(0,t.jsx)(n.code,{children:"View"})," or ",(0,t.jsx)(n.code,{children:"Rescaler"})," do. If you want to achieve that effect, you can wrap a ",(0,t.jsx)(n.code,{children:"Tiles"})," component inside a ",(0,t.jsx)(n.code,{children:"View"})," and define a transition on ",(0,t.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Currently supported transitions:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Adding a new component. When a component is added, all of the existing components move to their new location within ",(0,t.jsx)(n.code,{children:"transition.duration_ms"})," time. At the end of a transition, the new child component shows up without an animation."]}),"\n",(0,t.jsxs)(n.li,{children:["Removing an existing component. When a component is removed, a tile with that item disappears immediately without any animation, and the remaining elements move to their new location within ",(0,t.jsx)(n.code,{children:"transition.duration_ms"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"Changing the order of child components."}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Adding/removing/changing the order of components can only be properly defined if there is a way to identify child components. We need to know if a specific child in a scene update should be treated as the same item as a child from a previous scene. Currently identity of a child component is resolved in the following way:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If a child component has an ",(0,t.jsx)(n.code,{children:'"id"'})," defined, then this is its primary way of identification."]}),"\n",(0,t.jsxs)(n.li,{children:["If a child component does not have an ",(0,t.jsx)(n.code,{children:'"id"'})," defined, then it's identified by order inside the ",(0,t.jsx)(n.code,{children:"children"})," list, while only counting components without an ",(0,t.jsx)(n.code,{children:'"id"'}),". For example:","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["A component without an ",(0,t.jsx)(n.code,{children:'"id"'})," is 1st child in the old scene. After an update, the 1st component has an ",(0,t.jsx)(n.code,{children:'"id"'}),", but the 2nd does not. In this situation, 1st component in the old scene and 2nd in the new one are considered to be the same component. It's the same because 2nd component in a new scene is still 1st if you only count components without an id."]}),"\n",(0,t.jsxs)(n.li,{children:["There are two components without any ",(0,t.jsx)(n.code,{children:'"id"'})," in the old scene. After an update, they switched places (still without any ",(0,t.jsx)(n.code,{children:'"id"'}),"). In that case, there would be no transition. Identification is based on the child components order, so from the ",(0,t.jsx)(n.code,{children:"Tiles"})," component perspective only the content of those children has changed."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},3230:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>h,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var t=i(5893),o=i(1151);const s={},c=void 0,l={id:"api/generated/component-Tiles",title:"component-Tiles",description:"Tiles",source:"@site/pages/api/generated/component-Tiles.md",sourceDirName:"api/generated",slug:"/api/generated/component-Tiles",permalink:"/docs/api/generated/component-Tiles",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},r={},d=[{value:"Tiles",id:"tiles",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"tiles",children:"Tiles"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Tiles = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n background_color_rgba?: string;\n tile_aspect_ratio?: string;\n margin?: f32;\n padding?: f32;\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"tile_aspect_ratio"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"16:9"'})]}),") Aspect ratio of a tile in ",(0,t.jsx)(n.code,{children:'"W:H"'})," format, where W and H are integers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"margin"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Margin of each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"padding"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Padding on each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a ",(0,t.jsx)(n.code,{children:"Tiles"})," component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,t.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,t.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,t.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,t.jsx)(n.code,{children:"x1"}),", ",(0,t.jsx)(n.code,{children:"y1"}),", ",(0,t.jsx)(n.code,{children:"x2"})," and ",(0,t.jsx)(n.code,{children:"y2"}),". The ",(0,t.jsx)(n.code,{children:"x1"})," and ",(0,t.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,t.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>h,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var t=i(5893),o=i(1151);const s={},c=void 0,l={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},r={},d=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>l,a:()=>c});var t=i(7294);const o={},s=t.createContext(o);function c(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6ecc9e9d.afacd7df.js b/assets/js/6ecc9e9d.afacd7df.js new file mode 100644 index 000000000..9c3c6364d --- /dev/null +++ b/assets/js/6ecc9e9d.afacd7df.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[8646,580,7598],{6239:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>h});var t=i(5893),o=i(1151),s=i(5660),d=i(9342);const r={sidebar_position:2,hide_table_of_contents:!0},l="View",c={id:"api/components/View",title:"View",description:"View is the compositor's core layout mechanism. Its role is analogous to the",source:"@site/pages/api/components/View.md",sourceDirName:"api/components",slug:"/api/components/View",permalink:"/docs/api/components/View",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"InputStream",permalink:"/docs/api/components/InputStream"},next:{title:"Rescaler",permalink:"/docs/api/components/Rescaler"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"For direction=row:",id:"for-directionrow",level:4},{value:"For direction=column:",id:"for-directioncolumn",level:4},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"view",children:"View"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"View"})," is the compositor's core layout mechanism. Its role is analogous to the\n",(0,t.jsx)(n.code,{children:"
"})," tag in HTML. It provides a container with basic styling that can be further composed."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(d.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"View"})," supports absolute positioning for its child components."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"View"})," can be absolutely positioned relative to its parent if the parent component supports it."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsxs)(n.p,{children:["When children of a ",(0,t.jsx)(n.code,{children:"View"})," component have a static position, they are placed next to each other."]}),"\n",(0,t.jsxs)(n.h4,{id:"for-directionrow",children:["For ",(0,t.jsx)(n.code,{children:"direction=row"}),":"]}),"\n",(0,t.jsxs)(n.p,{children:["Children of a ",(0,t.jsx)(n.code,{children:"View"})," component form a row, with items aligned to the top. The size of each child will be calculated in the following way:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"width"})," or ",(0,t.jsx)(n.code,{children:"height"})," of a child component is defined, then those values take priority."]}),"\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"height"})," is not defined, the component will have the same ",(0,t.jsx)(n.code,{children:"height"})," as its parent."]}),"\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"width"})," is not defined, we calculate the sum ",(0,t.jsx)(n.code,{children:"width"})," of all components with that value defined.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If it is larger than the parent's ",(0,t.jsx)(n.code,{children:"width"}),", then the ",(0,t.jsx)(n.code,{children:"width"})," of the rest of the components is zero."]}),"\n",(0,t.jsxs)(n.li,{children:["If it is smaller than the parent's ",(0,t.jsx)(n.code,{children:"width"}),", calculate the difference and divide the resulting value equally between all children with unknown widths."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.h4,{id:"for-directioncolumn",children:["For ",(0,t.jsx)(n.code,{children:"direction=column"}),":"]}),"\n",(0,t.jsxs)(n.p,{children:["Analogous to the ",(0,t.jsx)(n.code,{children:"direction=row"})," case, but children form a column instead, with items aligned to the left."]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["On the scene update, a ",(0,t.jsx)(n.code,{children:"View"})," component will animate between the original state and the new one if the ",(0,t.jsx)(n.code,{children:"transition"})," field is defined. Both the original and the new scene need to define a component with the same ",(0,t.jsx)(n.code,{children:"id"}),". Currently, only some of the fields support animated transitions:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," / ",(0,t.jsx)(n.code,{children:"height"})," - Only supported within the same positioning mode. If the positioning mode changes between the old scene and the new one, the transition will not work."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," / ",(0,t.jsx)(n.code,{children:"top"})," / ",(0,t.jsx)(n.code,{children:"left"})," / ",(0,t.jsx)(n.code,{children:"right"})," / ",(0,t.jsx)(n.code,{children:"rotation"})," - Only supports transition when changing a value of the same field. If the old scene defines a ",(0,t.jsx)(n.code,{children:"left"})," field and the new one does not, the transition will not work."]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},5660:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(5893),o=i(1151);const s={},d=void 0,r={id:"api/generated/component-View",title:"component-View",description:"View",source:"@site/pages/api/generated/component-View.md",sourceDirName:"api/generated",slug:"/api/generated/component-View",permalink:"/docs/api/generated/component-View",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[{value:"View",id:"view",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"view",children:"View"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type View = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n direction?: "row" | "column";\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n overflow?: "visible" | "hidden" | "fit";\n background_color_rgba?: string;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"direction"})," - Direction defines how static children are positioned inside a View component.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"row"'})," - Children positioned from left to right."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"column"'})," - Children positioned from top to bottom."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between the bottom edge of this component and the bottom edge of its parent. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"overflow"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"hidden"'})]}),") Controls what happens to content that is too big to fit into an area.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"visible"'})," - Render everything, including content that extends beyond their parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"hidden"'})," - Render only parts of the children that are inside their parent area."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - If children components are too big to fit inside the parent, resize everything inside to fit.\nComponents that have unknown sizes will be treated as if they had a size 0 when calculating scaling factor.","\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"This will resize everything inside, even absolutely positioned elements. For example, if you have an element in the bottom right corner and the content will be rescaled by a factor 0.5x, then that component will end up in the middle of its parent"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,t.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,t.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,t.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,t.jsx)(n.code,{children:"x1"}),", ",(0,t.jsx)(n.code,{children:"y1"}),", ",(0,t.jsx)(n.code,{children:"x2"})," and ",(0,t.jsx)(n.code,{children:"y2"}),". The ",(0,t.jsx)(n.code,{children:"x1"})," and ",(0,t.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,t.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,t.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var t=i(5893),o=i(1151);const s={},d=void 0,r={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>d});var t=i(7294);const o={},s=t.createContext(o);function d(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6ecc9e9d.d48a781d.js b/assets/js/6ecc9e9d.d48a781d.js deleted file mode 100644 index 546ef677f..000000000 --- a/assets/js/6ecc9e9d.d48a781d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[8646,580,7598],{6239:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>d,metadata:()=>c,toc:()=>h});var t=i(5893),o=i(1151),s=i(5660),r=i(9342);const d={sidebar_position:2,hide_table_of_contents:!0},l="View",c={id:"api/components/View",title:"View",description:"View is the compositor's core layout mechanism. Its role is analogous to the",source:"@site/pages/api/components/View.md",sourceDirName:"api/components",slug:"/api/components/View",permalink:"/docs/api/components/View",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,hide_table_of_contents:!0},sidebar:"sidebar",previous:{title:"InputStream",permalink:"/docs/api/components/InputStream"},next:{title:"Rescaler",permalink:"/docs/api/components/Rescaler"}},a={},h=[{value:"Absolute positioning",id:"absolute-positioning",level:3},{value:"Static positioning",id:"static-positioning",level:3},{value:"For direction=row:",id:"for-directionrow",level:4},{value:"For direction=column:",id:"for-directioncolumn",level:4},{value:"Transitions",id:"transitions",level:3}];function p(e){const n={code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"view",children:"View"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"View"})," is the compositor's core layout mechanism. Its role is analogous to the\n",(0,t.jsx)(n.code,{children:"
"})," tag in HTML. It provides a container with basic styling that can be further composed."]}),"\n",(0,t.jsx)(n.h3,{id:"absolute-positioning",children:"Absolute positioning"}),"\n",(0,t.jsx)(r.default,{}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"View"})," supports absolute positioning for its child components."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"View"})," can be absolutely positioned relative to its parent if the parent component supports it."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"static-positioning",children:"Static positioning"}),"\n",(0,t.jsxs)(n.p,{children:["When children of a ",(0,t.jsx)(n.code,{children:"View"})," component have a static position, they are placed next to each other."]}),"\n",(0,t.jsxs)(n.h4,{id:"for-directionrow",children:["For ",(0,t.jsx)(n.code,{children:"direction=row"}),":"]}),"\n",(0,t.jsxs)(n.p,{children:["Children of a ",(0,t.jsx)(n.code,{children:"View"})," component form a row, with items aligned to the top. The size of each child will be calculated in the following way:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"width"})," or ",(0,t.jsx)(n.code,{children:"height"})," of a child component is defined, then those values take priority."]}),"\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"height"})," is not defined, the component will have the same ",(0,t.jsx)(n.code,{children:"height"})," as its parent."]}),"\n",(0,t.jsxs)(n.li,{children:["If the ",(0,t.jsx)(n.code,{children:"width"})," is not defined, we calculate the sum ",(0,t.jsx)(n.code,{children:"width"})," of all components with that value defined.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["If it is larger than the parent's ",(0,t.jsx)(n.code,{children:"width"}),", then the ",(0,t.jsx)(n.code,{children:"width"})," of the rest of the components is zero."]}),"\n",(0,t.jsxs)(n.li,{children:["If it is smaller than the parent's ",(0,t.jsx)(n.code,{children:"width"}),", calculate the difference and divide the resulting value equally between all children with unknown widths."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.h4,{id:"for-directioncolumn",children:["For ",(0,t.jsx)(n.code,{children:"direction=column"}),":"]}),"\n",(0,t.jsxs)(n.p,{children:["Analogous to the ",(0,t.jsx)(n.code,{children:"direction=row"})," case, but children form a column instead, with items aligned to the left."]}),"\n",(0,t.jsx)(n.h3,{id:"transitions",children:"Transitions"}),"\n",(0,t.jsxs)(n.p,{children:["On the scene update, a ",(0,t.jsx)(n.code,{children:"View"})," component will animate between the original state and the new one if the ",(0,t.jsx)(n.code,{children:"transition"})," field is defined. Both the original and the new scene need to define a component with the same ",(0,t.jsx)(n.code,{children:"id"}),". Currently, only some of the fields support animated transitions:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," / ",(0,t.jsx)(n.code,{children:"height"})," - Only supported within the same positioning mode. If the positioning mode changes between the old scene and the new one, the transition will not work."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," / ",(0,t.jsx)(n.code,{children:"top"})," / ",(0,t.jsx)(n.code,{children:"left"})," / ",(0,t.jsx)(n.code,{children:"right"})," / ",(0,t.jsx)(n.code,{children:"rotation"})," - Only supports transition when changing a value of the same field. If the old scene defines a ",(0,t.jsx)(n.code,{children:"left"})," field and the new one does not, the transition will not work."]}),"\n"]}),"\n",(0,t.jsx)(s.default,{})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},5660:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>c});var t=i(5893),o=i(1151);const s={},r=void 0,d={id:"api/generated/component-View",title:"component-View",description:"View",source:"@site/pages/api/generated/component-View.md",sourceDirName:"api/generated",slug:"/api/generated/component-View",permalink:"/docs/api/generated/component-View",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[{value:"View",id:"view",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={admonition:"admonition",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"view",children:"View"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type View = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n direction?: "row" | "column";\n top?: f32;\n left?: f32;\n bottom?: f32;\n right?: f32;\n rotation?: f32;\n transition?: Transition;\n overflow?: "visible" | "hidden" | "fit";\n background_color_rgba?: string;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels. Required when using absolute positioning."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"direction"})," - Direction defines how static children are positioned inside a View component.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"row"'})," - Children positioned from left to right."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"column"'})," - Children positioned from top to bottom."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"top"})," - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"left"})," - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"bottom"})," - Distance in pixels between the bottom edge of this component and the bottom edge of its parent. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"right"})," - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"rotation"})," - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"overflow"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"hidden"'})]}),") Controls what happens to content that is too big to fit into an area.","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"visible"'})," - Render everything, including content that extends beyond their parent."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"hidden"'})," - Render only parts of the children that are inside their parent area."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"fit"'})," - If children components are too big to fit inside the parent, resize everything inside to fit.\nComponents that have unknown sizes will be treated as if they had a size 0 when calculating scaling factor.","\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"This will resize everything inside, even absolutely positioned elements. For example, if you have an element in the bottom right corner and the content will be rescaled by a factor 0.5x, then that component will end up in the middle of its parent"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},9342:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>s,metadata:()=>d,toc:()=>c});var t=i(5893),o=i(1151);const s={},r=void 0,d={id:"common/absolute-position",title:"absolute-position",description:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.",source:"@site/pages/common/absolute-position.md",sourceDirName:"common",slug:"/common/absolute-position",permalink:"/docs/common/absolute-position",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},c=[];function a(e){const n={p:"p",...(0,o.a)(),...e.components};return(0,t.jsx)(n.p,{children:"A component is absolutely positioned if it defines fields like top, left, right, bottom, or rotation.\nThose fields define the component's position relative to its parent. However, to respect those values,\nthe parent component has to be a layout component that supports absolute positioning."})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>r});var t=i(7294);const o={},s=t.createContext(o);function r(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d81783d9.f39c902d.js b/assets/js/d81783d9.f39c902d.js deleted file mode 100644 index 78c497dca..000000000 --- a/assets/js/d81783d9.f39c902d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1015,2692],{4011:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>s,metadata:()=>d,toc:()=>p});var n=r(5893),i=r(1151);const s={},o=void 0,d={id:"api/generated/renderer-RtpInputStream",title:"renderer-RtpInputStream",description:"RtpInputStream",source:"@site/pages/api/generated/renderer-RtpInputStream.md",sourceDirName:"api/generated",slug:"/api/generated/renderer-RtpInputStream",permalink:"/docs/api/generated/renderer-RtpInputStream",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},p=[{value:"RtpInputStream",id:"rtpinputstream",level:2},{value:"Properties",id:"properties",level:4},{value:"Port",id:"port",level:2},{value:"InputRtpVideoOptions",id:"inputrtpvideooptions",level:2},{value:"Properties",id:"properties-1",level:4},{value:"InputRtpAudioOptions",id:"inputrtpaudiooptions",level:2},{value:"Properties",id:"properties-2",level:4}];function l(e){const t={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"rtpinputstream",children:"RtpInputStream"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typescript",children:'type RtpInputStream = {\n input_id: string;\n port: Port;\n transport_protocol?: "udp" | "tcp_server";\n video?: InputRtpVideoOptions;\n audio?: InputRtpAudioOptions;\n required?: bool;\n offset_ms?: f64;\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Parameters for an input stream from RTP source. At least one of ",(0,n.jsx)(t.code,{children:"video"})," and ",(0,n.jsx)(t.code,{children:"audio"})," has to be defined."]}),"\n",(0,n.jsx)(t.h4,{id:"properties",children:"Properties"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"input_id"})," - An identifier for the input stream."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"port"})," - UDP port or port range on which the compositor should listen for the stream."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"transport_protocol"})," - Transport protocol.","\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:'"udp"'})," - UDP protocol."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:'"tcp_server"'})," - TCP protocol where LiveCompositor is the server side of the connection."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"video"})," - Parameters of a video source included in the RTP stream."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"audio"})," - Parameters of an audio source included in the RTP stream."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"required"})," - (",(0,n.jsxs)(t.strong,{children:["default=",(0,n.jsx)(t.code,{children:"false"})]}),") If input is required and the stream is not delivered on time, then LiveCompositor will delay producing output frames."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"offset_ms"})," - Offset in milliseconds relative to the pipeline start (start request). If the offset is not defined then the stream will be synchronized based on the delivery time of the initial frames."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"port",children:"Port"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typescript",children:"type Port = string | u16\n"})}),"\n",(0,n.jsx)(t.h2,{id:"inputrtpvideooptions",children:"InputRtpVideoOptions"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typescript",children:'type InputRtpVideoOptions = {\n codec?: "h264";\n}\n'})}),"\n",(0,n.jsx)(t.h4,{id:"properties-1",children:"Properties"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"codec"})," - (",(0,n.jsxs)(t.strong,{children:["default=",(0,n.jsx)(t.code,{children:'"h264"'})]}),") Video codec.","\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:'"h264"'})," - H264 video."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"inputrtpaudiooptions",children:"InputRtpAudioOptions"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typescript",children:'type InputRtpAudioOptions = {\n codec?: "opus";\n forward_error_correction?: bool;\n}\n'})}),"\n",(0,n.jsx)(t.h4,{id:"properties-2",children:"Properties"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"codec"})," - (",(0,n.jsxs)(t.strong,{children:["default=",(0,n.jsx)(t.code,{children:'"opus"'})]}),") Audio codec.","\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:'"opus"'})," - Opus audio."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"forward_error_correction"})," - (",(0,n.jsxs)(t.strong,{children:["default=",(0,n.jsx)(t.code,{children:"false"})]}),") Specifies whether the stream uses forward error correction. It's specific for Opus codec. For more information, check out ",(0,n.jsx)(t.a,{href:"https://datatracker.ietf.org/doc/html/rfc6716#section-2.1.7",children:"RFC"}),"."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},408:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var n=r(5893),i=r(1151),s=r(4011);const o={},d="RTP",c={id:"api/inputs/rtp",title:"RTP",description:"An input type that allows streaming video and audio to the compositor over RTP.",source:"@site/pages/api/inputs/rtp.md",sourceDirName:"api/inputs",slug:"/api/inputs/rtp",permalink:"/docs/api/inputs/rtp",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"sidebar",previous:{title:"Web Renderer",permalink:"/docs/api/renderers/web"},next:{title:"MP4",permalink:"/docs/api/inputs/mp4"}},p={},l=[];function a(e){const t={h1:"h1",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"rtp",children:"RTP"}),"\n",(0,n.jsx)(t.p,{children:"An input type that allows streaming video and audio to the compositor over RTP."}),"\n",(0,n.jsx)(s.default,{})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},1151:(e,t,r)=>{r.d(t,{Z:()=>d,a:()=>o});var n=r(7294);const i={},s=n.createContext(i);function o(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d81783d9.fa912766.js b/assets/js/d81783d9.fa912766.js new file mode 100644 index 000000000..7ed4fdf10 --- /dev/null +++ b/assets/js/d81783d9.fa912766.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1015,2692],{4011:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>s,metadata:()=>d,toc:()=>p});var r=n(5893),i=n(1151);const s={},o=void 0,d={id:"api/generated/renderer-RtpInputStream",title:"renderer-RtpInputStream",description:"RtpInputStream",source:"@site/pages/api/generated/renderer-RtpInputStream.md",sourceDirName:"api/generated",slug:"/api/generated/renderer-RtpInputStream",permalink:"/docs/api/generated/renderer-RtpInputStream",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},p=[{value:"RtpInputStream",id:"rtpinputstream",level:2},{value:"Properties",id:"properties",level:4},{value:"InputRtpVideoOptions",id:"inputrtpvideooptions",level:2},{value:"Properties",id:"properties-1",level:4},{value:"InputRtpAudioOptions",id:"inputrtpaudiooptions",level:2},{value:"Properties",id:"properties-2",level:4}];function l(e){const t={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"rtpinputstream",children:"RtpInputStream"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-typescript",children:'type RtpInputStream = {\n input_id: string;\n port: string | u16;\n transport_protocol?: "udp" | "tcp_server";\n video?: InputRtpVideoOptions;\n audio?: InputRtpAudioOptions;\n required?: bool;\n offset_ms?: f64;\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Parameters for an input stream from RTP source. At least one of ",(0,r.jsx)(t.code,{children:"video"})," and ",(0,r.jsx)(t.code,{children:"audio"})," has to be defined."]}),"\n",(0,r.jsx)(t.h4,{id:"properties",children:"Properties"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"input_id"})," - An identifier for the input stream."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"port"})," - UDP port or port range on which the compositor should listen for the stream."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"transport_protocol"})," - Transport protocol.","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"udp"'})," - UDP protocol."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"tcp_server"'})," - TCP protocol where LiveCompositor is the server side of the connection."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"video"})," - Parameters of a video source included in the RTP stream."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"audio"})," - Parameters of an audio source included in the RTP stream."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"required"})," - (",(0,r.jsxs)(t.strong,{children:["default=",(0,r.jsx)(t.code,{children:"false"})]}),") If input is required and the stream is not delivered on time, then LiveCompositor will delay producing output frames."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"offset_ms"})," - Offset in milliseconds relative to the pipeline start (start request). If the offset is not defined then the stream will be synchronized based on the delivery time of the initial frames."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"inputrtpvideooptions",children:"InputRtpVideoOptions"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-typescript",children:'type InputRtpVideoOptions = {\n codec?: "h264";\n}\n'})}),"\n",(0,r.jsx)(t.h4,{id:"properties-1",children:"Properties"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"codec"})," - (",(0,r.jsxs)(t.strong,{children:["default=",(0,r.jsx)(t.code,{children:'"h264"'})]}),") Video codec.","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"h264"'})," - H264 video."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"inputrtpaudiooptions",children:"InputRtpAudioOptions"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-typescript",children:'type InputRtpAudioOptions = {\n codec?: "opus";\n forward_error_correction?: bool;\n}\n'})}),"\n",(0,r.jsx)(t.h4,{id:"properties-2",children:"Properties"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"codec"})," - (",(0,r.jsxs)(t.strong,{children:["default=",(0,r.jsx)(t.code,{children:'"opus"'})]}),") Audio codec.","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"opus"'})," - Opus audio."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"forward_error_correction"})," - (",(0,r.jsxs)(t.strong,{children:["default=",(0,r.jsx)(t.code,{children:"false"})]}),") Specifies whether the stream uses forward error correction. It's specific for Opus codec. For more information, check out ",(0,r.jsx)(t.a,{href:"https://datatracker.ietf.org/doc/html/rfc6716#section-2.1.7",children:"RFC"}),"."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},408:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var r=n(5893),i=n(1151),s=n(4011);const o={},d="RTP",c={id:"api/inputs/rtp",title:"RTP",description:"An input type that allows streaming video and audio to the compositor over RTP.",source:"@site/pages/api/inputs/rtp.md",sourceDirName:"api/inputs",slug:"/api/inputs/rtp",permalink:"/docs/api/inputs/rtp",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"sidebar",previous:{title:"Web Renderer",permalink:"/docs/api/renderers/web"},next:{title:"MP4",permalink:"/docs/api/inputs/mp4"}},p={},l=[];function a(e){const t={h1:"h1",p:"p",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"rtp",children:"RTP"}),"\n",(0,r.jsx)(t.p,{children:"An input type that allows streaming video and audio to the compositor over RTP."}),"\n",(0,r.jsx)(s.default,{})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var r=n(7294);const i={},s=r.createContext(i);function o(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f3168f4a.3e71971a.js b/assets/js/f3168f4a.3e71971a.js new file mode 100644 index 000000000..80bdb56c6 --- /dev/null +++ b/assets/js/f3168f4a.3e71971a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1792],{3230:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>o,toc:()=>d});var s=i(5893),t=i(1151);const r={},c=void 0,o={id:"api/generated/component-Tiles",title:"component-Tiles",description:"Tiles",source:"@site/pages/api/generated/component-Tiles.md",sourceDirName:"api/generated",slug:"/api/generated/component-Tiles",permalink:"/docs/api/generated/component-Tiles",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},l={},d=[{value:"Tiles",id:"tiles",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4},{value:"EasingFunction",id:"easingfunction",level:2}];function a(e){const n={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"tiles",children:"Tiles"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'type Tiles = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n background_color_rgba?: string;\n tile_aspect_ratio?: string;\n margin?: f32;\n padding?: f32;\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n transition?: Transition;\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"width"})," - Width of a component in pixels."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"})," - Height of a component in pixels."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,s.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"tile_aspect_ratio"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:'"16:9"'})]}),") Aspect ratio of a tile in ",(0,s.jsx)(n.code,{children:'"W:H"'})," format, where W and H are integers."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"margin"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:"0"})]}),") Margin of each tile in pixels."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"padding"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:"0"})]}),") Padding on each tile in pixels."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"horizontal_align"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment of tiles."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"vertical_align"})," - (",(0,s.jsxs)(n.strong,{children:["default=",(0,s.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment of tiles."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a ",(0,s.jsx)(n.code,{children:"Tiles"})," component with the same id."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n easing_function?: EasingFunction;\n}\n"})}),"\n",(0,s.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"easing_function"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"easingfunction",children:"EasingFunction"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'type EasingFunction = \n | { function_name: "linear" }\n | { function_name: "bounce" }\n | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }\n'})}),"\n",(0,s.jsx)(n.p,{children:"Easing functions are used to interpolate between two values over time."}),"\n",(0,s.jsxs)(n.p,{children:["Custom easing functions can be implemented with cubic B\xe9zier. The control points are defined with ",(0,s.jsx)(n.code,{children:"points"})," field by providing four numerical values: ",(0,s.jsx)(n.code,{children:"x1"}),", ",(0,s.jsx)(n.code,{children:"y1"}),", ",(0,s.jsx)(n.code,{children:"x2"})," and ",(0,s.jsx)(n.code,{children:"y2"}),". The ",(0,s.jsx)(n.code,{children:"x1"})," and ",(0,s.jsx)(n.code,{children:"x2"})," values have to be in the range ",(0,s.jsx)(n.code,{children:"[0; 1]"}),". The cubic B\xe9zier result is clamped to the range ",(0,s.jsx)(n.code,{children:"[0; 1]"}),". You can find example control point configurations ",(0,s.jsx)(n.a,{href:"https://easings.net/",children:"here"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>o,a:()=>c});var s=i(7294);const t={},r=s.createContext(t);function c(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:c(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f3168f4a.3fc781c3.js b/assets/js/f3168f4a.3fc781c3.js deleted file mode 100644 index 69e6fe9b7..000000000 --- a/assets/js/f3168f4a.3fc781c3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[1792],{3230:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var t=i(5893),s=i(1151);const r={},o=void 0,l={id:"api/generated/component-Tiles",title:"component-Tiles",description:"Tiles",source:"@site/pages/api/generated/component-Tiles.md",sourceDirName:"api/generated",slug:"/api/generated/component-Tiles",permalink:"/docs/api/generated/component-Tiles",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},d=[{value:"Tiles",id:"tiles",level:2},{value:"Properties",id:"properties",level:4},{value:"Transition",id:"transition",level:2},{value:"Properties",id:"properties-1",level:4}];function a(e){const n={code:"code",h2:"h2",h4:"h4",li:"li",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"tiles",children:"Tiles"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:'type Tiles = {\n id?: string;\n children?: Component[];\n width?: f32;\n height?: f32;\n background_color_rgba?: string;\n tile_aspect_ratio?: string;\n margin?: f32;\n padding?: f32;\n horizontal_align?: "left" | "right" | "justified" | "center";\n vertical_align?: "top" | "center" | "bottom" | "justified";\n transition?: Transition;\n}\n'})}),"\n",(0,t.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"id"})," - Id of a component."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"children"})," - List of component's children."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"width"})," - Width of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"height"})," - Height of a component in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"background_color_rgba"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"#00000000"'})]}),") Background color in a ",(0,t.jsx)(n.code,{children:'"#RRGGBBAA"'})," format."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"tile_aspect_ratio"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"16:9"'})]}),") Aspect ratio of a tile in ",(0,t.jsx)(n.code,{children:'"W:H"'})," format, where W and H are integers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"margin"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Margin of each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"padding"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:"0"})]}),") Padding on each tile in pixels."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Horizontal alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical_align"})," - (",(0,t.jsxs)(n.strong,{children:["default=",(0,t.jsx)(n.code,{children:'"center"'})]}),") Vertical alignment of tiles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transition"})," - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a ",(0,t.jsx)(n.code,{children:"Tiles"})," component with the same id."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"transition",children:"Transition"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"type Transition = {\n duration_ms: f64;\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"duration_ms"})," - Duration of a transition in milliseconds."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>l,a:()=>o});var t=i(7294);const s={},r=t.createContext(s);function o(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f94d6d54.d41e6c23.js b/assets/js/f94d6d54.d41e6c23.js deleted file mode 100644 index 8c796dd98..000000000 --- a/assets/js/f94d6d54.d41e6c23.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[2692],{4011:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>s,default:()=>a,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var t=n(5893),i=n(1151);const o={},s=void 0,d={id:"api/generated/renderer-RtpInputStream",title:"renderer-RtpInputStream",description:"RtpInputStream",source:"@site/pages/api/generated/renderer-RtpInputStream.md",sourceDirName:"api/generated",slug:"/api/generated/renderer-RtpInputStream",permalink:"/docs/api/generated/renderer-RtpInputStream",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},l=[{value:"RtpInputStream",id:"rtpinputstream",level:2},{value:"Properties",id:"properties",level:4},{value:"Port",id:"port",level:2},{value:"InputRtpVideoOptions",id:"inputrtpvideooptions",level:2},{value:"Properties",id:"properties-1",level:4},{value:"InputRtpAudioOptions",id:"inputrtpaudiooptions",level:2},{value:"Properties",id:"properties-2",level:4}];function p(e){const r={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h2,{id:"rtpinputstream",children:"RtpInputStream"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type RtpInputStream = {\n input_id: string;\n port: Port;\n transport_protocol?: "udp" | "tcp_server";\n video?: InputRtpVideoOptions;\n audio?: InputRtpAudioOptions;\n required?: bool;\n offset_ms?: f64;\n}\n'})}),"\n",(0,t.jsxs)(r.p,{children:["Parameters for an input stream from RTP source. At least one of ",(0,t.jsx)(r.code,{children:"video"})," and ",(0,t.jsx)(r.code,{children:"audio"})," has to be defined."]}),"\n",(0,t.jsx)(r.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"input_id"})," - An identifier for the input stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"port"})," - UDP port or port range on which the compositor should listen for the stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"transport_protocol"})," - Transport protocol.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"udp"'})," - UDP protocol."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"tcp_server"'})," - TCP protocol where LiveCompositor is the server side of the connection."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"video"})," - Parameters of a video source included in the RTP stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"audio"})," - Parameters of an audio source included in the RTP stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"required"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:"false"})]}),") If input is required and the stream is not delivered on time, then LiveCompositor will delay producing output frames."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"offset_ms"})," - Offset in milliseconds relative to the pipeline start (start request). If the offset is not defined then the stream will be synchronized based on the delivery time of the initial frames."]}),"\n"]}),"\n",(0,t.jsx)(r.h2,{id:"port",children:"Port"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:"type Port = string | u16\n"})}),"\n",(0,t.jsx)(r.h2,{id:"inputrtpvideooptions",children:"InputRtpVideoOptions"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type InputRtpVideoOptions = {\n codec?: "h264";\n}\n'})}),"\n",(0,t.jsx)(r.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"codec"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:'"h264"'})]}),") Video codec.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"h264"'})," - H264 video."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(r.h2,{id:"inputrtpaudiooptions",children:"InputRtpAudioOptions"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type InputRtpAudioOptions = {\n codec?: "opus";\n forward_error_correction?: bool;\n}\n'})}),"\n",(0,t.jsx)(r.h4,{id:"properties-2",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"codec"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:'"opus"'})]}),") Audio codec.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"opus"'})," - Opus audio."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"forward_error_correction"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:"false"})]}),") Specifies whether the stream uses forward error correction. It's specific for Opus codec. For more information, check out ",(0,t.jsx)(r.a,{href:"https://datatracker.ietf.org/doc/html/rfc6716#section-2.1.7",children:"RFC"}),"."]}),"\n"]})]})}function a(e={}){const{wrapper:r}={...(0,i.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},1151:(e,r,n)=>{n.d(r,{Z:()=>d,a:()=>s});var t=n(7294);const i={},o=t.createContext(i);function s(e){const r=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function d(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),t.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f94d6d54.e9a2af06.js b/assets/js/f94d6d54.e9a2af06.js new file mode 100644 index 000000000..bd5a391fe --- /dev/null +++ b/assets/js/f94d6d54.e9a2af06.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcompositor_live=self.webpackChunkcompositor_live||[]).push([[2692],{4011:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>s,default:()=>a,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var t=n(5893),i=n(1151);const o={},s=void 0,d={id:"api/generated/renderer-RtpInputStream",title:"renderer-RtpInputStream",description:"RtpInputStream",source:"@site/pages/api/generated/renderer-RtpInputStream.md",sourceDirName:"api/generated",slug:"/api/generated/renderer-RtpInputStream",permalink:"/docs/api/generated/renderer-RtpInputStream",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{}},c={},l=[{value:"RtpInputStream",id:"rtpinputstream",level:2},{value:"Properties",id:"properties",level:4},{value:"InputRtpVideoOptions",id:"inputrtpvideooptions",level:2},{value:"Properties",id:"properties-1",level:4},{value:"InputRtpAudioOptions",id:"inputrtpaudiooptions",level:2},{value:"Properties",id:"properties-2",level:4}];function p(e){const r={a:"a",code:"code",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h2,{id:"rtpinputstream",children:"RtpInputStream"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type RtpInputStream = {\n input_id: string;\n port: string | u16;\n transport_protocol?: "udp" | "tcp_server";\n video?: InputRtpVideoOptions;\n audio?: InputRtpAudioOptions;\n required?: bool;\n offset_ms?: f64;\n}\n'})}),"\n",(0,t.jsxs)(r.p,{children:["Parameters for an input stream from RTP source. At least one of ",(0,t.jsx)(r.code,{children:"video"})," and ",(0,t.jsx)(r.code,{children:"audio"})," has to be defined."]}),"\n",(0,t.jsx)(r.h4,{id:"properties",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"input_id"})," - An identifier for the input stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"port"})," - UDP port or port range on which the compositor should listen for the stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"transport_protocol"})," - Transport protocol.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"udp"'})," - UDP protocol."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"tcp_server"'})," - TCP protocol where LiveCompositor is the server side of the connection."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"video"})," - Parameters of a video source included in the RTP stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"audio"})," - Parameters of an audio source included in the RTP stream."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"required"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:"false"})]}),") If input is required and the stream is not delivered on time, then LiveCompositor will delay producing output frames."]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"offset_ms"})," - Offset in milliseconds relative to the pipeline start (start request). If the offset is not defined then the stream will be synchronized based on the delivery time of the initial frames."]}),"\n"]}),"\n",(0,t.jsx)(r.h2,{id:"inputrtpvideooptions",children:"InputRtpVideoOptions"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type InputRtpVideoOptions = {\n codec?: "h264";\n}\n'})}),"\n",(0,t.jsx)(r.h4,{id:"properties-1",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"codec"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:'"h264"'})]}),") Video codec.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"h264"'})," - H264 video."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(r.h2,{id:"inputrtpaudiooptions",children:"InputRtpAudioOptions"}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-typescript",children:'type InputRtpAudioOptions = {\n codec?: "opus";\n forward_error_correction?: bool;\n}\n'})}),"\n",(0,t.jsx)(r.h4,{id:"properties-2",children:"Properties"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"codec"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:'"opus"'})]}),") Audio codec.","\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:'"opus"'})," - Opus audio."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.code,{children:"forward_error_correction"})," - (",(0,t.jsxs)(r.strong,{children:["default=",(0,t.jsx)(r.code,{children:"false"})]}),") Specifies whether the stream uses forward error correction. It's specific for Opus codec. For more information, check out ",(0,t.jsx)(r.a,{href:"https://datatracker.ietf.org/doc/html/rfc6716#section-2.1.7",children:"RFC"}),"."]}),"\n"]})]})}function a(e={}){const{wrapper:r}={...(0,i.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},1151:(e,r,n)=>{n.d(r,{Z:()=>d,a:()=>s});var t=n(7294);const i={},o=t.createContext(i);function s(e){const r=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function d(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),t.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.ce8c23e5.js b/assets/js/runtime~main.4e027822.js similarity index 94% rename from assets/js/runtime~main.ce8c23e5.js rename to assets/js/runtime~main.4e027822.js index 41af7aa3a..b9ab00bfa 100644 --- a/assets/js/runtime~main.ce8c23e5.js +++ b/assets/js/runtime~main.4e027822.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,r,f,c={},d={};function o(e){var a=d[e];if(void 0!==a)return a.exports;var t=d[e]={exports:{}};return c[e].call(t.exports,t,t.exports,o),t.exports}o.m=c,e=[],o.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(o.O).every((e=>o.O[e](t[b])))?t.splice(b--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);o.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var d=2&r&&e;"object"==typeof d&&!~a.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,o.d(f,c),f},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,t)=>(o.f[t](e,a),a)),[])),o.u=e=>"assets/js/"+({2:"4e76d5b1",53:"935f2afb",222:"583850f4",580:"19a7aa20",821:"5732f308",1015:"d81783d9",1252:"914825a2",1342:"9641c2a9",1361:"be91778b",1538:"14eaa339",1724:"cd44186e",1778:"15cc4295",1792:"f3168f4a",2402:"42b33983",2676:"896f0ba9",2692:"f94d6d54",3237:"1df93b7f",3268:"7ef038ae",4368:"a94703ab",4771:"fca0959c",4775:"d5b534ab",5195:"b360e2f2",5874:"fab95674",6279:"c2904cbc",6439:"dcfd3d15",7140:"03d586bf",7180:"3d0d9de9",7508:"b542e828",7598:"20fb3f1d",7613:"21a024a3",7721:"6402fa87",7918:"17896441",8196:"9280379f",8260:"2a8dccce",8407:"e17b63fd",8421:"d654602c",8422:"31161cd8",8508:"2688c0dd",8518:"a7bd4aaa",8646:"6ecc9e9d",8780:"0cb07e4e",8930:"e1fd9655",9318:"584f2726",9651:"177e5166",9661:"5e95c892",9817:"14eb3368"}[e]||e)+"."+{2:"46794a55",53:"7238485d",222:"080d0190",580:"56005e39",582:"b07f9b15",821:"b784e312",1015:"f39c902d",1252:"74196099",1342:"a1147615",1361:"58c8ae9e",1538:"16ccf94c",1724:"a6d697f6",1772:"568f02ca",1778:"691c7a89",1792:"3fc781c3",2402:"9aa762c3",2676:"f2ad333a",2692:"d41e6c23",3237:"48db5ef5",3268:"caa6b389",4368:"f3a81d12",4771:"3a18c4f9",4775:"de58a3fb",5195:"0057c1c1",5874:"2d9c84b0",6279:"70b35cd5",6439:"fe7de27f",7140:"e5ae3d1e",7180:"1646b979",7508:"96f4734e",7598:"97a9db77",7613:"2640735a",7721:"f595f69a",7918:"fe1667aa",8196:"dba23a16",8260:"8e842ddb",8407:"d3046dc5",8421:"f127afd6",8422:"b4534a52",8508:"48e8013c",8518:"6cbc061c",8646:"d48a781d",8780:"38b51982",8930:"33e48f0e",9318:"d3b416a7",9651:"38e9409f",9661:"770588ee",9817:"e2f714dc"}[e]+".js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="compositor-live:",o.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var d,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),b&&document.head.appendChild(d)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/",o.gca=function(e){return e={17896441:"7918","4e76d5b1":"2","935f2afb":"53","583850f4":"222","19a7aa20":"580","5732f308":"821",d81783d9:"1015","914825a2":"1252","9641c2a9":"1342",be91778b:"1361","14eaa339":"1538",cd44186e:"1724","15cc4295":"1778",f3168f4a:"1792","42b33983":"2402","896f0ba9":"2676",f94d6d54:"2692","1df93b7f":"3237","7ef038ae":"3268",a94703ab:"4368",fca0959c:"4771",d5b534ab:"4775",b360e2f2:"5195",fab95674:"5874",c2904cbc:"6279",dcfd3d15:"6439","03d586bf":"7140","3d0d9de9":"7180",b542e828:"7508","20fb3f1d":"7598","21a024a3":"7613","6402fa87":"7721","9280379f":"8196","2a8dccce":"8260",e17b63fd:"8407",d654602c:"8421","31161cd8":"8422","2688c0dd":"8508",a7bd4aaa:"8518","6ecc9e9d":"8646","0cb07e4e":"8780",e1fd9655:"8930","584f2726":"9318","177e5166":"9651","5e95c892":"9661","14eb3368":"9817"}[e]||e,o.p+o.u(e)},(()=>{var e={1303:0,532:0};o.f.j=(a,t)=>{var r=o.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=o.p+o.u(a),d=new Error;o.l(c,(t=>{if(o.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",d.name="ChunkLoadError",d.type=f,d.request=c,r[1](d)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],d=t[1],b=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in d)o.o(d,r)&&(o.m[r]=d[r]);if(b)var i=b(o)}for(a&&a(t);n{"use strict";var e,a,t,r,f,c={},d={};function o(e){var a=d[e];if(void 0!==a)return a.exports;var t=d[e]={exports:{}};return c[e].call(t.exports,t,t.exports,o),t.exports}o.m=c,e=[],o.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(o.O).every((e=>o.O[e](t[b])))?t.splice(b--,1):(d=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);o.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var d=2&r&&e;"object"==typeof d&&!~a.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,o.d(f,c),f},o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,t)=>(o.f[t](e,a),a)),[])),o.u=e=>"assets/js/"+({2:"4e76d5b1",53:"935f2afb",222:"583850f4",580:"19a7aa20",821:"5732f308",1015:"d81783d9",1252:"914825a2",1342:"9641c2a9",1361:"be91778b",1538:"14eaa339",1724:"cd44186e",1778:"15cc4295",1792:"f3168f4a",2402:"42b33983",2676:"896f0ba9",2692:"f94d6d54",3237:"1df93b7f",3268:"7ef038ae",4368:"a94703ab",4771:"fca0959c",4775:"d5b534ab",5195:"b360e2f2",5874:"fab95674",6279:"c2904cbc",6439:"dcfd3d15",7140:"03d586bf",7180:"3d0d9de9",7508:"b542e828",7598:"20fb3f1d",7613:"21a024a3",7721:"6402fa87",7918:"17896441",8196:"9280379f",8260:"2a8dccce",8407:"e17b63fd",8421:"d654602c",8422:"31161cd8",8508:"2688c0dd",8518:"a7bd4aaa",8646:"6ecc9e9d",8780:"0cb07e4e",8930:"e1fd9655",9318:"584f2726",9651:"177e5166",9661:"5e95c892",9817:"14eb3368"}[e]||e)+"."+{2:"46794a55",53:"7238485d",222:"080d0190",580:"774f0535",582:"b07f9b15",821:"b784e312",1015:"fa912766",1252:"74196099",1342:"a1147615",1361:"58c8ae9e",1538:"16ccf94c",1724:"a6d697f6",1772:"568f02ca",1778:"cad88329",1792:"3e71971a",2402:"f2420e08",2676:"f2ad333a",2692:"e9a2af06",3237:"48db5ef5",3268:"caa6b389",4368:"f3a81d12",4771:"3a18c4f9",4775:"de58a3fb",5195:"0057c1c1",5874:"2d9c84b0",6279:"70b35cd5",6439:"fe7de27f",7140:"e5ae3d1e",7180:"1646b979",7508:"96f4734e",7598:"97a9db77",7613:"2640735a",7721:"f595f69a",7918:"fe1667aa",8196:"dba23a16",8260:"8e842ddb",8407:"d3046dc5",8421:"f127afd6",8422:"b4534a52",8508:"48e8013c",8518:"6cbc061c",8646:"afacd7df",8780:"9b474854",8930:"33e48f0e",9318:"d3b416a7",9651:"38e9409f",9661:"770588ee",9817:"e2f714dc"}[e]+".js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="compositor-live:",o.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var d,b;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],d.parentNode&&d.parentNode.removeChild(d),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),b&&document.head.appendChild(d)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="/",o.gca=function(e){return e={17896441:"7918","4e76d5b1":"2","935f2afb":"53","583850f4":"222","19a7aa20":"580","5732f308":"821",d81783d9:"1015","914825a2":"1252","9641c2a9":"1342",be91778b:"1361","14eaa339":"1538",cd44186e:"1724","15cc4295":"1778",f3168f4a:"1792","42b33983":"2402","896f0ba9":"2676",f94d6d54:"2692","1df93b7f":"3237","7ef038ae":"3268",a94703ab:"4368",fca0959c:"4771",d5b534ab:"4775",b360e2f2:"5195",fab95674:"5874",c2904cbc:"6279",dcfd3d15:"6439","03d586bf":"7140","3d0d9de9":"7180",b542e828:"7508","20fb3f1d":"7598","21a024a3":"7613","6402fa87":"7721","9280379f":"8196","2a8dccce":"8260",e17b63fd:"8407",d654602c:"8421","31161cd8":"8422","2688c0dd":"8508",a7bd4aaa:"8518","6ecc9e9d":"8646","0cb07e4e":"8780",e1fd9655:"8930","584f2726":"9318","177e5166":"9651","5e95c892":"9661","14eb3368":"9817"}[e]||e,o.p+o.u(e)},(()=>{var e={1303:0,532:0};o.f.j=(a,t)=>{var r=o.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=o.p+o.u(a),d=new Error;o.l(c,(t=>{if(o.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;d.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",d.name="ChunkLoadError",d.type=f,d.request=c,r[1](d)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],d=t[1],b=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in d)o.o(d,r)&&(o.m[r]=d[r]);if(b)var i=b(o)}for(a&&a(t);n Image | Live Compositor - + diff --git a/docs/api/components/InputStream/index.html b/docs/api/components/InputStream/index.html index ded78ffe8..ee9577638 100644 --- a/docs/api/components/InputStream/index.html +++ b/docs/api/components/InputStream/index.html @@ -4,7 +4,7 @@ InputStream | Live Compositor - + diff --git a/docs/api/components/Rescaler/index.html b/docs/api/components/Rescaler/index.html index 158dcb71f..987e8341b 100644 --- a/docs/api/components/Rescaler/index.html +++ b/docs/api/components/Rescaler/index.html @@ -4,7 +4,7 @@ Rescaler | Live Compositor - + @@ -50,10 +50,15 @@

Propertiestransition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id.

Transition​

-
type Transition = {
  duration_ms: f64;
}
+
type Transition = {
  duration_ms: f64;
  easing_function?: EasingFunction;
}

Properties​

  • duration_ms - Duration of a transition in milliseconds.
    • -
+
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/components/Shader/index.html b/docs/api/components/Shader/index.html index 65ce00116..c59a180c7 100644 --- a/docs/api/components/Shader/index.html +++ b/docs/api/components/Shader/index.html @@ -4,7 +4,7 @@ Shader | Live Compositor - + diff --git a/docs/api/components/Text/index.html b/docs/api/components/Text/index.html index 66a3ae775..f7f78d949 100644 --- a/docs/api/components/Text/index.html +++ b/docs/api/components/Text/index.html @@ -4,7 +4,7 @@ Text | Live Compositor - + diff --git a/docs/api/components/Tiles/index.html b/docs/api/components/Tiles/index.html index cf526c173..28bc051e0 100644 --- a/docs/api/components/Tiles/index.html +++ b/docs/api/components/Tiles/index.html @@ -4,7 +4,7 @@ Tiles | Live Compositor - + @@ -66,10 +66,15 @@

    Propertiestransition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a Tiles component with the same id.

    Transition​

    -
    type Transition = {
      duration_ms: f64;
    }
    +
    type Transition = {
      duration_ms: f64;
      easing_function?: EasingFunction;
    }

    Properties​

    +
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/components/View/index.html b/docs/api/components/View/index.html index c93b34f3d..ab5ec431b 100644 --- a/docs/api/components/View/index.html +++ b/docs/api/components/View/index.html @@ -4,7 +4,7 @@ View | Live Compositor - + @@ -76,10 +76,15 @@

    Propertiesbackground_color_rgba - (default="#00000000") Background color in a "#RRGGBBAA" format.

    Transition​

    -
    type Transition = {
      duration_ms: f64;
    }
    +
    type Transition = {
      duration_ms: f64;
      easing_function?: EasingFunction;
    }

    Properties​

    +
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/components/WebView/index.html b/docs/api/components/WebView/index.html index ffb5d7124..c840847c5 100644 --- a/docs/api/components/WebView/index.html +++ b/docs/api/components/WebView/index.html @@ -4,7 +4,7 @@ WebView | Live Compositor - + diff --git a/docs/api/generated/component-Image/index.html b/docs/api/generated/component-Image/index.html index 156ce0bff..dbdc031af 100644 --- a/docs/api/generated/component-Image/index.html +++ b/docs/api/generated/component-Image/index.html @@ -4,7 +4,7 @@ component-Image | Live Compositor - + diff --git a/docs/api/generated/component-InputStream/index.html b/docs/api/generated/component-InputStream/index.html index 8f99e12eb..f6422b095 100644 --- a/docs/api/generated/component-InputStream/index.html +++ b/docs/api/generated/component-InputStream/index.html @@ -4,7 +4,7 @@ component-InputStream | Live Compositor - + diff --git a/docs/api/generated/component-Rescaler/index.html b/docs/api/generated/component-Rescaler/index.html index 842fc7979..85d804b93 100644 --- a/docs/api/generated/component-Rescaler/index.html +++ b/docs/api/generated/component-Rescaler/index.html @@ -4,7 +4,7 @@ component-Rescaler | Live Compositor - + @@ -32,10 +32,15 @@

    Propertiestransition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a View component with the same id.

    Transition​

    -
    type Transition = {
      duration_ms: f64;
    }
    +
    type Transition = {
      duration_ms: f64;
      easing_function?: EasingFunction;
    }

    Properties​

    +
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/generated/component-Text/index.html b/docs/api/generated/component-Text/index.html index 0aa246489..61082e116 100644 --- a/docs/api/generated/component-Text/index.html +++ b/docs/api/generated/component-Text/index.html @@ -4,7 +4,7 @@ component-Text | Live Compositor - + diff --git a/docs/api/generated/component-Tiles/index.html b/docs/api/generated/component-Tiles/index.html index 65cc100e9..bc380cfb8 100644 --- a/docs/api/generated/component-Tiles/index.html +++ b/docs/api/generated/component-Tiles/index.html @@ -4,7 +4,7 @@ component-Tiles | Live Compositor - + @@ -25,10 +25,15 @@

    Propertiestransition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a Tiles component with the same id.

    Transition​

    -
    type Transition = {
      duration_ms: f64;
    }
    +
    type Transition = {
      duration_ms: f64;
      easing_function?: EasingFunction;
    }

    Properties​

    +
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/generated/component-View/index.html b/docs/api/generated/component-View/index.html index b8b0d9b87..970658129 100644 --- a/docs/api/generated/component-View/index.html +++ b/docs/api/generated/component-View/index.html @@ -4,7 +4,7 @@ component-View | Live Compositor - + @@ -43,10 +43,15 @@

    Propertiesbackground_color_rgba - (default="#00000000") Background color in a "#RRGGBBAA" format.

    Transition​

    -
    type Transition = {
      duration_ms: f64;
    }
    +
    type Transition = {
      duration_ms: f64;
      easing_function?: EasingFunction;
    }

    Properties​

    +
  • easing_function
    • + +

    EasingFunction​

    +
    type EasingFunction = 
      | { function_name: "linear" }
      | { function_name: "bounce" }
      | { function_name: "cubic_bezier"; points: [f64, f64, f64, f64] }
    +

    Easing functions are used to interpolate between two values over time.

    +

    Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.

    \ No newline at end of file diff --git a/docs/api/generated/component-WebView/index.html b/docs/api/generated/component-WebView/index.html index b96103a1c..853d80f8a 100644 --- a/docs/api/generated/component-WebView/index.html +++ b/docs/api/generated/component-WebView/index.html @@ -4,7 +4,7 @@ component-WebView | Live Compositor - + diff --git a/docs/api/generated/renderer-Mp4/index.html b/docs/api/generated/renderer-Mp4/index.html index 7a18cdcad..b13f6a3b7 100644 --- a/docs/api/generated/renderer-Mp4/index.html +++ b/docs/api/generated/renderer-Mp4/index.html @@ -4,7 +4,7 @@ renderer-Mp4 | Live Compositor - + diff --git a/docs/api/generated/renderer-RtpInputStream/index.html b/docs/api/generated/renderer-RtpInputStream/index.html index 36403ea14..42d3640f2 100644 --- a/docs/api/generated/renderer-RtpInputStream/index.html +++ b/docs/api/generated/renderer-RtpInputStream/index.html @@ -4,12 +4,12 @@ renderer-RtpInputStream | Live Compositor - +
    Skip to main content

    renderer-RtpInputStream

    RtpInputStream​

    -
    type RtpInputStream = {
      input_id: string;
      port: Port;
      transport_protocol?: "udp" | "tcp_server";
      video?: InputRtpVideoOptions;
      audio?: InputRtpAudioOptions;
      required?: bool;
      offset_ms?: f64;
    }
    +
    type RtpInputStream = {
      input_id: string;
      port: string | u16;
      transport_protocol?: "udp" | "tcp_server";
      video?: InputRtpVideoOptions;
      audio?: InputRtpAudioOptions;
      required?: bool;
      offset_ms?: f64;
    }

    Parameters for an input stream from RTP source. At least one of video and audio has to be defined.

    Properties​

    -

    Port​

    -
    type Port = string | u16

    InputRtpVideoOptions​

    type InputRtpVideoOptions = {
      codec?: "h264";
    }

    Properties​

    @@ -48,6 +46,6 @@

    Properties
  • forward_error_correction - (default=false) Specifies whether the stream uses forward error correction. It's specific for Opus codec. For more information, check out RFC.
    • -

    +
    \ No newline at end of file diff --git a/docs/api/generated/renderer-Shader/index.html b/docs/api/generated/renderer-Shader/index.html index 044d7a753..8e6089d42 100644 --- a/docs/api/generated/renderer-Shader/index.html +++ b/docs/api/generated/renderer-Shader/index.html @@ -4,7 +4,7 @@ renderer-Shader | Live Compositor - + diff --git a/docs/api/generated/renderer-WebRenderer/index.html b/docs/api/generated/renderer-WebRenderer/index.html index 644095e39..bafcd3ba3 100644 --- a/docs/api/generated/renderer-WebRenderer/index.html +++ b/docs/api/generated/renderer-WebRenderer/index.html @@ -4,7 +4,7 @@ renderer-WebRenderer | Live Compositor - + diff --git a/docs/api/inputs/mp4/index.html b/docs/api/inputs/mp4/index.html index 41c2de69d..96641cb83 100644 --- a/docs/api/inputs/mp4/index.html +++ b/docs/api/inputs/mp4/index.html @@ -4,7 +4,7 @@ MP4 | Live Compositor - + diff --git a/docs/api/inputs/rtp/index.html b/docs/api/inputs/rtp/index.html index e15215117..d66b60178 100644 --- a/docs/api/inputs/rtp/index.html +++ b/docs/api/inputs/rtp/index.html @@ -4,14 +4,14 @@ RTP | Live Compositor - +
    Skip to main content

    RTP

    An input type that allows streaming video and audio to the compositor over RTP.

    RtpInputStream​

    -
    type RtpInputStream = {
      input_id: string;
      port: Port;
      transport_protocol?: "udp" | "tcp_server";
      video?: InputRtpVideoOptions;
      audio?: InputRtpAudioOptions;
      required?: bool;
      offset_ms?: f64;
    }
    +
    type RtpInputStream = {
      input_id: string;
      port: string | u16;
      transport_protocol?: "udp" | "tcp_server";
      video?: InputRtpVideoOptions;
      audio?: InputRtpAudioOptions;
      required?: bool;
      offset_ms?: f64;
    }

    Parameters for an input stream from RTP source. At least one of video and audio has to be defined.

    Properties​

    -

    Port​

    -
    type Port = string | u16

    InputRtpVideoOptions​

    type InputRtpVideoOptions = {
      codec?: "h264";
    }

    Properties​

    diff --git a/docs/api/renderers/image/index.html b/docs/api/renderers/image/index.html index 5798e8000..3034e7e73 100644 --- a/docs/api/renderers/image/index.html +++ b/docs/api/renderers/image/index.html @@ -4,7 +4,7 @@ Image | Live Compositor - + diff --git a/docs/api/renderers/shader/index.html b/docs/api/renderers/shader/index.html index c810bbea6..fcbbda0c6 100644 --- a/docs/api/renderers/shader/index.html +++ b/docs/api/renderers/shader/index.html @@ -4,7 +4,7 @@ Shader | Live Compositor - + diff --git a/docs/api/renderers/web/index.html b/docs/api/renderers/web/index.html index a8481dc91..53a4d190e 100644 --- a/docs/api/renderers/web/index.html +++ b/docs/api/renderers/web/index.html @@ -4,7 +4,7 @@ Web Renderer | Live Compositor - + diff --git a/docs/api/routes/index.html b/docs/api/routes/index.html index bea4df435..1b02136d8 100644 --- a/docs/api/routes/index.html +++ b/docs/api/routes/index.html @@ -4,7 +4,7 @@ Routes | Live Compositor - + diff --git a/docs/category/api-reference/index.html b/docs/category/api-reference/index.html index 8dd7be34f..096efaf49 100644 --- a/docs/category/api-reference/index.html +++ b/docs/category/api-reference/index.html @@ -4,7 +4,7 @@ API Reference | Live Compositor - + diff --git a/docs/category/deployment/index.html b/docs/category/deployment/index.html index 7a5334c37..6fea1dee8 100644 --- a/docs/category/deployment/index.html +++ b/docs/category/deployment/index.html @@ -4,7 +4,7 @@ Deployment | Live Compositor - + diff --git a/docs/common/absolute-position/index.html b/docs/common/absolute-position/index.html index de0335fa6..0a5875c90 100644 --- a/docs/common/absolute-position/index.html +++ b/docs/common/absolute-position/index.html @@ -4,7 +4,7 @@ absolute-position | Live Compositor - + diff --git a/docs/concept/component/index.html b/docs/concept/component/index.html index 8e2dc01c2..63286264f 100644 --- a/docs/concept/component/index.html +++ b/docs/concept/component/index.html @@ -4,7 +4,7 @@ Component | Live Compositor - + diff --git a/docs/concept/layouts/index.html b/docs/concept/layouts/index.html index 1023648f3..3ec7bcbb4 100644 --- a/docs/concept/layouts/index.html +++ b/docs/concept/layouts/index.html @@ -4,7 +4,7 @@ Layouts | Live Compositor - + diff --git a/docs/concept/shaders/index.html b/docs/concept/shaders/index.html index 97fc1bc3e..e809a533e 100644 --- a/docs/concept/shaders/index.html +++ b/docs/concept/shaders/index.html @@ -4,7 +4,7 @@ Shaders | Live Compositor - + diff --git a/docs/concept/web/index.html b/docs/concept/web/index.html index 41db456f4..df6a22e90 100644 --- a/docs/concept/web/index.html +++ b/docs/concept/web/index.html @@ -4,7 +4,7 @@ Web Renderer | Live Compositor - + diff --git a/docs/deployment/configuration/index.html b/docs/deployment/configuration/index.html index b8f4bb0ec..6e4fa7a9f 100644 --- a/docs/deployment/configuration/index.html +++ b/docs/deployment/configuration/index.html @@ -4,7 +4,7 @@ Configuration | Live Compositor - + diff --git a/docs/get-started/elixir/index.html b/docs/get-started/elixir/index.html index e54d137dd..7e431bd51 100644 --- a/docs/get-started/elixir/index.html +++ b/docs/get-started/elixir/index.html @@ -4,7 +4,7 @@ Elixir | Live Compositor - + diff --git a/docs/get-started/index.html b/docs/get-started/index.html index ba919738e..8d5cf360c 100644 --- a/docs/get-started/index.html +++ b/docs/get-started/index.html @@ -4,7 +4,7 @@ Get started | Live Compositor - + diff --git a/docs/get-started/node/index.html b/docs/get-started/node/index.html index 6be3e42ca..482044fae 100644 --- a/docs/get-started/node/index.html +++ b/docs/get-started/node/index.html @@ -4,7 +4,7 @@ Node.js | Live Compositor - + diff --git a/docs/intro/index.html b/docs/intro/index.html index 7dbd70c94..e72b33da4 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -4,7 +4,7 @@ Introduction | Live Compositor - + diff --git a/index.html b/index.html index b9daf1456..f64fc1dde 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Live Compositor | Live Compositor - +