npm - @kabel-project/kabel - Versions diffs - 1.0.7 - Mend

@kabel-project/kabel 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/(1.0.7)kabel.md +18 -0
package/README.md +96 -0
package/_READ_ME_MEDIA_/documentation/docs.md +293 -0
package/_READ_ME_MEDIA_/workspace.png +0 -0
package/comment-renderer/renderer.ts +228 -0
package/controllers/base.ts +186 -0
package/controllers/wasd.ts +132 -0
package/docs/README.md +98 -0
package/docs/_media/docs.md +289 -0
package/docs/_media/index.html +168 -0
package/docs/_media/workspace.png +0 -0
package/docs/classes/CommentModel.md +271 -0
package/docs/classes/CommentRenderer.md +457 -0
package/docs/classes/ConnectableField.md +597 -0
package/docs/classes/Connection.md +191 -0
package/docs/classes/ContextMenuHTML.md +163 -0
package/docs/classes/Coordinates.md +187 -0
package/docs/classes/DropdownContainer.md +300 -0
package/docs/classes/DummyField.md +393 -0
package/docs/classes/Eventer.md +185 -0
package/docs/classes/Field.md +461 -0
package/docs/classes/InjectMsg.md +85 -0
package/docs/classes/NodeSvg.md +1011 -0
package/docs/classes/NumberField.md +559 -0
package/docs/classes/OptConnectField.md +624 -0
package/docs/classes/Renderer.md +1636 -0
package/docs/classes/RendererConstants.md +343 -0
package/docs/classes/Representer.md +95 -0
package/docs/classes/RepresenterNode.md +175 -0
package/docs/classes/TextField.md +559 -0
package/docs/classes/Toolbox.md +172 -0
package/docs/classes/WASDController.md +616 -0
package/docs/classes/Widget.md +195 -0
package/docs/classes/WorkspaceController.md +385 -0
package/docs/classes/WorkspaceCoords.md +218 -0
package/docs/classes/WorkspaceSvg.md +1380 -0
package/docs/functions/clearMainWorkspace.md +20 -0
package/docs/functions/getMainWorkspace.md +19 -0
package/docs/functions/inject.md +35 -0
package/docs/functions/setMainWorkspace.md +28 -0
package/docs/globals.md +95 -0
package/docs/interfaces/ColorStyle.md +43 -0
package/docs/interfaces/ConnectorToFrom.md +57 -0
package/docs/interfaces/DrawState.md +81 -0
package/docs/interfaces/FieldConnectionData.md +25 -0
package/docs/interfaces/FieldOptions.md +63 -0
package/docs/interfaces/FieldRawBoxData.md +25 -0
package/docs/interfaces/FieldVisualInfo.md +65 -0
package/docs/interfaces/GridOptions.md +61 -0
package/docs/interfaces/InjectOptions.md +133 -0
package/docs/interfaces/InputFieldJson.md +50 -0
package/docs/interfaces/KabelCommentRendering.md +31 -0
package/docs/interfaces/KabelInterface.md +469 -0
package/docs/interfaces/KabelNodeRendering.md +77 -0
package/docs/interfaces/KabelUIX.md +105 -0
package/docs/interfaces/KabelUtils.md +215 -0
package/docs/interfaces/NodeEvents.md +42 -0
package/docs/interfaces/NodeJson.md +104 -0
package/docs/interfaces/NodePrototype.md +82 -0
package/docs/interfaces/RegisteredEl.md +53 -0
package/docs/interfaces/SerializedNode.md +128 -0
package/docs/interfaces/TblxCategoryStruct.md +41 -0
package/docs/interfaces/TblxFieldStruct.md +28 -0
package/docs/interfaces/TblxNodeStruct.md +35 -0
package/docs/interfaces/WidgetOptions.md +115 -0
package/docs/interfaces/WidgetPrototypeList.md +15 -0
package/docs/type-aliases/AnyField.md +13 -0
package/docs/type-aliases/AnyFieldCls.md +13 -0
package/docs/type-aliases/Color.md +13 -0
package/docs/type-aliases/Connectable.md +13 -0
package/docs/type-aliases/EventArgs.md +11 -0
package/docs/type-aliases/EventSetupFn.md +25 -0
package/docs/type-aliases/Hex.md +13 -0
package/docs/type-aliases/RGBObject.md +37 -0
package/docs/type-aliases/RGBString.md +13 -0
package/docs/type-aliases/RGBTuple.md +13 -0
package/docs/type-aliases/TblxObjStruct.md +52 -0
package/docs/variables/CategoryColors.md +29 -0
package/docs/variables/FieldMap.md +41 -0
package/docs/variables/NodePrototypes.md +18 -0
package/docs/variables/default.md +11 -0
package/events/comment-drag-handle.ts +61 -0
package/events/comment-input.ts +291 -0
package/events/connection-line.ts +68 -0
package/events/connector.ts +116 -0
package/events/draggable.ts +119 -0
package/events/events.ts +7 -0
package/events/input-box.ts +213 -0
package/events/node-x-btn.ts +25 -0
package/index.d.ts +4 -0
package/package.json +49 -0
package/renderers/apollo/apollo.ts +21 -0
package/renderers/apollo/constants.ts +40 -0
package/renderers/apollo/renderer.ts +331 -0
package/renderers/atlas/atlas.ts +15 -0
package/renderers/constants.ts +87 -0
package/renderers/renderer.ts +1288 -0
package/renderers/representer-node.ts +52 -0
package/renderers/representer.ts +25 -0
package/src/category.ts +107 -0
package/src/colors.ts +20 -0
package/src/comment.ts +142 -0
package/src/connection.ts +114 -0
package/src/context-menu.ts +194 -0
package/src/coordinates.ts +74 -0
package/src/core.ts +202 -0
package/src/ctx-menu-registry.ts +143 -0
package/src/dropdown-menu.ts +215 -0
package/src/field.ts +595 -0
package/src/flyout.ts +165 -0
package/src/fonts-manager.ts +38 -0
package/src/grid.ts +162 -0
package/src/headless-node.ts +27 -0
package/src/index.ts +115 -0
package/src/inject-headless.ts +18 -0
package/src/inject.ts +213 -0
package/src/main-workspace.ts +51 -0
package/src/mutator.ts +40 -0
package/src/node-types.ts +27 -0
package/src/nodesvg.ts +756 -0
package/src/prototypes.ts +9 -0
package/src/renderer-map.ts +86 -0
package/src/styles.css +224 -0
package/src/toolbox.ts +125 -0
package/src/types.ts +205 -0
package/src/undo-redo.ts +87 -0
package/src/visual-types.ts +29 -0
package/src/widget-prototypes.ts +11 -0
package/src/widget.ts +139 -0
package/src/workspace-coords.ts +14 -0
package/src/workspace-svg.ts +736 -0
package/src/workspace.ts +155 -0
package/test-server.js +61 -0
package/themes/dark.ts +32 -0
package/themes/default.ts +28 -0
package/themes/themes.ts +9 -0
package/tsconfig.json +25 -0
package/typedoc.json +10 -0
package/util/emitter.ts +33 -0
package/util/env.ts +11 -0
package/util/escape-html.ts +22 -0
package/util/eventer.ts +108 -0
package/util/has-prop.ts +4 -0
package/util/parse-color.ts +42 -0
package/util/path.ts +99 -0
package/util/styler.ts +41 -0
package/util/uid.ts +184 -0
package/util/unescape-html.ts +22 -0
package/util/user-state.ts +68 -0
package/util/wait-anim-frames.ts +24 -0
package/util/window-listeners.ts +62 -0
package/webpack.config.js +80 -0

package/docs/_media/index.html ADDED Viewed

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Kabel Test</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <script>
+        function initKabel() {
+            function main() {
+                const k = Kabel;
+                const el = document.createElement('div');
+                Object.assign(el.style, {
+                    width: '100vw',
+                    height: '100vh',
+                    background: '#f0f0f0'
+                });
+                document.body.appendChild(el);
+                /**
+                 *{
+                        type: 'category',
+                        contents: [{
+                            name: "Cat",
+                            color: "#cc0c00",
+                            contents: [{
+                                type: 'my_node',
+                                arguments: {}
+                            }]
+                        }]
+                    }
+                 */
+                k.Nodes['my_node'] = {
+                    init() {
+                        this.jsonInit({
+                            previousConnection: true,
+                            nextConnection: true,
+                            labelText: 'TopbarText',
+                            type: 'my_node',
+                            primaryColor: '#cc0c00',
+                            secondaryColor: '#990900',
+                            tertiaryColor: '#660500',
+                            arguments: [
+                                {
+                                    name: 'FLD',
+                                    type: 'field_str',
+                                    label: 'LabelText: ',
+                                    value: 'ValueText'
+                                },
+                                {
+                                    name: 'Dummy',
+                                    type: 'field_dummy',
+                                    label: 'Label with no input!'
+                                },
+                                {
+                                    name: 'Conn',
+                                    type: 'connection',
+                                    label: 'Label!'
+                                },
+                                {
+                                    name: 'Conn2',
+                                    type: 'field_both',
+                                    label: 'lowk: ',
+                                    value: 'lowk'
+                                }, {
+                                    name: 'Dropdown',
+                                    type: 'dropdown',
+                                    label: 'lowk dropdown?: ',
+                                    options: [
+                                        'Oooo option',
+                                        { text: 'Opt', value: 'opt' }
+                                    ]
+                                }
+                            ]
+                        });
+                    }
+                };
+                k.Widgets['testWidget'] = {
+                    name: 'Test Widget',
+                    width: 150,
+                    height: 100,
+                    coords: new k.Coordinates(50, 50),
+                    html: '<button id="counterBtn">Count: 0</button>',
+                    init: function (widget, container) {
+                        let count = 0;
+                        const btn = container.querySelector('#counterBtn');
+                        if (btn) {
+                            btn.addEventListener('click', function () {
+                                count++;
+                                btn.textContent = 'Count: ' + count;
+                            });
+                        }
+                    }
+                };
+                // Use WASDController with acceleration
+                const ws = k.inject(el, {
+                    theme: k.Themes.Dark,
+                    renderer: 'apollo',
+                    moveSpeed: 6, // optional, base speed
+                    initUndoRedo: false,
+                    controls: {
+                        wasd: true,
+                        wasdSmooth: true,
+                        wasdAccelerate: 1,
+                        wasdFriction: 0.9
+                    },
+                    grid: {
+                        type: 'celled',
+                        color: '#333333'
+                    },
+                    toolbox: {
+                        type: 'category',
+                        contents: [{
+                            name: "Cat",
+                            color: "#cc0c00",
+                            contents: [{
+                                type: 'my_node',
+                                arguments: {}
+                            }]
+                        }]
+                    }
+                });
+                // Define custom node type
+                // Create nodes
+                ws.toggleHistory(false);
+                const node = new k.NodeSvg(k.Nodes['my_node'], ws);
+                node.init();
+                const node1 = new k.NodeSvg(k.Nodes['my_node'], ws);
+                node1.init();
+                node1.relativeCoords.set(20, 0);
+                node.nextConnection.to = node1;
+                node1.previousConnection.from = node;
+                ws.untoggleHistory();
+                ws.redraw();
+                ws.history.emitChange();
+                const myWidget = ws.newWidget('testWidget');
+                if (myWidget) myWidget.show(); // make it visible
+                // Expose for debugging
+                window.ws = ws;
+                window.nodes = [node, node1];
+            }
+            if (typeof Kabel !== 'undefined') {
+                main();
+            }
+        }
+    </script>
+    <script src="./kabel.js" onload="initKabel()"></script>
+</body>
+</html>

package/docs/_media/workspace.png ADDED Viewed

Binary file

package/docs/classes/CommentModel.md ADDED Viewed

@@ -0,0 +1,271 @@
+[**Kabel Project Docs v1.0.6**](../README.md)
+***
+[Kabel Project Docs](../globals.md) / CommentModel
+# Class: CommentModel
+Defined in: [src/comment.ts:18](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L18)
+Represents a comment attached to either a NodeSvg or a WorkspaceSvg.
+## Constructors
+### Constructor
+> **new CommentModel**(`parent`): `CommentModel`
+Defined in: [src/comment.ts:47](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L47)
+Creates a new comment attached to a node or workspace.
+#### Parameters
+##### parent
+NodeSvg or WorkspaceSvg this comment belongs to
+[`NodeSvg`](NodeSvg.md) | [`WorkspaceSvg`](WorkspaceSvg.md) | `Workspace`
+#### Returns
+`CommentModel`
+## Properties
+### \_isWorkspaceComment
+> **\_isWorkspaceComment**: `boolean`
+Defined in: [src/comment.ts:23](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L23)
+True if this comment belongs to the workspace instead of a node
+***
+### \_parent
+> **\_parent**: [`NodeSvg`](NodeSvg.md) \| [`WorkspaceSvg`](WorkspaceSvg.md) \| `Workspace`
+Defined in: [src/comment.ts:26](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L26)
+Parent NodeSvg or WorkspaceSvg to which this comment belongs
+***
+### \_tempInputBBox?
+> `optional` **\_tempInputBBox**: `object`
+Defined in: [src/comment.ts:38](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L38)
+Temporary bounding box info for input handling
+#### height
+> **height**: `number`
+#### textX
+> **textX**: `number`
+#### textY
+> **textY**: `number`
+#### width
+> **width**: `number`
+***
+### \_text
+> **\_text**: `string`
+Defined in: [src/comment.ts:20](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L20)
+The comment text
+***
+### id
+> **id**: `string`
+Defined in: [src/comment.ts:41](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L41)
+Unique identifier for this comment
+***
+### relativeCoords
+> **relativeCoords**: [`Coordinates`](Coordinates.md)
+Defined in: [src/comment.ts:32](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L32)
+Coordinates relative to parent
+***
+### svgGroup?
+> `optional` **svgGroup**: `G`
+Defined in: [src/comment.ts:29](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L29)
+SVG group representing this comment in the DOM
+***
+### svgLine?
+> `optional` **svgLine**: `Line`
+Defined in: [src/comment.ts:35](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L35)
+Optional SVG line connecting the comment to its node
+## Methods
+### getText()
+> **getText**(): `string`
+Defined in: [src/comment.ts:70](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L70)
+Retrieves the current text of the comment.
+#### Returns
+`string`
+The comment text
+***
+### getWorkspace()
+> **getWorkspace**(): [`WorkspaceSvg`](WorkspaceSvg.md)
+Defined in: [src/comment.ts:104](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L104)
+Gets the workspace that owns this comment.
+#### Returns
+[`WorkspaceSvg`](WorkspaceSvg.md)
+***
+### isNodeComment()
+> **isNodeComment**(): `boolean`
+Defined in: [src/comment.ts:90](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L90)
+Returns true if this comment is attached to a node.
+#### Returns
+`boolean`
+***
+### isWorkspaceComment()
+> **isWorkspaceComment**(): `boolean`
+Defined in: [src/comment.ts:97](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L97)
+Returns true if this comment is attached to the workspace.
+#### Returns
+`boolean`
+***
+### setText()
+> **setText**(`value`): `string`
+Defined in: [src/comment.ts:79](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L79)
+Sets the text of the comment and triggers a redraw of all comments in the workspace.
+#### Parameters
+##### value
+`string`
+New text content
+#### Returns
+`string`
+The updated text
+***
+### setTextNoRedraw()
+> **setTextNoRedraw**(`value`): `string`
+Defined in: [src/comment.ts:62](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L62)
+Sets the text of the comment without triggering a comment redraw.
+#### Parameters
+##### value
+`string`
+New text content
+#### Returns
+`string`
+The updated text
+***
+### toJson()
+> **toJson**(): `CommentSerialized`
+Defined in: [src/comment.ts:114](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L114)
+Convert to JSON structure holding all important data.
+#### Returns
+`CommentSerialized`
+***
+### fromJson()
+> `static` **fromJson**(`data`): `CommentModel`
+Defined in: [src/comment.ts:129](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/comment.ts#L129)
+Creates a CommentModel from serialized data.
+#### Parameters
+##### data
+`CommentSerialized`
+The serialized comment
+#### Returns
+`CommentModel`