@cloudos/core - npm Package Compare versions

Comparing version 1.0.19 to 1.0.20

lib/package.json

+{
+    "name": "@cloudos/core",
+    "version": "1.0.19",
+    "description": "cloudos-core",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "files": [
+        "lib/**/*"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "pub": "tsc && yarn publish --access public --patch"
+    },
+    "dependencies": {
+        "@cloudos/flow-ui": "^1.0.29",
+        "@cloudos/ipc": "^1.0.6",
+        "@cloudos/logic": "^1.0.31",
+        "fuse.js": "^6.5.3",
+        "mousetrap": "^1.6.5",
+        "react": "^17.0.2",
+        "react-contenteditable": "^3.3.6",
+        "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
+        "react-rnd": "^10.3.5"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.16.12",
+        "@types/babel__core": "^7.1.18",
+        "@types/mousetrap": "^1.6.9",
+        "@types/node": "^17.0.10",
+        "@types/react": "^17.0.33",
+        "@types/react-dom": "^17.0.10",
+        "@vitejs/plugin-react": "^1.0.7",
+        "rollup-plugin-analyzer": "^4.0.0",
+        "rollup-plugin-visualizer": "^5.5.4",
+        "typescript": "^4.4.4",
+        "vite": "^2.7.13"
+    }
+}

lib/src/apps/commandPanel/Contenteditable.js

+import { createUI } from "../../framework";
+import { createRef, useEffect, useState } from "react";
+// import "./style.css";
+(() => {
+    let styleTag = document.createElement('style');
+    styleTag.innerHTML = `.commander-input[contenteditable=true]:empty:before {
+        content: attr(placeholder);
+        display: block;
+        color: #aaa;
+    }`;
+    document.head.insertAdjacentElement('beforeend', styleTag);
+})();
+export default (props) => {
+    const { placeholder = "", html = "", autoFocus = false, innerRef = null, onTakeEffect: onTakeEffect, onChange } = props;
+    const [state, setState] = useState({
+        html
+    });
+    let contenteditable = createRef();
+    useEffect(() => {
+        if (autoFocus)
+            contenteditable.current.focus();
+        if (innerRef) {
+            innerRef.current = contenteditable.current;
+            innerRef.current.getHtml = () => {
+                return state.html;
+            };
+        }
+        if (onTakeEffect)
+            onTakeEffect();
+    });
+    return createUI({
+        type: "contenteditable",
+        className: "commander-input",
+        innerRef: contenteditable,
+        html: state.html,
+        style: {
+            outline: "none",
+            width: "100%",
+        },
+        autoFocus: true,
+        placeholder: placeholder,
+        onChange: (e) => {
+            setState({ html: e.target.value });
+            if (onChange)
+                onChange(e);
+        }
+    });
+};

lib/src/apps/commandPanel/index.js

+import { createUI, render } from '../../framework';
+import mousetrap from 'mousetrap';
+import { unmountComponentAtNode } from 'react-dom';
+import Contenteditable from './Contenteditable';
+import { createRef } from 'react';
+import { useSearchEngine } from './search';
+export const useCommandPanel = () => {
+    const docRoot = document.getElementById('root');
+    const containerRef = { current: null };
+    const getContainerEl = () => containerRef.current;
+    const inputRef = createRef();
+    const rootRef = createRef();
+    const resultBoxRef = createRef();
+    let active = false;
+    let visible = false;
+    let display = "unknown";
+    const getRootEl = () => {
+        return rootRef.current;
+    };
+    const getInputEl = () => inputRef.current;
+    const getResultBoxEl = () => resultBoxRef.current;
+    const create = () => {
+        let c = document.createElement('div');
+        docRoot?.appendChild(c);
+        containerRef.current = c;
+        const onBoxTakeEffect = () => {
+            display = getRootEl().style.display;
+            active = true;
+        };
+        const resultBox = () => {
+            return {
+                width: "100%",
+                backgroundColor: "white",
+                innerRef: resultBoxRef,
+            };
+        };
+        const rnd = () => {
+            let width = Math.min(800, window.innerWidth), height = 50;
+            let x = (window.innerWidth - width) / 2, y = 200;
+            return {
+                type: "rnd",
+                default: {
+                    x, y, width, height
+                },
+                minHeight: height,
+                bounds: "parent",
+                enableResizing: { top: true, right: false, bottom: true, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false },
+                children: [
+                    {
+                        name: "commander",
+                        width: "100%",
+                        height: "100%",
+                        backgroundColor: "white",
+                        boxShadow: "0 1px 5px 0 #8c8c8c91",
+                        alignItems: "center",
+                        className: "drag-handle",
+                        flow: "row",
+                        onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        },
+                        children: [
+                            {
+                                span: "10px",
+                            },
+                            {
+                                type: Contenteditable,
+                                html: "",
+                                autoFocus: true,
+                                innerRef: inputRef,
+                                onChange: onInputChange,
+                                onTakeEffect: onInputMount,
+                                placeholder: "input command ... ",
+                            }
+                        ]
+                    },
+                    resultBox
+                ]
+            };
+        };
+        const box = {
+            type: "box",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 10000,
+            innerRef: rootRef,
+            onTakeEffect: onBoxTakeEffect,
+            border: "none",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            flow: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            onClick: () => {
+                hide();
+            },
+            children: [
+                rnd
+            ]
+        };
+        let ui = createUI(box, { key: 0 });
+        let el = document.getElementById("root");
+        if (active)
+            throw new Error();
+        render(ui, el);
+        visible = true;
+    };
+    const destroy = () => {
+        if (!active)
+            throw new Error();
+        unmountComponentAtNode(getContainerEl());
+        active = false;
+        docRoot.removeChild(getContainerEl());
+    };
+    const show = () => {
+        if (!active)
+            throw new Error();
+        if (!visible) {
+            getRootEl().style.display = display;
+            visible = true;
+            getInputEl().focus();
+        }
+    };
+    const hide = () => {
+        if (!active)
+            throw new Error();
+        if (visible) {
+            getRootEl().style.display = "none";
+            visible = false;
+        }
+    };
+    const onInputChange = (e) => {
+        let html = e.target.value;
+        console.log("search: " + html);
+        let result = searchEngine.search(html);
+        console.log(result);
+        showSearchResults(result);
+    };
+    const searchEngine = useSearchEngine();
+    const showSearchResults = (results) => {
+        let el = createUI({
+            type: "dom-div",
+            style: "width:100%;",
+            children: results.map(item => {
+                return {
+                    type: "dom-div",
+                    style: "padding-left:10px;height:50px;border-top:solid 1px gray;background-color:green;display:flex;align-items:center",
+                    children: [
+                        item.item.description
+                    ]
+                };
+            })
+        });
+        getResultBoxEl().innerHTML = "";
+        getResultBoxEl().appendChild(el);
+    };
+    const onInputMount = () => {
+        window.onload = () => {
+            if (visible)
+                getInputEl().focus();
+        };
+        let el = getInputEl();
+        el.onblur = () => {
+            el.focus();
+        };
+        mousetrap.bind('esc', () => {
+            hide();
+        });
+        const mtBody = mousetrap(el);
+        mtBody.bind("esc", () => {
+            hide();
+        });
+        mtBody.bind('enter', (e) => {
+            // alert((e.target as any).value);
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        mtBody.bind('space', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // let text=el.innerText;
+            // let result=searchEngine.search(text);
+            // console.log(result);
+        });
+    };
+    const start = () => {
+        mousetrap.bind('x', (e) => {
+            show();
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        create();
+        // show();
+        hide();
+    };
+    const exit = () => {
+        destroy();
+    };
+    return {
+        start,
+        exit
+    };
+};

lib/src/apps/commandPanel/search.js

+import Fuse from "fuse.js";
+const searchItemList = [
+    {
+        keywords: ["markpad"],
+        description: "Markdown Editor",
+    },
+    {
+        keywords: ["markpad"],
+        description: "Markdown Editor",
+    },
+    {
+        keywords: [
+            "file", "explorer", "find"
+        ],
+        description: "File Explorer",
+    },
+    {
+        keywords: [
+            "terminal", "shell", "cmd", "command"
+        ],
+        description: "Shell for CloudOs"
+    }
+];
+export const useSearchEngine = () => {
+    const fuse = new Fuse(searchItemList, {
+        keys: [
+            "description"
+        ]
+    });
+    const search = (query) => {
+        return fuse.search(query);
+    };
+    return {
+        search
+    };
+};

lib/src/framework/common/utils.js

+export const pickProps = (obj, keys) => Object.fromEntries(keys
+    .filter(key => key in obj)
+    .map(key => [key, obj[key]]));
+export const excludeProps = (obj, keys) => Object.fromEntries(Object.keys(obj).filter(key => (keys.indexOf(key) === -1)).map((key => [key, obj[key]])));
+export const isClassComponent = (component) => {
+    return (typeof component === 'function' &&
+        !!component.prototype?.isReactComponent);
+};
+export const isFunctionComponent = (component) => {
+    return (typeof component === 'function');
+};
+export const isReactComponent = (component) => {
+    return (isClassComponent(component) ||
+        isFunctionComponent(component));
+};

lib/src/framework/components/box.js

+import { defineTransformer } from "../../utils";
+export default {
+    type: "box",
+    transformer: defineTransformer({
+        name: "box",
+        position: "fixed",
+        backgroundColor: "white",
+        border: "solid 1px black",
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+        children: []
+    })
+};

lib/src/framework/components/html.js

+export default {
+    type: "html",
+    transformer: (node, key, children) => {
+        var div = document.createElement('div');
+        if (typeof node.text === 'string') {
+            div.innerHTML = node.text.trim();
+            return div.firstChild;
+        }
+        throw new Error("Prop 'text' should be string, but got :" + typeof node.text);
+        // Change this to div.childNodes to support multiple top-level nodes.
+    }
+};

lib/src/framework/...act-components/contenteditable/index.js

+import ContentEditable from "react-contenteditable";
+export { ContentEditable };

lib/src/framework/components/react-components/flexbox.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { commonStyleProps, standardComponentPropNames } from '@cloudos/flow-ui';
+import { useEffect, createRef } from 'react';
+import { pickProps, excludeProps } from '../../common/utils';
+const handledProps = [...commonStyleProps, ...standardComponentPropNames,
+    ...["style", "children", "flow", "span", "key", "onTakeEffect", "innerRef"]
+];
+export const Flexbox = ((props) => {
+    // console.log(props);
+    // const elProps=pickProps(props,InnerComponentProps);
+    const elProps = excludeProps(props, handledProps);
+    const style = pickProps(props, commonStyleProps);
+    const { onTakeEffect, innerRef = createRef() } = props;
+    if (onTakeEffect)
+        useEffect(() => {
+            return onTakeEffect();
+        });
+    ((style, comp) => {
+        // set extra styles
+        Object.assign(style, { display: "flex", "flexFlow": comp.flow || "row" });
+        if (typeof comp.span !== 'undefined') {
+            style["flexBasis"] = comp.span;
+        }
+    })(style, props);
+    return _jsx("div", { ref: innerRef, "data-name": props.name, "data-description": props.description, style: style, ...elProps, children: props.children }, void 0);
+});

lib/src/framework/components/react-components/icons/index.js

+export * from './windowIcons';

lib/src/framework/...s/react-components/icons/windowIcons.js

+import { VscChromeRestore, VscChromeClose, VscChromeMaximize, VscChromeMinimize } from 'react-icons/vsc';
+export const WindowRestore = VscChromeRestore;
+export const WindowClose = VscChromeClose;
+export const WindowMaximize = VscChromeMaximize;
+export const WindowMinimize = VscChromeMinimize;

lib/src/framework/components/react-components/rnd.js

+export { Rnd } from 'react-rnd';

lib/src/framework/components/window/index.js

+import { defineTransformer } from "../../../utils";
+import windowHeader from './windowHeader';
+export default {
+    type: "window",
+    transformer: defineTransformer((x = {}, children = []) => {
+        const { width = 400, height = 300, ...windowHeaderProps } = x;
+        return {
+            type: "rnd",
+            name: "window",
+            bounds: 'parent',
+            default: {
+                x: 0,
+                y: 0,
+                width: width,
+                height: height,
+            },
+            minWidth: 300,
+            minHeight: 200,
+            dragHandleClassName: "drag-handle",
+            children: [
+                {
+                    name: "page",
+                    flow: "column",
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "gray",
+                    children: [
+                        windowHeader(windowHeaderProps),
+                        {
+                            flow: "row",
+                            span: "100%",
+                            children: [
+                                ...children || []
+                            ]
+                        },
+                    ]
+                }
+            ]
+        };
+    })
+};

lib/src/framework/components/window/windowControl.js

+import { ipc } from "@cloudos/ipc";
+// export default defineTemplate((x: WindowControlProps = {}) => {
+//     const {
+//         onMinimize = () => { ipc.dispatch("window-minimize") },
+//         onMaximize = () => { ipc.dispatch("window-maximize") },
+//         onRestore = () => { ipc.dispatch("window-restore") },
+//         onClose = () => { ipc.dispatch("window-close") },
+//     } = x;
+//     return {
+//         "name": "window-control",
+//         "span": "200px",
+//         "flow": "row",
+//         "alignItems": "center",
+//         "justifyContent": "space-evenly",
+//         "children": [
+//             {
+//                 "type": "WindowMinimize",
+//                 onClick: onMinimize,
+//             },
+//             {
+//                 "type": "WindowRestore",
+//                 onClick: onRestore,
+//             },
+//             {
+//                 "type": "WindowMaximize",
+//                 onClick: onMaximize,
+//             },
+//             {
+//                 "type": "WindowClose",
+//                 onClick: onClose,
+//             }
+//         ]
+//     }
+// })
+export default (x = {}) => {
+    const { onMinimize = () => { ipc.dispatch("window-minimize"); }, onMaximize = () => { ipc.dispatch("window-maximize"); }, onRestore = () => { ipc.dispatch("window-restore"); }, onClose = () => { ipc.dispatch("window-close"); }, } = x;
+    return {
+        "name": "window-control",
+        "span": "200px",
+        "flow": "row",
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+        "children": [
+            {
+                "type": "WindowMinimize",
+                onClick: onMinimize,
+            },
+            {
+                "type": "WindowRestore",
+                onClick: onRestore,
+            },
+            {
+                "type": "WindowMaximize",
+                onClick: onMaximize,
+            },
+            {
+                "type": "WindowClose",
+                onClick: onClose,
+            }
+        ]
+    };
+};

lib/src/framework/components/window/windowHeader.js

+import windowControl from './windowControl';
+// export default defineTemplate((x:WindowHeaderProps={})=>{
+//     return {
+//         name: "header",
+//         flow: "row",
+//         backgroundColor: "#e5e5e5",
+//         boxShadow: "0 1px 5px 0 #8c8c8c91",
+//         span: "35px",
+//         flexShrink: 0,
+//         className: "drag-handle",
+//         children: [
+//             {
+//                 name: "menuBar",
+//                 // backgroundColor: "#16488d",
+//                 minWidth: "100px",
+//             },
+//             {
+//                 name: "blank",
+//                 span: "100%",
+//             },
+//             windowControl({
+//                 ...x
+//             } as WindowControlProps),
+//         ]
+//     }
+// })
+export default (x = {}) => {
+    return {
+        name: "header",
+        flow: "row",
+        backgroundColor: "#e5e5e5",
+        boxShadow: "0 1px 5px 0 #8c8c8c91",
+        span: "35px",
+        flexShrink: 0,
+        className: "drag-handle",
+        children: [
+            {
+                name: "menuBar",
+                // backgroundColor: "#16488d",
+                minWidth: "100px",
+            },
+            {
+                name: "blank",
+                span: "100%",
+            },
+            windowControl({
+                ...x
+            }),
+        ]
+    };
+};

lib/src/framework/engine/index.js

+import { makeEngine } from "@cloudos/flow-ui";
+export const { createUI, defineReusable, registerComponent, render, registerComponentDict, registerPostprocessor, registerPreprocessor } = makeEngine();
+registerPreprocessor(({ node, context }) => {
+    if (typeof node === 'function')
+        node = node({ key: context.key });
+    return { node, context };
+});
+registerPreprocessor((x) => {
+    const isComponent = (x) => { return (typeof x === 'object'); };
+    if (isComponent(x.node) && !x.node.type && !x.transformer)
+        x.node.type = "flexbox";
+    return x;
+});

lib/src/framework/index.js

+import { registerComponent } from "./engine";
+import pluginDom from './plugins/dom';
+import pluginReact from './plugins/react';
+import pluginReact2Dom from './plugins/react2dom';
+import window from "./components/window";
+import box from "./components/box";
+import html from "./components/html";
+import { Rnd } from './components/react-components/rnd';
+import { Flexbox } from "./components/react-components/flexbox";
+import { ContentEditable } from "./components/react-components/contenteditable";
+import { WindowClose, WindowMaximize, WindowMinimize, WindowRestore } from './components/react-components/icons';
+export const { registerDomComponent } = pluginDom.use();
+export const { registerReactComponent } = pluginReact.use();
+pluginReact2Dom.use();
+export const init = () => {
+    registerReactComponent("flexbox", Flexbox);
+    registerReactComponent("rnd", Rnd);
+    registerReactComponent("contenteditable", ContentEditable);
+    const registerReactHTMLComponents = (tags) => tags.forEach(tag => registerReactComponent(tag, tag));
+    registerReactHTMLComponents("div span".split(" "));
+    const registerDomComponents = (tags) => tags.forEach(tag => registerDomComponent(`dom-${tag}`, tag));
+    registerDomComponents("div span".split(" "));
+    registerComponent(window);
+    registerComponent(box);
+    registerComponent(html);
+    const icons = {
+        WindowClose,
+        WindowMaximize,
+        WindowRestore,
+        WindowMinimize
+    };
+    const dict2descriptors = (dict) => Object.keys(dict).map(key => [key, dict[key]]);
+    dict2descriptors(icons).forEach(args => registerReactComponent(args[0], args[1]));
+    console.log("framework init finished.");
+};
+init();
+export * from './engine';

lib/src/framework/plugins/dom.js

+import { excludeProps } from '../common/utils';
+import { standardComponentPropNames } from '@cloudos/flow-ui';
+import { registerComponent } from '../engine';
+const handledProps = ["tag"];
+const domCreator = (comp, key, children) => {
+    const props = excludeProps(comp, (standardComponentPropNames.concat(handledProps)));
+    let el = document.createElement(comp.tag);
+    Object.assign(el, props);
+    children?.forEach(child => el.appendChild(child));
+    return el;
+};
+export const registerDomComponent = (typeName, createEl) => {
+    registerComponent({
+        type: typeName,
+        transformer: (node, key, children = []) => {
+            let el;
+            if (typeof createEl === 'string') {
+                el = document.createElement(createEl);
+                const { type, children, ...props } = node;
+                for (let key in props) {
+                    el.setAttribute(key, props[key]);
+                }
+            }
+            else
+                el = createEl(node);
+            children?.forEach((child) => { el.append(child); });
+            return el;
+        }
+    });
+};
+export default {
+    registerDomComponent,
+    use: () => {
+        registerComponent({
+            type: "dom",
+            transformer: domCreator
+        });
+        return { registerDomComponent };
+    }
+};

lib/src/framework/plugins/react.js

+import { excludeProps, isReactComponent } from '../common/utils';
+import { createElement, isValidElement } from 'react';
+import { standardComponentPropNames } from '@cloudos/flow-ui';
+import { registerComponent, registerPreprocessor } from '../engine';
+const handledProps = [...standardComponentPropNames, "rc"];
+const rcCreator = (comp, key, children) => {
+    const props = excludeProps(comp, handledProps);
+    return createElement(comp.rc, { ...props, key }, children);
+};
+const makeReactComponentTranfomer = (rc) => {
+    return (comp, key, children) => {
+        // console.log("creating react component:",{key,comp,children})
+        const props = excludeProps(comp, handledProps);
+        let child = null;
+        if (children && children.length == 1)
+            child = children[0];
+        const result = createElement(rc, { ...props, key }, child || children);
+        // console.log({result});
+        return result;
+    };
+};
+export const registerReactComponent = (rcName, rc) => {
+    registerComponent({
+        type: rcName,
+        transformer: makeReactComponentTranfomer(rc)
+    });
+};
+export default {
+    registerReactComponent,
+    use: () => {
+        registerComponent({
+            type: "rc",
+            transformer: rcCreator
+        });
+        registerPreprocessor((x) => {
+            const isComponent = (x) => { return (typeof x === 'object'); };
+            if (isComponent(x.node) && !isValidElement(x.node) && isReactComponent(x.node.type) && !x.node.transformer) {
+                x.node.transformer = makeReactComponentTranfomer(x.node.type);
+            }
+            return x;
+        });
+        return { registerReactComponent };
+    }
+};

lib/src/framework/plugins/react2dom.js

+import { render } from "react-dom";
+import { registerComponent } from "../engine";
+export default {
+    use: () => {
+        registerComponent({
+            type: "react2dom",
+            transformer: ({ node, children }) => {
+                let el = document.createElement("div");
+                children?.forEach((child) => {
+                    render(child, el);
+                });
+                return el;
+            }
+        });
+    }
+};

lib/src/index.js

+export * from './framework';

lib/src/main.js

+import { usePipeline } from "@cloudos/logic";
+import { useCommandPanel } from "./apps/commandPanel";
+import useDemoApp from "./useDemoApp";
+const boot = usePipeline([
+    () => {
+        useCommandPanel().start();
+        useDemoApp().start();
+    }
+]);
+boot();

lib/src/ui/index.js

+import Coder from "./pages/Coder";
+export { Coder };

lib/src/ui/pages/Coder/activityBar.js

+export default {
+    name: "activityBar",
+    flow: "column",
+    span: "55px",
+    backgroundColor: "#2c2c2c",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    flexShrink: 0,
+};

lib/src/ui/pages/Coder/appBox.js

+export default {
+    name: "appBox",
+    description: "where app ui is displayed",
+    span: "100%",
+    flow: "row",
+    backgroundColor: "white",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    children: [
+    // {
+    //   type:"div",
+    //   children: [
+    //     {
+    //       type: "text-view",
+    //       onClick: () => {
+    //         alert("hi");
+    //       },
+    //       style: {
+    //         backgroundColor: "green",
+    //       },
+    //       children: [
+    //         "Hello World !"
+    //       ]
+    //     }
+    //   ]
+    // }
+    ]
+};

lib/src/ui/pages/Coder/header.js

+import windowControl from './windowControl';
+export default {
+    name: "header",
+    flow: "row",
+    backgroundColor: "#e5e5e5",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    span: "35px",
+    flexShrink: 0,
+    className: "drag-handle",
+    children: [
+        {
+            name: "menuBar",
+            // backgroundColor: "#16488d",
+            minWidth: "100px",
+        },
+        {
+            name: "blank",
+            span: "100%",
+        },
+        windowControl,
+    ]
+};

lib/src/ui/pages/Coder/index.js

+import header from "./header";
+import activityBar from "./activityBar";
+import sidebar from "./sidebar";
+import taskbar from "./taskbar";
+import infoBar from "./infoBar";
+import panel from "./panel";
+import appBox from "./appBox";
+export default {
+    name: "page",
+    flow: "column",
+    width: "100%",
+    height: "100%",
+    children: [
+        header,
+        {
+            flow: "row",
+            span: "100%",
+            children: [
+                activityBar,
+                sidebar,
+                {
+                    description: "right area",
+                    flow: "column",
+                    span: "100%",
+                    children: [
+                        taskbar,
+                        infoBar,
+                        appBox,
+                        panel,
+                    ]
+                }
+            ]
+        },
+        statusbar,
+    ]
+};

lib/src/ui/pages/Coder/infoBar.js

+export default {
+    name: "infoBar",
+    flow: "row",
+    span: "20px",
+    backgroundColor: "#fffeee",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    flexShrink: 0,
+};

lib/src/ui/pages/Coder/panel.js

+export default {
+    // type:"resizable"
+    name: "panel",
+    flow: "column",
+    span: "50px",
+    flexShrink: 1,
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    children: [
+        {
+            description: "problems|output|terminal|console---other operations",
+            flow: "row",
+        },
+        {
+            description: "iostream",
+            flow: "column",
+        }
+    ]
+};

lib/src/ui/pages/Coder/sidebar.js

+export default {
+    name: "sidebar",
+    flow: "column",
+    span: "200px",
+    backgroundColor: "#f3f3f3",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+};

lib/src/ui/pages/Coder/statusBar.js

+export default {
+    name: "statusBar",
+    flow: "row",
+    backgroundColor: "#007acc",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    span: "20px",
+    flexShrink: 0,
+};

lib/src/ui/pages/Coder/taskbar.js

+export default {
+    name: "taskbar",
+    flow: "row",
+    backgroundColor: "#f3f3f3",
+    span: "40px",
+    boxShadow: "0 1px 5px 0 #8c8c8c91",
+    flexShrink: 0,
+    children: [
+        {
+            name: "tasks",
+            flow: "row",
+            children: [],
+        },
+        {
+            name: "operations",
+            flow: "row",
+            children: [],
+        }
+    ]
+};

lib/src/ui/pages/Coder/windowControl.js

+import { defineTemplate } from "../../../utils";
+import { ipc } from "@cloudos/ipc";
+const template = (x) => {
+    const { onMinimize = () => { ipc.dispatch("window-minimize"); }, onMaximize = () => { ipc.dispatch("window-maximize"); }, onRestore = () => { ipc.dispatch("window-restore"); }, onClose = () => { ipc.dispatch("window-close"); }, } = x || {};
+    return {
+        // "typename": "window-control",
+        "span": "100px",
+        "flow": "row",
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+        "children": [
+            {
+                "type": "WindowMinimize",
+                onClick: onMinimize,
+            },
+            {
+                "type": "WindowRestore",
+                onClick: onRestore,
+            },
+            {
+                "type": "WindowMaximize",
+                onClick: onMaximize,
+            },
+            {
+                "type": "WindowClose",
+                onClick: onClose,
+            }
+        ]
+    };
+};
+export default defineTemplate(template);

lib/src/ui/reusable/box.js

+import { defineReusable } from "../../framework/engine";
+export default defineReusable({
+    name: "box",
+    position: "fixed",
+    backgroundColor: "white",
+    border: "solid 1px black",
+    left: 10,
+    right: 10,
+    top: 10,
+    bottom: 10,
+    children: []
+});

lib/src/ui/reusable/index.js

+import box from './box';
+import pane from './pane';
+import rnd from './rnd';
+import sortablePane from './sortablePane';
+export { box, pane, rnd, sortablePane };

lib/src/ui/reusable/pane.js

+import { defineReusable } from "../../framework/engine";
+export default defineReusable({
+    type: "pane",
+    name: "window",
+    resizable: { x: true, y: true, xy: true },
+    defaultSize: { width: 200, height: 400 },
+    minHeight: 300,
+    minWidth: 150,
+    children: []
+});

lib/src/ui/reusable/rnd.js

+import { defineReusable } from "../../framework/engine";
+export default defineReusable({
+    type: "rnd",
+    name: "window",
+    bounds: 'parent',
+    default: {
+        x: 0,
+        y: 0,
+        width: 400,
+        height: 300,
+    },
+    minWidth: 300,
+    minHeight: 200,
+    dragHandleClassName: "drag-handle",
+    children: []
+});

lib/src/ui/reusable/sortablePane.js

+import { defineReusable } from "../../framework/engine";
+export default defineReusable({
+    type: "sortable-pane",
+    name: "window",
+    direction: "horizontal",
+    margin: 20,
+    children: []
+});

lib/src/useDemoApp.js

+import Coder from './ui/pages/Coder';
+import { rnd, box } from './ui/reusable';
+import { createUI, render } from './framework';
+export default () => {
+    const docRoot = document.getElementById('root');
+    const useContainer = (docRoot) => {
+        let c;
+        return {
+            createEl: () => {
+                c = document.createElement('div');
+                docRoot.appendChild(c);
+            },
+            removeEl: () => {
+                docRoot.removeChild(c);
+            },
+            getEl: () => c,
+        };
+    };
+    const container = useContainer(docRoot);
+    const create = () => {
+        container.createEl();
+        const demo = box({
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        }, [
+            rnd({
+            // default:{
+            //   width:"100%",
+            //   height:"100%"
+            // },
+            // disableDragging:false,
+            // enableResizing:false,
+            }, [
+                Coder
+            ])
+        ]);
+        let ui = createUI(demo);
+        render(ui, container.getEl());
+    };
+    const destroy = () => {
+        container.removeEl();
+    };
+    const start = () => {
+        create();
+    };
+    return {
+        start
+    };
+};

lib/src/utils/index.js

+import { createUI } from '../framework/engine';
+export const defineTemplate = (node) => (props, children) => Object.assign({}, node, typeof props === 'undefined' ? {} : props, {
+    children: typeof children === 'undefined' ? node.children : children,
+});
+export const defineTransformer = (maker) => {
+    const template = typeof maker === 'function' ? maker : defineTemplate(maker);
+    return (node, key, children) => {
+        // console.log("template:",{key,node,children})
+        const { type, ...props } = node;
+        const res = createUI(template(props, children), { key });
+        return res;
+    };
+};

lib/vite.config.js

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import analyze from 'rollup-plugin-analyzer';
+import visualizer from "rollup-plugin-visualizer";
+import { dependencies } from './package.json';
+// https://vitejs.dev/config/
+const { resolve } = require('path');
+const splitModules = [
+    "react-rnd", "react-icons"
+];
+function renderChunks(deps) {
+    let chunks = {};
+    const addChunk = (key) => {
+        if (['react', 'react-router-dom', 'react-dom'].includes(key))
+            return;
+        chunks[key] = [key];
+    };
+    Object.keys(deps).forEach(addChunk);
+    splitModules.forEach(addChunk);
+    return chunks;
+}
+export default defineConfig({
+    base: "/flow-ui/",
+    plugins: [react(),
+    ],
+    resolve: {
+        alias: [
+            {
+                find: "@",
+                replacement: resolve(__dirname, 'src')
+            },
+            {
+                find: "@ui",
+                replacement: resolve(__dirname, 'node_modules/@cloudos/core/lib')
+            },
+        ]
+    },
+    build: {
+        outDir: "dist/flow-ui",
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    vendor: ['react', 'react-dom'],
+                    ...renderChunks(dependencies),
+                },
+            },
+            plugins: [
+                analyze,
+                visualizer({
+                    open: true,
+                    gzipSize: true,
+                    brotliSize: true,
+                })
+            ]
+        }
+    }
+});

package.json

 {
   "name": "@cloudos/core",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "cloudos-core",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34898

3204.73%

Number of package files

42

4100%

Lines of code

1039

Infinity%

No dependency changes