Canvas - Revision history

Luke at 23:02, 10 January 2023

2023-01-10T23:02:53Z

← Older revision		Revision as of 23:02, 10 January 2023
Line 1:		Line 1:
	Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.		Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child. The JSON usually originates from the [[Canvas Editor]].

Luke: /* Canvas Json */

2023-01-10T23:02:30Z

Canvas Json

← Older revision		Revision as of 23:02, 10 January 2023
Line 31:		Line 31:


	The JSON that Canvas uses is a very thin system for representing a tree of elements. A json object with these fields we'll refer to as a "canvas node" here. It has 3 main fields:		The JSON that Canvas uses is a very thin system for representing a tree of elements. A json object with these fields we'll refer to as a "canvas node" here. It has 4 main fields:

	* t (type): The type of this element. It is either an absolute component path or the name of a HTML element usually in lowercase.		* t (type): The type of this element. It is either an absolute component path or the name of a HTML element usually in lowercase.
Line 38:		Line 38:

	* c (children): Any child nodes of the element. These are processed as canvas nodes then passed as the children prop in React. It can be an array of canvas nodes/ strings, a single canvas node or a single string. Strings are treated as raw text.		* c (children): Any child nodes of the element. These are processed as canvas nodes then passed as the children prop in React. It can be an array of canvas nodes/ strings, a single canvas node or a single string. Strings are treated as raw text.

			* g (graph): A set of canvas graph nodes from the [[Graph Editor\|graph editor]] which is used to define dynamic content flows without having to hardcode it, such as a page which displays user profiles on the site. The user is loaded in the graph and then the fields are connected to components with a graph.

	There are some additional fields which can be used for diffing canvas JSON amongst other things:		There are some additional fields which can be used for diffing canvas JSON amongst other things:

2A02:C7F:22BE:A500:498:3225:1A16:A72D at 01:48, 6 July 2022

2022-07-06T01:48:43Z

← Older revision		Revision as of 01:48, 6 July 2022
Line 1:		Line 1:
	Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.		Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.


			<syntaxhighlight lang="js">
			import Canvas from 'UI/Canvas';

			..

			<Canvas>{"t":"UI/Header"}</Canvas>

			</syntaxhighlight>

	=Canvas Json=		=Canvas Json=

Luke: /* Canvas Json */

2022-05-27T14:34:28Z

Canvas Json

← Older revision		Revision as of 14:34, 27 May 2022
Line 37:		Line 37:
	* ti (template ID): If a canvas node was imported from another canvas, it can be given both an ID and a template ID to identify where it originated from. This allows these remote nodes to have custom overrideable data values but are still easily diffable with the source canvas that they came from.		* ti (template ID): If a canvas node was imported from another canvas, it can be given both an ID and a template ID to identify where it originated from. This allows these remote nodes to have custom overrideable data values but are still easily diffable with the source canvas that they came from.

	* r (roots): Sometimes you may want your props to be canvas formatted. You could pass a JSON string via data and then have your component internally render it but that is not particularly friendly for editors - it's nice if a canvas editor is aware that your prop is something it can edit too, potentially even inline. This is what roots are for - they are canvas root nodes which are then passed to your component as a prop after it has been rendered. I.e. in React, the value of the prop that you receive is a React node.		* r (roots): Sometimes you may want your props to be canvas formatted. You could pass a JSON string via data and then have your component internally render it but that is not particularly friendly for editors - it's nice if a canvas editor is aware that your prop is something it can edit too, potentially even inline. This is what roots are for - they are canvas root nodes which are then passed to your component as a prop after it has been rendered. I.e. in React, the value of the prop that you receive is a React node. A canvas root node has the restriction that it must be an object, not a string, but it can still contain strings as its child nodes.

Luke: /* Canvas Json */

2022-05-27T14:32:49Z

Canvas Json

← Older revision		Revision as of 14:32, 27 May 2022
Line 36:		Line 36:

	* ti (template ID): If a canvas node was imported from another canvas, it can be given both an ID and a template ID to identify where it originated from. This allows these remote nodes to have custom overrideable data values but are still easily diffable with the source canvas that they came from.		* ti (template ID): If a canvas node was imported from another canvas, it can be given both an ID and a template ID to identify where it originated from. This allows these remote nodes to have custom overrideable data values but are still easily diffable with the source canvas that they came from.

			* r (roots): Sometimes you may want your props to be canvas formatted. You could pass a JSON string via data and then have your component internally render it but that is not particularly friendly for editors - it's nice if a canvas editor is aware that your prop is something it can edit too, potentially even inline. This is what roots are for - they are canvas root nodes which are then passed to your component as a prop after it has been rendered. I.e. in React, the value of the prop that you receive is a React node.

Luke: /* Canvs Json */

2022-05-27T14:27:24Z

Canvs Json

← Older revision		Revision as of 14:27, 27 May 2022
Line 1:		Line 1:
	Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.		Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.

	=~~Canvs~~ Json=		=Canvas Json=

	<syntaxhighlight lang="json" line="1">		<syntaxhighlight lang="json" line="1">

Luke: /* Canvs Json */

2022-05-27T14:27:07Z

Canvs Json

← Older revision		Revision as of 14:27, 27 May 2022
Line 13:		Line 13:
	{		{
	"t": "b",		"t": "b",
	"c": "This is bold text as a child of UI/HelloWorld.		"c": "This is bold text as a child of UI/HelloWorld."
	}		}
	]		]

Luke: Created page with "Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON forma..."

2022-05-27T14:26:59Z

Created page with "Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON forma..."

New page

Canvas is SocialStack's main mechanism for representing configurable structured content - that's mainly things like pages of your site and emails. It is stored as a JSON format and the JSON is passed to the React <Canvas> element usually as a child.

=Canvs Json=

<syntaxhighlight lang="json" line="1">

{
"t": "UI/HelloWorld",
"d": {
"customProp": "This is a prop value passed to UI/HelloWorld"
},
"c": [
{
"t": "b",
"c": "This is bold text as a child of UI/HelloWorld.
}
]
}

</syntaxhighlight>

The JSON that Canvas uses is a very thin system for representing a tree of elements. A json object with these fields we'll refer to as a "canvas node" here. It has 3 main fields:

* t (type): The type of this element. It is either an absolute component path or the name of a HTML element usually in lowercase.

* d (data): Any custom data for the element. In React these are passed to your element as props as-is. Importantly though, HTML elements are not expected to support data (but where they do, the values are as-is attributes). This is such that canvas JSON is safe for use by frontend users to create and is not overly tied to HTML itself. I.e. "t": "b" indicates bold.

* c (children): Any child nodes of the element. These are processed as canvas nodes then passed as the children prop in React. It can be an array of canvas nodes/ strings, a single canvas node or a single string. Strings are treated as raw text.

There are some additional fields which can be used for diffing canvas JSON amongst other things:

* s (string): An object containing "s": "some text" works the same way as just a text string in children, but with the advantage of being able to have additional fields on it such as an id.

* i (id): A unique number for this particular node. Particularly useful for comparing changes in canvases. Editors must not reuse a removed id; it must only ever increase.

* ti (template ID): If a canvas node was imported from another canvas, it can be given both an ID and a template ID to identify where it originated from. This allows these remote nodes to have custom overrideable data values but are still easily diffable with the source canvas that they came from.