diff --git a/custom-elements.json b/custom-elements.json
index d7b04cf..ff99977 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -3,6 +3,7 @@
"tags": [
{
"name": "brick-viewer",
+ "path": "./src/brick-viewer.ts",
"attributes": [
{
"name": "src",
@@ -14,13 +15,18 @@
}
],
"properties": [
+ {
+ "name": "styles",
+ "type": "CSSResult",
+ "default": "\"css`\\n :host {\\n display: block;\\n position: relative;\\n height: 300px;\\n }\\n #controls {\\n position: absolute;\\n bottom: 0;\\n width: 100%;\\n display: flex;\\n }\\n mwc-slider {\\n flex-grow: 1;\\n }\\n mwc-linear-progress,\\n #error-message {\\n position: absolute;\\n top: 0;\\n width: 100%;\\n }\\n #error-message {\\n padding-top: 10px;\\n color: red;\\n text-align: center;\\n }\\n canvas {\\n outline: none;\\n }\\n `\""
+ },
{
"name": "src",
"attribute": "src",
"type": "string | null"
},
{
- "name": "constructionStep",
+ "name": "step",
"attribute": "step",
"type": "number | undefined"
},
@@ -28,6 +34,55 @@
"name": "slider",
"type": "Slider | null"
}
+ ],
+ "events": [
+ {
+ "name": "model-loaded"
+ }
+ ]
+ },
+ {
+ "name": "knobs-example",
+ "path": "./src/docs-components/knobs-example.ts",
+ "attributes": [
+ {
+ "name": "step",
+ "type": "number",
+ "default": "1"
+ },
+ {
+ "name": "src",
+ "type": "string",
+ "default": "\"radar_truck\""
+ }
+ ],
+ "properties": [
+ {
+ "name": "step",
+ "attribute": "step",
+ "type": "number",
+ "default": "1"
+ },
+ {
+ "name": "src",
+ "attribute": "src",
+ "type": "string",
+ "default": "\"radar_truck\""
+ },
+ {
+ "name": "brickViewer",
+ "type": "BrickViewer"
+ },
+ {
+ "name": "sources",
+ "type": "{ filename: string; prettyName: string; }[]",
+ "default": "[{\"filename\":\"bulldozer\",\"prettyName\":\"Bulldozer\"},{\"filename\":\"radar_truck\",\"prettyName\":\"Radar Truck\"}]"
+ },
+ {
+ "name": "styles",
+ "type": "CSSResult",
+ "default": "\"css`\\n :host {\\n --mdc-theme-primary: green;\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(400px, 488px));\\n grid-gap: 24px 48px;\\n justify-content: center;\\n }\\n\\n :host > div {\\n flex: 1;\\n }\\n\\n span {\\n font-style: bold;\\n }\\n #src-label {\\n margin-left: 15px;\\n }\\n #src-label,\\n #step-label {\\n font-weight: bold;\\n }\\n\\n mwc-select {\\n vertical-align: middle;\\n }\\n\\n input[type='number'] {\\n padding: 16px;\\n font-size: 16px;\\n font-family: Roboto;\\n color: rgba(0, 0, 0, 0.87) !important;\\n outline-color: var(--mdc-select-outlined-idle-border-color) !important;\\n }\\n input[type='number']:focus {\\n outline-color: var(--mdc-theme-primary) !important;\\n }\\n\\n .code {\\n background: #272822;\\n padding: 1em;\\n font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\\n color: #f8f8f2;\\n }\\n .code .tag {\\n color: #f92672;\\n }\\n .code .attribute, .code .string {\\n color: #a6e22e;\\n }\\n .code .value {\\n color: #e6db74;\\n }\\n .code .keyword {\\n color: #66d9ef;\\n }\\n `\""
+ }
]
}
]
diff --git a/docs-src/_includes/footer.11ty.cjs b/docs-src/_includes/footer.11ty.cjs
index cdaca5a..d51a803 100644
--- a/docs-src/_includes/footer.11ty.cjs
+++ b/docs-src/_includes/footer.11ty.cjs
@@ -3,7 +3,7 @@ module.exports = function(data) {
`;
};
diff --git a/docs/api/index.html b/docs/api/index.html
index 9bd5603..6c2b3c9 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -52,12 +52,16 @@
Properties
Name | Attribute | Description | Type | Default |
+
+ | styles | undefined | undefined | CSSResult | "css`\n :host {\n display: block;\n position: relative;\n height: 300px;\n }\n #controls {\n position: absolute;\n bottom: 0;\n width: 100%;\n display: flex;\n }\n mwc-slider {\n flex-grow: 1;\n }\n mwc-linear-progress,\n #error-message {\n position: absolute;\n top: 0;\n width: 100%;\n }\n #error-message {\n padding-top: 10px;\n color: red;\n text-align: center;\n }\n canvas {\n outline: none;\n }\n `" |
+
+
| src | src | undefined | string | null | undefined |
- | constructionStep | step | undefined | number | undefined | undefined |
+ step | step | undefined | number | undefined | undefined |
@@ -67,6 +71,74 @@ Properties
+
+ Events
+
+
+ | Name | Description |
+
+
+
+ | model-loaded | undefined |
+
+
+
+
+
+
+
+
+ <knobs-example>
+
+ undefined
+
+
+ Attributes
+
+
+ | Name | Description | Type | Default |
+
+
+
+ | step | undefined | number | 1 |
+
+
+
+ | src | undefined | string | "radar_truck" |
+
+
+
+
+
+ Properties
+
+
+ | Name | Attribute | Description | Type | Default |
+
+
+
+ | step | step | undefined | number | 1 |
+
+
+
+ | src | src | undefined | string | "radar_truck" |
+
+
+
+ | brickViewer | undefined | undefined | BrickViewer | undefined |
+
+
+
+ | sources | undefined | undefined | { filename: string; prettyName: string; }[] | [{"filename":"bulldozer","prettyName":"Bulldozer"},{"filename":"radar_truck","prettyName":"Radar Truck"}] |
+
+
+
+ | styles | undefined | undefined | CSSResult | "css`\n :host {\n --mdc-theme-primary: green;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 488px));\n grid-gap: 24px 48px;\n justify-content: center;\n }\n\n :host > div {\n flex: 1;\n }\n\n span {\n font-style: bold;\n }\n #src-label {\n margin-left: 15px;\n }\n #src-label,\n #step-label {\n font-weight: bold;\n }\n\n mwc-select {\n vertical-align: middle;\n }\n\n input[type='number'] {\n padding: 16px;\n font-size: 16px;\n font-family: Roboto;\n color: rgba(0, 0, 0, 0.87) !important;\n outline-color: var(--mdc-select-outlined-idle-border-color) !important;\n }\n input[type='number']:focus {\n outline-color: var(--mdc-theme-primary) !important;\n }\n\n .code {\n background: #272822;\n padding: 1em;\n font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n color: #f8f8f2;\n }\n .code .tag {\n color: #f92672;\n }\n .code .attribute, .code .string {\n color: #a6e22e;\n }\n .code .value {\n color: #e6db74;\n }\n .code .keyword {\n color: #66d9ef;\n }\n `" |
+
+
+
+
+
@@ -79,7 +151,7 @@ Properties