[ { "path": ".dockerignore", "content": "backend/dist\nbackend/localfiles\nDockerfile\nfrontend/.cache\nignore\nlatest.dump*\nnode_modules\nnpm-debug.log\n**/node_modules\n**/.env\n**/yarn-error.log\n**/.DS_Store" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\nindent_style = space\nindent_size = 4\ncharset = utf-8\ntrim_trailing_whitespace = false\ninsert_final_newline = true\n\n[package.json]\nindent_size = 2\n" }, { "path": ".github/ISSUE_TEMPLATE/bug-report.md", "content": "---\nname: Bug Report\nabout: Create a bug report to help us out\ntitle: \"\"\nlabels: bug\nassignees: \"\"\n---\n\n# Feature request story or issue\n\n## Screenshot\n\nYOUR SCREENSHOT HERE:\n\n## Url\n\n- Url where you took the screenshot:\n- URL:\n\n## A sentence description of the problem\n\nShort DESCRIPTION:\n\nThat's it! Thanks.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"[Feature Request]\"\nlabels: enhancement\nassignees: \"\"\n---\n\n**Is your feature request related to a problem? There is a Please describe.**\nA clear and concise description of what the problem is. Ex. When I want to do X, I am always missing Y to make it easier [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Take a screenshot of the area you're working in**\nEven if the feature request doesn't exist there yet, what area would the feature request help within?\nSCREENSHOT:\n\nURL (of where you're working):\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/build.yml", "content": "name: build\non: [push]\njobs:\n test:\n runs-on: ubuntu-latest\n services:\n postgres:\n image: postgres:12\n env:\n POSTGRES_USER: r-board\n POSTGRES_PASSWORD: secret\n ports:\n - 13338:5432\n # Set health checks to wait until postgres has started\n options: >-\n --health-cmd pg_isready\n --health-interval 10s\n --health-timeout 5s\n --health-retries 5\n strategy:\n matrix:\n node-version: [18.x]\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - name: Install deps\n run: yarn\n - name: Run unit tests\n run: yarn test:unit\n - name: Wait for DB\n run: yarn wait-for-db\n - name: Run integration tests\n run: yarn test:integration\n - name: Build\n run: yarn build\n - name: Start server\n run: yarn start&\n env:\n SESSION_SIGNING_SECRET: notsosecretthing\n - name: Prepare Playwright\n run: npx playwright install chromium firefox\n - name: Run playwright tests\n run: yarn test:playwright\n - name: Archive results\n if: always()\n uses: actions/upload-artifact@v4\n with:\n name: test-results\n path: |\n playwright/results\n lint:\n runs-on: ubuntu-latest\n strategy:\n matrix:\n node-version: [18.x]\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - name: Install dependencies\n run: yarn install --frozen-lockfile\n - name: Check code formatting & generated files\n run: yarn lint\n docker-image:\n needs: test\n runs-on: ubuntu-latest\n if: github.ref == 'refs/heads/master'\n steps:\n - uses: actions/checkout@v2\n - name: docker login\n env:\n DOCKER_HUB_USER: ${{secrets.DOCKER_HUB_USER}}\n DOCKER_HUB_PASSWORD: ${{secrets.DOCKER_HUB_PASSWORD}}\n run: docker login -u $DOCKER_HUB_USER -p $DOCKER_HUB_PASSWORD\n - name: docker build\n run: docker build . -t raimohanska/ourboard:latest -t raimohanska/ourboard:${{github.sha}}\n - name: docker push\n run: docker push raimohanska/ourboard:latest && docker push raimohanska/ourboard:${{github.sha}}\n" }, { "path": ".gitignore", "content": ".cache/\nnode_modules/\ndist/\nyarn-error.log\n.env\n*.mp4\nbackend/localfiles/\n/ignore\n.DS_Store\nlatest.dump\n.vscode\nbackups\nplaywright/results\n" }, { "path": ".huskyrc.js", "content": "module.exports = {\n hooks: {\n \"pre-commit\": \"lint-staged\",\n },\n}\n" }, { "path": ".nvmrc", "content": "18\n" }, { "path": ".prettierignore", "content": "package.json\n.cache/\nnode_modules/\ndist/\nyarn-error.log\n.env\n*.mp4\nbackend/localfiles/\nignore/\n" }, { "path": ".prettierrc.js", "content": "module.exports = {\n printWidth: 120,\n semi: false,\n trailingComma: \"all\",\n}\n" }, { "path": "Dockerfile", "content": "FROM node:18 as builder\n\n# Create app directory\nWORKDIR /usr/src/app\n\nCOPY package.json yarn.lock ./\nCOPY frontend/package.json ./frontend/\nCOPY backend/package.json ./backend/\nCOPY perf-tester/package.json ./perf-tester/\n\nRUN yarn install --frozen-lockfile --non-interactive\n\nCOPY backend ./backend\nCOPY frontend ./frontend\nCOPY common ./common\nCOPY perf-tester ./perf-tester\nCOPY tsconfig.json .\n\nrun yarn build\n\nFROM node:18 as runner\n\nCOPY --from=builder /usr/src/app/backend/dist/index.js /usr/src/app/backend/dist/index.js\nCOPY --from=builder /usr/src/app/backend/migrations /usr/src/app/backend/migrations\nCOPY --from=builder /usr/src/app/frontend/public /usr/src/app/frontend/public\nCOPY --from=builder /usr/src/app/frontend/dist /usr/src/app/frontend/dist\nWORKDIR /usr/src/app\nEXPOSE 1337\n\nWORKDIR /usr/src/app/backend\nCMD [ \"node\", \"dist/index.js\" ]" }, { "path": "LICENSE.txt", "content": "This project is licensed under the MIT license.\nCopyrights are respective of each contributor listed at the beginning of each definition file.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." }, { "path": "README.md", "content": "An online whiteboard. Think of it as very poor man's Miro that's open source, free to use and which you can also host yourself. Feel free to try at https://www.ourboard.io/\n\nIn this Readme:\n\n- [User guide](#features-and-user-guide)\n- [API](#api)\n- [Development instructions](#development)\n- [Hosting Ourboard](#hosting)\n\n## Features and User Guide\n\nThe user guide here is bound to be incomplete and out-of-date. Feel welcome to improve it!\n\n### Basics\n\nSetting your nickname or sign in\n\n- Click on the top right corner nickname field to change your nickname\n- Optionally, log in with your Google user account. This allows you to create private boards and to track your favorite boards across devices\n\nAdding items\n\n- Drag from palette\n- Double click to add a new note\n- Use keyboard shortcuts below\n\nAdding links\n\n- Paste a link to text, it'll automatically converted to a hyperlink\n- Select text and paste a link to convert the text to a link\n\nAdding images\n\n- Add by dragging a file from your computer or from a browser window\n- Add by pasting an image from the clipboard using Command-V\n\nOrganizing your board\n\n- Create an Area and drag items on it to keep them together. When you move the Area, the items move with it!\n- Use Areas, lines, connections and images to give a visual structure to your board\n- Lock items in place to prevent accidental moves of static items and lines\n- Use \"structured stickies\": 1. Create an Area to be used as a template, choose a nice color 2. Add template content, e.g.. labels like \"size\" 3. Lock the labels in place. Now you can clone the whole area with a single click on the Clone button (or Cmd-D).\n\nCopy and paste\n\n- You can cut/copy/paste contents on the board using keyboard shortcuts\n- Copy-paste works across boards, so you can do a \"backup\" by selecting all notes and pasting on another board\n- You should be able to paste text and images on the board from other applications as well\n- You can create a full clone of your current board by clicking on the Clone button beside board name\n\nKeyboard shortcuts\n\nThese are for Mac. For other Linux/Windows, replace Command with Control.\n\n```\nDEL/Backspace Delete item\nA Create new area\nN Create new note\nT Create new text box\nC Select the Connect tool\nEsc Select the default tool\nH Hide contents of an area\nCommand-A Select all items\nCommand-V Paste\nCommand-C Copy\nCommand-X Cut\nCommand-Z Undo\nCommand-Shift-Z Redo\nCommand-D Duplicate\nCommand-Minus Zoom out\nCommand-Plus Zoom in\nCommand-Zero Reset zoom\nArrow keys Move selected items. SHIFT for big steps, ALT for fine-tuning.\n```\n\nPro tips\n\n- You can drag the toolbar / palette around, if it gets in your way at the top-center position\n\n### Board access controls\n\nAll boards created accessible to anyone with the link by default. If you Sign In using Google authentication, you'll also be able to create boards with restricted access. It's possible to grant access to certain emails or to people with an email in a given domain.\n\n## API\n\nOurboard has a limited HTTP API for creating, exporting and updating boards.\n\nAll POST and PUT endpoints accept application/json content.\n\nAPI requests against boards with restricted access require you to supply an API_TOKEN header with a valid API token.\nThe token is returned in the response of the POST request used to create the board.\n\n### POST /api/v1/board\n\nCreates a new board. Payload:\n\n```js\n{\n \"name\": \"board name as string\",\n}\n```\n\nYou can also specify board access policy, including individual users by email and user email domains:\n\n```js\n{\n \"name\": \"board name as string\",\n \"accessPolicy\": {\n \"allowList\": [\n { email: \"coolgirl@reaktor.com\" },\n { domain: \"reaktor.fi\" }\n ]\n }\n}\n```\n\nResponse:\n\n```js\n{\n \"id\": \"board id\",\n \"accessToken\": \"************\"\n}\n```\n\nThe `accessToken` returned here is required for further API calls in case you set an access policy. So, make sure to save the token.\n\n### PUT /api/v1/board/:boardId\n\nChanges board name and, optionally, access policy. Payload is similar to the POST request above.\n\nThis endpoint always requires the API_TOKEN header.\n\n### POST /api/v1/board/:boardId/item\n\nCreates a new item on given board. If you want to add the item onto a specific area/container element on the board, you can\nfind the id of the container by inspecting with your browser.\n\nTo create a new item inside a container element:\n\n```js\n{\n \"type\": \"note\",\n \"text\": \"text on note\",\n \"container\": \"container element text or id\",\n \"color\": \"hexadecimal color code\"\n}\n```\n\nTo create a new item using coordinates:\n\n```js\n{\n \"type\": \"note\",\n \"text\": \"text on note\",\n \"color\": \"hexadecimal color code\",\n \"x\": 100,\n \"y\": 100,\n \"width\": 100,\n \"height\": 100\n}\n```\n\nResponse:\n\n```js\n{\n \"id\": \"ITEM_ID\"\n}\n```\n\n### PUT /api/v1/board/:boardId/item/:itemId\n\nCreates a new item on given board or updates an existing one.\nIf you want to add the item onto a specific area/container element on the board, you can\nfind the id of the container by inspecting with your browser.\n\nPayload:\n\n```js\n{\n \"type\": \"note\",\n \"text\": \"text on note\",\n \"container\": \"container element text or id\",\n \"color\": \"hexadecimal color code\",\n \"replaceTextIfExists\": boolean, // Override text if item with this id exists. Defaults to false.\n \"replaceColorIfExists\": boolean, // Override color if item with this id exists. Defaults to false.\n \"replaceContainerIfExists\": boolean, // Override container in item with this id exists. Defaults to true.\n}\n```\n\nor\n\n```js\n{\n \"x\": \"integer\",\n \"y\": \"integer\",\n \"type\": \"note\",\n \"text\": \"text on note\",\n \"color\": \"hexadecimal color code\",\n \"width\": \"integer\",\n \"height\": \"integer\",\n}\n```\n\n### GET /api/v1/board/:boardId\n\nReturn board current state as JSON.\n\n### GET /api/v1/board/:boardId/hierarchy\n\nReturn board current state in a hierarchical format (items inside containers)\n\n### GET /api/v1/board/:boardId/csv\n\nReturn board current state in CSV format, where\n\n- A container containing only leaf items (note, text) creates a row and each item in that container gets its own column\n- Container name is a column on the left\n- Any wrapping containers also add a column on the left\n\n### GET /api/v1/board/:boardId/history\n\nReturns the full history of given board as JSON.\n\n## Github Issues Integration\n\n1. Create a board and an Area named \"new issues\" (case insensitive) on the board.\n2. Add a webhook to a git repo, namely\n 1. Use URL https://www.ourboard.io/api/v1/webhook/github/{board-id}, with board-id from the URL of you board.\n 2. Use content type to application/json\n 3. Select \"Let me select individual events\" and pick Issues only.\n3. Create a new issue or change labels of an existing issue.\n4. You should see new notes appear on your board\n\n## Development\n\nRunning locally requires `docker-compose` which is used for starting the local PostgreSQL database. The script below starts the database, but you must make sure you have a working docker setup on your machine, of course.\n\nRunning locally:\n\n```\nyarn install\nyarn dev\n```\n\nRun end-to end Playwright tests\n\n- `yarn test:playwright` to run tests once\n- `yarn test:playwright --ui` to open the Playwright UI\n\nConnect to the local PostgreSQL database\n\n yarn psql\n\n### Tech stack\n\n- TypeScript\n- [Harmaja](https://github.com/raimohanska/harmaja) frontend library\n- WebSockets (express-ws / uWebSockets.js both!)\n- Express server\n- Typera for HTTP API\n\n### Developing with production data\n\nDo not run your local server against the production database, or you'll corrupt production. The server's in memory state will be out of sync with DB and bad things will happen.\n\nInstead, do this.\n\n1. Capture a backup and download it: `heroku pg:backups:capture`, then `heroku pg:backups:download`.\n2. Restore the backup to your local database: `pg_restore --verbose --clean --no-acl --no-owner -d postgres://r-board:secret@localhost:13338/r-board latest.dump`\n3. Start you local server using `yarn dev`\n\nIf you need the local state for a given board in localStorage, you can\n\n1. extract the content in the browser devtools, when viewing production site in browser, using `localStorage[\"board_\"]`\n2. Copy that string to clipboard\n3. Run the following in your localhost site console:\n\n localStorage[\"board_32de1a50-09a6-4453-9b9e-ed10c56afa99\"]=JSON.stringify(\n \n )\n\nCopy the result string, navigate to your localhost site and paste the same value to the same localStorage key. Refresh and enjoy.\n\n### Building and pushing the raimohanska/ourboard docker image\n\n```\ndocker login\ndocker build . -t raimohanska/ourboard:latest\ndocker push raimohanska/ourboard:latest\n```\n\n## Hosting\n\nOurBoard is made to be easy to deploy and host. It consists of a single Node.js process that needs a PostgreSQL database for storing data. Using environment variables (see below) you can set the URL for the database and optionally configure OurBoard to use S3 for image assets and Google for authentication. By default it comes without authentication / authorization and stores image assets in the local file system.\n\n### Heroku\n\nIf it suits you, Heroku is likely to be the easiest way to host your own OurBoard server. You should be able to host your own OurBoard instance pretty easily in Heroku. This repository should be runnable as-is,\nprovided you set up some environment variables, which are listed below.\n\n### Docker\n\nOurBoard is available as a Docker image so you can deploy it with Docker or your favorite container environment of choice. To get an OurBoard docker image, you can either:\n\n1. Use the [raimohanska/ourboard image](https://hub.docker.com/r/raimohanska/ourboard) in Docker Hub (just skip to running, it will be downloaded automatically)\n2. Build it from this repository: `docker build . -t raimohanska/ourboard:latest`\n\nYou can run it like this:\n\n1. Start a posgres database. For example, running `docker-compose up` in your local clone of this directory will start one.\n2. Start the Ourboard container. Run the example script `scripts/run_dockerized.sh` to try it out.\n\nWith the example script, you'll have a setup which\n\n- Doesn't have authentication. See environment variables below for configuring Google authentication, which is the only supported option for now.\n- Stores uploaded assets (images) on the local filesystem. The example script binds the local directory `backend/localfiles` to be used for storage. In your own script, you'll probably want to point out a more suitable directory on your server machine.\n- Uses an absolutely insecure SESSION_SIGNING_KEY. Make sure to use a long random string instead.\n- Uses plain HTTP and responds at http://localhost:1337. If you want it to respond at some other URL, you'll need to set the ROOT\\__\\_URL variable (and all the WS_ variables unless you have the latest ourboard image)\n\nRead on!\n\n### Environment variables\n\nThe OurBoard server is configured using environment variables. Here's a most likely incomplete list of supported environment variables for the server.\n\nWhen developing the application locally, set these variables in `backend/.env` file. The most important first - you'll most likely need to set these.\n\n```\nDATABASE_URL Postgres database URL. In Heroku, you can just add the PostgreSQL add on and this variable will be correctly set. The free one will get you started.\nROOT_URL Root URL used for redirects. Use https:///. If you don't have authentication configured or you're actually planning to access your server using the address http://localhost:1337, you can omit this one.\nPORT HTTP port that OurBoard should bind. Defaults to 1337.\n```\n\nHTTPS and TLS related settings:\n\n```\nHTTPS_PORT Local port to use for HTTPS sockets. Use this if you want OurBoard to terminate HTTPS. If you use a proxy like NGINX or run in a hosted environment like Heroku, you won't be needing this one.\nHTTPS_CERT_FILE Path to HTTPS certificate file. When running in docker, make sure to add appropriate mounts to make the file available to the dockerized process.\nHTTPS_KEY_FILE Path to HTTPS key file. When running in docker, make sure to add appropriate mounts to make the file available to the dockerized process.\nREDIRECT_URL Put your OurBoard application root URL here, if you want the server to redirect all requests that don't have the x-forwarded-proto=https\nDATABASE_SSL_ENABLED Use `true` to use SSL for database connection. Recommended.\n```\n\nAWS environment variables, needed for hosting board assets on AWS S3. If these are missing, all uploaded\nassests (images, videos) will be stored in the local filesystem (using the path \"localfiles\"),\nwhich is a viable solution only if you have a persistent file system with backups.\n\n```\nAWS_ACCESS_KEY_ID AWS access key ID\nAWS_SECRET_ACCESS_KEY Secret access key\nAWS_ASSETS_BUCKET_URL URL to the AWS bucket. For example https://r-board-assets.s3.eu-north-1.amazonaws.com\n```\n\nThe experimental collaborative editing feature is controlled using environment variables as well:\n\n```\nCOLLABORATIVE_EDITING `true` to enable for all new boards, `false` to disable for new boards, `opt-in` to allow opt-in on creation (default), `opt-in-authenticated` to allow opt-in for authenticated users only\n```\n\nAnd finally some more settings you're unlikely to need.\n\n```\nWS_HOST_DEFAULT Your domain name here, used for routing websocket connections. Is automatically derived from ROOT_URL in latest image.\nWS_HOST_LOCAL Your domain name here as well. Is automatically derived from ROOT_URL in latest image.\nWS_PROTOCOL `wss` for secure, `ws` for non-secure WebSockets. Is automatically derived from ROOT_URL in latest image.\nBOARD_ALIAS_tutorial Board identifier for the \"tutorial\" board that will be cloned for new users. Allows you to create a custom tutorial board. For example, the value `782d4942-a438-44c9-ad5f-3187cc1d0a63` is used in ourboard.io, and this points to a publicly readable, but privately editable board\n```\n\n### Authentication configuration\n\nOurboard can be configured to use Google or generic OpenID Connect (OIDC) authentication using environment variables.\n\nEven if you set an auth provider (see below), the server will default to allowing anonymous access as well - only boards that are explicitly set with access restrictions will require authentication. However, if you want to require authentication for all access, you can use the following environment variable.\n\n```\nREQUIRE_AUTH Use `true` to require authentication for all access.\n```\n\n#### Google authentication\n\nGoogle authentication is supported. To enable this feature, you'll need to supply the following environment variables.\n\n```\nGOOGLE_OAUTH_CLIENT_ID\nGOOGLE_OAUTH_CLIENT_SECRET\n```\n\nYou'll of course need to set up an account on the Google side and configure a client so that you can get the client id and secret variables you'll use on OurBoard side. When configuring the Google client, you should allow the URL `/google-callback` as a valid callback URL.\n\n#### OpenID Connect configuration\n\nGeneric OpenID Connect (OIDC) authentication is also supported as an experimental feature. To enable this feature, you'll need to supply the following environment variables.\n\n```\nOIDC_CONFIG_URL Your OpenID configuration endpoint. For example: https://accounts.google.com/.well-known/openid-configuration\nOIDC_CLIENT_ID Your OAuth2 client id\nOIDC_CLIENT_SECRET Your OAuth2 client secret\nOIDC_LOGOUT URL to redirect the user after a logout on Ourboard. This allows you to sign out from the OIDC provider. You can also use the value `true` to automatically determine this URL based on the `end_session_endpoint` field in the response from the OIDC_CONFIG_URL endpoint. If omitted and `REQUIRE_AUTH=true` is not set, OurBoard will simply allow anonymous usage after a logout.\n```\n\nYou'll of course need an external auth provider and configure a client so that you can get the client id and secret variables you'll use on OurBoard side. When configuring the OIDC client, you should allow the URL `/google-callback` as a valid callback URL. OurBoard uses the OAuth \"standard flow\" or \"authorization code flow\" and expects to be able to find your OIDC configuration at the URL pointed by tge `OIDC_CONFIG_URL` environment variable.\n\nIn the Id Token received from the Auth provider, OurBoard expects to find the following claims:\n\n- Either `name` or `preferred_username` representing the display name for the user\n- `email` representing the email address of the user. OurBoard does not expect this to be a valid email address; it just uses the email as the unique identifier for the user.\n- Optional `picture` for a URL for the user's profile picture\n\nThus far, I've tested Ourboard OIDC with Google and Keycloak.\n\n#### OpenID Connect Using KeyCloak\n\nNOTICE: This is just a simple example for testing and **not a production-grade setup**. Make sure to configure Keycloak properly before using it in production.\n\nAn example KeyCloak setup is bundled with the OurBoard development environment. To try it, set the following environment variables in `backend/.env`:\n\n```\nOICD_CONFIG_URL=http://127.0.0.1:8080/realms/ourboard/.well-known/openid-configuration\nOIDC_CLIENT_ID=ourboard\nOIDC_CLIENT_SECRET=S2qHjCg12IDxz89Lffo49NQ19ooWCUwF\n```\n\nWhen you start OurBoard in development mode using `yarn dev-with-keycloak`, you can now Sign In using the username `ourboard-test` and password `password`.\n\n## Contribution\n\nSee Issues!\n\n## A word from our sponsor\n\nI want to thank [Reaktor](https://www.reaktor.com/) for the huge and essential support for this project!\n\n- We (Reaktorian contributors) get some monetary support from the Reaktor open-source support program\n- Hosting costs covered by Reaktor (Heroku, AWS)\n- The UI design was done by Reaktor's experts (Mira Myllylä for the tool and Mari Halla-aho for the dashboard)\n" }, { "path": "backend/migrations/001_init.js", "content": "exports.up = (pgm) => {\n pgm.sql(`\n CREATE TABLE IF NOT EXISTS board (id text PRIMARY KEY, name text NOT NULL);\n ALTER TABLE board ADD COLUMN IF NOT EXISTS content JSONB NOT NULL;\n ALTER TABLE board ADD COLUMN IF NOT EXISTS history JSONB NOT NULL default '[]'; \n CREATE TABLE IF NOT EXISTS board_event (board_id text REFERENCES board(id), last_serial integer, events JSONB NOT NULL, PRIMARY KEY (board_id, last_serial));\n ALTER TABLE board_event ALTER COLUMN last_serial SET NOT NULL;\n ALTER TABLE board_event ALTER COLUMN board_id SET NOT NULL;\n CREATE TABLE IF NOT EXISTS board_api_token (board_id text REFERENCES board(id), token TEXT NOT NULL);\n CREATE TABLE IF NOT EXISTS app_user (id text PRIMARY KEY, email text NOT NULL);\n CREATE TABLE IF NOT EXISTS user_board (user_id text REFERENCES app_user(id), board_id text REFERENCES board(id), last_opened TIMESTAMP NOT NULL, PRIMARY KEY (user_id, board_id));\n ALTER TABLE board ADD COLUMN IF NOT EXISTS ws_host TEXT NULL;\n ALTER TABLE board ADD COLUMN IF NOT EXISTS created_at TIMESTAMP NULL DEFAULT now(); \n ALTER TABLE board_event ADD COLUMN IF NOT EXISTS saved_at TIMESTAMP NULL DEFAULT now();\n `)\n}\n" }, { "path": "backend/migrations/002_add_first_serial.js", "content": "exports.up = (pgm) => {\n pgm.sql(`\n ALTER TABLE board_event ADD COLUMN IF NOT EXISTS first_serial int;\n UPDATE board_event SET first_serial = COALESCE(CAST(events#>'{events, 0, serial}' as int), 0);\n ALTER TABLE board_event ALTER COLUMN first_serial SET NOT NULL;\n `)\n}\n" }, { "path": "backend/migrations/003_refactor_access.sql", "content": "alter table board add public_read boolean null;\nalter table board add public_write boolean null;\ncreate table board_access (\n board_id text not null references board(id),\n domain text null,\n email text null,\n access text null\n);\n\nwith allow_json as (\nselect id, jsonb_array_elements(content -> 'accessPolicy' -> 'allowList') as e\nfrom board),\n\nallow_entry as (\n\tselect id, e ->> 'domain' as domain, e ->> 'email' as email, e ->> 'access' as access\n\tfrom allow_json\n)\n\ninsert into board_access(board_id, domain, email, access) (\n select ae.id as board_id, ae.domain, ae.email, ae.access\n from allow_entry ae\n);\n\nupdate board\nset public_read = coalesce(content -> 'accessPolicy' ->> 'publicRead', 'false') :: boolean,\n public_write = coalesce(content -> 'accessPolicy' ->> 'publicWrite', 'false') :: boolean\nwhere content -> 'accessPolicy' is not null" }, { "path": "backend/migrations/004_public_boards_access.sql", "content": "update board\nset public_read = 't',\n public_write = 't'\nwhere content -> 'accessPolicy' is null" }, { "path": "backend/migrations/005_uuid_extension.sql", "content": "CREATE EXTENSION IF NOT EXISTS \"uuid-ossp\";" }, { "path": "backend/migrations/006_unique_email.sql", "content": "ALTER TABLE app_user ADD CONSTRAINT unique_email UNIQUE (email);" }, { "path": "backend/migrations/007_add_crdt_update.sql", "content": "alter table board_event add column crdt_update bytea null;" }, { "path": "backend/migrations/008_allow_crdt_only_bundle.sql", "content": "alter table board_event alter column first_serial drop not null;\nalter table board_event add constraint first_serial_or_crdt check (crdt_update is not null OR first_serial is not null);" }, { "path": "backend/migrations/009_drop_board_event_primary_key.sql", "content": "ALTER TABLE board_event DROP CONSTRAINT board_event_pkey;\nCREATE INDEX board_event_board_index ON board_event (board_id);" }, { "path": "backend/migrations/010_drop_history_column.sql", "content": "alter table board drop column history;" }, { "path": "backend/package.json", "content": "{\n \"name\": \"rboard-backend\",\n \"version\": \"1.0.0\",\n \"main\": \"dist/index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@types/cookies\": \"^0.7.7\",\n \"@types/date-fns\": \"^2.6.0\",\n \"@types/express-ws\": \"^3.0.0\",\n \"@types/html-entities\": \"^1.2.16\",\n \"@types/json-diff\": \"^0.5.0\",\n \"@types/lodash\": \"^4.14.161\",\n \"@types/node\": \"^14.6.2\",\n \"@types/pg\": \"^7.14.4\",\n \"@types/ramda\": \"^0.27.29\",\n \"@types/tcp-port-used\": \"^1.0.0\",\n \"@types/ws\": \"^7.4.0\",\n \"aws-sdk\": \"^2.778.0\",\n \"cookies\": \"^0.8.0\",\n \"csv-writer\": \"^1.6.0\",\n \"date-fns\": \"^2.17.0\",\n \"dotenv\": \"^8.2.0\",\n \"express\": \"^4.17.1\",\n \"express-ws\": \"^4.0.0\",\n \"fp-ts\": \"^2.9.5\",\n \"google-auth-library\": \"^7.0.2\",\n \"googleapis\": \"^110.0.0\",\n \"html-entities\": \"^2.1.0\",\n \"io-ts\": \"^2.2.15\",\n \"io-ts-types\": \"^0.5.15\",\n \"json-diff\": \"^0.5.4\",\n \"jsonwebtoken\": \"^8.5.1\",\n \"lodash\": \"^4.17.20\",\n \"lonna\": \"^0.12.2\",\n \"monocle-ts\": \"^2.3.7\",\n \"newtype-ts\": \"^0.3.4\",\n \"node-pg-migrate\": \"^6.0.0\",\n\n \"pg\": \"^8.3.3\",\n \"pg-query-stream\": \"^4.2.1\",\n\n \"tcp-port-used\": \"^1.0.2\",\n \"tsx\": \"3.13.0\",\n \"typera-express\": \"^2.3.0\",\n\n \"typescript\": \"^5.3\",\n \"uWebSockets.js\": \"uNetworking/uWebSockets.js#v18.14.0\",\n \"uuid\": \"^8.3.0\",\n \"uuid4\": \"^2.0.2\",\n \"y-protocols\": \"^1.0.6\"\n },\n \"scripts\": {\n \"start\": \"node --enable-source-maps .\",\n \"dev\": \"npm-run-all --parallel watch\",\n \"build\": \"tsc && ncc build dist/backend/src/server.js -o dist\",\n \"watch\": \"tsc-watch --onSuccess \\\"node --enable-source-maps dist/backend/src/server.js\\\" --preserveWatchOutput\",\n \"watch-ts\": \"tsc-watch --preserveWatchOutput\",\n\n\n \"lint\": \"echo 'No linting configured'\"\n },\n \"engines\": {\n \"node\": \">=14\"\n },\n \"devDependencies\": {\n \"@types/express\": \"^4.17.7\",\n \"@types/jsonwebtoken\": \"^8.5.0\",\n \"@types/node-fetch\": \"^2.5.9\",\n\n \"@types/uuid\": \"^8.3.0\",\n \"@vercel/ncc\": \"^0.38.1\",\n \"tsc-watch\": \"^4.2.9\"\n }\n}\n" }, { "path": "backend/src/api/api-routes.ts", "content": "import { router } from \"typera-express\"\nimport { boardCreate } from \"./board-create\"\nimport { boardCSVGet } from \"./board-csv-get\"\nimport { boardGet } from \"./board-get\"\nimport { boardHierarchyGet } from \"./board-hierarchy-get\"\nimport { boardHistoryGet } from \"./board-history-get\"\nimport { boardUpdate } from \"./board-update\"\nimport { githubWebhook } from \"./github-webhook\"\nimport { itemCreate } from \"./item-create\"\nimport { itemCreateOrUpdate } from \"./item-create-or-update\"\n\nexport default router(\n boardGet,\n boardHierarchyGet,\n boardCSVGet,\n boardCreate,\n boardUpdate,\n githubWebhook,\n itemCreate,\n itemCreateOrUpdate,\n boardHistoryGet,\n)\n" }, { "path": "backend/src/api/board-create.ts", "content": "import * as t from \"io-ts\"\nimport { NonEmptyString } from \"io-ts-types\"\nimport { ok } from \"typera-common/response\"\nimport { body } from \"typera-express/parser\"\nimport {\n Board,\n BoardAccessPolicyCodec,\n CrdtDisabled,\n CrdtEnabled,\n newBoard,\n optional,\n} from \"../../../common/src/domain\"\nimport { addBoard } from \"../board-state\"\nimport { route } from \"./utils\"\nimport { getConfig } from \"../config\"\n/**\n * Creates a new board.\n *\n * @tags Board\n */\nexport const boardCreate = route\n .post(\"/api/v1/board\")\n .use(body(t.type({ name: NonEmptyString, accessPolicy: BoardAccessPolicyCodec, crdt: optional(t.literal(true)) })))\n .handler(async (request) => {\n const crdt = (getConfig().crdt === \"true\" || request.body.crdt) ?? false\n let board: Board = newBoard(request.body.name, crdt ? CrdtEnabled : CrdtDisabled, request.body.accessPolicy)\n const boardWithHistory = await addBoard(board, true)\n return ok({ id: boardWithHistory.board.id, accessToken: boardWithHistory.accessTokens[0] })\n })\n" }, { "path": "backend/src/api/board-csv-get.ts", "content": "import { createArrayCsvStringifier } from \"csv-writer\"\nimport _ from \"lodash\"\nimport { ok } from \"typera-common/response\"\nimport { Board, Container, Item, TextItem } from \"../../../common/src/domain\"\nimport { apiTokenHeader, checkBoardAPIAccess, route } from \"./utils\"\nimport { augmentBoardWithCRDT } from \"../../../common/src/board-crdt-helper\"\nimport { yWebSocketServer } from \"../board-yjs-server\"\n\n/**\n * Gets board current contents\n *\n * @tags Board\n */\nexport const boardCSVGet = route\n .get(\"/api/v1/board/:boardId/csv\")\n .use(apiTokenHeader)\n .handler((request) =>\n checkBoardAPIAccess(request, async (boardState) => {\n const board = augmentBoardWithCRDT(\n await yWebSocketServer.docs.getYDocAndWaitForFetch(boardState.board.id),\n boardState.board,\n )\n const textItemsWithParent = Object.values(board.items).filter(\n (i) => i.containerId !== undefined && (i.type === \"text\" || i.type === \"note\"),\n )\n const textItemGroups = _.groupBy(textItemsWithParent, (i) => i.containerId)\n const rows = Object.entries(textItemGroups).map(([parentId, textItems]) => {\n const rowContainer = board.items[parentId]\n return {\n parents: parentChain(board)(rowContainer),\n rowContainer,\n textItems,\n } as Row\n })\n if (rows.length === 0) return csv(board, [])\n const maxDepth = _.max(rows.map((r) => r.parents.length))!\n const csvData = rows.map((r) => {\n return [\n ...r.parents.map((c) => c.text),\n ..._.times(maxDepth - r.parents.length, () => \"\"),\n r.rowContainer.text,\n ...r.textItems.map((i) => i.text),\n ]\n })\n return csv(board, csvData)\n }),\n )\n\ntype Row = { parents: Container[]; rowContainer: Container; textItems: TextItem[] }\n\nconst parentChain = (board: Board) => (item: Item): Container[] => {\n if (!item.containerId) return []\n const parent = board.items[item.containerId]\n if (parent.type !== \"container\")\n throw Error(`Parent item ${item.containerId} is of type ${parent.type}, expecting container`)\n return [parent, ...parentChain(board)(parent)]\n}\n\nfunction csv(board: Board, rows: string[][]) {\n const result = createArrayCsvStringifier({}).stringifyRecords(rows)\n return ok(result, { \"content-type\": \"text/csv\", \"content-disposition\": `attachment; filename=${board.name}.csv` })\n}\n" }, { "path": "backend/src/api/board-get.ts", "content": "import { ok } from \"typera-common/response\"\nimport { apiTokenHeader, checkBoardAPIAccess, route } from \"./utils\"\nimport { yWebSocketServer } from \"../board-yjs-server\"\nimport { augmentBoardWithCRDT } from \"../../../common/src/board-crdt-helper\"\n\n/**\n * Gets board current contents\n *\n * @tags Board\n */\nexport const boardGet = route\n .get(\"/api/v1/board/:boardId\")\n .use(apiTokenHeader)\n .handler((request) =>\n checkBoardAPIAccess(request, async (boardState) => {\n const board = augmentBoardWithCRDT(\n await yWebSocketServer.docs.getYDocAndWaitForFetch(boardState.board.id),\n boardState.board,\n )\n return ok({ board })\n }),\n )\n" }, { "path": "backend/src/api/board-hierarchy-get.ts", "content": "import { ok } from \"typera-common/response\"\nimport { Board, Item } from \"../../../common/src/domain\"\nimport { apiTokenHeader, checkBoardAPIAccess, route } from \"./utils\"\nimport { augmentBoardWithCRDT } from \"../../../common/src/board-crdt-helper\"\nimport { yWebSocketServer } from \"../board-yjs-server\"\n\n/**\n * Gets board current contents\n *\n * @tags Board\n */\nexport const boardHierarchyGet = route\n .get(\"/api/v1/board/:boardId/hierarchy\")\n .use(apiTokenHeader)\n .handler((request) =>\n checkBoardAPIAccess(request, async (boardState) => {\n const board = augmentBoardWithCRDT(\n await yWebSocketServer.docs.getYDocAndWaitForFetch(boardState.board.id),\n boardState.board,\n )\n return ok({ board: getBoardHierarchy(board) })\n }),\n )\n\nexport type ItemHierarchy = Item & { children: ItemHierarchy[] }\nexport function getBoardHierarchy(board: Board) {\n const allItems = Object.values(board.items)\n const rootItems = allItems.filter((i) => i.containerId === undefined).map(getItemHierarchy(allItems))\n return { ...board, items: rootItems }\n}\nconst getItemHierarchy = (items: Item[]) => (item: Item): ItemHierarchy => {\n const children: ItemHierarchy[] = items.filter((i) => i.containerId === item.id).map(getItemHierarchy(items))\n return { ...item, children }\n}\n" }, { "path": "backend/src/api/board-history-get.ts", "content": "import { ok, streamingBody } from \"typera-common/response\"\nimport { getFullBoardHistory } from \"../board-store\"\nimport { withDBClient } from \"../db\"\nimport { apiTokenHeader, checkBoardAPIAccess, route } from \"./utils\"\n\n/**\n * List the history of a board\n *\n * @tags Board\n */\nexport const boardHistoryGet = route\n .get(\"/api/v1/board/:boardId/history\")\n .use(apiTokenHeader)\n .handler((request) =>\n checkBoardAPIAccess(request, async (board) => {\n return ok(\n streamingJSONBody(\"history\", async (callback) => {\n await withDBClient(\n async (client) =>\n await getFullBoardHistory(board.board.id, client, (bundle) => bundle.forEach(callback)),\n )\n }),\n )\n }),\n )\n\nfunction streamingJSONBody(fieldName: string, generator: (callback: (item: any) => void) => Promise) {\n return streamingBody(async (stream) => {\n // Due to memory concerns we fetch board histories from DB as chunks, so this API\n // response must also be chunked\n try {\n stream.write(`{\"${fieldName}\":[`)\n let chunksProcessed = 0\n await generator((item) => {\n let prefix = chunksProcessed === 0 ? \"\" : \",\"\n stream.write(`${prefix}${JSON.stringify(item)}`)\n chunksProcessed++\n })\n stream.write(\"]}\")\n stream.end()\n //console.log(`Wrote ${chunksProcessed} chunks`)\n } catch (e) {\n console.error(`Error writing a streamed body: ${e}`)\n stream.end()\n }\n })\n}\n" }, { "path": "backend/src/api/board-update.ts", "content": "import * as t from \"io-ts\"\nimport { NonEmptyString } from \"io-ts-types\"\nimport { ok } from \"typera-common/response\"\nimport { body } from \"typera-express/parser\"\nimport { BoardAccessPolicyCodec } from \"../../../common/src/domain\"\nimport { apiTokenHeader, checkBoardAPIAccess, dispatchSystemAppEvent, route } from \"./utils\"\nimport { renameBoardConvenienceColumnOnly, updateBoardAccessPolicy } from \"../board-store\"\n\n/**\n * Changes board name and, optionally, access policy.\n *\n * @tags Board\n */\nexport const boardUpdate = route\n .put(\"/api/v1/board/:boardId\")\n .use(apiTokenHeader, body(t.type({ name: NonEmptyString, accessPolicy: BoardAccessPolicyCodec })))\n .handler((request) =>\n checkBoardAPIAccess(request, async (board) => {\n const { boardId } = request.routeParams\n const { name, accessPolicy } = request.body\n await renameBoardConvenienceColumnOnly(boardId, name)\n dispatchSystemAppEvent(board, { action: \"board.rename\", boardId, name })\n if (accessPolicy) {\n await updateBoardAccessPolicy(boardId, accessPolicy)\n dispatchSystemAppEvent(board, { action: \"board.setAccessPolicy\", boardId, accessPolicy })\n }\n return ok({ ok: true })\n }),\n )\n" }, { "path": "backend/src/api/github-webhook.ts", "content": "import { encode as htmlEncode } from \"html-entities\"\nimport * as t from \"io-ts\"\nimport { badRequest, internalServerError, ok } from \"typera-common/response\"\nimport { body } from \"typera-express/parser\"\nimport { RED, YELLOW } from \"../../../common/src/colors\"\nimport { Note } from \"../../../common/src/domain\"\nimport { getBoard } from \"../board-state\"\nimport { addItem, dispatchSystemAppEvent, InvalidRequest, route } from \"./utils\"\n\n// TODO: require API_TOKEN header for github too!\n/**\n * GitHub webhook\n *\n * @tags Webhooks\n */\nexport const githubWebhook = route\n .post(\"/api/v1/webhook/github/:boardId\")\n .use(\n body(\n t.partial({\n issue: t.type({\n html_url: t.string,\n title: t.string,\n number: t.number,\n state: t.string,\n labels: t.array(t.type({ name: t.string })),\n }),\n }),\n ),\n )\n .handler(async (request) => {\n try {\n const boardId = request.routeParams.boardId\n const body = request.body\n const board = await getBoard(boardId)\n if (!board) {\n console.warn(`Github webhook call for unknown board ${boardId}`)\n return ok()\n }\n if (body.issue) {\n const url = body.issue.html_url\n const title = body.issue.title\n const number = body.issue.number.toString()\n const state = body.issue.state\n if (state !== \"open\") {\n console.log(`Github webhook call board ${boardId}: Item in ${state} state`)\n } else {\n const linkStart = ``\n const linkHTML = `${linkStart}${htmlEncode(number)} ${htmlEncode(title)}`\n const existingItem = Object.values(board.board.items).find(\n (i) => i.type === \"note\" && i.text.includes(url),\n ) as Note | undefined\n const isBug = body.issue.labels.some((l) => l.name === \"bug\")\n const color = isBug ? RED : YELLOW\n if (!existingItem) {\n console.log(`Github webhook call board ${boardId}: New item`)\n addItem(board, \"note\", linkHTML, color, \"New issues\")\n } else {\n console.log(`Github webhook call board ${boardId}: Item exists`)\n const updatedItem: Note = { ...existingItem, color }\n dispatchSystemAppEvent(board, { action: \"item.update\", boardId, items: [updatedItem] })\n }\n }\n }\n return ok()\n } catch (e) {\n console.error(e)\n if (e instanceof InvalidRequest) {\n return badRequest(e.message)\n } else {\n return internalServerError()\n }\n }\n })\n" }, { "path": "backend/src/api/item-create-or-update.ts", "content": "import * as t from \"io-ts\"\nimport { NonEmptyString } from \"io-ts-types\"\nimport _ from \"lodash\"\nimport { ok } from \"typera-common/response\"\nimport { body } from \"typera-express/parser\"\nimport { Color, isNote, Note } from \"../../../common/src/domain\"\nimport { ServerSideBoardState } from \"../board-state\"\nimport {\n addItem,\n apiTokenHeader,\n checkBoardAPIAccess,\n dispatchSystemAppEvent,\n findContainer,\n getItemAttributesForContainer,\n InvalidRequest,\n route,\n} from \"./utils\"\n/**\n * Creates a new item on given board or updates an existing one.\n * If you want to add the item onto a specific area/container element on the board, you can\n * find the id of the container by inspecting with your browser.\n *\n * @tags Board\n */\nexport const itemCreateOrUpdate = route\n .put(\"/api/v1/board/:boardId/item/:itemId\")\n .use(\n apiTokenHeader,\n body(\n t.intersection([\n t.type({\n type: t.literal(\"note\"),\n text: NonEmptyString,\n color: t.string,\n }),\n t.partial({\n container: t.string,\n x: t.number,\n y: t.number,\n width: t.number,\n height: t.number,\n replaceTextIfExists: t.boolean,\n replaceColorIfExists: t.boolean,\n replaceContainerIfExists: t.boolean,\n }),\n ]),\n ),\n )\n .handler((request) =>\n checkBoardAPIAccess(request, async (board) => {\n const { itemId } = request.routeParams\n let {\n type,\n text,\n color,\n container,\n replaceTextIfExists,\n replaceColorIfExists,\n replaceContainerIfExists = true,\n ...rest\n } = request.body\n console.log(`PUT item for board ${board.board.id} item ${itemId}: ${JSON.stringify(request.req.body)}`)\n const existingItem = board.board.items[itemId]\n if (existingItem) {\n updateItem(\n board,\n rest.x ?? existingItem.x,\n rest.y ?? existingItem.y,\n type,\n text,\n color,\n container,\n rest.width ?? existingItem.width,\n rest.height ?? existingItem.height,\n itemId,\n replaceTextIfExists,\n replaceColorIfExists,\n replaceContainerIfExists,\n )\n } else {\n console.log(`Adding new item`)\n addItem(board, type, text, color, container, itemId, rest)\n }\n return ok({ ok: true })\n }),\n )\n\nfunction updateItem(\n board: ServerSideBoardState,\n x: number,\n y: number,\n type: \"note\",\n text: string,\n color: Color,\n container: string | undefined,\n width: number,\n height: number,\n itemId: string,\n replaceTextIfExists: boolean | undefined,\n replaceColorIfExists: boolean | undefined,\n replaceContainerIfExists: boolean | undefined,\n) {\n const existingItem = board.board.items[itemId]\n\n if (!isNote(existingItem)) {\n throw new InvalidRequest(\"Unexpected item type\")\n }\n\n let updatedItem: Note = {\n ...existingItem,\n x: x !== undefined ? x : existingItem.x,\n y: y !== undefined ? y : existingItem.y,\n text: replaceTextIfExists !== false ? text : existingItem.text,\n color: replaceColorIfExists !== false ? color || existingItem.color : existingItem.color,\n width: width !== undefined ? width : existingItem.width,\n height: height !== undefined ? height : existingItem.height,\n }\n\n if (container && replaceContainerIfExists !== false) {\n const containerItem = findContainer(container, board.board)\n const currentContainer = findContainer(existingItem.containerId, board.board)\n const containerAttrs =\n containerItem !== currentContainer ? getItemAttributesForContainer(container, board.board) : {}\n\n updatedItem = {\n ...updatedItem,\n ...containerAttrs,\n }\n }\n\n if (!_.isEqual(updatedItem, existingItem)) {\n console.log(`Updating existing item`)\n dispatchSystemAppEvent(board, { action: \"item.update\", boardId: board.board.id, items: [updatedItem] })\n } else {\n console.log(`Not updating: item not changed`)\n }\n}\n" }, { "path": "backend/src/api/item-create.ts", "content": "import * as t from \"io-ts\"\nimport { ok } from \"typera-common/response\"\nimport { body } from \"typera-express/parser\"\nimport { addItem, apiTokenHeader, checkBoardAPIAccess, route } from \"./utils\"\n\n/**\n * Creates a new item on given board. If you want to add the item onto a\n * specific area/container element on the board, you can find the id of the\n * container by inspecting with your browser.\n *\n * @tags Board\n */\nexport const itemCreate = route\n .post(\"/api/v1/board/:boardId/item\")\n .use(\n apiTokenHeader,\n body(\n t.intersection([\n t.type({\n type: t.literal(\"note\"),\n text: t.string,\n color: t.string,\n }),\n t.partial({\n container: t.string,\n x: t.number,\n y: t.number,\n width: t.number,\n height: t.number,\n }),\n ]),\n ),\n )\n .handler((request) =>\n checkBoardAPIAccess(request, async (board) => {\n const { type, text, color, container, ...rest } = request.body\n console.log(`POST item for board ${board.board.id}: ${JSON.stringify(request.req.body)}`)\n const item = addItem(board, type, text, color, container, undefined, rest)\n return ok(item)\n }),\n )\n" }, { "path": "backend/src/api/utils.ts", "content": "import * as bodyParser from \"body-parser\"\nimport * as t from \"io-ts\"\nimport { badRequest, internalServerError, notFound } from \"typera-common/response\"\nimport { applyMiddleware } from \"typera-express\"\nimport { wrapNative } from \"typera-express/middleware\"\nimport { headers } from \"typera-express/parser\"\nimport { DEFAULT_NOTE_COLOR } from \"../../../common/src/colors\"\nimport {\n AppEvent,\n Board,\n BoardHistoryEntry,\n Color,\n Container,\n EventUserInfo,\n newISOTimeStamp,\n newNote,\n Note,\n PersistableBoardItemEvent,\n} from \"../../../common/src/domain\"\nimport { getBoard, ServerSideBoardState, updateBoards } from \"../board-state\"\nimport { broadcastBoardEvent } from \"../websocket-sessions\"\n\nexport const route = applyMiddleware(wrapNative(bodyParser.json()))\nexport const apiTokenHeader = headers(t.partial({ API_TOKEN: t.string }))\n\nexport async function checkBoardAPIAccess(\n request: { routeParams: { boardId: string }; headers: { API_TOKEN?: string | undefined } },\n fn: (board: ServerSideBoardState) => Promise,\n) {\n const boardId = request.routeParams.boardId\n const apiToken = request.headers.API_TOKEN\n try {\n const board = await getBoard(boardId)\n if (!board) return notFound()\n if (board.board.accessPolicy || board.accessTokens.length) {\n if (!apiToken) {\n return badRequest(\"API_TOKEN header is missing\")\n }\n if (!board.accessTokens.some((t) => t === apiToken)) {\n console.log(`API_TOKEN ${apiToken} not on list ${board.accessTokens}`)\n return badRequest(\"Invalid API_TOKEN\")\n }\n }\n return await fn(board)\n } catch (e) {\n console.error(e)\n if (e instanceof InvalidRequest) {\n return badRequest(e.message)\n } else {\n return internalServerError()\n }\n }\n}\n\nexport function findContainer(container: string | undefined, board: Board): Container | null {\n if (container !== undefined) {\n if (typeof container !== \"string\") {\n throw new InvalidRequest(\"Expecting container to be undefined, or an id or name of an Container item\")\n }\n const containerItem = Object.values(board.items).find(\n (i) => i.type === \"container\" && (i.text.toLowerCase() === container.toLowerCase() || i.id === container),\n )\n if (!containerItem) {\n throw new InvalidRequest(`Container \"${container}\" not found by id or name`)\n }\n return containerItem as Container\n } else {\n return null\n }\n}\n\nexport function getItemAttributesForContainer(container: string | undefined, board: Board) {\n const containerItem = findContainer(container, board)\n if (containerItem) {\n return {\n containerId: containerItem.id,\n x: containerItem.x + 2,\n y: containerItem.y + 2,\n }\n }\n return {}\n}\n\nexport function dispatchSystemAppEvent(board: ServerSideBoardState, appEvent: PersistableBoardItemEvent) {\n const user: EventUserInfo = { userType: \"system\", nickname: \"Github webhook\" }\n let historyEntry: BoardHistoryEntry = { ...appEvent, user, timestamp: newISOTimeStamp() }\n console.log(JSON.stringify(historyEntry))\n // TODO: refactor, this is the same sequence as done in connection-handler for messages from clients\n const serial = updateBoards(board, historyEntry)\n historyEntry = { ...historyEntry, serial }\n broadcastBoardEvent(historyEntry)\n}\n\nexport function addItem(\n board: ServerSideBoardState,\n type: \"note\",\n text: string,\n color: Color,\n container: string | undefined,\n itemId?: string,\n partialParams?: Partial<{ x: number; y: number; width: number; height: number }>,\n) {\n if (type !== \"note\") throw new InvalidRequest(\"Expecting type: note\")\n if (typeof text !== \"string\" || text.length === 0) throw new InvalidRequest(\"Expecting non zero-length text\")\n\n let itemAttributes: object = getItemAttributesForContainer(container, board.board)\n if (itemId) itemAttributes = { ...itemAttributes, id: itemId }\n\n // Merge partial parameters with existing attributes\n if (partialParams) {\n itemAttributes = { ...itemAttributes, ...partialParams }\n }\n\n const item: Note = { ...newNote(text, color || DEFAULT_NOTE_COLOR), ...itemAttributes }\n const appEvent: AppEvent = { action: \"item.add\", boardId: board.board.id, items: [item], connections: [] }\n dispatchSystemAppEvent(board, appEvent)\n return item\n}\n\nexport class InvalidRequest extends Error {\n constructor(message: string) {\n super(message)\n }\n}\n" }, { "path": "backend/src/board-event-handler.ts", "content": "import {\n AppEvent,\n BoardHistoryEntry,\n canWrite,\n checkBoardAccess,\n Id,\n isBoardItemEvent,\n isPersistableBoardItemEvent,\n newISOTimeStamp,\n} from \"../../common/src/domain\"\nimport { getBoard, maybeGetBoard, updateBoards } from \"./board-state\"\nimport { getBoardInfo, renameBoardConvenienceColumnOnly, updateBoardAccessPolicy } from \"./board-store\"\nimport { handleCommonEvent } from \"./common-event-handler\"\nimport { MessageHandlerResult } from \"./connection-handler\"\nimport { WS_HOST_DEFAULT, WS_HOST_LOCAL, WS_PROTOCOL } from \"./host-config\"\nimport { obtainLock } from \"./locker\"\nimport { associateUserWithBoard } from \"./user-store\"\nimport { addSessionToBoard, broadcastBoardEvent, getSession } from \"./websocket-sessions\"\nimport { toBuffer, WsWrapper } from \"./ws-wrapper\"\n\nexport const handleBoardEvent = (allowedBoardId: Id | null, getSignedPutUrl: (key: string) => string) => async (\n socket: WsWrapper,\n appEvent: AppEvent,\n): Promise => {\n if (await handleCommonEvent(socket, appEvent)) return true\n const session = getSession(socket)\n if (!session) {\n console.error(\"Session missing for socket \" + socket.id)\n return true\n }\n if (appEvent.action === \"board.join\") {\n //await sleep(3000) // simulate latency\n\n const boardInfo = await getBoardInfo(appEvent.boardId)\n if (!boardInfo) {\n console.warn(`Trying to join unknown board ${appEvent.boardId}`)\n session.sendEvent({\n action: \"board.join.denied\",\n boardId: appEvent.boardId,\n reason: \"not found\",\n })\n return true\n }\n const wsHost = boardInfo.ws_host ?? WS_HOST_DEFAULT\n\n if (!allowedBoardId || appEvent.boardId !== allowedBoardId || !WS_HOST_LOCAL.includes(wsHost)) {\n // Path - board id mismatch -> always redirect\n\n const wsAddress = `${WS_PROTOCOL}://${wsHost}/socket/board/${appEvent.boardId}`\n /* console.info(\n `Trying to join board ${appEvent.boardId} on socket for board ${allowedBoardId}, board host ${wsHost} local hostnames ${WS_HOST_LOCAL}`,\n )*/\n\n session.sendEvent({\n action: \"board.join.denied\",\n boardId: appEvent.boardId,\n reason: \"redirect\",\n wsAddress,\n })\n return true\n }\n\n let board = (await getBoard(appEvent.boardId))!\n\n const accessPolicy = board.board.accessPolicy\n const accessLevel = checkBoardAccess(accessPolicy, session.userInfo)\n if (session.userInfo.userType === \"authenticated\") {\n if (accessLevel === \"none\") {\n console.warn(\"Access denied to board by user not on allowList\")\n session.sendEvent({\n action: \"board.join.denied\",\n boardId: appEvent.boardId,\n reason: \"forbidden\",\n })\n return true\n } else {\n await associateUserWithBoard(session.userInfo.userId, appEvent.boardId)\n }\n } else {\n if (accessLevel === \"none\") {\n console.warn(\"Access denied to board by anonymous user\")\n session.sendEvent({\n action: \"board.join.denied\",\n boardId: appEvent.boardId,\n reason: \"unauthorized\",\n })\n return true\n }\n }\n await addSessionToBoard(board, socket, accessLevel, appEvent.initAtSerial)\n return true\n }\n\n if (!session.boardSession) {\n console.warn(\"Trying to send event to board without session\", appEvent)\n return true\n }\n\n if (isBoardItemEvent(appEvent)) {\n const boardId = appEvent.boardId\n const state = await getBoard(boardId)\n if (!state) {\n return true // Just ignoring for now, see above todo\n }\n if (!canWrite(session.boardSession.accessLevel)) {\n console.warn(\"Trying to change read-only board\")\n return true\n }\n obtainLock(state.locks, appEvent, socket) // Allow even if was locked (offline use)\n if (isPersistableBoardItemEvent(appEvent)) {\n if (!session.isOnBoard(appEvent.boardId)) {\n console.warn(\"Trying to send event to board without valid session\")\n } else {\n let historyEntry: BoardHistoryEntry = {\n ...appEvent,\n user: session.userInfo,\n timestamp: newISOTimeStamp(),\n }\n try {\n const serial = updateBoards(state, historyEntry)\n historyEntry = { ...historyEntry, serial }\n broadcastBoardEvent(historyEntry, session)\n if (appEvent.action === \"board.rename\") {\n // special case: keeping name up to date as it's in a separate column\n await renameBoardConvenienceColumnOnly(appEvent.boardId, appEvent.name)\n }\n if (appEvent.action === \"board.setAccessPolicy\") {\n if (session.boardSession.accessLevel !== \"admin\") {\n console.warn(\"Trying to change access policy without admin access\")\n return true\n }\n await updateBoardAccessPolicy(appEvent.boardId, appEvent.accessPolicy)\n }\n return { boardId, serial }\n } catch (e) {\n console.warn(`Error applying event ${JSON.stringify(appEvent)}: ${e} -> forcing board refresh`)\n session.sendEvent({ action: \"board.action.apply.failed\" })\n return true\n }\n }\n } else if (appEvent.action === \"item.unlock\") {\n return true\n }\n } else {\n switch (appEvent.action) {\n case \"cursor.move\": {\n const { boardId, position } = appEvent\n const { x, y } = position\n const state = maybeGetBoard(boardId)\n if (state) {\n const session = getSession(socket)\n if (session && session.isOnBoard(appEvent.boardId)) {\n state.cursorPositions[socket.id] = { x, y, sessionId: socket.id }\n state.cursorsMoved = true\n }\n }\n return true\n }\n case \"user.bringAllToMe\": {\n const session = getSession(socket)\n const state = maybeGetBoard(appEvent.boardId)\n if (session && state && session.isOnBoard(appEvent.boardId)) {\n if (session.sessionId !== appEvent.sessionId) {\n console.warn(\"Incorrect sessionId in user.bringAllToMe\")\n } else {\n broadcastBoardEvent(appEvent, session)\n }\n }\n return true\n }\n case \"asset.put.request\": {\n const { assetId } = appEvent\n const signedUrl = getSignedPutUrl(assetId)\n socket.send(toBuffer({ action: \"asset.put.response\", assetId, signedUrl }))\n return true\n }\n }\n }\n return false\n}\n" }, { "path": "backend/src/board-state.test.ts", "content": "import { describe, expect, it } from \"vitest\"\n\ndescribe(\"board state iteration\", () => {\n it(\"is safe\", () => {\n // Checking that map value iteration is safe when deleteting items on the way\n const boards = new Map()\n boards.set(1, 1)\n boards.set(2, 2)\n const results: number[] = []\n for (let b of boards.values()) {\n results.push(b)\n boards.delete(b)\n }\n expect(results).toEqual([1, 2])\n })\n})\n" }, { "path": "backend/src/board-state.ts", "content": "import { merge } from \"lodash\"\nimport { boardReducer } from \"../../common/src/board-reducer\"\nimport { Board, BoardCursorPositions, BoardHistoryEntry, Id } from \"../../common/src/domain\"\nimport { sleep } from \"../../common/src/sleep\"\nimport { createAccessToken, createBoard, fetchBoard, storeEventHistoryBundle } from \"./board-store\"\nimport { quickCompactBoardHistory } from \"./compact-history\"\nimport { Locks } from \"./locker\"\nimport { UserSession, broadcastItemLocks, getBoardSessionCount, getSessionCount } from \"./websocket-sessions\"\nimport * as Y from \"yjs\"\nimport { inTransaction } from \"./db\"\n\n// A mutable state object for server side state\nexport type ServerSideBoardState = {\n ready: true\n board: Board\n recentEvents: BoardHistoryEntry[]\n recentCrdtUpdate: Uint8Array | null\n currentlyStoring: {\n events: BoardHistoryEntry[]\n crdtUpdate: Uint8Array | null\n } | null\n locks: ReturnType\n cursorsMoved: boolean\n cursorPositions: BoardCursorPositions\n accessTokens: string[]\n sessions: UserSession[]\n}\n\nexport type ServerSideBoardStateInternal =\n | ServerSideBoardState\n | {\n ready: false\n fetch: Promise\n }\n\nlet boards: Map = new Map()\n\nexport async function getBoard(id: Id): Promise {\n let state = boards.get(id)\n if (!state) {\n console.log(`Loading board ${id} into memory`)\n const fetchState = async () => {\n const boardData = await fetchBoard(id)\n if (!boardData) return null\n const { board, accessTokens } = boardData\n return {\n ready: true,\n board,\n accessTokens,\n recentEvents: [],\n recentCrdtUpdate: null,\n currentlyStoring: null,\n locks: Locks((changedLocks) => broadcastItemLocks(id, changedLocks)),\n cursorsMoved: false,\n cursorPositions: {},\n sessions: [],\n } as ServerSideBoardState\n }\n const fetch = fetchState()\n const temporaryState = {\n ready: false as const,\n fetch,\n }\n boards.set(id, temporaryState)\n try {\n const finalState = await fetch\n if (!finalState) {\n boards.delete(id)\n return null\n } else {\n boards.set(id, finalState)\n console.log(`Board loaded into memory: ${id}`)\n return finalState\n }\n } catch (e) {\n boards.delete(id)\n // TODO: avoid retry loop\n console.error(`Board load failed for board ${id}`)\n throw e\n }\n } else if (!state.ready) {\n return await state.fetch\n } else {\n return state\n }\n}\n\nexport function maybeGetBoard(id: Id): ServerSideBoardState | undefined {\n const state = boards.get(id)\n if (state?.ready) return state\n}\n\nexport function updateBoards(boardState: ServerSideBoardState, appEvent: BoardHistoryEntry) {\n const currentSerial = boardState.board.serial\n const serial = currentSerial + 1\n if (appEvent.serial !== undefined) {\n throw Error(\"Event already has serial\")\n }\n const eventWithSerial = { ...appEvent, serial }\n\n const updatedBoard = boardReducer(boardState.board, eventWithSerial, { inplace: true, strictOnSerials: true })[0]\n\n boardState.board = updatedBoard\n boardState.recentEvents.push(eventWithSerial)\n return serial\n}\n\nexport function updateBoardCrdt(id: Id, crdtUpdate: Uint8Array) {\n const boardState = maybeGetBoard(id)\n\n if (!boardState) {\n console.warn(\"CRDT update for board not loaded into memory\", id)\n } else {\n boardState.recentCrdtUpdate = combineCrdtUpdates(boardState.recentCrdtUpdate, crdtUpdate)\n }\n}\n\nexport async function addBoard(board: Board, createToken?: boolean): Promise {\n await createBoard(board)\n const accessTokens = createToken ? [await createAccessToken(board)] : []\n const boardState = {\n ready: true as const,\n board,\n serial: 0,\n recentEvents: [],\n recentCrdtUpdate: null,\n currentlyStoring: null,\n locks: Locks((changedLocks) => broadcastItemLocks(board.id, changedLocks)),\n cursorsMoved: false,\n cursorPositions: {},\n accessTokens,\n sessions: [],\n }\n boards.set(board.id, boardState)\n return boardState\n}\n\nexport function getActiveBoards() {\n return [...boards.values()].filter((b) => b.ready) as ServerSideBoardState[]\n}\n\nlet savingPromise: Promise = saveBoards()\n\nasync function saveBoards() {\n await sleep(1000)\n for (let state of boards.values()) {\n if (state.ready) await saveBoardChanges(state)\n }\n savingPromise = saveBoards()\n}\n\nexport async function awaitSavingChanges() {\n await savingPromise\n}\n\nasync function saveBoardChanges(state: ServerSideBoardState) {\n if (state.recentEvents.length > 0 || state.recentCrdtUpdate !== null) {\n if (state.currentlyStoring) {\n throw Error(\"Invariant failed: storingEvents not empty\")\n }\n const events = state.recentEvents.splice(0)\n const crdtUpdate = state.recentCrdtUpdate\n state.currentlyStoring = {\n events,\n crdtUpdate,\n }\n state.recentCrdtUpdate = null\n console.log(\n `Saving board ${state.board.id} at serial ${state.board.serial} with ${\n state.currentlyStoring.events.length\n } new events ${crdtUpdate ? \"and CRDT update of size \" + crdtUpdate.length : \"\"}`,\n )\n const lastSerial = state.board.serial\n try {\n await inTransaction((client) =>\n storeEventHistoryBundle(state.board.id, events, lastSerial, crdtUpdate, client),\n )\n } catch (e) {\n // Push event back to the head of save list for retrying later\n state.recentEvents = [...state.currentlyStoring.events, ...state.recentEvents]\n state.recentCrdtUpdate = merge(state.currentlyStoring.crdtUpdate, state.recentCrdtUpdate)\n console.error(\"Board save failed for board\", state.board.id, e)\n }\n state.currentlyStoring = null\n }\n if (state.recentEvents.length === 0 && getBoardSessionCount(state.board.id) === 0) {\n console.log(`Purging board ${state.board.id} from memory`)\n boards.delete(state.board.id)\n await quickCompactBoardHistory(state.board.id)\n }\n}\n\nexport function combineCrdtUpdates(a: Uint8Array | null, b: Uint8Array | null) {\n if (!a) return b\n if (!b) return a\n return Y.mergeUpdates([a, b])\n}\n\nexport function getActiveBoardCount() {\n return boards.size\n}\n\nsetInterval(() => {\n console.log(\"Statistics: active boards \" + getActiveBoardCount() + \", sessions \" + getSessionCount())\n}, 60000)\n" }, { "path": "backend/src/board-store.ts", "content": "import { PoolClient } from \"pg\"\nimport QueryStream from \"pg-query-stream\"\nimport * as uuid from \"uuid\"\nimport { boardReducer } from \"../../common/src/board-reducer\"\nimport { Board, BoardAccessPolicy, BoardHistoryEntry, Id, isBoardEmpty, Serial } from \"../../common/src/domain\"\nimport { migrateBoard, migrateEvent, mkBootStrapEvent } from \"../../common/src/migration\"\nimport { inTransaction, withDBClient } from \"./db\"\nimport { assertNotNull } from \"../../common/src/assertNotNull\"\n\nexport type BoardAndAccessTokens = {\n board: Board\n accessTokens: string[]\n}\n\nexport type BoardInfo = {\n id: Id\n name: string\n ws_host: string | null\n}\n\nexport async function getBoardInfo(id: Id): Promise {\n const result = await withDBClient((client) => client.query(\"SELECT id, name, ws_host FROM board WHERE id=$1\", [id]))\n return result.rows.length === 1 ? (result.rows[0] as BoardInfo) : null\n}\n\nconst selectBoardQuery = `\nselect id,\n jsonb_set (content - 'accessPolicy', '{accessPolicy}', \n \t\tcast(json_build_object(\n \t\t\t'allowList', ( \t\t\t\n \t\t\t\tcoalesce((\n\t\t\t\t\t select jsonb_agg(jsonb_strip_nulls(jsonb_build_object('domain', domain, 'access', access, 'email', email))) \n\t\t\t\t\t from board_access\n\t\t\t\t\t where board_access.board_id = board.id\n\t\t\t\t\t), '[]') \t\t\t\n \t\t\t), \n \t\t\t'publicRead', public_read, \n \t\t\t'publicWrite', public_write\n \t\t) as jsonb)) \n \t\tas content\nfrom board\nwhere id=$1\n`\n\nexport async function fetchBoard(id: Id): Promise {\n return await inTransaction(async (client) => {\n const started = new Date().getTime()\n const result = await client.query(selectBoardQuery, [id])\n if (result.rows.length == 0) {\n return null\n } else {\n const snapshot = result.rows[0].content as Board\n if (\n snapshot.accessPolicy &&\n snapshot.accessPolicy.allowList.length === 0 &&\n snapshot.accessPolicy.publicRead &&\n snapshot.accessPolicy.publicWrite\n ) {\n // Effectively no access policy\n delete snapshot.accessPolicy\n }\n let historyEventCount = 0\n let lastSerial = 0\n let board = snapshot\n\n let i = 0\n let rebuildingSnapshot = false\n function updateBoardWithEventChunk(chunk: BoardHistoryEntry[]) {\n if (chunk.length === 0) {\n return // CRDT-only bundle\n }\n board = chunk.reduce((b, e) => {\n i++\n if (e.action === \"board.setAccessPolicy\") {\n // Don't process access policy event when fetching board\n // Access policy may have been changed in the database after the event\n // And the board table status is considered the master\n return { ...b, serial: assertNotNull(e.serial) }\n }\n return boardReducer(b, e, { inplace: true, strictOnSerials: !rebuildingSnapshot })[0]\n }, board)\n historyEventCount += chunk.length\n lastSerial = chunk[chunk.length - 1].serial ?? snapshot.serial\n }\n\n await getBoardHistory(id, snapshot.serial, updateBoardWithEventChunk).catch(async (error) => {\n console.error(error.message)\n console.error(\n `Error applying board history for snapshot update for board ${id}. Loop index ${i}. Rebooting snapshot. This may be a lossy operation.`,\n )\n i = 0\n board = { ...snapshot, items: {}, connections: [] }\n rebuildingSnapshot = true\n try {\n await getFullBoardHistory(id, client, updateBoardWithEventChunk)\n } catch (e) {\n console.error(`Unable to reboot snapshot, failing at loop index ${i}. Giving up.`)\n\n // TODO: this board cannot be repaired automatically. We should block usage, or it will be\n // and endless loop. Local dev, board ee803db1-f41a-43c6-9e39-83057faace60.\n\n throw e\n }\n })\n\n const serial = (historyEventCount > 0 ? lastSerial : snapshot.serial) || 0\n const elapsed = new Date().getTime() - started\n console.log(\n `Loaded board ${id} at serial ${serial} from snapshot at serial ${snapshot.serial} and ${historyEventCount} events after snapshot. Took ${elapsed}ms`,\n )\n\n if (historyEventCount > 1000 || rebuildingSnapshot /* time to create a new snapshot*/) {\n console.log(\n `Saving snapshot for board ${id} at serial ${serial}/${snapshot.serial} with ${historyEventCount} new events`,\n )\n await saveBoardSnapshot(mkSnapshot(board, serial), client)\n }\n const accessTokens = (\n await client.query(\"SELECT token FROM board_api_token WHERE board_id=$1\", [id])\n ).rows.map((row) => row.token)\n\n return { board: { ...board, serial }, accessTokens }\n }\n })\n}\n\nexport async function createBoard(board: Board): Promise {\n await inTransaction(async (client) => {\n const result = await client.query(\"SELECT id FROM board WHERE id=$1\", [board.id])\n if (result.rows.length > 0) throw Error(\"Board already exists: \" + board.id)\n await client.query(`INSERT INTO board(id, name, content) VALUES ($1, $2, $3)`, [\n board.id,\n board.name,\n mkSnapshot(board, 0),\n ])\n\n await updateAccessPolicy(board.id, board.accessPolicy, client)\n\n if (!isBoardEmpty(board)) {\n console.log(`Creating non-empty board ${board.id} -> bootstrapping history`)\n const event = mkBootStrapEvent(board.id, board)\n storeEventHistoryBundle(board.id, [event], event.serial!, null, client)\n }\n })\n}\n\nasync function updateAccessPolicy(boardId: string, accessPolicy: BoardAccessPolicy, client: PoolClient): Promise {\n const publicRead = accessPolicy ? !!accessPolicy.publicRead : true\n const publicWrite = accessPolicy ? !!accessPolicy.publicWrite : true\n await client.query(`UPDATE board SET public_read=$1, public_write=$2 WHERE id=$3`, [\n publicRead,\n publicWrite,\n boardId,\n ])\n await client.query(`DELETE FROM board_access WHERE board_id=$1`, [boardId])\n if (accessPolicy) {\n for (const entry of accessPolicy.allowList) {\n const domain = \"domain\" in entry ? entry.domain : null\n const email = \"email\" in entry ? entry.email : null\n await client.query(`INSERT INTO BOARD_access (board_id, domain, email, access) VALUES ($1, $2, $3, $4)`, [\n boardId,\n domain,\n email,\n entry.access,\n ])\n }\n }\n}\n\n// Updates the name column, which is there for admin convenience (not used by application logic)\nexport async function renameBoardConvenienceColumnOnly(boardId: Id, name: string) {\n await inTransaction(async (client) => {\n const result = await client.query(\"SELECT content FROM board WHERE id=$1\", [boardId])\n if (result.rows.length !== 1) throw Error(\"Board not found: \" + boardId)\n await client.query(\"UPDATE board SET name=$1 WHERE id=$2\", [name, boardId])\n })\n}\n\nexport async function updateBoardAccessPolicy(boardId: Id, accessPolicy: BoardAccessPolicy) {\n await inTransaction(async (client) => {\n const result = await client.query(\"SELECT content FROM board WHERE id=$1\", [boardId])\n if (result.rows.length !== 1) throw Error(\"Board not found: \" + boardId)\n await updateAccessPolicy(boardId, accessPolicy, client)\n })\n}\n\nexport async function createAccessToken(board: Board): Promise {\n const token = uuid.v4()\n await inTransaction(async (client) =>\n client.query(\"INSERT INTO board_api_token (board_id, token) VALUES ($1, $2)\", [board.id, token]),\n )\n return token\n}\n\ntype StreamingBoardEventCallback = (chunk: BoardHistoryEntry[]) => void\n\n// Due to memory concerns we fetch board histories from DB as chunks,\n// which are currently implemented as sort of a poor-man's observable\nfunction streamingBoardEventsQuery(text: string, values: any[], client: PoolClient, cb: StreamingBoardEventCallback) {\n return new Promise((resolve, reject) => {\n const query = new QueryStream(text, values)\n const stream = client.query(query)\n stream.on(\"error\", reject)\n stream.on(\"end\", resolve)\n stream.on(\"data\", (row) => {\n try {\n const chunk = row.events?.events as BoardHistoryEntry[] | undefined\n\n if (!chunk) {\n throw Error(`Unexpected DB row value ${chunk}`)\n }\n\n cb(chunk.map(migrateEvent))\n } catch (error) {\n console.error(error)\n stream.destroy()\n reject(error)\n }\n })\n })\n}\n\nexport function getFullBoardHistory(id: Id, client: PoolClient, cb: StreamingBoardEventCallback) {\n return streamingBoardEventsQuery(\n `\n SELECT events \n FROM board_event \n WHERE board_id=$1 \n ORDER BY last_serial, first_serial\n `,\n [id],\n client,\n cb,\n )\n}\n\nexport async function getBoardHistory(id: Id, afterSerial: Serial, cb: StreamingBoardEventCallback): Promise {\n await withDBClient(async (client) => {\n let firstSerial = -1\n let lastSerial = -1\n let firstValidSerial = -1\n await streamingBoardEventsQuery(\n `\n SELECT events \n FROM board_event \n WHERE board_id=$1 AND last_serial >= $2 \n ORDER BY last_serial, first_serial\n `,\n [id, afterSerial],\n client,\n (chunk) => {\n if (chunk.length === 0) {\n return // CRDT-only bundle\n }\n if (firstSerial === -1 && typeof chunk[0]?.serial === \"number\") {\n firstSerial = chunk[0]?.serial\n }\n lastSerial = chunk[chunk.length - 1].serial ?? -1\n\n const validEventsAfter = chunk.filter((r) => r.serial! > afterSerial)\n if (validEventsAfter.length === 0) {\n // Got chunk where no events have serial greater than the snapshot point -- discard it\n return\n }\n\n if (firstValidSerial === -1 && typeof validEventsAfter[0].serial === \"number\") {\n firstValidSerial = validEventsAfter[0].serial\n }\n cb(validEventsAfter)\n return\n },\n )\n\n // Client is up to date, ok\n if (lastSerial === afterSerial) {\n return\n }\n\n // Found continuous history, ok\n if (firstValidSerial === afterSerial + 1) {\n return\n }\n\n if (firstValidSerial === -1) {\n if (afterSerial === 0) {\n // Requesting from start, zero events found, is ok\n return\n }\n // Client claims to be in the future, not ok\n throw Error(\n `Cannot find history to start after the requested serial ${afterSerial} for board ${id}. Seems like the requested serial is higher than currently stored in DB`,\n )\n }\n\n // Found noncontinuous event timeline, not ok\n throw Error(\n `Cannot find history to start after the requested serial ${afterSerial} for board ${id}. Found history for ${firstValidSerial}..${lastSerial}`,\n )\n })\n}\n\nexport function verifyContinuity(boardId: Id, init: Serial, ...histories: BoardHistoryEntry[][]) {\n for (let history of histories) {\n if (history.length > 0) {\n if (!verifyTwoPoints(boardId, init, history[0].serial!)) {\n return false\n }\n init = history[history.length - 1].serial!\n }\n }\n return true\n}\n\nexport function verifyEventArrayContinuity(boardId: Id, init: Serial, events: BoardHistoryEntry[]) {\n for (let event of events) {\n if (!verifyTwoPoints(boardId, init, event.serial!)) {\n return false\n }\n init = event.serial!\n }\n return true\n}\n\nfunction verifyTwoPoints(boardId: Id, a: Serial, b: Serial) {\n if (b !== a + 1) {\n console.error(`History discontinuity: ${a} -> ${b} for board ${boardId}`)\n return false\n }\n return true\n}\n\nfunction mkSnapshot(board: Board, serial: Serial) {\n const { accessPolicy, ...result } = migrateBoard({ ...board, serial })\n return result\n}\n\nexport async function saveBoardSnapshot(board: Board, client: PoolClient) {\n console.log(`Save board snapshot ${board.id} at serial ${board.serial}`)\n client.query(\n `\n UPDATE board \n SET name=$2, content=$3 \n WHERE id=$1`,\n [board.id, board.name, board],\n )\n}\n\nexport async function storeEventHistoryBundle(\n boardId: Id,\n events: BoardHistoryEntry[],\n lastSerial: Serial, // Needed in case events is empty\n crdtUpdate: Uint8Array | null,\n client: PoolClient,\n savedAt = new Date(),\n) {\n if (events.length === 0 && crdtUpdate === null) {\n throw Error(\"Trying to store a bundle without events or crdtUpdate\")\n }\n if (events[0]?.firstSerial !== undefined) {\n throw Error(\"Assertion failed: folded events not expected on the server side.\")\n }\n const firstSerial = events.length > 0 ? assertNotNull(events[0].serial) : null\n if (events.length > 0 && events[events.length - 1].serial != lastSerial) {\n throw Error(\"Serial mismatch between lastSerial and lastEvent.serial\")\n }\n await client.query(\n `\n INSERT INTO board_event(board_id, first_serial, last_serial, events, crdt_update, saved_at) \n VALUES ($1, $2, $3, $4, $5, $6)\n `,\n [boardId, firstSerial, lastSerial, { events }, crdtUpdate, savedAt],\n )\n}\n\nexport async function storeCRDTOnlyEventHistoryBundle(\n boardId: Id,\n boardSerial: Serial,\n crdtUpdate: Uint8Array | null,\n client: PoolClient,\n savedAt = new Date(),\n) {\n await client.query(\n `\n INSERT INTO board_event(board_id, first_serial, last_serial, events, crdt_update, saved_at) \n VALUES ($1, $2, $3, $4, $5, $6)\n `,\n [boardId, null, boardSerial, null, crdtUpdate, savedAt],\n )\n}\n\nexport type BoardHistoryBundle = {\n board_id: Id\n last_serial: Serial\n events: {\n events: BoardHistoryEntry[]\n }\n crdt_update: Uint8Array | null\n}\n\nexport async function getBoardHistoryBundlesWithLastSerialsBetween(\n client: PoolClient,\n id: Id,\n lsMin: Serial,\n lsMax: Serial,\n): Promise {\n return (\n await client.query(\n `\n SELECT board_id, last_serial, events, crdt_update \n FROM board_event \n WHERE board_id=$1 AND last_serial >= $2 AND last_serial <= $3 \n ORDER BY last_serial, first_serial\n `,\n [id, lsMin, lsMax],\n )\n ).rows.map(migrateBundle)\n}\n\nexport async function getBoardHistoryCrdtUpdates(client: PoolClient, id: Id): Promise {\n return (\n await client.query(\n `\n SELECT crdt_update \n FROM board_event \n WHERE board_id=$1 AND crdt_update IS NOT NULL \n ORDER BY last_serial, first_serial\n `,\n [id],\n )\n ).rows.map((row) => row.crdt_update)\n}\n\nfunction migrateBundle(b: BoardHistoryBundle): BoardHistoryBundle {\n return { ...b, events: { ...b.events, events: b.events.events.map(migrateEvent) } }\n}\n\nexport type BoardHistoryBundleMeta = {\n board_id: Id\n first_serial: Serial | null\n last_serial: Serial\n saved_at: Date\n}\n\nexport async function getBoardHistoryBundleMetas(client: PoolClient, id: Id): Promise {\n return (\n await client.query(\n `\n SELECT board_id, last_serial, first_serial, saved_at \n FROM board_event \n WHERE board_id=$1 \n ORDER BY last_serial, first_serial\n `,\n [id],\n )\n ).rows\n}\n\nexport function verifyContinuityFromMetas(boardId: Id, init: Serial, bundles: BoardHistoryBundleMeta[]) {\n for (let bundle of bundles) {\n if (!bundle.first_serial) {\n // CRDT only bundle\n if (bundle.last_serial !== init) {\n console.error(\n `History discontinuity: ${init} -> ${bundle.last_serial} for CRDT-only bundle for board ${boardId}`,\n )\n return false\n }\n } else {\n if (!verifyTwoPoints(boardId, init, bundle.first_serial)) {\n return false\n }\n init = bundle.last_serial\n }\n }\n return true\n}\n\nexport async function findAllBoards(client: PoolClient): Promise {\n const result = await client.query(\"SELECT id FROM board\")\n return result.rows.map((row) => row.id)\n}\n" }, { "path": "backend/src/board-yjs-server.ts", "content": "import expressWs from \"express-ws\"\nimport * as Y from \"yjs\"\nimport { updateBoardCrdt } from \"./board-state\"\nimport { getBoardHistoryCrdtUpdates } from \"./board-store\"\nimport { withDBClient } from \"./db\"\nimport { getSessionIdFromCookies } from \"./http-session\"\nimport { getSessionById } from \"./websocket-sessions\"\nimport YWebSocketServer from \"./y-websocket-server/YWebSocketServer\"\nimport * as WebSocket from \"ws\"\nimport { canRead, canWrite } from \"../../common/src/domain\"\n\nconst socketsBySessionId: Record = {}\n\nexport function closeYjsSocketsBySessionId(sessionId: string) {\n const sockets = socketsBySessionId[sessionId]\n if (sockets) {\n for (const socket of sockets) {\n socket.close()\n }\n delete socketsBySessionId[sessionId]\n console.log(\n `CLOSED ${sockets.length} y.js sockets by session id ${sessionId} - remaining sockets exist for ${\n Object.keys(socketsBySessionId).length\n } other sessions`,\n )\n }\n}\n\nexport const yWebSocketServer = new YWebSocketServer({\n persistence: {\n bindState: async (docName, ydoc) => {\n const boardId = docName\n const updates = await withDBClient(async (client) => getBoardHistoryCrdtUpdates(client, boardId))\n\n if (updates.length === 0) {\n const initUpdate = Y.encodeStateAsUpdate(ydoc)\n console.log(`Storing initial CRDT state to DB for board ${boardId}`)\n updateBoardCrdt(boardId, initUpdate)\n } else {\n console.log(`Loaded ${updates.length} CRDT updates from DB for board ${boardId}`)\n for (const update of updates) {\n Y.applyUpdate(ydoc, update)\n }\n }\n\n ydoc.on(\"update\", (update: Uint8Array, origin: any, doc: Y.Doc) => {\n updateBoardCrdt(boardId, update)\n })\n },\n writeState: async (docName, ydoc) => {\n // TODO: needed?\n },\n },\n})\n\nexport function BoardYJSServer(ws: expressWs.Instance, path: string) {\n ws.app.ws(path, async (socket, req) => {\n const boardId = req.params.boardId\n const sessionId = getSessionIdFromCookies(req)\n const session = sessionId ? getSessionById(sessionId) : undefined\n if (\n !sessionId ||\n !session ||\n !session.boardSession ||\n session.boardSession.boardId !== boardId ||\n !canRead(session.boardSession.accessLevel)\n ) {\n // TODO: implement read-only YJS connections\n //console.warn(\"No session for YJS connection for board\", boardId)\n socket.close()\n return\n }\n if (!socketsBySessionId[sessionId]) {\n socketsBySessionId[sessionId] = []\n }\n socketsBySessionId[sessionId].push(socket)\n console.log(\n `OPENED y.js connection for session ${sessionId}. Now sockets exist for ${\n Object.keys(socketsBySessionId).length\n } sessions`,\n )\n socket.addEventListener(\"close\", () => {\n if (socketsBySessionId[sessionId]) {\n socketsBySessionId[sessionId] = socketsBySessionId[sessionId].filter((s) => s !== socket)\n if (socketsBySessionId[sessionId].length === 0) {\n delete socketsBySessionId[sessionId]\n }\n console.log(\n `CLOSED y.js connection. Now sockets exist for ${Object.keys(socketsBySessionId).length} sessions`,\n )\n }\n })\n const readOnly = !canWrite(session.boardSession.accessLevel)\n const docName = boardId\n try {\n await yWebSocketServer.setupWSConnection(socket, docName, readOnly)\n } catch (e) {\n console.error(\"Error setting up YJS connection\", e)\n socket.close()\n }\n })\n}\n" }, { "path": "backend/src/common-event-handler.ts", "content": "import * as Y from \"yjs\"\nimport { AppEvent, Board, CrdtEnabled, checkBoardAccess, defaultBoardSize } from \"../../common/src/domain\"\nimport { addBoard } from \"./board-state\"\nimport { fetchBoard } from \"./board-store\"\nimport { yWebSocketServer } from \"./board-yjs-server\"\nimport { MessageHandlerResult } from \"./connection-handler\"\nimport { getAuthenticatedUserFromJWT } from \"./http-session\"\nimport {\n associateUserWithBoard,\n dissociateUserWithBoard,\n getUserAssociatedBoards,\n getUserIdForEmail,\n} from \"./user-store\"\nimport { getSession, logoutUser, setNicknameForSession, setVerifiedUserForSession } from \"./websocket-sessions\"\nimport { WsWrapper, toBuffer } from \"./ws-wrapper\"\n\nexport async function handleCommonEvent(socket: WsWrapper, appEvent: AppEvent): Promise {\n switch (appEvent.action) {\n case \"auth.login.jwt\": {\n const user = getAuthenticatedUserFromJWT(appEvent.jwt)\n const session = getSession(socket)\n if (session && user !== null) {\n const userId = await getUserIdForEmail(user.email)\n const userInfo = await setVerifiedUserForSession(user, session)\n console.log(`${user.name} logged in`)\n session.sendEvent({ action: \"auth.login.response\", success: true, userId })\n if (session.boardSession) {\n await associateUserWithBoard(userId, session.boardSession.boardId)\n }\n session.sendEvent({\n action: \"user.boards\",\n email: user.email,\n boards: await getUserAssociatedBoards(userInfo),\n })\n } else if (session) {\n session.sendEvent({ action: \"auth.login.response\", success: false })\n }\n return true\n }\n case \"auth.logout\": {\n const session = getSession(socket)\n if (session && session.userInfo.userType === \"authenticated\") {\n logoutUser(appEvent, socket)\n console.log(`${session.userInfo.name} logged out`)\n }\n socket.close()\n return true\n }\n case \"nickname.set\": {\n setNicknameForSession(appEvent, socket)\n return true\n }\n case \"board.associate\": {\n // TODO: maybe access check? Not security-wise necessary\n const session = getSession(socket)\n if (session) {\n if (session.userInfo.userType !== \"authenticated\") {\n console.warn(\"Trying to associate board without authenticated user\")\n return true\n }\n const userId = session.userInfo.userId\n await associateUserWithBoard(userId, appEvent.boardId, appEvent.lastOpened)\n }\n return true\n }\n case \"board.dissociate\": {\n const session = getSession(socket)\n if (session) {\n if (session.userInfo.userType !== \"authenticated\") {\n console.warn(\"Trying to dissociate board without authenticated user\")\n return true\n }\n const userId = session.userInfo.userId\n await dissociateUserWithBoard(userId, appEvent.boardId)\n }\n return true\n }\n case \"board.add\": {\n const session = getSession(socket)\n if (session) {\n const { payload } = appEvent\n let template: Board | null = null\n if (\"templateId\" in payload && payload.templateId) {\n const aliased = process.env[`BOARD_ALIAS_${payload.templateId}`]\n const templateId = aliased || payload.templateId\n const found = await fetchBoard(templateId)\n if (found) {\n const accessLevel = checkBoardAccess(found.board.accessPolicy, session.userInfo)\n if (accessLevel === \"none\") {\n console.warn(`Trying to use board ${found.board.id} as template, without board permissions`)\n return true\n }\n template = { ...found.board, accessPolicy: undefined }\n } else {\n console.error(`Template ${payload.templateId}${aliased ? `(${templateId})` : \"\"} not found`)\n }\n }\n const board = { ...defaultBoardSize, items: {}, connections: [], ...template, ...payload, serial: 0 }\n if (template && template.crdt === CrdtEnabled) {\n const templateDoc = await yWebSocketServer.docs.getYDocAndWaitForFetch(template.id)\n const newDoc = await yWebSocketServer.docs.getYDocAndWaitForFetch(board.id)\n Y.applyUpdate(newDoc, Y.encodeStateAsUpdate(templateDoc))\n }\n await addBoard(board)\n socket.send(toBuffer({ action: \"board.add.ack\", boardId: board.id }))\n }\n return true\n }\n case \"ping\": {\n return true\n }\n }\n return false\n}\n" }, { "path": "backend/src/compact-history.ts", "content": "import { format } from \"date-fns\"\nimport _ from \"lodash\"\nimport { BoardHistoryEntry, Id } from \"../../common/src/domain\"\nimport {\n BoardHistoryBundleMeta,\n getBoardHistoryBundleMetas,\n getBoardHistoryBundlesWithLastSerialsBetween,\n storeEventHistoryBundle,\n verifyContinuity,\n verifyContinuityFromMetas,\n verifyEventArrayContinuity,\n} from \"./board-store\"\nimport * as Y from \"yjs\"\nimport { inTransaction } from \"./db\"\n\nfunction chunkBy(arr: T[], shouldSplit: (a: T, b: T) => boolean) {\n const result = []\n let currentChunk = []\n for (let i = 0; i < arr.length; i++) {\n if (i > 0 && shouldSplit(arr[i - 1], arr[i])) {\n result.push(currentChunk)\n currentChunk = []\n }\n currentChunk.push(arr[i])\n }\n result.push(currentChunk)\n return result\n}\nfunction getHour(b: BoardHistoryBundleMeta) {\n return format(new Date(b.saved_at), \"yyyy-MM-dd hh\")\n}\n\nexport async function quickCompactBoardHistory(id: Id): Promise {\n try {\n return await inTransaction(async (client) => {\n // Lock the board to prevent loading the board while compacting\n await client.query(\"select 1 from board where id=$1 for update\", [id])\n const bundleMetas = await getBoardHistoryBundleMetas(client, id)\n if (bundleMetas.length === 0) return 0\n const consistent = verifyContinuityFromMetas(id, 0, bundleMetas)\n if (consistent) {\n // Group in one-hour bundles\n //console.log(\"Grouped by date\", groupedByHour)\n const toCompact = chunkBy(\n bundleMetas,\n (a, b) => getHour(a) !== getHour(b) && a.last_serial !== b.last_serial,\n ).filter((chunk) => chunk.length > 1)\n let compactions = 0\n for (let bs of toCompact) {\n const firstBundle = bs[0]\n const lastBundle = bs[bs.length - 1]\n console.log(\n `Compacting ${bs.length} bundles into one for board ${id}, containing serials ${firstBundle.first_serial}...${lastBundle.last_serial}`,\n )\n const lastSerial = lastBundle.last_serial\n const bundlesWithData = await getBoardHistoryBundlesWithLastSerialsBetween(\n client,\n id,\n firstBundle.last_serial,\n lastSerial,\n )\n const eventArrays = bundlesWithData.map((b) => b.events.events)\n const events: BoardHistoryEntry[] = eventArrays.flat()\n const crdtUpdates = bundlesWithData.flatMap((d) => (d.crdt_update ? [d.crdt_update] : []))\n const combinedCrdtUpdate = crdtUpdates.length ? Y.mergeUpdates(crdtUpdates) : null\n const initSerial = firstBundle.first_serial\n ? firstBundle.first_serial - 1\n : firstBundle.last_serial - 1\n const consistent =\n verifyContinuity(id, initSerial, ...eventArrays) &&\n verifyEventArrayContinuity(id, initSerial, events)\n if (consistent && bundlesWithData.length == bs.length) {\n // 1. delete existing bundles\n const deleteResult = await client.query(\n `DELETE FROM board_event where board_id=$1 and last_serial in (${bundlesWithData\n .map((b) => b.last_serial)\n .join(\",\")})`,\n [id],\n )\n if (deleteResult.rowCount != bs.length) {\n throw Error(\n `Unexpected rowcount when deleting on compaction: ${deleteResult.rowCount} for board ${id}`,\n )\n }\n // 2. store as a single bundle\n await storeEventHistoryBundle(\n id,\n events,\n lastSerial,\n combinedCrdtUpdate,\n client,\n lastBundle.saved_at,\n )\n } else {\n throw Error(\"Discontinuity detected in compacted history.\")\n }\n compactions++\n }\n if (compactions > 0) {\n } else {\n console.log(\n `Board ${id}: Verified ${bundleMetas.length} bundles containing ${\n bundleMetas[bundleMetas.length - 1].last_serial\n } events => no need to compact`,\n )\n }\n return compactions\n } else {\n throw Error(\"Discontinuity detected in bundle metadata.\")\n }\n })\n } catch (e) {\n console.error(`Aborting compaction of board ${id} because of an error: ${e}`)\n return 0\n }\n}\n" }, { "path": "backend/src/config.ts", "content": "import path from \"path\"\nimport fs from \"fs\"\nimport { authProvider } from \"./oauth\"\nimport * as t from \"io-ts\"\nimport { optional } from \"../../common/src/domain\"\nimport { decodeOrThrow } from \"./decodeOrThrow\"\n\nexport type StorageBackend = Readonly<\n { type: \"LOCAL\"; directory: string; assetStorageURL: string } | { type: \"AWS\"; assetStorageURL: string }\n>\nexport type Config = Readonly<{ storageBackend: StorageBackend; authSupported: boolean; crdt: CrdtConfigString }>\n\nconst CrdtConfigString = t.union([\n t.literal(\"opt-in\"),\n t.literal(\"opt-in-authenticated\"),\n t.literal(\"true\"),\n t.literal(\"false\"),\n])\nexport type CrdtConfigString = t.TypeOf\n\nexport const getConfig = (): Config => {\n const storageBackend: StorageBackend = process.env.AWS_ASSETS_BUCKET_URL\n ? { type: \"AWS\", assetStorageURL: process.env.AWS_ASSETS_BUCKET_URL }\n : { type: \"LOCAL\", directory: path.resolve(\"localfiles\"), assetStorageURL: \"/assets\" }\n\n if (storageBackend.type === \"LOCAL\") {\n try {\n fs.mkdirSync(storageBackend.directory)\n } catch (e) {}\n }\n\n const crdt = decodeOrThrow(CrdtConfigString, process.env.COLLABORATIVE_EDITING ?? \"opt-in\")\n\n return {\n storageBackend,\n authSupported: authProvider !== null,\n crdt,\n }\n}\n" }, { "path": "backend/src/connection-handler.ts", "content": "import { AppEvent, Id, Serial, EventWrapper } from \"../../common/src/domain\"\nimport { getActiveBoards } from \"./board-state\"\nimport { getConfig } from \"./config\"\nimport { releaseLocksFor } from \"./locker\"\nimport { broadcastCursorPositions, endSession, startSession } from \"./websocket-sessions\"\nimport { WsWrapper, toBuffer } from \"./ws-wrapper\"\n\nexport type ConnectionHandlerParams = Readonly<{\n getSignedPutUrl: (key: string) => string\n}>\n\nexport const connectionHandler = (socket: WsWrapper, handleMessage: MessageHandler) => {\n startSession(socket)\n const config = getConfig()\n socket.send(\n toBuffer({\n action: \"server.config\",\n assetStorageURL: config.storageBackend.assetStorageURL,\n authSupported: config.authSupported,\n crdt: config.crdt,\n }),\n )\n socket.onError(() => {\n socket.close()\n })\n socket.onMessage(async (o: object) => {\n try {\n let event = o as EventWrapper\n let serialsToAck: Record = {}\n for (const e of event.events) {\n const serialAck = await handleMessage(socket, e)\n if (serialAck === true) {\n } else if (serialAck === false) {\n console.warn(\"Unhandled app-event message\", e)\n } else {\n serialsToAck[serialAck.boardId] = serialAck.serial\n }\n }\n if (event.ackId) {\n socket.send(toBuffer({ action: \"ack\", ackId: event.ackId, serials: serialsToAck }))\n }\n } catch (e) {\n console.error(\"Error while handling event from client. Closing connection.\", e)\n socket.close()\n }\n })\n\n socket.onClose(() => {\n endSession(socket)\n getActiveBoards().forEach((state) => {\n delete state.cursorPositions[socket.id]\n state.cursorsMoved = true\n })\n releaseLocksFor(socket)\n })\n}\n\nsetInterval(() => {\n getActiveBoards().forEach((bh) => {\n if (bh.cursorsMoved) {\n broadcastCursorPositions(bh.board.id, bh.cursorPositions)\n bh.cursorsMoved = false\n }\n })\n}, 100)\n\nexport type MessageHandler = (socket: WsWrapper, appEvent: AppEvent) => Promise\nexport type MessageHandlerResult = { boardId: Id; serial: Serial } | boolean\n" }, { "path": "backend/src/db.ts", "content": "import pg, { PoolClient } from \"pg\"\nimport process from \"process\"\nimport migrate from \"node-pg-migrate\"\n\nconst DATABASE_URL = process.env.DATABASE_URL ?? \"postgres://r-board:secret@127.0.0.1:13338/r-board\"\nconst DATABASE_SSL_ENABLED = process.env.DATABASE_SSL_ENABLED === \"true\"\n\nconst pgConfig = {\n connectionString: DATABASE_URL,\n ssl: DATABASE_SSL_ENABLED\n ? {\n rejectUnauthorized: false,\n }\n : undefined,\n}\nconst connectionPool = new pg.Pool(pgConfig)\n\nexport function closeConnectionPool() {\n connectionPool.end()\n}\n\nexport async function initDB(backendDir: string = \".\") {\n console.log(\"Running database migrations\")\n await inTransaction((client) =>\n migrate({\n count: 100000,\n databaseUrl: DATABASE_URL,\n migrationsTable: \"pgmigrations\",\n dir: `${backendDir}/migrations`,\n direction: \"up\",\n dbClient: client,\n }),\n )\n console.log(\"Completed database migrations\")\n\n return {\n onEvent: async (eventNames: string[], cb: (n: pg.Notification) => any) => {\n const client = await connectionPool.connect()\n eventNames.map((e) => client.query(`LISTEN ${e}`))\n client.on(\"notification\", cb)\n },\n }\n}\n\nexport async function withDBClient(f: (client: PoolClient) => Promise): Promise {\n const client = await connectionPool.connect()\n try {\n await client.query(\"BEGIN;SET SESSION CHARACTERISTICS AS TRANSACTION READ ONLY;\")\n return await f(client)\n } finally {\n await client.query(\"ROLLBACK;\")\n client.release()\n }\n}\n\nexport async function inTransaction(f: (client: PoolClient) => Promise): Promise {\n const client = await connectionPool.connect()\n try {\n await client.query(`\n BEGIN;\n SET SESSION CHARACTERISTICS AS TRANSACTION READ WRITE;\n `)\n const result = await f(client)\n await client.query(\"COMMIT;\")\n return result\n } catch (e) {\n await client.query(\"ROLLBACK;\")\n throw e\n } finally {\n client.release()\n }\n}\n" }, { "path": "backend/src/decodeOrThrow.ts", "content": "import * as t from \"io-ts\"\nimport { Left, isLeft, left } from \"fp-ts/lib/Either\"\nimport { PathReporter } from \"io-ts/lib/PathReporter\"\n\nexport function decodeOrThrow(codec: t.Type, input: any): T {\n const validationResult = codec.decode(input)\n if (isLeft(validationResult)) {\n throw new ValidationError(validationResult)\n }\n return validationResult.right\n}\n\nclass ValidationError extends Error {\n constructor(errors: Left) {\n super(report_(errors.left))\n }\n}\n\nfunction report_(errors: t.Errors) {\n return PathReporter.report(left(errors)).join(\"\\n\")\n}\n" }, { "path": "backend/src/env.ts", "content": "import process from \"process\"\n\nexport function getEnv(name: string): string {\n const value = process.env[name]\n if (!value) throw new Error(\"Missing ENV: \" + name)\n return value\n}\n" }, { "path": "backend/src/expiring-map.ts", "content": "export function AutoExpiringMap(ttlSeconds: number) {\n const timers = new Map()\n const data: Record = {}\n const listeners: ((v: Record) => any)[] = []\n const proxy = new Proxy(data, {\n set(target, key, value) {\n if (typeof key === \"symbol\") return false\n target[key] = value\n setExpiryTimer(key)\n listeners.forEach((l) => l(target))\n return true\n },\n deleteProperty(target, key) {\n if (typeof key === \"symbol\") return false\n const didDelete = delete target[key]\n if (!didDelete) {\n return false\n }\n listeners.forEach((l) => l(target))\n return true\n },\n })\n\n const setExpiryTimer = (key: string | number) => {\n if (timers.has(key)) {\n clearTimeout(timers.get(key)!)\n }\n\n timers.set(\n key,\n setTimeout(() => {\n timers.delete(key)\n delete proxy[key]\n }, ttlSeconds * 1000),\n )\n }\n\n const autoExpiringMap = {\n get: (key: string) => proxy[key],\n has: (key: string) => !!proxy[key],\n entries: () => Object.entries(proxy),\n delete: (key: string) => delete proxy[key],\n set: (key: string, value: any) => {\n proxy[key] = value\n },\n onChange: (fn: (v: Record) => any) => {\n listeners.push(fn)\n return autoExpiringMap\n },\n }\n\n return autoExpiringMap\n}\n" }, { "path": "backend/src/express-server.ts", "content": "import dotenv from \"dotenv\"\nimport express from \"express\"\nimport expressWs from \"express-ws\"\nimport fs from \"fs\"\nimport * as Http from \"http\"\nimport * as Https from \"https\"\nimport * as path from \"path\"\n\nimport apiRoutes from \"./api/api-routes\"\nimport { handleBoardEvent } from \"./board-event-handler\"\nimport { BoardYJSServer } from \"./board-yjs-server\"\nimport { getConfig } from \"./config\"\nimport { connectionHandler } from \"./connection-handler\"\nimport { getEnv } from \"./env\"\nimport { authProvider, setupAuth } from \"./oauth\"\n\nimport { possiblyRequireAuth } from \"./require-auth\"\nimport { createGetSignedPutUrl } from \"./storage\"\nimport { WsWrapper } from \"./ws-wrapper\"\nimport Cookies from \"cookies\"\nimport { removeAuthenticatedUser, setAuthenticatedUser } from \"./http-session\"\n\ndotenv.config()\n\nexport const startExpressServer = (httpPort?: number, httpsPort?: number): (() => void) => {\n const config = getConfig()\n\n const app = express()\n\n if (authProvider) {\n setupAuth(app, authProvider)\n } else {\n app.get(\"/logout\", async (req, res) => {\n removeAuthenticatedUser(req, res)\n res.redirect(\"/\")\n })\n }\n app.get(\"/test-callback\", async (req, res) => {\n const cookies = new Cookies(req, res)\n const returnTo = cookies.get(\"returnTo\") || \"/\"\n setAuthenticatedUser(req, res, { domain: null, email: \"ourboardtester@test.com\", name: \"Ourboard tester\" })\n res.redirect(returnTo)\n })\n\n possiblyRequireAuth(app)\n\n app.use(\"/\", express.static(\"../frontend/dist\"))\n app.use(\"/\", express.static(\"../frontend/public\"))\n\n if (config.storageBackend.type === \"LOCAL\") {\n const localDirectory = config.storageBackend.directory\n app.put(\"/assets/:id\", (req, res) => {\n if (!req.params.id) {\n return res.sendStatus(400)\n }\n\n const w = fs.createWriteStream(localDirectory + \"/\" + req.params.id)\n\n req.pipe(w)\n\n req.on(\"end\", () => {\n !res.headersSent && res.sendStatus(200)\n })\n\n w.on(\"error\", () => {\n res.sendStatus(500)\n })\n })\n app.use(\"/assets\", express.static(localDirectory))\n }\n\n app.get(\"/assets/external\", (req, res) => {\n const src = req.query.src\n if (typeof src !== \"string\" || [\"http://\", \"https://\"].every((prefix) => !src.startsWith(prefix)))\n return res.send(400)\n const protocol = src.startsWith(\"https://\") ? Https : Http\n\n protocol\n .request(src, (upstreamResponse) => {\n res.writeHead(upstreamResponse.statusCode!, upstreamResponse.headers)\n upstreamResponse\n .pipe(res, {\n end: true,\n })\n .on(\"error\", (err) => res.status(500).send(err.message))\n })\n .end()\n })\n\n app.get(\"/b/:boardId\", async (req, res) => {\n res.sendFile(path.resolve(\"../frontend/dist/index.html\"))\n })\n\n app.use(apiRoutes.handler())\n\n let stop = () => {}\n\n if (httpPort) {\n const http = new Http.Server(app)\n startWs(http, app)\n http.listen(httpPort, () => {\n console.log(\"Listening HTTP on port \" + httpPort)\n })\n const prevStop = stop\n stop = () => {\n prevStop()\n http.close()\n }\n }\n\n if (httpsPort) {\n let https = new Https.Server(\n {\n cert: fs.readFileSync(getEnv(\"HTTPS_CERT_FILE\")),\n key: fs.readFileSync(getEnv(\"HTTPS_KEY_FILE\")),\n },\n app,\n )\n startWs(https, app)\n https.listen(httpsPort, () => {\n console.log(\"Listening HTTPS on port \" + httpsPort)\n })\n const prevStop = stop\n stop = () => {\n prevStop()\n https.close()\n }\n }\n\n const redirectURL = process.env.REDIRECT_URL\n if (redirectURL) {\n app.get(\"*\", function (req, res, next) {\n if (req.headers[\"x-forwarded-proto\"] !== \"https\") {\n res.redirect(redirectURL)\n } else {\n next()\n }\n })\n }\n return stop\n}\n\nfunction startWs(http: any, app: express.Express) {\n const ws: expressWs.Instance = expressWs(app, http)\n\n const signedPutUrl = createGetSignedPutUrl(getConfig().storageBackend)\n\n ws.app.ws(\"/socket/lobby\", (socket, req) => {\n connectionHandler(WsWrapper(socket), handleBoardEvent(null, signedPutUrl))\n })\n ws.app.ws(\"/socket/board/:boardId\", (socket, req) => {\n const boardId = req.params.boardId\n connectionHandler(WsWrapper(socket), handleBoardEvent(boardId, signedPutUrl))\n })\n\n BoardYJSServer(ws, \"/socket/yjs/board/:boardId/\")\n\n ws.app.ws(\"*\", (socket, req) => {\n console.warn(`Unexpected WS connection: ${req.url} `)\n socket.close()\n })\n}\n" }, { "path": "backend/src/generic-oidc-auth.ts", "content": "import { Request, Response } from \"express\"\nimport * as t from \"io-ts\"\nimport JWT from \"jsonwebtoken\"\nimport { OAuthAuthenticatedUser } from \"../../common/src/authenticated-user\"\nimport { optional } from \"../../common/src/domain\"\nimport { decodeOrThrow } from \"./decodeOrThrow\"\nimport { getEnv } from \"./env\"\nimport { ROOT_URL } from \"./host-config\"\nimport { AuthProvider } from \"./oauth\"\nimport { REQUIRE_AUTH } from \"./require-auth\"\n\ntype GenericOAuthConfig = {\n OIDC_CONFIG_URL: string\n OIDC_CLIENT_ID: string\n OIDC_CLIENT_SECRET: string\n OIDC_LOGOUT?: string\n}\n\nexport const genericOIDCConfig: GenericOAuthConfig | null = process.env.OIDC_CONFIG_URL\n ? {\n OIDC_CONFIG_URL: getEnv(\"OIDC_CONFIG_URL\"),\n OIDC_CLIENT_ID: getEnv(\"OIDC_CLIENT_ID\"),\n OIDC_CLIENT_SECRET: getEnv(\"OIDC_CLIENT_SECRET\"),\n OIDC_LOGOUT: process.env.OIDC_LOGOUT,\n }\n : null\n\nexport function GenericOIDCAuthProvider(config: GenericOAuthConfig): AuthProvider {\n console.log(`Setting up generic OAuth authentication using client id ${config.OIDC_CLIENT_ID}`)\n\n const callbackUrl = `${ROOT_URL}/google-callback`\n\n const openIdConfiguration = (async () => {\n const response = await fetch(config.OIDC_CONFIG_URL)\n return decodeOrThrow(OpenIdConfiguration, await response.json())\n })()\n\n async function getAccountFromCode(code: string): Promise {\n const response = await fetch((await openIdConfiguration).token_endpoint, {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/x-www-form-urlencoded\",\n },\n body: `grant_type=authorization_code&code=${encodeURIComponent(code)}&client_id=${encodeURIComponent(\n config.OIDC_CLIENT_ID,\n )}&client_secret=${config.OIDC_CLIENT_SECRET}&redirect_uri=${callbackUrl}`,\n })\n\n const body = await response.json()\n\n const idToken = JWT.decode(body.id_token)\n //console.log(JSON.stringify(idToken, null, 2))\n const user = decodeOrThrow(IdToken, idToken)\n return {\n email: user.email,\n name: \"name\" in user ? user.name : user.preferred_username,\n picture: user.picture ?? undefined,\n domain: user.hd ?? null,\n }\n }\n\n async function getAuthPageURL() {\n const scopes = \"email openid profile\"\n const state = \"TODO\"\n const redirectUri = callbackUrl\n return `${(await openIdConfiguration).authorization_endpoint}?scope=${encodeURIComponent(\n scopes,\n )}&response_type=code&state=${encodeURIComponent(state)}&redirect_uri=${encodeURIComponent(\n redirectUri,\n )}&client_id=${config.OIDC_CLIENT_ID}`\n }\n\n const shouldHandleLogout = REQUIRE_AUTH || config.OIDC_LOGOUT\n\n async function getLogoutUrl(): Promise {\n if (config.OIDC_LOGOUT && config.OIDC_LOGOUT !== \"true\") {\n return config.OIDC_LOGOUT\n }\n\n const logoutUrl = (await openIdConfiguration).end_session_endpoint\n\n if (!logoutUrl) {\n throw Error(\n `OIDC configuration at ${config.OIDC_CONFIG_URL} does not specify end_session_endpoint. Use OIDC_LOGOUT environment variable to define the logout endpoint explicitly.`,\n )\n }\n\n return logoutUrl\n }\n\n const logout = shouldHandleLogout\n ? async (req: Request, res: Response) => {\n res.redirect(await getLogoutUrl())\n }\n : undefined\n\n return {\n getAccountFromCode,\n getAuthPageURL,\n logout,\n }\n}\n\nconst OpenIdConfiguration = t.type({\n authorization_endpoint: t.string,\n token_endpoint: t.string,\n end_session_endpoint: optional(t.string),\n})\n\nconst IdToken = t.union([\n t.type({\n email: t.string,\n name: t.string,\n picture: optional(t.string),\n hd: optional(t.string),\n }),\n t.type({\n email: t.string,\n preferred_username: t.string,\n picture: optional(t.string),\n hd: optional(t.string),\n }),\n])\n" }, { "path": "backend/src/github-webhook/example-payload.json", "content": "{\n \"action\": \"assigned\",\n \"issue\": {\n \"url\": \"https://api.github.com/repos/raimohanska/r-board/issues/129\",\n \"repository_url\": \"https://api.github.com/repos/raimohanska/r-board\",\n \"labels_url\": \"https://api.github.com/repos/raimohanska/r-board/issues/129/labels{/name}\",\n \"comments_url\": \"https://api.github.com/repos/raimohanska/r-board/issues/129/comments\",\n \"events_url\": \"https://api.github.com/repos/raimohanska/r-board/issues/129/events\",\n \"html_url\": \"https://github.com/raimohanska/r-board/issues/129\",\n \"id\": 810436967,\n \"node_id\": \"MDU6SXNzdWU4MTA0MzY5Njc=\",\n \"number\": 129,\n \"title\": \"Github issues integration\",\n \"user\": {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n },\n \"labels\": [\n {\n \"id\": 2438308116,\n \"node_id\": \"MDU6TGFiZWwyNDM4MzA4MTE2\",\n \"url\": \"https://api.github.com/repos/raimohanska/r-board/labels/enhancement\",\n \"name\": \"bug\",\n \"color\": \"a2eeef\",\n \"default\": true,\n \"description\": \"Bug\"\n }\n ],\n \"state\": \"open\",\n \"locked\": false,\n \"assignee\": {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n },\n \"assignees\": [\n {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n }\n ],\n \"milestone\": null,\n \"comments\": 0,\n \"created_at\": \"2021-02-17T18:39:11Z\",\n \"updated_at\": \"2021-02-17T19:08:21Z\",\n \"closed_at\": null,\n \"author_association\": \"OWNER\",\n \"active_lock_reason\": null,\n \"body\": \"\",\n \"performed_via_github_app\": null\n },\n \"assignee\": {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n },\n \"repository\": {\n \"id\": 305431036,\n \"node_id\": \"MDEwOlJlcG9zaXRvcnkzMDU0MzEwMzY=\",\n \"name\": \"r-board\",\n \"full_name\": \"raimohanska/r-board\",\n \"private\": false,\n \"owner\": {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n },\n \"html_url\": \"https://github.com/raimohanska/r-board\",\n \"description\": \"An online whiteboard\",\n \"fork\": false,\n \"url\": \"https://api.github.com/repos/raimohanska/r-board\",\n \"forks_url\": \"https://api.github.com/repos/raimohanska/r-board/forks\",\n \"keys_url\": \"https://api.github.com/repos/raimohanska/r-board/keys{/key_id}\",\n \"collaborators_url\": \"https://api.github.com/repos/raimohanska/r-board/collaborators{/collaborator}\",\n \"teams_url\": \"https://api.github.com/repos/raimohanska/r-board/teams\",\n \"hooks_url\": \"https://api.github.com/repos/raimohanska/r-board/hooks\",\n \"issue_events_url\": \"https://api.github.com/repos/raimohanska/r-board/issues/events{/number}\",\n \"events_url\": \"https://api.github.com/repos/raimohanska/r-board/events\",\n \"assignees_url\": \"https://api.github.com/repos/raimohanska/r-board/assignees{/user}\",\n \"branches_url\": \"https://api.github.com/repos/raimohanska/r-board/branches{/branch}\",\n \"tags_url\": \"https://api.github.com/repos/raimohanska/r-board/tags\",\n \"blobs_url\": \"https://api.github.com/repos/raimohanska/r-board/git/blobs{/sha}\",\n \"git_tags_url\": \"https://api.github.com/repos/raimohanska/r-board/git/tags{/sha}\",\n \"git_refs_url\": \"https://api.github.com/repos/raimohanska/r-board/git/refs{/sha}\",\n \"trees_url\": \"https://api.github.com/repos/raimohanska/r-board/git/trees{/sha}\",\n \"statuses_url\": \"https://api.github.com/repos/raimohanska/r-board/statuses/{sha}\",\n \"languages_url\": \"https://api.github.com/repos/raimohanska/r-board/languages\",\n \"stargazers_url\": \"https://api.github.com/repos/raimohanska/r-board/stargazers\",\n \"contributors_url\": \"https://api.github.com/repos/raimohanska/r-board/contributors\",\n \"subscribers_url\": \"https://api.github.com/repos/raimohanska/r-board/subscribers\",\n \"subscription_url\": \"https://api.github.com/repos/raimohanska/r-board/subscription\",\n \"commits_url\": \"https://api.github.com/repos/raimohanska/r-board/commits{/sha}\",\n \"git_commits_url\": \"https://api.github.com/repos/raimohanska/r-board/git/commits{/sha}\",\n \"comments_url\": \"https://api.github.com/repos/raimohanska/r-board/comments{/number}\",\n \"issue_comment_url\": \"https://api.github.com/repos/raimohanska/r-board/issues/comments{/number}\",\n \"contents_url\": \"https://api.github.com/repos/raimohanska/r-board/contents/{+path}\",\n \"compare_url\": \"https://api.github.com/repos/raimohanska/r-board/compare/{base}...{head}\",\n \"merges_url\": \"https://api.github.com/repos/raimohanska/r-board/merges\",\n \"archive_url\": \"https://api.github.com/repos/raimohanska/r-board/{archive_format}{/ref}\",\n \"downloads_url\": \"https://api.github.com/repos/raimohanska/r-board/downloads\",\n \"issues_url\": \"https://api.github.com/repos/raimohanska/r-board/issues{/number}\",\n \"pulls_url\": \"https://api.github.com/repos/raimohanska/r-board/pulls{/number}\",\n \"milestones_url\": \"https://api.github.com/repos/raimohanska/r-board/milestones{/number}\",\n \"notifications_url\": \"https://api.github.com/repos/raimohanska/r-board/notifications{?since,all,participating}\",\n \"labels_url\": \"https://api.github.com/repos/raimohanska/r-board/labels{/name}\",\n \"releases_url\": \"https://api.github.com/repos/raimohanska/r-board/releases{/id}\",\n \"deployments_url\": \"https://api.github.com/repos/raimohanska/r-board/deployments\",\n \"created_at\": \"2020-10-19T15:33:11Z\",\n \"updated_at\": \"2021-02-17T18:39:38Z\",\n \"pushed_at\": \"2021-02-17T18:31:01Z\",\n \"git_url\": \"git://github.com/raimohanska/r-board.git\",\n \"ssh_url\": \"git@github.com:raimohanska/r-board.git\",\n \"clone_url\": \"https://github.com/raimohanska/r-board.git\",\n \"svn_url\": \"https://github.com/raimohanska/r-board\",\n \"homepage\": null,\n \"size\": 1137,\n \"stargazers_count\": 4,\n \"watchers_count\": 4,\n \"language\": \"TypeScript\",\n \"has_issues\": true,\n \"has_projects\": true,\n \"has_downloads\": true,\n \"has_wiki\": true,\n \"has_pages\": false,\n \"forks_count\": 2,\n \"mirror_url\": null,\n \"archived\": false,\n \"disabled\": false,\n \"open_issues_count\": 33,\n \"license\": {\n \"key\": \"other\",\n \"name\": \"Other\",\n \"spdx_id\": \"NOASSERTION\",\n \"url\": null,\n \"node_id\": \"MDc6TGljZW5zZTA=\"\n },\n \"forks\": 2,\n \"open_issues\": 33,\n \"watchers\": 4,\n \"default_branch\": \"master\"\n },\n \"sender\": {\n \"login\": \"raimohanska\",\n \"id\": 292964,\n \"node_id\": \"MDQ6VXNlcjI5Mjk2NA==\",\n \"avatar_url\": \"https://avatars.githubusercontent.com/u/292964?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/raimohanska\",\n \"html_url\": \"https://github.com/raimohanska\",\n \"followers_url\": \"https://api.github.com/users/raimohanska/followers\",\n \"following_url\": \"https://api.github.com/users/raimohanska/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/raimohanska/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/raimohanska/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/raimohanska/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/raimohanska/orgs\",\n \"repos_url\": \"https://api.github.com/users/raimohanska/repos\",\n \"events_url\": \"https://api.github.com/users/raimohanska/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/raimohanska/received_events\",\n \"type\": \"User\",\n \"site_admin\": false\n }\n}\n" }, { "path": "backend/src/google-auth.ts", "content": "import { google } from \"googleapis\"\nimport { OAuthAuthenticatedUser } from \"../../common/src/authenticated-user\"\nimport { assertNotNull } from \"../../common/src/assertNotNull\"\nimport { getEnv } from \"./env\"\nimport { AuthProvider } from \"./oauth\"\nimport { ROOT_URL } from \"./host-config\"\nimport { decodeOrThrow } from \"./decodeOrThrow\"\nimport * as T from \"io-ts\"\nimport { optional } from \"../../common/src/domain\"\nimport JWT from \"jsonwebtoken\"\n\ntype GoogleConfig = {\n clientID: string\n clientSecret: string\n callbackURL: string\n}\n\nexport const googleConfig: GoogleConfig | null = process.env.GOOGLE_OAUTH_CLIENT_ID\n ? {\n clientID: getEnv(\"GOOGLE_OAUTH_CLIENT_ID\"),\n clientSecret: getEnv(\"GOOGLE_OAUTH_CLIENT_SECRET\"),\n callbackURL: `${ROOT_URL}/google-callback`,\n }\n : null\n\nexport const GoogleAuthProvider = (googleConfig: GoogleConfig): AuthProvider => {\n console.log(`Setting up Google authentication using client ID ${googleConfig.clientID}`)\n\n const googleScopes = [\"email\", \"https://www.googleapis.com/auth/userinfo.profile\"]\n\n function googleOAUTH2() {\n if (!googleConfig.clientID || !googleConfig.clientSecret)\n throw new Error(\"Missing environment variables for Google OAuth\")\n return new google.auth.OAuth2(googleConfig.clientID, googleConfig.clientSecret, googleConfig.callbackURL)\n }\n\n async function getAuthPageURL() {\n return googleOAUTH2().generateAuthUrl({\n scope: googleScopes,\n prompt: \"select_account\",\n })\n }\n\n const IdToken = T.strict({\n hd: optional(T.string),\n email: T.string,\n email_verified: T.boolean,\n name: T.string,\n picture: optional(T.string),\n })\n\n async function getAccountFromCode(code: string): Promise {\n const auth = googleOAUTH2()\n const data = await auth.getToken(code)\n const idToken = decodeOrThrow(IdToken, JWT.decode(assertNotNull(data.tokens.id_token)))\n const email = idToken.email\n\n return {\n name: idToken.name,\n email,\n picture: idToken.picture ?? undefined,\n domain: idToken.hd ?? null,\n }\n }\n\n return {\n getAuthPageURL,\n getAccountFromCode,\n }\n}\n" }, { "path": "backend/src/host-config.ts", "content": "export const ROOT_URL = process.env.ROOT_URL ?? \"http://localhost:1337\"\nexport const ROOT_HOST = new URL(ROOT_URL).host\nexport const ROOT_PROTOCOL = new URL(ROOT_URL).protocol\nexport const WS_HOST_LOCAL = (process.env.WS_HOST_LOCAL ?? ROOT_HOST).split(\",\")\nexport const WS_HOST_DEFAULT = process.env.WS_HOST_DEFAULT ?? ROOT_HOST\nexport const WS_PROTOCOL = process.env.WS_PROTOCOL ?? (ROOT_PROTOCOL.startsWith(\"https\") ? \"wss\" : \"ws\")\n" }, { "path": "backend/src/http-session.ts", "content": "import Cookies from \"cookies\"\nimport { IncomingMessage, ServerResponse } from \"http\"\nimport JWT from \"jsonwebtoken\"\nimport { getEnv } from \"./env\"\nimport { OAuthAuthenticatedUser } from \"../../common/src/authenticated-user\"\nimport { ISOTimeStamp, newISOTimeStamp } from \"../../common/src/domain\"\n\nconst secret = getEnv(\"SESSION_SIGNING_SECRET\")\n\nexport type LoginInfo = OAuthAuthenticatedUser & {\n timestamp: ISOTimeStamp | undefined\n}\n\nexport function getSessionIdFromCookies(req: IncomingMessage): string | null {\n return new Cookies(req, null as any).get(\"sessionId\") ?? null\n}\n\n// Get / set authenticated user stored in cookies\nexport function getAuthenticatedUser(req: IncomingMessage): LoginInfo | null {\n const userCookie = new Cookies(req, null as any).get(\"user\")\n if (userCookie) {\n return getAuthenticatedUserFromJWT(userCookie)\n }\n return null\n}\n\nexport function getAuthenticatedUserFromJWT(jwt: string): LoginInfo | null {\n try {\n JWT.verify(jwt, secret)\n const loginInfo = JWT.decode(jwt) as LoginInfo\n if (loginInfo.domain === undefined) {\n console.log(\"Rejecting legacy token without domain\")\n return null\n }\n return loginInfo\n } catch (e) {\n console.warn(\"Token verification failed\", jwt, e)\n }\n return null\n}\n\nexport function setAuthenticatedUser(req: IncomingMessage, res: ServerResponse, userInfo: OAuthAuthenticatedUser) {\n const loginInfo: LoginInfo = { ...userInfo, timestamp: newISOTimeStamp() }\n const jwt = JWT.sign(loginInfo, secret)\n new Cookies(req, res).set(\"user\", jwt, {\n maxAge: 365 * 24 * 3600 * 1000,\n httpOnly: false,\n }) // Max 365 days expiration\n}\n\nexport function removeAuthenticatedUser(req: IncomingMessage, res: ServerResponse) {\n new Cookies(req, res).set(\"user\", \"\", { maxAge: 0, httpOnly: true })\n}\n" }, { "path": "backend/src/locker.ts", "content": "import { Id, BoardItemEvent, isPersistableBoardItemEvent, getItemIds, ItemLocks } from \"../../common/src/domain\"\nimport { getActiveBoards, ServerSideBoardState } from \"./board-state\"\nimport { AutoExpiringMap } from \"./expiring-map\"\nimport { WsWrapper } from \"./ws-wrapper\"\n\nconst LOCK_TTL_SECONDS = 10\n\nexport function Locks(onChange: (locks: ItemLocks) => any) {\n const locks = AutoExpiringMap(LOCK_TTL_SECONDS).onChange(onChange)\n\n return {\n lockItem: (itemId: Id, sessionId: Id) => {\n if (locks.has(itemId) && locks.get(itemId) !== sessionId) {\n return false\n }\n\n locks.set(itemId, sessionId)\n return true\n },\n unlockItem: (itemId: Id, sessionId: Id) => {\n if (locks.get(itemId) === sessionId) {\n return locks.delete(itemId)\n }\n\n return false\n },\n delete: (itemId: string) => locks.delete(itemId),\n entries: () => locks.entries(),\n }\n}\n\nexport function obtainLock(locks: ServerSideBoardState[\"locks\"], e: BoardItemEvent, socket: WsWrapper) {\n if (isPersistableBoardItemEvent(e)) {\n const itemIds = getItemIds(e)\n // Since we are operating on multiple items at a time, locking must succeed for all of them\n // for the action to succeed\n return itemIds.every((id) => locks.lockItem(id, socket.id))\n } else {\n const { itemId, action } = e\n switch (action) {\n case \"item.lock\":\n return locks.lockItem(itemId, socket.id)\n case \"item.unlock\":\n return locks.unlockItem(itemId, socket.id)\n }\n }\n}\n\nexport function releaseLocksFor(socket: WsWrapper) {\n getActiveBoards().forEach((state) => {\n const locks = state.locks\n for (const [itemId, sessionId] of locks.entries()) {\n if (socket.id === sessionId) {\n locks.delete(itemId)\n }\n }\n })\n}\n" }, { "path": "backend/src/oauth.ts", "content": "import Cookies from \"cookies\"\nimport { Express, Request, Response } from \"express\"\nimport { OAuthAuthenticatedUser } from \"../../common/src/authenticated-user\"\nimport { removeAuthenticatedUser, setAuthenticatedUser } from \"./http-session\"\nimport { GoogleAuthProvider, googleConfig } from \"./google-auth\"\nimport { GenericOIDCAuthProvider, genericOIDCConfig } from \"./generic-oidc-auth\"\n\nexport interface AuthProvider {\n getAuthPageURL: () => Promise\n getAccountFromCode: (code: string) => Promise\n logout?: (req: Request, res: Response) => Promise\n}\n\nexport function setupAuth(app: Express, provider: AuthProvider) {\n app.get(\"/login\", async (req, res) => {\n new Cookies(req, res).set(\"returnTo\", parseReturnPath(req), {\n maxAge: 24 * 3600 * 1000,\n httpOnly: true,\n }) // Max 24 hours\n const authUrl = await provider.getAuthPageURL()\n res.setHeader(\"content-type\", \"text/html\")\n res.send(`Signing in...`)\n })\n\n app.get(\"/logout\", async (req, res) => {\n removeAuthenticatedUser(req, res)\n if (provider.logout) {\n await provider.logout(req, res)\n } else {\n res.redirect(parseReturnPath(req))\n }\n })\n\n app.get(\"/google-callback\", async (req, res) => {\n const code = (req.query?.code as string) || \"\"\n const cookies = new Cookies(req, res)\n const returnTo = cookies.get(\"returnTo\") || \"/\"\n cookies.set(\"returnTo\", \"\", { maxAge: 0, httpOnly: true })\n console.log(\"Verifying google auth\", code)\n try {\n const userInfo = await provider.getAccountFromCode(code)\n console.log(\"Found\", userInfo)\n setAuthenticatedUser(req, res, userInfo)\n res.redirect(returnTo)\n } catch (e) {\n console.error(e)\n res.status(500).send(\"Internal error\")\n }\n })\n\n function parseReturnPath(req: Request) {\n return (req.query.returnTo as string) || \"/\"\n }\n}\n\nexport const authProvider: AuthProvider | null = googleConfig\n ? GoogleAuthProvider(googleConfig)\n : genericOIDCConfig\n ? GenericOIDCAuthProvider(genericOIDCConfig)\n : null\n" }, { "path": "backend/src/professions.ts", "content": "export const professions = [\n \"Accountant\",\n \"Actress\",\n \"Architect\",\n \"Astronomer\",\n \"Author\",\n \"Baker\",\n \"Bricklayer\",\n \"Bus driver\",\n \"Butcher\",\n \"Carpenter\",\n \"Chef\",\n \"Cleaner\",\n \"Coder\",\n \"Consultant\",\n \"Dentist\",\n \"Designer\",\n \"DevOps specialist\",\n \"Doctor\",\n \"Dustman\",\n \"Electrician\",\n \"Engineer\",\n \"Factory worker\",\n \"Farmer\",\n \"Fire fighter\",\n \"Fisherman\",\n \"Florist\",\n \"Gardener\",\n \"Hairdresser\",\n \"Journalist\",\n \"Judge\",\n \"Lawyer\",\n \"Lecturer\",\n \"Librarian\",\n \"Lifeguard\",\n \"Mechanic\",\n \"Model\",\n \"Newsreader\",\n \"Nurse\",\n \"Optician\",\n \"Painter\",\n \"Pharmacist\",\n \"Photographer\",\n \"Physician\",\n \"Pilot\",\n \"Plumber\",\n \"Pointy-haired boss\",\n \"Politician\",\n \"Postman\",\n \"Product Owner\",\n \"Real estate agent\",\n \"Receptionist\",\n \"Scientist\",\n \"Scrum master\",\n \"Secretary\",\n \"Shop assistant\",\n \"Tailor\",\n \"Taxi driver\",\n \"Teacher\",\n \"Tester\",\n \"Translator\",\n \"Traffic warden\",\n \"Travel agent\",\n \"Vet\",\n \"UNIX guru\",\n \"Waiter/Waitress\",\n \"Window cleaner\",\n]\n\nexport function randomProfession() {\n return professions[Math.floor(Math.random() * professions.length)]\n}\n" }, { "path": "backend/src/require-auth.ts", "content": "import { Express, Request, Response, NextFunction } from \"express\"\nimport { getAuthenticatedUser } from \"./http-session\"\n\nexport const REQUIRE_AUTH = process.env.REQUIRE_AUTH === \"true\"\n\nexport function possiblyRequireAuth(app: Express) {\n if (REQUIRE_AUTH) {\n // Require authentication for all resources except the URLs bound by setupAuth above\n app.use(\"/\", (req: Request, res: Response, next: NextFunction) => {\n if (!getAuthenticatedUser(req)) {\n res.redirect(\"/login\")\n } else {\n next()\n }\n })\n }\n}\n" }, { "path": "backend/src/s3.ts", "content": "import * as AWS from \"aws-sdk\"\n\nconst s3Config = {\n region: \"eu-north-1\",\n apiVersion: \"2006-03-01\",\n signatureVersion: \"v4\",\n}\n\nlet s3Instance: AWS.S3 | null = null\n\nexport const s3 = () => {\n s3Instance = s3Instance || new AWS.S3(s3Config)\n return s3Instance\n}\n\nexport function getSignedPutUrl(Key: string) {\n const signedUrlExpireSeconds = 60 * 5\n\n const url = s3().getSignedUrl(\"putObject\", {\n Bucket: \"r-board-assets\",\n Key,\n Expires: signedUrlExpireSeconds,\n })\n\n return url\n}\n" }, { "path": "backend/src/server.ts", "content": "import dotenv from \"dotenv\"\ndotenv.config()\n\nimport * as Http from \"http\"\nimport { exampleBoard } from \"../../common/src/domain\"\nimport { awaitSavingChanges } from \"./board-state\"\nimport { createBoard, fetchBoard } from \"./board-store\"\nimport { initDB } from \"./db\"\nimport { startExpressServer } from \"./express-server\"\nimport { terminateSessions } from \"./websocket-sessions\"\n\nlet stopServer: (() => void) | null = null\n\nasync function shutdown() {\n console.log(\"Shutdown initiated. Closing sockets.\")\n if (stopServer) stopServer()\n terminateSessions()\n console.log(\"Shutdown in progress. Waiting for all changes to be saved...\")\n await awaitSavingChanges()\n console.log(\"Shutdown complete. Exiting process.\")\n process.exit(0)\n}\n\nprocess.on(\"SIGTERM\", () => {\n console.log(\"Received SIGTERM. Initiating shutdown.\")\n shutdown()\n})\n\nconst PORT = parseInt(process.env.PORT || \"1337\")\nconst HTTPS_PORT = process.env.HTTPS_PORT ? parseInt(process.env.HTTPS_PORT) : undefined\nconst BIND_UWEBSOCKETS_TO_PORT = process.env.BIND_UWEBSOCKETS_TO_PORT === \"true\"\nif (BIND_UWEBSOCKETS_TO_PORT && process.env.UWEBSOCKETS_PORT) {\n throw Error(\"Cannot have both UWEBSOCKETS_PORT and BIND_UWEBSOCKETS_TO_PORT envs\")\n}\nconst HTTP_PORT = BIND_UWEBSOCKETS_TO_PORT ? null : PORT\nconst UWEBSOCKETS_PORT = BIND_UWEBSOCKETS_TO_PORT\n ? PORT\n : process.env.UWEBSOCKETS_PORT\n ? parseInt(process.env.UWEBSOCKETS_PORT)\n : null\n\ninitDB()\n .then(async () => {\n if (!(await fetchBoard(\"default\"))) {\n await createBoard(exampleBoard)\n }\n })\n .then(() => {\n if (HTTP_PORT) {\n stopServer = startExpressServer(HTTP_PORT, HTTPS_PORT)\n }\n if (UWEBSOCKETS_PORT) {\n import(\"./uwebsockets-server\").then((uwebsockets) => {\n uwebsockets.startUWebSocketsServer(UWEBSOCKETS_PORT)\n })\n }\n })\n .catch((e) => {\n console.error(e)\n })\n" }, { "path": "backend/src/storage.ts", "content": "import { getSignedPutUrl as s3GetSignedPutUrl } from \"./s3\"\nimport { StorageBackend } from \"./config\"\n\nfunction localFSGetSignedPutUrl(Key: string): string {\n return \"/assets/\" + Key\n}\n\nexport const createGetSignedPutUrl = (storageBackend: StorageBackend): ((key: string) => string) =>\n storageBackend.type === \"AWS\" ? s3GetSignedPutUrl : localFSGetSignedPutUrl\n" }, { "path": "backend/src/tools/wait-for-db.ts", "content": "import TcpPortUsed from \"tcp-port-used\"\nconst port = 13338\n;(async function () {\n console.log(`Waiting for DB to bind port ${port}...`)\n try {\n await TcpPortUsed.waitUntilUsed(port, 100, 10000)\n } catch {\n console.error(\"Timed out waiting for DB\")\n process.exit(1)\n }\n})()\n" }, { "path": "backend/src/user-store.ts", "content": "import { inTransaction, withDBClient } from \"./db\"\nimport * as uuid from \"uuid\"\nimport { EventUserInfo, Id, RecentBoard, EventUserInfoAuthenticated, ISOTimeStamp } from \"../../common/src/domain\"\nimport { uniqBy } from \"lodash\"\n\nexport function getUserIdForEmail(email: string): Promise {\n return inTransaction(async (client) => {\n let id: string | undefined = (await client.query(\"SELECT id FROM app_user WHERE email=$1\", [email])).rows[0]?.id\n if (!id) {\n id = uuid.v4()\n await client.query(\"INSERT INTO app_user (id, email) VALUES ($1, $2);\", [id, email])\n }\n return id\n })\n}\n\nexport async function associateUserWithBoard(\n userId: string,\n boardId: Id,\n lastOpened: ISOTimeStamp = new Date().toISOString(),\n) {\n try {\n await inTransaction(async (client) => {\n await client.query(\n `INSERT INTO user_board (user_id, board_id, last_opened) values ($1, $2, $3) \n ON CONFLICT (user_id, board_id) DO UPDATE SET last_opened=EXCLUDED.last_opened`,\n [userId, boardId, lastOpened],\n )\n })\n } catch (e) {\n console.error(`Failed to associate user ${userId} with board ${boardId}`)\n }\n}\n\nexport async function dissociateUserWithBoard(userId: string, boardId: Id) {\n try {\n await inTransaction(async (client) => {\n await client.query(`DELETE FROM user_board WHERE user_id=$1 and board_id=$2`, [userId, boardId])\n })\n } catch (e) {\n console.error(`Failed to dissociate user ${userId} with board ${boardId}`)\n }\n}\n\nexport async function getUserAssociatedBoards(user: EventUserInfoAuthenticated): Promise {\n const rows = (\n await withDBClient((client) =>\n client.query(\n \"SELECT b.id, b.name, ub.last_opened FROM user_board ub JOIN board b on (ub.board_id = b.id) WHERE ub.user_id = $1\",\n [user.userId],\n ),\n )\n ).rows\n return rows.map((r) => {\n return {\n id: r.id,\n name: r.name,\n userEmail: user.email,\n opened: r.last_opened.toISOString(),\n }\n })\n}\n" }, { "path": "backend/src/uwebsockets-server.ts", "content": "import uws from \"uWebSockets.js\"\nimport { EventFromServer } from \"../../common/src/domain\"\nimport * as uuid from \"uuid\"\nimport { connectionHandler, MessageHandler } from \"./connection-handler\"\nimport { handleBoardEvent } from \"./board-event-handler\"\nimport { createGetSignedPutUrl } from \"./storage\"\nimport { getConfig } from \"./config\"\nimport * as L from \"lonna\"\nimport { handleCommonEvent } from \"./common-event-handler\"\n\nexport const WsWrapper = (ws: uws.WebSocket) => {\n const errorE = L.bus()\n const closeE = L.bus()\n const msgE = L.bus()\n\n const onError = (f: () => void) => {\n errorE.forEach(f)\n }\n const onMessage = (f: (msg: object) => void) => {\n msgE.forEach(f)\n }\n const onClose = (f: () => void) => {\n closeE.forEach(f)\n }\n return {\n send: (buffer: Buffer) => {\n try {\n ws.send(buffer, false)\n } catch (e) {\n ws.close()\n }\n },\n onError,\n onMessage,\n onClose,\n id: uuid.v4(),\n close: () => {\n ws.close()\n closeE.push()\n },\n errorE,\n closeE,\n msgE,\n }\n}\ntype WsWrapper = ReturnType\n\ntype WsUserData = {\n handler: MessageHandler\n}\n\nexport function startUWebSocketsServer(port: number) {\n const config = getConfig()\n const app = uws.App()\n\n const sockets = new Map()\n const textDecoder = new TextDecoder()\n\n const signedPutUrl = createGetSignedPutUrl(config.storageBackend)\n mountWs(\"/socket/lobby\", () => handleBoardEvent(null, signedPutUrl))\n mountWs(\"/socket/board/:boardId\", (req) => handleBoardEvent(req.getParameter(0), signedPutUrl))\n\n app.get(\"/\", (res) => res.writeStatus(\"200 OK\").end(\"Sorry, we only serve websocket clients here.\"))\n\n function mountWs(path: string, f: (req: uws.HttpRequest) => MessageHandler) {\n app.ws(path, {\n upgrade: (res, req, context) => {\n res.upgrade(\n {\n handler: f(req),\n } as WsUserData,\n req.getHeader(\"sec-websocket-key\"),\n req.getHeader(\"sec-websocket-protocol\"),\n req.getHeader(\"sec-websocket-extensions\"),\n // 3 headers are used to setup websocket\n context,\n )\n },\n open: (ws) => {\n const wrapper = WsWrapper(ws)\n const handler = (ws as WsUserData & uws.WebSocket).handler\n sockets.set(ws, wrapper)\n connectionHandler(wrapper, handler)\n },\n message: (ws, message, isBinary) => {\n if (isBinary) throw Error(\"Binary message\")\n const object = JSON.parse(textDecoder.decode(message))\n const wrapper = sockets.get(ws)\n if (!wrapper) {\n throw Error(\"Wrapper not found for socket \" + ws)\n }\n wrapper.msgE.push(object)\n },\n close: (ws) => {\n const wrapper = sockets.get(ws)\n if (wrapper) {\n wrapper.closeE.push()\n }\n },\n })\n }\n app.listen(port, () => {\n console.log(\"uWebSockets listening on \" + port)\n })\n}\n" }, { "path": "backend/src/websocket-sessions.ts", "content": "import { OAuthAuthenticatedUser } from \"../../common/src/authenticated-user\"\nimport {\n AccessLevel,\n AckJoinBoard,\n AuthLogout,\n BoardHistoryEntry,\n CURSOR_POSITIONS_ACTION_TYPE,\n EventFromServer,\n EventUserInfoAuthenticated,\n Id,\n ItemLocks,\n JoinedBoard,\n Serial,\n SessionUserInfo,\n SetNickname,\n UnidentifiedUserInfo,\n UserCursorPosition,\n UserInfoUpdate,\n getBoardAttributes,\n isBoardHistoryEntry,\n} from \"../../common/src/domain\"\nimport { ServerSideBoardState, maybeGetBoard } from \"./board-state\"\nimport { getBoardHistory } from \"./board-store\"\nimport { closeYjsSocketsBySessionId } from \"./board-yjs-server\"\nimport { randomProfession } from \"./professions\"\nimport { getUserIdForEmail } from \"./user-store\"\nimport { WsWrapper, toBuffer } from \"./ws-wrapper\"\n\nexport type UserSession = {\n readonly sessionId: Id\n boardSession: UserSessionBoardEntry | null\n userInfo: SessionUserInfo\n sendEvent: (event: EventFromServer) => void\n isOnBoard: (boardId: Id) => boolean\n close(): void\n}\n\nexport type UserSessionBoardEntry = {\n boardId: Id\n status: \"ready\" | \"buffering\"\n accessLevel: AccessLevel\n bufferedEvents: BoardHistoryEntry[]\n}\n\n/*\nsocket: WsWrapper\n boards: Id[]\n userInfo: EventUserInfo\n */\nexport type SocketId = string\n\nconst sessions: Record = {}\n\nconst everyoneOnTheBoard = (boardId: string) => {\n const boardState = maybeGetBoard(boardId)\n if (!boardState) {\n console.warn(`Trying to send to a board not in memory: ${boardId}`)\n return []\n }\n return boardState.sessions\n}\nconst sendTo = (recipients: UserSession[], message: EventFromServer) => {\n recipients.forEach((c) => c.sendEvent(message))\n}\nconst everyoneElseOnTheSameBoard = (boardId: Id, session?: UserSession) =>\n everyoneOnTheBoard(boardId).filter((s) => s !== session)\n\nexport function startSession(socket: WsWrapper) {\n sessions[socket.id] = userSession(socket)\n}\n\nfunction userSession(socket: WsWrapper): UserSession {\n const sessionId = socket.id\n\n function sendEvent(event: EventFromServer) {\n if (isBoardHistoryEntry(event)) {\n const entry = session.boardSession\n if (!entry) throw Error(\"Board \" + event.boardId + \" not found for session \" + sessionId)\n if (entry.status === \"buffering\") {\n entry.bufferedEvents.push(event)\n return\n }\n }\n socket.send(toBuffer(event))\n }\n const session: UserSession = {\n sessionId,\n userInfo: anonymousUser(\"Anonymous \" + randomProfession()),\n boardSession: null,\n sendEvent,\n isOnBoard: (boardId: Id) => session.boardSession != null && session.boardSession.boardId === boardId,\n close: () => socket.close(),\n }\n sessions[socket.id] = session\n return session\n}\n\nfunction anonymousUser(nickname: string): UnidentifiedUserInfo {\n return { userType: \"unidentified\", nickname }\n}\n\nexport function endSession(socket: WsWrapper) {\n const sessionId = socket.id\n const session = sessions[sessionId]\n if (!session) {\n console.warn(`Ending non-existing session ${sessionId}`)\n return\n }\n if (session.boardSession) {\n const boardState = maybeGetBoard(session.boardSession.boardId)\n if (boardState) {\n boardState.sessions = boardState.sessions.filter((s) => s.sessionId !== sessionId)\n broadcastBoardEvent({ action: \"board.left\", boardId: boardState.board.id, sessionId })\n } else {\n console.warn(`Board state not found when ending session: ${session.boardSession.boardId}`)\n }\n }\n delete sessions[socket.id]\n closeYjsSocketsBySessionId(sessionId)\n}\nexport function getBoardSessionCount(id: Id) {\n return everyoneOnTheBoard(id).length\n}\nexport function getSession(socket: WsWrapper): UserSession | undefined {\n return getSessionById(socket.id)\n}\n\nexport function getSessionById(sessionId: string): UserSession | undefined {\n return sessions[sessionId]\n}\n\nexport function terminateSessions() {\n Object.values(sessions).forEach((session) => session.close())\n}\n\nexport async function addSessionToBoard(\n boardState: ServerSideBoardState,\n origin: WsWrapper,\n accessLevel: AccessLevel,\n initAtSerial?: Serial,\n): Promise {\n const session = sessions[origin.id]\n if (!session) throw new Error(\"No session found for socket \" + origin.id)\n const boardId = boardState.board.id\n if (!boardState.sessions.includes(session)) {\n boardState.sessions = [...boardState.sessions, session]\n }\n const initDiff = initAtSerial && boardState.board.serial - initAtSerial\n if (initDiff && initDiff > Object.keys(boardState.board.items).length) {\n console.log(`Sending fresh board state for board ${boardId} instead of diff (${initDiff} events to sync)`)\n initAsNew(session, boardId, accessLevel, boardState)\n } else if (initAtSerial) {\n const entry: UserSessionBoardEntry = { boardId, status: \"buffering\", accessLevel, bufferedEvents: [] }\n // 1. Add session to the board with \"buffering\" status, to collect all events that were meant to be sent during this async initialization\n session.boardSession = entry\n try {\n const boardAttributes = getBoardAttributes(boardState.board, session.userInfo)\n\n //console.log(`Starting session at ${initAtSerial}`)\n // 2. capture all board events that haven't yet been flushed to the DB\n const inMemoryEvents = (boardState.currentlyStoring?.events ?? [])\n .concat(boardState.recentEvents)\n .filter((e) => e.serial! > initAtSerial)\n\n // 3. Fetch events from DB as chunks\n // IMPORTANT NOTE: this is the only await here and must remain so, as the logic here depends on everything else being synchronous.\n console.log(`Loading board history for board ${boardState.board.id} session at serial ${initAtSerial}`)\n let first = true\n await getBoardHistory(boardState.board.id, initAtSerial, (chunk) => {\n // Send a chunk of events with done: false, so that client knows to wait for more\n session.sendEvent({\n action: \"board.init.diff\",\n first,\n last: false,\n boardAttributes,\n recentEvents: chunk,\n initAtSerial,\n accessLevel,\n })\n first = false\n })\n\n console.log(`Got board history for board ${boardState.board.id} session at serial ${initAtSerial}`)\n\n // 4. Send the last chunk containing both the inMemoryEvents and the buffered events (done: true)\n // In memory events: not yet flushed to DB when query was made\n // Buffered events: events that occurred after the in memory events were captured\n session.sendEvent({\n action: \"board.init.diff\",\n boardAttributes,\n first,\n last: true,\n recentEvents: [...inMemoryEvents, ...entry.bufferedEvents],\n initAtSerial,\n accessLevel,\n })\n\n // 5. Set the client to \"ready\" status so that new events will be flushed\n entry.status = \"ready\"\n entry.bufferedEvents = []\n } catch (e) {\n console.warn(\n `Failed to bootstrap client on board ${boardId} at serial ${initAtSerial}. Sending full state.`,\n )\n entry.status = \"ready\"\n entry.bufferedEvents = []\n session.sendEvent({\n action: \"board.init\",\n board: boardState.board,\n accessLevel,\n })\n }\n } else {\n initAsNew(session, boardId, accessLevel, boardState)\n }\n\n // TODO SECURITY: don't reveal authenticated emails to unidentified users on same board\n // TODO: what to include in joined events? Not just nickname, as we want to show who's identified (beside the cursor)\n\n session.sendEvent({\n action: \"board.join.ack\",\n boardId: boardState.board.id,\n sessionId: session.sessionId,\n nickname: session.userInfo.nickname,\n } as AckJoinBoard)\n\n // Notify new user of existing users\n everyoneOnTheBoard(boardState.board.id).forEach((s) => {\n session.sendEvent({\n action: \"board.joined\",\n boardId: boardState.board.id,\n sessionId: s.sessionId,\n ...s.userInfo,\n } as JoinedBoard)\n })\n\n // Notify existing users of new user\n broadcastJoinEvent(boardState.board.id, session)\n}\n\nfunction initAsNew(session: UserSession, boardId: string, accessLevel: AccessLevel, boardState: ServerSideBoardState) {\n session.boardSession = { boardId, status: \"ready\", accessLevel, bufferedEvents: [] }\n session.sendEvent({\n action: \"board.init\",\n board: boardState.board,\n accessLevel,\n })\n}\n\nexport function setNicknameForSession(event: SetNickname, origin: WsWrapper) {\n const session = getSession(origin)\n if (!session) {\n console.warn(`Session not found: ${origin.id}`)\n return\n }\n\n session.userInfo =\n session.userInfo.userType === \"unidentified\"\n ? anonymousUser(event.nickname)\n : { ...session.userInfo, nickname: event.nickname }\n const updateInfo: UserInfoUpdate = {\n action: \"userinfo.set\",\n sessionId: session.sessionId,\n ...session.userInfo,\n }\n if (session.boardSession) {\n sendTo(everyoneOnTheBoard(session.boardSession.boardId), updateInfo)\n }\n}\n\nexport async function setVerifiedUserForSession(\n event: OAuthAuthenticatedUser,\n session: UserSession,\n): Promise {\n const userId = await getUserIdForEmail(event.email)\n session.userInfo = {\n userType: \"authenticated\",\n nickname: event.name,\n name: event.name,\n email: event.email,\n picture: event.picture,\n domain: event.domain,\n userId,\n }\n if (session.boardSession) {\n // TODO SECURITY: don't reveal authenticated emails to unidentified users on same board\n sendTo(everyoneElseOnTheSameBoard(session.boardSession.boardId, session), {\n action: \"user.login\",\n email: event.email,\n name: event.name,\n picture: event.picture,\n })\n }\n return session.userInfo\n}\n\nexport function logoutUser(event: AuthLogout, origin: WsWrapper) {\n const session = getSession(origin)\n if (!session) {\n console.warn(\"Session not found for socket \" + origin.id)\n } else {\n session.userInfo = { userType: \"unidentified\", nickname: session.userInfo.nickname }\n }\n}\n\nexport function broadcastBoardEvent(event: EventFromServer & { boardId: string }, origin?: UserSession) {\n //console.log(\"Broadcast\", event.action, \"to\", everyoneElseOnTheSameBoard(event.boardId, origin).length)\n sendTo(everyoneElseOnTheSameBoard(event.boardId, origin), event)\n}\n\nexport function broadcastJoinEvent(boardId: Id, session: UserSession) {\n sendTo(everyoneElseOnTheSameBoard(boardId, session), {\n action: \"board.joined\",\n boardId,\n sessionId: session.sessionId,\n ...session.userInfo,\n } as JoinedBoard)\n}\n\nexport function broadcastCursorPositions(boardId: Id, positions: Record) {\n sendTo(everyoneOnTheBoard(boardId), { action: CURSOR_POSITIONS_ACTION_TYPE, p: positions })\n}\n\nconst BROADCAST_DEBOUNCE_MS = 20\n\n// Debounce by 20ms per board id, otherwise every item interaction (e.g. drag on 10 items, one event each) broadcasts locks\nexport const broadcastItemLocks = (() => {\n let timeouts: Record = {}\n const hasActiveTimer = (boardId: string) => timeouts[boardId] !== undefined\n\n return function _broadcastItemLocks(boardId: string, locks: ItemLocks) {\n if (hasActiveTimer(boardId)) {\n return\n }\n timeouts[boardId] = setTimeout(() => {\n const boardState = maybeGetBoard(boardId)\n if (boardState) {\n sendTo(boardState.sessions, { action: \"board.locks\", boardId, locks })\n }\n timeouts[boardId] = undefined\n }, BROADCAST_DEBOUNCE_MS)\n }\n})()\n\nexport function getSessionCount() {\n return Object.values(sessions).length\n}\n" }, { "path": "backend/src/ws-wrapper.ts", "content": "import * as WebSocket from \"ws\"\nimport * as uuid from \"uuid\"\nimport { EventFromServer } from \"../../common/src/domain\"\n\nexport const WsWrapper = (ws: WebSocket) => {\n const onError = (f: () => void) => {\n ws.addEventListener(\"error\", f)\n }\n const onMessage = (f: (msg: object) => void) => {\n ws.addEventListener(\"message\", (msg: any) => {\n try {\n f(JSON.parse(msg.data))\n } catch (e) {\n console.error(\"Error in WsWrapper/onMessage. Closing connection.\", e)\n ws.close()\n }\n })\n }\n const onClose = (f: () => void) => {\n ws.addEventListener(\"close\", f)\n }\n return {\n send: (buffer: Buffer) => {\n try {\n ws.send(buffer, { binary: false })\n } catch (e) {\n ws.close()\n }\n },\n onError,\n onMessage,\n onClose,\n id: uuid.v4(),\n close: () => ws.close(),\n }\n}\nexport type WsWrapper = ReturnType\n\ntype CachedBuffer = { msg: EventFromServer; buffer: Buffer }\nlet cachedBuffer: CachedBuffer | null = null\nexport function toBuffer(msg: EventFromServer) {\n // We cache the latest buffer to avoid creating a new buffer for every message.\n if (cachedBuffer && cachedBuffer.msg === msg) {\n return cachedBuffer.buffer\n }\n cachedBuffer = { msg, buffer: Buffer.from(JSON.stringify(msg)) }\n return cachedBuffer.buffer\n}\n" }, { "path": "backend/src/y-websocket-server/Docs.ts", "content": "import { WSSharedDoc } from \"./WSSharedDoc\"\nimport { Persistence } from \"./Persistence\"\n\nexport interface DocsOptions {\n persistence?: Persistence\n gc?: boolean\n}\n\ninterface DocState {\n doc: WSSharedDoc\n fetchPromise: Promise\n}\n\nexport class Docs {\n readonly docs = new Map()\n readonly persistence: Persistence | null\n readonly gc: boolean\n\n constructor(options: DocsOptions = {}) {\n this.persistence = options.persistence || null\n this.gc = options.gc ?? true\n }\n\n /**\n * Gets a Y.Doc by name, whether in memory or on disk\n */\n getYDoc(docname: string): WSSharedDoc {\n return this.getDocState(docname).doc\n }\n\n async getYDocAndWaitForFetch(docname: string): Promise {\n const state = this.getDocState(docname)\n await state.fetchPromise\n return state.doc\n }\n\n private getDocState(docname: string): DocState {\n let state = this.docs.get(docname)\n if (!state) {\n const doc = new WSSharedDoc(this, docname)\n console.log(`Loading document ${doc.name} into memory`)\n doc.gc = this.gc\n if (this.persistence !== null) {\n void this.persistence.bindState(docname, doc)\n }\n const fetchPromise =\n this.persistence !== null ? this.persistence.bindState(docname, doc) : Promise.resolve()\n state = { doc, fetchPromise }\n this.docs.set(docname, state)\n }\n return state\n }\n\n deleteYDoc(doc: WSSharedDoc) {\n console.log(`Purging document ${doc.name} from memory`)\n this.docs.delete(doc.name)\n }\n}\n" }, { "path": "backend/src/y-websocket-server/Persistence.ts", "content": "import * as Y from \"yjs\"\n\nexport interface Persistence {\n bindState: (docName: string, ydoc: Y.Doc) => Promise\n writeState: (docName: string, ydoc: Y.Doc) => Promise\n}\n\nexport function createLevelDbPersistence(persistenceDir: string): Persistence {\n console.info('Persisting documents to \"' + persistenceDir + '\"')\n // @ts-ignore\n const LeveldbPersistence = require(\"y-leveldb\").LeveldbPersistence\n const ldb = new LeveldbPersistence(persistenceDir)\n return {\n bindState: async (docName, ydoc) => {\n const persistedYdoc = await ldb.getYDoc(docName)\n const newUpdates = Y.encodeStateAsUpdate(ydoc)\n ldb.storeUpdate(docName, newUpdates)\n Y.applyUpdate(ydoc, Y.encodeStateAsUpdate(persistedYdoc))\n ydoc.on(\"update\", (update) => {\n ldb.storeUpdate(docName, update)\n })\n },\n writeState: async (docName, ydoc) => {},\n }\n}\n" }, { "path": "backend/src/y-websocket-server/Protocol.ts", "content": "export const messageSync = 0\nexport const messageAwareness = 1\n" }, { "path": "backend/src/y-websocket-server/WSSharedDoc.ts", "content": "import * as Y from \"yjs\"\n\nimport * as awarenessProtocol from \"y-protocols/awareness\"\nimport * as syncProtocol from \"y-protocols/sync\"\n\nimport * as encoding from \"lib0/encoding\"\nimport * as WebSocket from \"ws\"\nimport { Docs } from \"./Docs\"\nimport { messageAwareness, messageSync } from \"./Protocol\"\n\nexport const wsReadyStateConnecting = 0\nexport const wsReadyStateOpen = 1\nexport const wsReadyStateClosing = 2\nexport const wsReadyStateClosed = 3\n\nexport class WSSharedDoc extends Y.Doc {\n private docs: Docs\n readonly name: string\n private conns: Map> = new Map>()\n readonly awareness = new awarenessProtocol.Awareness(this)\n\n constructor(docs: Docs, name: string) {\n super({ gc: docs.gc })\n this.docs = docs\n this.name = name\n this.awareness.setLocalState(null)\n\n const awarenessChangeHandler = (\n { added, updated, removed }: { added: number[]; updated: number[]; removed: number[] },\n conn: WebSocket,\n ) => {\n const changedClients = added.concat(updated, removed)\n if (conn !== null) {\n const connControlledIDs = this.conns.get(conn)\n if (connControlledIDs !== undefined) {\n added.forEach((clientID) => {\n connControlledIDs.add(clientID)\n })\n removed.forEach((clientID) => {\n connControlledIDs.delete(clientID)\n })\n }\n }\n const encoder = encoding.createEncoder()\n encoding.writeVarUint(encoder, messageAwareness)\n encoding.writeVarUint8Array(\n encoder,\n awarenessProtocol.encodeAwarenessUpdate(this.awareness, changedClients),\n )\n const buff = encoding.toUint8Array(encoder)\n this.conns.forEach((_, c) => {\n this.send(c, buff)\n })\n }\n this.awareness.on(\"update\", awarenessChangeHandler)\n\n const updateHandler = (update: Uint8Array, origin: any, doc: WSSharedDoc) => {\n const encoder = encoding.createEncoder()\n encoding.writeVarUint(encoder, messageSync)\n syncProtocol.writeUpdate(encoder, update)\n const message = encoding.toUint8Array(encoder)\n doc.conns.forEach((_, conn) => this.send(conn, message))\n }\n\n this.on(\"update\", updateHandler)\n }\n\n send(conn: WebSocket, m: Uint8Array) {\n if (conn.readyState !== wsReadyStateConnecting && conn.readyState !== wsReadyStateOpen) {\n this.closeConn(conn)\n }\n try {\n conn.send(m, (err: any) => {\n err != null && this.closeConn(conn)\n })\n } catch (e) {\n console.error(\"Failed to send message to client. Closing connection.\", e)\n this.closeConn(conn)\n }\n }\n\n closeConn(conn: WebSocket) {\n if (this.conns.has(conn)) {\n const controlledIds = this.conns.get(conn)!\n this.conns.delete(conn)\n awarenessProtocol.removeAwarenessStates(this.awareness, Array.from(controlledIds), null)\n if (this.conns.size === 0 && this.docs.persistence !== null) {\n // if persisted, we store state and destroy ydocument\n this.docs.persistence.writeState(this.name, this).then(() => {\n this.destroy()\n })\n this.docs.deleteYDoc(this)\n }\n }\n conn.close()\n }\n\n addConnection(conn: WebSocket) {\n this.conns.set(conn, new Set())\n }\n\n hasConnection(conn: WebSocket) {\n return this.conns.has(conn)\n }\n}\n" }, { "path": "backend/src/y-websocket-server/YWebSocketServer.ts", "content": "import * as awarenessProtocol from \"y-protocols/awareness\"\nimport * as syncProtocol from \"y-protocols/sync\"\n\nimport * as decoding from \"lib0/decoding\"\nimport * as encoding from \"lib0/encoding\"\nimport * as WebSocket from \"ws\"\nimport { Docs, DocsOptions } from \"./Docs\"\nimport { messageAwareness, messageSync } from \"./Protocol\"\nimport { WSSharedDoc } from \"./WSSharedDoc\"\n\nconst pingTimeout = 30000\n\nexport default class YWebSocketServer {\n docs: Docs\n constructor(options?: DocsOptions) {\n this.docs = new Docs(options)\n }\n\n async setupWSConnection(conn: WebSocket, docName: string, readOnly: boolean) {\n conn.binaryType = \"arraybuffer\"\n // get doc, initialize if it does not exist yet\n const doc = this.docs.getYDoc(docName)\n\n console.log(`YJS connection established for ${docName}`)\n\n doc.addConnection(conn)\n // listen and reply to events\n conn.on(\"message\", (message: ArrayBuffer) => messageListener(conn, doc, readOnly, new Uint8Array(message)))\n\n // Check if connection is still alive\n let pongReceived = true\n const pingInterval = setInterval(() => {\n if (!pongReceived) {\n if (doc.hasConnection(conn)) {\n doc.closeConn(conn)\n }\n clearInterval(pingInterval)\n } else if (doc.hasConnection(conn)) {\n pongReceived = false\n try {\n conn.ping()\n } catch (e) {\n doc.closeConn(conn)\n clearInterval(pingInterval)\n }\n }\n }, pingTimeout)\n conn.on(\"close\", () => {\n doc.closeConn(conn)\n clearInterval(pingInterval)\n })\n conn.on(\"pong\", () => {\n pongReceived = true\n })\n // put the following in a variables in a block so the interval handlers don't keep in in\n // scope\n {\n // send sync step 1\n const encoder = encoding.createEncoder()\n encoding.writeVarUint(encoder, messageSync)\n syncProtocol.writeSyncStep1(encoder, doc)\n doc.send(conn, encoding.toUint8Array(encoder))\n const awarenessStates = doc.awareness.getStates()\n if (awarenessStates.size > 0) {\n const encoder = encoding.createEncoder()\n encoding.writeVarUint(encoder, messageAwareness)\n encoding.writeVarUint8Array(\n encoder,\n awarenessProtocol.encodeAwarenessUpdate(doc.awareness, Array.from(awarenessStates.keys())),\n )\n doc.send(conn, encoding.toUint8Array(encoder))\n }\n }\n }\n}\n\n// Read-only implementation found at https://discuss.yjs.dev/t/read-only-or-one-way-only-sync/135/3\nconst readSyncMessage = (\n decoder: decoding.Decoder,\n encoder: encoding.Encoder,\n doc: WSSharedDoc,\n readOnly = false,\n transactionOrigin: any,\n) => {\n const messageType = decoding.readVarUint(decoder)\n switch (messageType) {\n case syncProtocol.messageYjsSyncStep1:\n syncProtocol.readSyncStep1(decoder, encoder, doc)\n break\n case syncProtocol.messageYjsSyncStep2:\n if (!readOnly) syncProtocol.readSyncStep2(decoder, doc, transactionOrigin)\n break\n case syncProtocol.messageYjsUpdate:\n if (!readOnly) syncProtocol.readUpdate(decoder, doc, transactionOrigin)\n break\n default:\n throw new Error(\"Unknown message type\")\n }\n return messageType\n}\n\nconst messageListener = (conn: WebSocket, doc: WSSharedDoc, readOnly: boolean, message: Uint8Array) => {\n try {\n const encoder = encoding.createEncoder()\n const decoder = decoding.createDecoder(message)\n const messageType = decoding.readVarUint(decoder)\n switch (messageType) {\n case messageSync:\n encoding.writeVarUint(encoder, messageSync)\n readSyncMessage(decoder, encoder, doc, readOnly, conn)\n\n // If the `encoder` only contains the type of reply message and no\n // message, there is no need to send the message. When `encoder` only\n // contains the type of reply, its length is 1.\n if (encoding.length(encoder) > 1) {\n doc.send(conn, encoding.toUint8Array(encoder))\n }\n break\n case messageAwareness: {\n awarenessProtocol.applyAwarenessUpdate(doc.awareness, decoding.readVarUint8Array(decoder), conn)\n break\n }\n default: {\n console.warn(\"Unexpected message type\" + messageType)\n }\n }\n } catch (err) {\n console.error(err)\n doc.emit(\"error\", [err])\n }\n}\n" }, { "path": "backend/tsconfig.json", "content": "{\n \"extends\": \"../tsconfig\",\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"outDir\": \"./dist\",\n \"rootDir\": \"..\",\n \"sourceMap\": true\n }\n}\n" }, { "path": "benchmark/benchmark.ts", "content": "import { uniqueId } from \"lodash\"\nimport { arrayToRecordById } from \"../common/src/arrays\"\nimport { boardReducer } from \"../common/src/board-reducer\"\nimport { Board, Item, Note, newNote } from \"../common/src/domain\"\n\ntype Foo = Board\n\nfunction createRandomItems(count: number): Item[] {\n const items: Item[] = []\n for (let i = 0; i < count; i++) {\n items.push({\n id: uniqueId(),\n type: \"note\",\n color: \"yellow\",\n height: 100,\n width: 100,\n x: Math.random() * 10000,\n y: Math.random() * 10000,\n z: 0,\n shape: \"square\",\n text: \"Hello world\",\n })\n }\n return items\n}\n\nfunction createTestBoard(size = 1000): Board {\n return {\n id: uniqueId(),\n height: 10000,\n width: 10000,\n serial: 0,\n name: \"Bigass board\",\n items: arrayToRecordById(createRandomItems(size)),\n connections: [],\n }\n}\n\nlet testBoards = Array.from({ length: 100 }, () => {\n const board = createTestBoard(100)\n const items = Object.values(board.items) as Note[]\n return {\n board,\n items,\n }\n})\n\nconsole.time(\"10000 item.updates on a randomly picked 100 item board\")\nfor (let i = 0; i < 10000; i++) {\n let randomBoard = testBoards[Math.floor(Math.random() * testBoards.length)]\n // const itemsArray = Object.values(randomBoard.items) as Note[]\n const item = randomBoard.items[i % randomBoard.items.length]\n ;[randomBoard.board] = boardReducer(randomBoard.board, {\n boardId: randomBoard.board.id,\n action: \"item.update\",\n items: [\n {\n ...item,\n text: \"Hello world\",\n },\n ],\n })\n}\nconsole.timeEnd(\"10000 item.updates on a randomly picked 100 item board\")\n\ntestBoards = Array.from({ length: 100 }, () => {\n const board = createTestBoard(100)\n const items = Object.values(board.items) as Note[]\n return {\n board,\n items,\n }\n})\n\nconsole.time(\"10000 item.adds on a randomly picked 100 item board\")\nfor (let i = 0; i < 10000; i++) {\n const randomBoard = testBoards[Math.floor(Math.random() * testBoards.length)]\n const item = newNote(\"foo\")\n ;[randomBoard.board] = boardReducer(randomBoard.board, {\n boardId: randomBoard.board.id,\n action: \"item.add\",\n items: [item],\n connections: [],\n })\n}\nconsole.timeEnd(\"10000 item.adds on a randomly picked 100 item board\")\n\ntestBoards = Array.from({ length: 100 }, () => {\n const board = createTestBoard(100)\n const items = Object.values(board.items) as Note[]\n return {\n board,\n items,\n }\n})\n\nconsole.time(\"10000 item.moves on a randomly picked 100 item board\")\nfor (let i = 0; i < 10000; i++) {\n const randomBoard = testBoards[Math.floor(Math.random() * testBoards.length)]\n const item = randomBoard.items[i % randomBoard.items.length]\n ;[randomBoard.board] = boardReducer(randomBoard.board, {\n boardId: randomBoard.board.id,\n action: \"item.move\",\n items: [\n {\n ...item,\n x: Math.random() * 10000,\n y: Math.random() * 10000,\n },\n ],\n connections: [],\n })\n}\nconsole.timeEnd(\"10000 item.moves on a randomly picked 100 item board\")\n\nconsole.time(\"Reference: creating 10000 input objects and doing nothing\")\nconst noop = (item: any) => {\n item.text\n}\nfor (let i = 0; i < 10000; i++) {\n const item = newNote(\"foo\")\n noop({\n ...item,\n text: \"Hello world\",\n })\n}\nconsole.timeEnd(\"Reference: creating 10000 input objects and doing nothing\")\n" }, { "path": "common/src/action-folding.ts", "content": "import { arrayEquals, arrayIdAndKeysMatch, arrayIdMatch, idsOf } from \"./arrays\"\nimport {\n AppEvent,\n BoardHistoryEntry,\n CURSOR_POSITIONS_ACTION_TYPE,\n MoveItem,\n isBoardHistoryEntry,\n isSameUser,\n} from \"./domain\"\n\ntype FoldOptions = {\n cursorsOnly?: boolean\n}\n\nconst defaultOptions = {\n foldAddUpdate: true,\n cursorsOnly: false,\n}\n\nexport const CURSORS_ONLY: FoldOptions = { cursorsOnly: true }\n\nexport function foldActions(a: AppEvent, b: AppEvent, options: FoldOptions = defaultOptions): AppEvent | null {\n if (isBoardHistoryEntry(a) && isBoardHistoryEntry(b)) {\n if (options.cursorsOnly) return null\n if (!isSameUser(a.user, b.user)) return null\n const folded = foldActions_(a, b, options)\n if (!folded) return null\n const firstSerial = a.firstSerial ? a.firstSerial : a.serial\n const serial = b.serial\n return { ...(folded as BoardHistoryEntry), serial, firstSerial } as BoardHistoryEntry\n } else {\n return foldActions_(a, b, options)\n }\n}\n/*\nFolding can be done if in any given state S, applying actions A and B consecutively can be replaced with a single action C.\nThis function should return that composite action or null if folding is not possible.\n*/\nexport function foldActions_(a: AppEvent, b: AppEvent, options: FoldOptions = defaultOptions): AppEvent | null {\n if (a.action === CURSOR_POSITIONS_ACTION_TYPE && b.action === CURSOR_POSITIONS_ACTION_TYPE) {\n return b\n }\n if (a.action === \"cursor.move\" && b.action === \"cursor.move\" && b.boardId === a.boardId) {\n return b // This is a local cursor move\n }\n if (options.cursorsOnly) return null\n\n if (isBoardHistoryEntry(a) && isBoardHistoryEntry(b)) {\n if (!isSameUser(a.user, b.user)) return null\n }\n if (a.action === \"item.front\") {\n if (b.action === \"item.front\" && b.boardId === a.boardId && arrayEquals(b.itemIds, a.itemIds)) return b\n } else if (a.action === \"item.move\") {\n if (b.action === \"item.move\" && b.boardId === a.boardId && everyMovedItemMatches(b, a)) return b\n } else if (a.action === \"item.update\") {\n if (\n b.action === \"item.update\" &&\n b.boardId === a.boardId &&\n arrayIdAndKeysMatch(b.items, a.items) &&\n arrayIdAndKeysMatch(b.connections ?? [], a.connections ?? [])\n ) {\n return b\n }\n } else if (a.action === \"item.lock\" || a.action === \"item.unlock\") {\n if (b.action === a.action && b.boardId === a.boardId && b.itemId === a.itemId) return b\n } else if (a.action === \"connection.modify\" && b.action === \"connection.modify\") {\n if (arrayIdMatch(a.connections, b.connections)) return b\n } else if (a.action === \"connection.modify\" && b.action === \"connection.delete\") {\n if (arrayEquals(b.connectionIds, idsOf(a.connections))) return b\n }\n return null\n}\n\nfunction everyMovedItemMatches(evt: MoveItem, evt2: MoveItem) {\n return arrayIdMatch(evt.items, evt2.items) && arrayIdMatch(evt.connections, evt2.connections)\n}\n\nexport function addOrReplaceEvent(event: E, q: E[], options: FoldOptions = defaultOptions): E[] {\n for (let i = 0; i < q.length; i++) {\n let eventInQueue = q[i]\n const folded = foldActions(eventInQueue, event, options)\n if (folded) {\n return [...q.slice(0, i), folded, ...q.slice(i + 1)] as E[]\n }\n }\n return q.concat(event)\n}\n" }, { "path": "common/src/arrays.ts", "content": "import { isArray, isEqual } from \"lodash\"\n\nexport function toArray(x: T | T[]) {\n if (isArray(x)) return x\n return [x]\n}\n\nexport function arrayIdMatch(a: T[] | T, b: T[] | T) {\n return arrayEquals(idsOf(a), idsOf(b))\n}\n\nexport function arrayObjectKeysMatch(a: T[] | T, b: T[] | T) {\n return arrayEquals(keysOf(a), keysOf(b))\n}\n\nexport function arrayIdAndKeysMatch(a: T[] | T, b: T[] | T) {\n return arrayIdMatch(a, b) && arrayObjectKeysMatch(a, b)\n}\n\nexport function idsOf(a: T[] | T): string[] {\n return toArray(a).map((x) => x.id)\n}\n\nexport function keysOf(a: T[] | T): string[][] {\n return toArray(a).map((x) => Object.keys(x))\n}\n\nexport function arrayEquals(a: T[] | T, b: T[] | T) {\n return isEqual(toArray(a), toArray(b))\n}\n\nexport function arrayToRecordById(arr: T[], init: Record = {}): Record {\n return arr.reduce((acc: Record, elem: T) => {\n acc[elem.id] = elem\n return acc\n }, init)\n}\n" }, { "path": "common/src/assertNotNull.ts", "content": "export function assertNotNull(x: T | null | undefined): T {\n if (x === null || x === undefined) throw Error(\"Assertion failed: \" + x)\n return x\n}\n" }, { "path": "common/src/authenticated-user.ts", "content": "export type OAuthAuthenticatedUser = {\n name: string\n email: string\n picture?: string\n domain: string | null\n}\n" }, { "path": "common/src/board-crdt-helper.ts", "content": "import * as Y from \"yjs\"\nimport { Board, Id, Item, QuillDelta, isTextItem } from \"./domain\"\n\nexport function getCRDTField(doc: Y.Doc, itemId: Id, fieldName: string) {\n return doc.getText(`items.${itemId}.${fieldName}`)\n}\n\nexport function augmentBoardWithCRDT(doc: Y.Doc, board: Board): Board {\n const items = augmentItemsWithCRDT(doc, Object.values(board.items))\n return {\n ...board,\n items: Object.fromEntries(items.map((i) => [i.id, i])),\n }\n}\n\nexport function augmentItemsWithCRDT(doc: Y.Doc, items: Item[]): Item[] {\n return items.map((item) => {\n if (isTextItem(item) && item.crdt) {\n const field = getCRDTField(doc, item.id, \"text\")\n const textAsDelta = field.toDelta() as QuillDelta\n const text = field.toString()\n return { ...item, textAsDelta, text }\n }\n return item\n })\n}\n\nexport function importItemsIntoCRDT(doc: Y.Doc, items: Item[], options?: { fallbackToText: boolean }) {\n for (const item of items) {\n if (isTextItem(item) && item.crdt) {\n if (item.textAsDelta) {\n getCRDTField(doc, item.id, \"text\").applyDelta(item.textAsDelta)\n } else if (options?.fallbackToText) {\n getCRDTField(doc, item.id, \"text\").insert(0, item.text)\n } else {\n throw Error(\"textAsDelta is missing \")\n }\n }\n }\n}\n" }, { "path": "common/src/board-reducer.benchmark.ts", "content": "import _ from \"lodash\"\nimport { NOTE_COLORS } from \"./colors\"\nimport { Board } from \"./domain\"\nimport * as uuid from \"uuid\"\nimport { boardReducer } from \"./board-reducer\"\nimport { assertNotNull } from \"./assertNotNull\"\n\nfunction createBoard(): Board {\n const itemCount = 10000\n const board: Board = {\n id: \"0f5b9d6c-02c2-4b81-beb7-3a3b9035e8a2\",\n name: \"Perf3\",\n width: 800,\n height: 600,\n serial: 320577,\n connections: [],\n items: {},\n }\n for (let i = 0; i < itemCount; i++) {\n const id = uuid.v4()\n board.items[id] = {\n id,\n type: \"text\",\n x: Math.random() * 800,\n y: Math.random() * 600,\n z: 3,\n width: 5,\n height: 5,\n text: \"Hello world\",\n fontSize: 12,\n locked: false,\n color: \"#FBFC86\",\n }\n }\n return board\n}\n\nconst board = createBoard()\nconst boardId = board.id\nconst eventCount = 1000\nconst items = Object.values(board.items)\n\nconst started = new Date().getTime()\nfor (let i = 0; i < eventCount; i++) {\n const target = assertNotNull(_.sample(items))\n const updated = { ...target, text: \"EDIT \" + i, color: _.sample(NOTE_COLORS)?.color! }\n\n boardReducer(\n board,\n {\n action: \"item.update\",\n boardId,\n items: [updated],\n },\n { inplace: true },\n )\n}\nconst elapsed = new Date().getTime() - started\nconsole.log(`Processed ${eventCount} events in ${elapsed}ms. (${eventCount / elapsed} events/ms)`)\n" }, { "path": "common/src/board-reducer.ts", "content": "import { partition } from \"lodash\"\nimport { maybeChangeContainerForItem } from \"../../frontend/src/board/item-setcontainer\"\nimport { arrayToRecordById } from \"./arrays\"\nimport { rerouteConnection, resolveEndpoint } from \"./connection-utils\"\nimport {\n Board,\n Connection,\n ConnectionEndPoint,\n ConnectionUpdate,\n Container,\n findItem,\n findItemIdsRecursively,\n getConnection,\n getEndPointItemId,\n getItem,\n Id,\n Image,\n isBoardHistoryEntry,\n isContainedBy,\n isContainer,\n isItem,\n isItemEndPoint,\n isTextItem,\n Item,\n ItemUpdate,\n MoveItem,\n Note,\n PersistableBoardItemEvent,\n Point,\n Text,\n TextItem,\n Update,\n Video,\n} from \"./domain\"\nimport { equalRect, Rect } from \"./geometry\"\nimport {\n BoardPermission,\n canChangeFont,\n canChangeShapeAndColor,\n canChangeText,\n canChangeTextAlign,\n canDelete,\n canMove,\n nullablePermission,\n} from \"../../frontend/src/board/board-permissions\"\n\ntype BoardReducerOptions = {\n inplace?: boolean\n strictOnSerials?: boolean\n}\n\nexport function boardReducer(\n board: Board,\n event: PersistableBoardItemEvent,\n options: BoardReducerOptions = {},\n): [Board, (() => PersistableBoardItemEvent) | null] {\n const inplace = options.inplace ?? false\n if (isBoardHistoryEntry(event) && event.serial) {\n const firstSerial = event.firstSerial ? event.firstSerial : event.serial\n if (firstSerial !== board.serial + 1) {\n const message = `Serial skip on ${event.action}, ${board.serial} -> ${firstSerial} (firstSerial ${event.firstSerial} serial ${event.serial})`\n if (options.strictOnSerials) {\n throw Error(message)\n } else {\n console.warn(message)\n }\n }\n board = { ...board, serial: event.serial }\n }\n //console.log(event.action, inplace)\n switch (event.action) {\n case \"connection.add\": {\n const newConnections = event.connections\n\n for (let connection of newConnections) {\n validateConnection(board, connection)\n\n if (board.connections.some((c) => c.id === connection.id)) {\n throw Error(`Connection ${connection.id} already exists on board ${board.id}`)\n }\n }\n\n return [\n {\n ...board,\n connections: applyListModification(\n board.connections,\n (cs) => {\n cs.push(...newConnections)\n },\n inplace,\n ),\n },\n () => ({\n action: \"connection.delete\",\n boardId: event.boardId,\n connectionIds: newConnections.map((c) => c.id),\n }),\n ]\n }\n case \"connection.modify\": {\n const connections = event.connections.filter(canMove)\n\n const existingConnections = connections.map((r) => {\n validateConnection(board, r)\n const existingConnection = board.connections.find((c) => c.id === r.id)\n if (!existingConnection) {\n throw Error(`Trying to modify nonexisting connection ${r.id} on board ${board.id}`)\n }\n return existingConnection\n })\n\n return [\n {\n ...board,\n connections: applyListModification(\n board.connections,\n (cs) => replaceById(cs, connections),\n inplace,\n ),\n },\n () => ({ action: \"connection.modify\", boardId: event.boardId, connections: existingConnections }),\n ]\n }\n case \"connection.delete\": {\n const ids = new Set(event.connectionIds)\n\n const existingConnections = board.connections.filter((c) => ids.has(c.id) || !canDelete(c))\n\n return [\n { ...board, connections: board.connections.filter((c) => !ids.has(c.id)) },\n () => ({ action: \"connection.add\", boardId: event.boardId, connections: existingConnections }),\n ]\n }\n case \"board.rename\":\n return [{ ...board, name: event.name }, null]\n case \"board.setAccessPolicy\":\n return [{ ...board, accessPolicy: event.accessPolicy }, null]\n case \"item.bootstrap\":\n //if (board.items.length > 0) throw Error(\"Trying to bootstrap non-empty board\")\n return [{ ...board, items: event.items, connections: event.connections }, null]\n case \"item.add\":\n if (event.items.some((a) => board.items[a.id])) {\n throw new Error(\"Adding duplicate item \" + JSON.stringify(event.items))\n }\n\n const updatedItems = applyModification(\n board.items,\n (items) => {\n event.items.forEach((item) => {\n if (\n item.containerId &&\n !findItem(board)(item.containerId) &&\n !findItem(arrayToRecordById(event.items))(item.containerId)\n ) {\n // Add item but don't try to assign to a non-existing container\n items[item.id] = { ...item, containerId: undefined }\n } else {\n items[item.id] = item\n }\n }, {})\n },\n inplace,\n )\n\n const boardWithAddedItems = { ...board, items: updatedItems }\n\n const connectionsToAdd = event.connections || []\n\n connectionsToAdd.forEach((connection) => {\n validateConnection(boardWithAddedItems, connection)\n\n if (board.connections.some((c) => c.id === connection.id)) {\n throw Error(`Connection ${connection.id} already exists on board ${board.id}`)\n }\n })\n\n return [\n {\n ...boardWithAddedItems,\n connections: applyListModification(\n board.connections,\n (cs) => {\n cs.push(...connectionsToAdd)\n },\n inplace,\n ),\n },\n () => ({\n action: \"item.delete\",\n boardId: board.id,\n itemIds: event.items.map((i) => i.id),\n connectionIds: event.connections.map((c) => c.id),\n }),\n ]\n case \"item.font.increase\":\n return [\n {\n ...board,\n items: applyFontSize(\n board.items,\n 1.1,\n filterItemIdsByPermissions(event.itemIds, board, canChangeFont),\n inplace,\n ),\n },\n () => ({\n ...event,\n action: \"item.font.decrease\",\n }),\n ]\n case \"item.font.decrease\":\n return [\n {\n ...board,\n items: applyFontSize(\n board.items,\n 1 / 1.1,\n filterItemIdsByPermissions(event.itemIds, board, canChangeFont),\n inplace,\n ),\n },\n () => ({\n ...event,\n action: \"item.font.increase\",\n }),\n ]\n case \"item.update\": {\n const updatedConnections = updateConnections(board, event.connections || [])\n const updatedItems = updateItems(board, event.items, updatedConnections, inplace)\n return [\n {\n ...board,\n items: updatedItems,\n connections: updatedConnections,\n },\n () => ({\n action: \"item.update\",\n boardId: board.id,\n items: event.items.map((update) => copyMatchingKeysFromOriginal(update, getItem(board)(update.id))),\n connections: (event.connections || []).map((update) =>\n copyMatchingKeysFromOriginal(update, getConnection(board)(update.id)),\n ),\n }),\n ]\n }\n case \"item.move\":\n return [\n moveItems(board, event, inplace),\n () => ({\n action: \"item.move\",\n boardId: board.id,\n items: event.items.map((i) => {\n const item = getItem(board)(i.id)\n return { id: i.id, x: item.x, y: item.y, containerId: item.containerId }\n }),\n connections: event.connections.map((c) => {\n const conn = getConnection(board)(c.id)\n const startPoint = resolveEndpoint(conn.from, board)\n return { id: c.id, x: startPoint.x, y: startPoint.y }\n }),\n }),\n ]\n case \"item.delete\": {\n const itemIds = filterItemIdsByPermissions(event.itemIds, board, canDelete)\n const connectionIds = filterConnectionIdsByPermissions(event.connectionIds, board, canDelete)\n const itemIdsToDelete = findItemIdsRecursively(itemIds, board)\n const connectionIdsToDelete = new Set(connectionIds)\n const updatedItems = inplace ? board.items : { ...board.items }\n itemIdsToDelete.forEach((id) => {\n delete updatedItems[id]\n })\n\n const [connectionsToKeep, connectionsDeleted] = partition(\n board.connections,\n (c) =>\n !connectionIdsToDelete.has(c.id) &&\n !(c.containerId && itemIdsToDelete.has(c.containerId)) &&\n (!isItemEndPoint(c.from) || !itemIdsToDelete.has(getEndPointItemId(c.from))) &&\n (!isItemEndPoint(c.to) || !itemIdsToDelete.has(getEndPointItemId(c.to))),\n )\n\n return [\n {\n ...board,\n connections: connectionsToKeep,\n items: updatedItems,\n },\n () => ({\n action: \"item.add\",\n boardId: board.id,\n items: Array.from(itemIdsToDelete).map(getItem(board)),\n connections: connectionsDeleted,\n }),\n ]\n }\n case \"item.front\":\n let maxZ = 0\n let maxZCount = 0\n const itemsList = Object.values(board.items)\n for (let i of itemsList) {\n if (i.z > maxZ) {\n maxZCount = 1\n maxZ = i.z\n } else if (i.z === maxZ) {\n maxZCount++\n }\n }\n const isFine = (item: Item) => {\n return !event.itemIds.includes(item.id) || item.z === maxZ\n }\n if (maxZCount === event.itemIds.length && itemsList.every(isFine)) {\n // Requested items already on front\n return [board, null]\n }\n\n const updated = event.itemIds.reduce(\n (acc: Record, id) => {\n const item = board.items[id]\n if (!item) {\n console.warn(`Warning: trying to \"item.front\" nonexisting item ${id} on board ${board.id}`)\n return acc\n }\n const u = item.type !== \"container\" ? { ...item, z: maxZ + 1 } : item\n acc[u.id] = u\n return acc\n },\n inplace ? board.items : {},\n )\n\n return [\n {\n ...board,\n items: inplace\n ? board.items\n : {\n ...board.items,\n ...updated,\n },\n },\n null,\n ] // TODO: return item.back\n default:\n console.warn(\"Unknown event\", event)\n return [board, null]\n }\n}\n\nfunction copyMatchingKeysFromOriginal(update: Update, original: T): Update {\n const keysAndValues = Object.keys(update).map((key) => [key, original[key as keyof T]])\n const result = Object.fromEntries(keysAndValues)\n return result\n}\n\nfunction validateConnection(board: Board, connection: Connection) {\n validateEndPoint(board, connection, \"from\")\n validateEndPoint(board, connection, \"to\")\n}\n\nfunction validateEndPoint(board: Board, connection: Connection, key: \"to\" | \"from\") {\n const endPoint = connection[key]\n if (isItemEndPoint(endPoint)) {\n const toItem = board.items[getEndPointItemId(endPoint)]\n if (!toItem) {\n throw Error(`Connection ${connection.id} refers to nonexisting item ${endPoint}`)\n }\n }\n}\n\nfunction updateConnections(board: Board, updates: ConnectionUpdate[]): Connection[] {\n if (updates.length === 0) return board.connections\n updates = filterConnectionUpdatesByPermissions(updates, board)\n const updatedConnections = updates.map((update) => {\n const existing = board.connections.find((c) => c.id === update.id)\n if (!existing) {\n throw Error(`Trying to modify nonexisting connection ${update.id} on board ${board.id}`)\n }\n const updated = { ...existing, ...update }\n validateConnection(board, updated)\n return updated\n })\n return board.connections.map((c) => {\n const replacement = updatedConnections.find((r) => r.id === c.id)\n return replacement ? replacement : c\n })\n}\n\nfunction updateItems(\n board: Board,\n updateList: ItemUpdate[],\n updatedConnections: Connection[],\n inplace: boolean,\n): Record {\n updateList = filterItemUpdatesByPermissions(updateList, board)\n const updatedItems: Item[] = updateList.map((update) => ({ ...board.items[update.id], ...update } as Item))\n\n const resultItems = applyModification(\n board.items,\n (items) => {\n arrayToRecordById(updatedItems, items)\n },\n inplace,\n )\n\n updatedItems.filter(isContainer).forEach((container) => {\n const previous = board.items[container.id]\n if (previous && !equalRect(previous, container)) {\n // Container shape changed -> check items\n Object.values(board.items)\n .filter(\n (i) =>\n i.containerId === container.id || // Check all previously contained items\n containedBy(i, container), // Check all items inside the new bounds\n )\n .forEach((item) => {\n const newContainer = maybeChangeContainerForItem(item, resultItems)\n if (newContainer?.id !== item.containerId) {\n resultItems[item.id] = { ...item, containerId: newContainer ? newContainer.id : undefined }\n }\n })\n }\n })\n\n function setVisibilityRecursively(parent: Item, hidden: boolean) {\n const children = Object.values(resultItems).filter((i) => i.containerId === parent.id)\n children.forEach((child) => {\n const resultItem = { ...child, hidden }\n if (!hidden && isContainer(resultItem) && resultItem.contentsHidden) {\n resultItem.contentsHidden = false\n }\n resultItems[child.id] = resultItem\n setVisibilityRecursively(child, hidden)\n })\n }\n\n function adjustConnectionVisibility() {\n updatedConnections.forEach((c, i) => {\n let shouldHide: boolean\n if (c.containerId) {\n // When a connection has containerId, it should be hidden if the container is hidden (or has contentsHidden)\n // A connection practically has containerId in case its endpoints are not attached to an item and it's contained by a container\n const container = resultItems[c.containerId]\n shouldHide = (container?.hidden || (isContainer(container) && container.contentsHidden)) ?? false\n } else {\n // In other cases, hide connections in case either end is connected to a hidden item\n const from = resolveEndpoint(c.from, resultItems)\n const to = resolveEndpoint(c.to, resultItems)\n shouldHide = ((isItem(from) && from.hidden) || (isItem(to) && to.hidden)) ?? false\n }\n if (shouldHide !== c.hidden ?? false) {\n updatedConnections[i] = { ...c, hidden: shouldHide }\n }\n })\n }\n\n updateList.forEach((update) => {\n if (\"contentsHidden\" in update) {\n const container = board.items[update.id]\n if (container) {\n setVisibilityRecursively(container, update.contentsHidden ?? false)\n adjustConnectionVisibility()\n }\n }\n })\n\n return resultItems\n}\n\nfunction applyModification(\n items: Record,\n modification: (items: Record) => void,\n inplace: boolean,\n): Record {\n const updated = inplace ? items : { ...items }\n modification(updated)\n return updated\n}\n\nfunction applyListModification(list: T[], modification: (list: T[]) => void, inplace: boolean) {\n const newList = inplace ? list : [...list]\n modification(newList)\n return newList\n}\n\nfunction replaceById(list: T[], replacements: T[]) {\n replacements.forEach((replacement) => {\n const index = list.findIndex((item) => item.id === replacement.id)\n if (index === -1) {\n throw Error(`Trying to replace nonexisting item ${replacement.id}`)\n }\n list[index] = replacement\n })\n}\n\nfunction applyFontSize(items: Record, factor: number, itemIds: Id[], inplace: boolean) {\n return applyModification(\n items,\n (items) => {\n itemIds.forEach((id) => {\n const u = items[id] && isTextItem(items[id]) ? (items[id] as TextItem) : null\n if (u) {\n items[u.id] = {\n ...u,\n fontSize: ((u as TextItem).fontSize || 1) * factor,\n }\n }\n })\n },\n inplace,\n )\n}\n\nfunction filterItemIdsByPermissions(itemIds: Id[], board: Board, permission: BoardPermission) {\n return itemIds.filter((id) => nullablePermission(permission)(findItem(board)(id)))\n}\n\nfunction filterConnectionIdsByPermissions(connectionIds: Id[], board: Board, permission: BoardPermission) {\n return connectionIds.filter((id) => permission(getConnection(board)(id)))\n}\n\nfunction filterMoveByPermissions(event: MoveItem, board: Board) {\n return {\n ...event,\n items: event.items.filter((i) => canMove(getItem(board)(i.id))),\n connections: event.connections.filter((c) => canMove(getConnection(board)(c.id))),\n }\n}\n\nfunction filterItemUpdatesByPermissions(updates: ItemUpdate[], board: Board): ItemUpdate[] {\n type AnyItemKey = keyof Note | keyof Text | keyof Container | keyof Image | keyof Video\n const propertyToPermissionMapping: Partial> = {\n align: canChangeTextAlign,\n color: canChangeShapeAndColor,\n fontSize: canChangeFont,\n x: canMove,\n y: canMove,\n width: canMove,\n height: canMove,\n text: canChangeText,\n }\n return updates.filter((update) => {\n const item = findItem(board)(update.id)\n if (!item) return false\n const keys = Object.keys(update) as AnyItemKey[]\n const permissionFns = keys.map((key) => propertyToPermissionMapping[key])\n for (let fn of permissionFns) {\n if (fn && !fn(item)) {\n console.log(\"Deny update\", keys)\n return false\n }\n }\n return true\n })\n}\n\nfunction filterConnectionUpdatesByPermissions(updates: ConnectionUpdate[], board: Board): ConnectionUpdate[] {\n const propertyToPermissionMapping: Partial> = {\n from: canMove,\n to: canMove,\n fromStyle: canChangeShapeAndColor,\n toStyle: canChangeShapeAndColor,\n controlPoints: canMove,\n }\n return updates.filter((update) => {\n const connection = getConnection(board)(update.id)\n const keys = Object.keys(update) as (keyof Connection)[]\n const permissionFns = keys.map((key) => propertyToPermissionMapping[key])\n for (let fn of permissionFns) {\n if (fn && !fn(connection)) {\n console.log(\"Deny update\", keys)\n return false\n }\n }\n return true\n })\n}\n\nfunction moveItems(board: Board, event: MoveItem, inplace: boolean) {\n event = filterMoveByPermissions(event, board)\n const itemMoves: Record = {}\n const itemsOnBoard = board.items\n const connectionMovesInEvent = event.connections || []\n\n for (let mainItemMove of event.items) {\n const { id, x, y, containerId } = mainItemMove\n const mainItem = itemsOnBoard[id]\n if (mainItem === undefined) {\n console.warn(\"Moving unknown item\", id)\n continue\n }\n const xDiff = x - mainItem.x\n const yDiff = y - mainItem.y\n\n for (let movedItem of Object.values(itemsOnBoard)) {\n const movedId = movedItem.id\n if (movedId === id || isContainedBy(itemsOnBoard, mainItem)(movedItem)) {\n const move = { xDiff, yDiff, containerChanged: movedId === id, containerId }\n itemMoves[movedId] = move\n }\n }\n }\n\n const connectionMoves: Record = {}\n for (let connection of board.connections) {\n const move = findConnectionMove(connection, itemMoves, itemsOnBoard)\n if (move) {\n connectionMoves[connection.id] = move\n } else {\n const m = connectionMovesInEvent.find((m) => m.id === connection.id)\n if (m) {\n const startPoint = resolveEndpoint(connection.from, board)\n connectionMoves[connection.id] = {\n ends: \"both\",\n xDiff: m.x - startPoint.x,\n yDiff: m.y - startPoint.y,\n }\n }\n }\n }\n\n let updatedConnections: Connection[] = board.connections.flatMap((connection) => {\n const move = connectionMoves[connection.id]\n if (!move) return connection\n if (move.ends === \"both\") {\n return {\n ...connection,\n from: moveEndPoint(connection.from, move),\n to: moveEndPoint(connection.to, move),\n controlPoints: connection.controlPoints.map((cp) => moveEndPoint(cp, move)),\n } as Connection\n }\n return rerouteConnection(connection, board)\n })\n\n const updatedItems = Object.entries(itemMoves).reduce(\n (items, [id, move]) => {\n const item = items[id]\n const updated = { ...item, x: item.x + move.xDiff, y: item.y + move.yDiff }\n if (move.containerChanged) {\n updated.containerId = move.containerId\n if (move.containerId) {\n const newContainer = board.items[move.containerId]\n if (\n newContainer &&\n (newContainer.hidden || (isContainer(newContainer) && newContainer.contentsHidden))\n ) {\n updated.hidden = true\n }\n }\n }\n items[id] = updated\n return items\n },\n inplace ? board.items : { ...board.items },\n )\n\n return {\n ...board,\n items: updatedItems,\n connections: updatedConnections,\n }\n}\n\ntype Move = { xDiff: number; yDiff: number }\ntype ItemMove = Move & { containerChanged: boolean; containerId: Id | undefined }\ntype ConnectionMove = (Move & { ends: \"both\" }) | { ends: \"one\" }\n\nfunction findConnectionMove(\n connection: Connection,\n moves: Record,\n items: Record,\n): ConnectionMove | null {\n const endPoints = [connection.to, connection.from]\n let move: Move | null = null\n let partial = false\n let hasItemEndPoints = false\n for (let endPoint of endPoints) {\n if (isItemEndPoint(endPoint)) {\n hasItemEndPoints = true\n const itemId = getEndPointItemId(endPoint)\n if (moves[itemId]) {\n move = moves[itemId]\n } else {\n // linked to item not being moved -> maybe a partial move\n partial = true\n }\n }\n }\n if (!move && !hasItemEndPoints && connection.containerId) {\n move = moves[connection.containerId]\n }\n if (!move) return null\n if (partial) return { ends: \"one\" }\n return { ends: \"both\", ...move }\n}\n\nfunction moveEndPoint(endPoint: ConnectionEndPoint, move: Move) {\n if (isItemEndPoint(endPoint)) {\n return endPoint // points to an item\n }\n const x = endPoint.x + move.xDiff\n const y = endPoint.y + move.yDiff\n return { ...endPoint, x, y }\n}\n\nfunction containedBy(a: Point, b: Rect) {\n return a.x > b.x && a.y > b.y && a.x < b.x + b.width && a.y < b.y + b.height\n}\n" }, { "path": "common/src/colors.ts", "content": "export const LIGHT_BLUE = \"#9FECFC\"\nexport const LIGHT_GREEN = \"#C8FC87\"\nexport const YELLOW = \"#FBFC86\"\nexport const ORANGE = \"#FDDF90\"\nexport const PINK = \"#FDC4E7\"\nexport const LIGHT_PURPLE = \"#E0BDFA\"\nexport const RED = \"#F62A5C\"\nexport const BLACK = \"#000000\"\nexport const LIGHT_GRAY = \"#f4f4f6\"\nexport const WHITE = \"#ffffff\"\nexport const TRANSPARENT = \"#ffffff00\"\nexport const DEFAULT_NOTE_COLOR = YELLOW\n\nexport const NOTE_COLORS = [\n { name: \"light-blue\", color: LIGHT_BLUE },\n { name: \"light-green\", color: LIGHT_GREEN },\n { name: \"yellow\", color: YELLOW },\n { name: \"orange\", color: ORANGE },\n { name: \"pink\", color: PINK },\n { name: \"light-purple\", color: LIGHT_PURPLE },\n { name: \"red\", color: RED },\n { name: \"black\", color: BLACK },\n { name: \"light-gray\", color: LIGHT_GRAY },\n { name: \"white\", color: WHITE },\n { name: \"transparent\", color: TRANSPARENT },\n]\n" }, { "path": "common/src/connection-utils.ts", "content": "import * as _ from \"lodash\"\nimport { maybeChangeContainerForConnection } from \"../../frontend/src/board/item-setcontainer\"\nimport {\n AttachmentLocation,\n AttachmentSide,\n Board,\n Connection,\n ConnectionEndPoint,\n ConnectionEndPointToItem,\n getEndPointItemId,\n getItem,\n isItem,\n isItemEndPoint,\n Item,\n ItemAttachmentLocation,\n Point,\n} from \"./domain\"\nimport { centerPoint, containedBy, Rect, subtract } from \"./geometry\"\nimport { getAngleDeg, Vector2 } from \"./vector2\"\n\nexport function resolveEndpoint(e: Point | Item | ConnectionEndPoint, b: Board | Record): Point | Item {\n if (isItemEndPoint(e)) {\n return resolveItemEndpoint(e, b)\n }\n return e\n}\n\nexport function resolveItemEndpoint(e: ConnectionEndPointToItem, b: Board | Record): Item {\n return getItem(b)(getEndPointItemId(e))\n}\n\nexport function findNearestAttachmentLocationForConnectionNode(\n i: Point | Item,\n reference: Point | Item,\n): AttachmentLocation {\n if (!isItem(i)) return { side: \"none\", point: i }\n const options: ItemAttachmentLocation[] = findItemAttachmentLocations(i)\n const from = centerPoint(reference)\n return withStraightestAngle(options, from)!\n}\n\nfunction angleDiff(option: ItemAttachmentLocation, from: Point) {\n const directionFromEndPoint: Vector2 = subtract(from, option.point)\n const endpointDirection = getEndPointDirection(option.side)\n const diff = Math.abs(getAngleDeg(directionFromEndPoint) - getAngleDeg(endpointDirection))\n if (diff > 180) return 360 - diff\n return diff\n}\n\nfunction withStraightestAngle(options: ItemAttachmentLocation[], to: Point) {\n return _.minBy(options, (p) => angleDiff(p, to))\n}\n\nfunction getEndPointDirection(side: AttachmentSide): Vector2 {\n switch (side) {\n case \"top\":\n return Vector2(0, -1)\n case \"right\":\n return Vector2(1, 0)\n case \"bottom\":\n return Vector2(0, 1)\n case \"left\":\n return Vector2(-1, 0)\n }\n}\n\nconst sides: AttachmentSide[] = [\"top\", \"left\", \"bottom\", \"right\"]\n\nfunction findItemAttachmentLocations(i: Item): ItemAttachmentLocation[] {\n return sides.map((side) => findAttachmentLocation(i, side))\n}\n\nfunction p(x: number, y: number) {\n return { x, y }\n}\n\nexport function findAttachmentLocation(i: Item, side: AttachmentSide): ItemAttachmentLocation {\n const margin = 0.1\n switch (side) {\n case \"top\":\n return { item: i, side, point: p(i.x + i.width / 2, i.y - margin) }\n case \"left\":\n return { item: i, side, point: p(i.x - margin, i.y + i.height / 2) }\n case \"right\":\n return { item: i, side, point: p(i.x + i.width + margin, i.y + i.height / 2) }\n case \"bottom\":\n return { item: i, side, point: p(i.x + i.width / 2, i.y + i.height + margin) }\n }\n}\n\nfunction findMidpoint(fromCoords: AttachmentLocation, toCoords: AttachmentLocation) {\n const midpoint = {\n x: mid(fromCoords.point.x, toCoords.point.x),\n y: mid(fromCoords.point.y, toCoords.point.y),\n }\n if (toCoords.side === \"left\" || toCoords.side === \"right\") {\n return {\n x: midpoint.x,\n y: mid(midpoint.y, toCoords.point.y),\n }\n }\n if (toCoords.side === \"top\" || toCoords.side === \"bottom\") {\n return {\n x: mid(midpoint.x, toCoords.point.x),\n y: midpoint.y,\n }\n }\n if (fromCoords.side === \"left\" || fromCoords.side === \"right\") {\n return {\n x: midpoint.x,\n y: mid(midpoint.y, fromCoords.point.y),\n }\n }\n if (fromCoords.side === \"top\" || fromCoords.side === \"bottom\") {\n return {\n x: mid(midpoint.x, fromCoords.point.x),\n y: midpoint.y,\n }\n }\n return midpoint\n}\n\nfunction attachmentLocation2EndPoint(l: AttachmentLocation): ConnectionEndPoint {\n if (l.side === \"none\") {\n return l.point\n }\n return { side: l.side, id: l.item.id }\n}\n\nexport function rerouteConnection(c: Connection, b: Board): Connection {\n const resolvedFrom = resolveEndpoint(c.from, b)\n const resolvedTo = resolveEndpoint(c.to, b)\n\n let to = findNearestAttachmentLocationForConnectionNode(resolvedTo, resolvedFrom)\n const from = findNearestAttachmentLocationForConnectionNode(resolvedFrom, to.point)\n to = findNearestAttachmentLocationForConnectionNode(resolvedTo, from.point)\n\n const rerouted: Connection = {\n ...c,\n from: attachmentLocation2EndPoint(from),\n to: attachmentLocation2EndPoint(to),\n controlPoints: c.controlPoints.length ? [findMidpoint(from, to)] : [],\n }\n\n const container = maybeChangeContainerForConnection(rerouted, b.items)\n\n return { ...rerouted, containerId: container ? container.id : undefined }\n}\n\nfunction rerouteEndPoint(e: ConnectionEndPoint, from: ConnectionEndPoint, b: Board) {\n return attachmentLocation2EndPoint(\n findNearestAttachmentLocationForConnectionNode(resolveEndpoint(e, b), resolveEndpoint(from, b)),\n )\n}\n\nexport function rerouteByNewControlPoints(c: Connection, controlPoints: Point[], b: Board): Connection {\n const first = controlPoints[0]\n\n return {\n ...c,\n from: rerouteEndPoint(c.from, controlPoints[0] || c.to, b),\n to: rerouteEndPoint(c.to, controlPoints[controlPoints.length - 1] || c.from, b),\n controlPoints,\n }\n}\n\nfunction mid(x: number, y: number) {\n return (x + y) * 0.5\n}\n\nexport const connectionRect = (b: Board | Record) => (c: Connection): Rect => {\n const start = resolveEndpoint(c.from, b)\n const end = resolveEndpoint(c.to, b)\n const allPoints = [start, ...c.controlPoints, end]\n const minX = _.min(allPoints.map((p) => p.x))!\n const maxX = _.max(allPoints.map((p) => p.x))!\n const minY = _.min(allPoints.map((p) => p.y))!\n const maxY = _.max(allPoints.map((p) => p.y))!\n const x = minX\n if (isNaN(x)) {\n throw Error(\"Assertion fail\")\n }\n const y = minY\n const width = maxX - minX\n const height = maxY - minY\n return { x, y, width, height }\n}\n\nexport function isFullyContainedConnection(connection: Connection, item: Item, context: Record | Board) {\n const start = resolveEndpoint(connection.from, context)\n const end = resolveEndpoint(connection.to, context)\n return !isItem(start) && !isItem(end) && containedBy(start, item) && containedBy(end, item)\n}\n" }, { "path": "common/src/domain.ts", "content": "import * as t from \"io-ts\"\nimport * as uuid from \"uuid\"\nimport { LocalStorageBoard } from \"../../frontend/src/store/board-local-store\"\nimport { arrayToRecordById } from \"./arrays\"\nimport { DEFAULT_NOTE_COLOR, LIGHT_BLUE, PINK, RED } from \"./colors\"\nimport { Rect } from \"./geometry\"\n\nexport type Id = string\nexport type ISOTimeStamp = string\n\nexport function newISOTimeStamp(): ISOTimeStamp {\n return new Date().toISOString()\n}\n\nexport function optional>(c: T) {\n return t.union([c, t.undefined, t.null])\n}\n\nexport const CrdtDisabled = undefined\nexport const CrdtEnabled = 1 as const\nexport type CrdtMode = typeof CrdtDisabled | typeof CrdtEnabled\n\nexport type BoardAttributes = {\n id: Id\n name: string\n width: number\n height: number\n accessPolicy?: BoardAccessPolicy\n crdt?: CrdtMode\n}\n\nexport type BoardContents = {\n items: Record\n connections: Connection[]\n}\n\nexport type Board = BoardAttributes &\n BoardContents & {\n serial: Serial\n }\n\nexport type BoardStub = Pick & { templateId?: Id }\n\nexport const AccessLevelCodec = t.union([\n t.literal(\"admin\"),\n t.literal(\"read-write\"),\n t.literal(\"read-only\"),\n t.literal(\"none\"),\n])\nexport type AccessLevel = t.TypeOf\nexport const AccessListEntryCodec = t.union([\n t.type({\n email: t.string,\n access: optional(AccessLevelCodec),\n }),\n t.type({\n domain: t.string,\n access: optional(AccessLevelCodec),\n }),\n])\nexport type AccessListEntry = t.TypeOf\nexport const BoardAccessPolicyDefinedCodec = t.type({\n allowList: t.array(AccessListEntryCodec),\n publicRead: optional(t.boolean),\n publicWrite: optional(t.boolean),\n})\nexport type BoardAccessPolicyDefined = t.TypeOf\nexport const BoardAccessPolicyCodec = t.union([t.undefined, BoardAccessPolicyDefinedCodec])\nexport type BoardAccessPolicy = t.TypeOf\n\nexport type EventUserInfo = UnidentifiedUserInfo | SystemUserInfo | EventUserInfoAuthenticated\n\nexport type UnidentifiedUserInfo = { nickname: string; userType: \"unidentified\" }\nexport type SystemUserInfo = { nickname: string; userType: \"system\" }\n\nexport type EventUserInfoAuthenticated = {\n nickname: string\n userType: \"authenticated\"\n name: string\n email: string\n userId: string\n}\n\nexport type SessionUserInfo = UnidentifiedUserInfo | SystemUserInfo | SessionUserInfoAuthenticated\n\nexport type SessionUserInfoAuthenticated = {\n nickname: string\n userType: \"authenticated\"\n name: string\n email: string\n picture: string | undefined\n userId: string\n domain: string | null\n}\n\nexport type UserSessionInfo = SessionUserInfo & {\n sessionId: Id\n}\n\nexport type BoardHistoryEntry = {\n user: EventUserInfo\n timestamp: ISOTimeStamp\n serial?: Serial\n firstSerial?: Serial\n} & PersistableBoardItemEvent\nexport type BoardWithHistory = { board: Board; history: BoardHistoryEntry[] }\nexport type CompactBoardHistory = { boardAttributes: BoardAttributes; history: BoardHistoryEntry[] }\n\nexport const defaultBoardSize = { width: 800, height: 600 }\n\nexport interface CursorPosition {\n x: number\n y: number\n}\n\nexport type UserCursorPosition = CursorPosition & {\n sessionId: Id\n}\n\nexport type BoardCursorPositions = Record\n\nexport type Color = string\n\nexport type ItemBounds = { x: number; y: number; width: number; height: number; z: number }\nexport type LockState = false | \"locked\" | \"read-only\"\nexport type ItemProperties = { id: string; containerId?: string; locked: LockState; hidden?: boolean } & ItemBounds\n\nexport const ITEM_TYPES = {\n NOTE: \"note\",\n TEXT: \"text\",\n IMAGE: \"image\",\n VIDEO: \"video\",\n CONTAINER: \"container\",\n} as const\nexport type ItemType = typeof ITEM_TYPES[keyof typeof ITEM_TYPES]\nexport type QuillDelta = any // TODO: define this properly\nexport type TextItemProperties = ItemProperties & {\n text: string\n fontSize?: number\n align?: Align\n crdt?: CrdtMode\n textAsDelta?: QuillDelta\n}\nexport type NoteShape = \"round\" | \"square\" | \"rect\" | \"diamond\"\nexport type Note = TextItemProperties & {\n type: typeof ITEM_TYPES.NOTE\n color: Color\n shape: NoteShape | undefined\n}\nexport type Text = TextItemProperties & { type: typeof ITEM_TYPES.TEXT; color: Color }\nexport type Image = ItemProperties & { type: typeof ITEM_TYPES.IMAGE; assetId: string; src?: string }\nexport type Video = ItemProperties & { type: typeof ITEM_TYPES.VIDEO; assetId: string; src?: string }\nexport type Container = TextItemProperties & {\n type: typeof ITEM_TYPES.CONTAINER\n color: Color\n contentsHidden?: boolean\n}\n\nexport type Point = { x: number; y: number }\nexport function Point(x: number, y: number) {\n return { x, y }\n}\nexport const isPoint = (u: unknown): u is Point => typeof u === \"object\" && !!u && \"x\" in u && \"y\" in u\nexport type ConnectionEndStyle = \"none\" | \"arrow\" | \"black-dot\"\nexport type Connection = {\n id: Id\n from: ConnectionEndPoint\n controlPoints: Point[]\n to: ConnectionEndPoint\n containerId?: string\n locked: LockState\n fromStyle: ConnectionEndStyle\n toStyle: ConnectionEndStyle\n pointStyle: \"none\" | \"black-dot\"\n action: \"connect\" | \"line\"\n hidden?: boolean\n}\nexport type ConnectionEndPoint = Point | ConnectionEndPointToItem\nexport type ConnectionEndPointToItem = Id | ConectionEndPointDirectedToItem\nexport type ConectionEndPointDirectedToItem = { id: Id; side: AttachmentSide }\nexport function getEndPointItemId(e: ConnectionEndPointToItem) {\n if (typeof e === \"string\") return e\n return e.id\n}\nexport function isItemEndPoint(e: ConnectionEndPoint): e is ConnectionEndPointToItem {\n if (typeof e === \"string\") return true\n if (\"side\" in e) return true\n return false\n}\nexport function isDirectedItemEndPoint(e: ConnectionEndPoint): e is ConectionEndPointDirectedToItem {\n return isItemEndPoint(e) && typeof e === \"object\"\n}\nexport type AttachmentSide = \"left\" | \"right\" | \"top\" | \"bottom\"\nexport type AttachmentLocation = { side: \"none\"; point: Point } | ItemAttachmentLocation\nexport type ItemAttachmentLocation = { side: AttachmentSide; point: Point; item: Item }\n\nexport type RenderableConnection = Omit & {\n from: AttachmentLocation\n to: AttachmentLocation\n}\n\nexport type TextItem = Note | Text | Container\nexport type ColoredItem = Item & { color: Color }\nexport type ShapedItem = Note\nexport type Item = TextItem | Image | Video\nexport type ItemLocks = Record\n\nexport type RecentBoardAttributes = { id: Id; name: string }\nexport type RecentBoard = RecentBoardAttributes & { opened: ISOTimeStamp; userEmail: string | null }\n\nexport type BoardEvent = { boardId: Id }\nexport type UIEvent = BoardItemEvent | ClientToServerRequest | LocalUIEvent\nexport type LocalUIEvent = Undo | Redo | SetLocalBoard | GoOnline | BoardLoggedOut | GoOffline | TextFormat\nexport type EventFromServer = BoardHistoryEntry | BoardStateSyncEvent | LoginResponse | AckAddBoard | ServerConfig\nexport type ServerConfig = {\n action: \"server.config\"\n authSupported: boolean\n assetStorageURL: string\n crdt: \"true\" | \"false\" | \"opt-in\" | \"opt-in-authenticated\"\n}\nexport type Serial = number\nexport type AppEvent =\n | BoardItemEvent\n | BoardStateSyncEvent\n | LocalUIEvent\n | ClientToServerRequest\n | LoginResponse\n | AckAddBoard\n | ServerConfig\nexport type EventWrapper = {\n events: AppEvent[]\n ackId?: string\n}\nexport type PersistableBoardItemEvent =\n | AddItem\n | UpdateItem\n | MoveItem\n | DeleteItem\n | AddConnection\n | ModifyConnection\n | DeleteConnection\n | IncreaseItemFont\n | DecreaseItemFont\n | BringItemToFront\n | BootstrapBoard\n | RenameBoard\n | SetBoardAccessPolicy\nexport type BoardInit = InitBoardNew | InitBoardDiff\nexport type TransientBoardItemEvent = LockItem | UnlockItem\nexport type BoardItemEvent = PersistableBoardItemEvent | TransientBoardItemEvent\nexport type BoardStateSyncEvent =\n | BoardInit\n | RecentBoardsFromServer\n | GotBoardLocks\n | CursorPositions\n | JoinedBoard\n | LeftBoard\n | UserLoggedIn\n | AckJoinBoard\n | DeniedJoinBoard\n | UserInfoUpdate\n | ActionApplyFailed\n | AssetPutUrlResponse\n | Ack\n | BringAllToMe\n\nexport type ClientToServerRequest =\n | CursorMove\n | AddBoard\n | LockItem\n | UnlockItem\n | JoinBoard\n | AssociateBoard\n | DissociateBoard\n | SetNickname\n | AssetPutUrlRequest\n | AuthJWTLogin\n | UserLoggedIn\n | AuthLogout\n | Ping\n | BringAllToMe\n\nexport type LoginResponse =\n | { action: \"auth.login.response\"; success: false }\n | { action: \"auth.login.response\"; success: true; userId: string }\nexport type AddConnection = { action: \"connection.add\"; boardId: Id; connections: Connection[] }\nexport type ModifyConnection = { action: \"connection.modify\"; boardId: Id; connections: Connection[] }\nexport type DeleteConnection = { action: \"connection.delete\"; boardId: Id; connectionIds: Id[] }\nexport type UserLoggedIn = {\n action: \"user.login\"\n name: string\n email: string\n picture: string | undefined\n}\nexport type AuthJWTLogin = {\n action: \"auth.login.jwt\"\n jwt: string\n}\nexport type AuthLogout = { action: \"auth.logout\" }\nexport type Ping = { action: \"ping\" }\nexport type AddItem = { action: \"item.add\"; boardId: Id; items: Item[]; connections: Connection[] }\nexport type UpdateItem = { action: \"item.update\"; boardId: Id; items: ItemUpdate[]; connections?: ConnectionUpdate[] }\nexport type Update = Partial & { id: Id }\nexport type ItemUpdate = Update\nexport type ConnectionUpdate = Update\nexport type MoveItem = {\n action: \"item.move\"\n boardId: Id\n items: { id: Id; x: number; y: number; containerId?: Id | undefined }[]\n connections: { id: Id; x: number; y: number }[] // Coordinates are for connection start point.\n}\nexport type IncreaseItemFont = { action: \"item.font.increase\"; boardId: Id; itemIds: Id[] }\nexport type DecreaseItemFont = { action: \"item.font.decrease\"; boardId: Id; itemIds: Id[] }\nexport type BringItemToFront = { action: \"item.front\"; boardId: Id; itemIds: Id[] }\nexport type DeleteItem = { action: \"item.delete\"; boardId: Id; itemIds: Id[]; connectionIds: Id[] }\nexport type BootstrapBoard = { action: \"item.bootstrap\"; boardId: Id } & BoardContents\nexport type LockItem = { action: \"item.lock\"; boardId: Id; itemId: Id }\nexport type UnlockItem = { action: \"item.unlock\"; boardId: Id; itemId: Id }\nexport type GotBoardLocks = { action: \"board.locks\"; boardId: Id; locks: ItemLocks }\nexport type AddBoard = { action: \"board.add\"; payload: Board | BoardStub }\nexport type AckAddBoard = { action: \"board.add.ack\"; boardId: Id }\nexport type JoinBoard = { action: \"board.join\"; boardId: Id; initAtSerial?: Serial }\nexport type BringAllToMe = { action: \"user.bringAllToMe\"; boardId: Id; sessionId: Id; viewRect: Rect; nickname: string }\nexport type AssociateBoard = { action: \"board.associate\"; boardId: Id; lastOpened: ISOTimeStamp }\nexport type DissociateBoard = { action: \"board.dissociate\"; boardId: Id }\nexport type SetBoardAccessPolicy = {\n action: \"board.setAccessPolicy\"\n boardId: Id\n accessPolicy: BoardAccessPolicyDefined\n}\nexport type AckJoinBoard = { action: \"board.join.ack\"; boardId: Id } & UserSessionInfo\nexport type DeniedJoinBoard =\n | {\n action: \"board.join.denied\"\n boardId: Id\n reason: \"unauthorized\" | \"forbidden\" | \"not found\"\n }\n | {\n action: \"board.join.denied\"\n boardId: Id\n reason: \"redirect\"\n wsAddress: string\n }\nexport type RecentBoardsFromServer = { action: \"user.boards\"; email: string; boards: RecentBoard[] }\nexport type Ack = { action: \"ack\"; ackId: string; serials: Record }\nexport type ActionApplyFailed = { action: \"board.action.apply.failed\" }\nexport type JoinedBoard = { action: \"board.joined\"; boardId: Id } & UserSessionInfo\nexport type LeftBoard = { action: \"board.left\"; boardId: Id; sessionId: Id }\nexport type UserInfoUpdate = { action: \"userinfo.set\" } & UserSessionInfo\nexport type InitBoardNew = { action: \"board.init\"; board: Board; accessLevel: AccessLevel }\nexport type InitBoardDiff = {\n action: \"board.init.diff\"\n initAtSerial: Serial\n first: boolean\n last: boolean\n recentEvents: BoardHistoryEntry[]\n boardAttributes: BoardAttributes\n accessLevel: AccessLevel\n}\nexport type RenameBoard = { action: \"board.rename\"; boardId: Id; name: string }\nexport type CursorMove = { action: \"cursor.move\"; position: CursorPosition; boardId: Id }\nexport type SetNickname = { action: \"nickname.set\"; nickname: string }\nexport type AssetPutUrlRequest = { action: \"asset.put.request\"; assetId: string }\nexport type AssetPutUrlResponse = { action: \"asset.put.response\"; assetId: string; signedUrl: string }\nexport type Undo = { action: \"ui.undo\" }\nexport type Redo = { action: \"ui.redo\" }\nexport type TextFormat = { action: \"ui.text.format\"; itemIds: Id[]; format: \"bold\" | \"italic\" | \"underline\" }\n\nexport type SetLocalBoard = {\n action: \"ui.board.setLocal\"\n boardId: Id | undefined\n storedInitialState: LocalStorageBoard | undefined\n}\nexport type BoardLoggedOut = { action: \"ui.board.logged.out\"; boardId: Id }\nexport type GoOffline = { action: \"ui.offline\" }\nexport type GoOnline = { action: \"ui.online\" }\n\nexport const CURSOR_POSITIONS_ACTION_TYPE = \"c\" as const\nexport type CursorPositions = { action: typeof CURSOR_POSITIONS_ACTION_TYPE; p: Record }\n\nexport const exampleBoard: Board = {\n id: \"default\",\n name: \"Test Board\",\n items: arrayToRecordById([\n newNote(\"Hello\", PINK, 10, 5),\n newNote(\"World\", LIGHT_BLUE, 20, 10),\n newNote(\"Welcome\", RED, 5, 14),\n ]),\n connections: [],\n ...defaultBoardSize,\n serial: 0,\n}\n\nexport function newBoard(name: string, crdt?: CrdtMode, accessPolicy?: BoardAccessPolicy): Board {\n return { id: uuid.v4(), name, items: {}, accessPolicy, connections: [], ...defaultBoardSize, serial: 0, crdt }\n}\n\nexport function newNote(\n text: string,\n color: Color = DEFAULT_NOTE_COLOR,\n x: number = 20,\n y: number = 20,\n width: number = 5,\n height: number = 5,\n shape: NoteShape = \"square\",\n z: number = 0,\n): Note {\n return { id: uuid.v4(), type: \"note\", text, color, x, y, width, height, z, shape, locked: false }\n}\n\nexport function newSimilarNote(note: Note) {\n return newNote(\"HELLO\", note.color, 20, 20, note.width, note.height, note.shape)\n}\n\nexport function newText(\n crdt: CrdtMode,\n text: string = \"HELLO\",\n x: number = 20,\n y: number = 20,\n width: number = 5,\n height: number = 2,\n z: number = 0,\n): Text {\n return {\n id: uuid.v4(),\n type: \"text\",\n text,\n x,\n y,\n width,\n height,\n z,\n color: \"none\",\n locked: false,\n crdt,\n }\n}\n\nexport function newContainer(\n crdt: CrdtMode,\n x: number = 20,\n y: number = 20,\n width: number = 30,\n height: number = 20,\n z: number = 0,\n): Container {\n return {\n id: uuid.v4(),\n type: \"container\",\n text: \"Unnamed area\",\n x,\n y,\n width,\n height,\n z,\n color: \"white\",\n locked: false,\n crdt,\n }\n}\n\nexport function newImage(\n assetId: string,\n x: number = 20,\n y: number = 20,\n width: number = 5,\n height: number = 5,\n z: number = 0,\n): Image {\n return { id: uuid.v4(), type: \"image\", assetId, x, y, width, height, z, locked: false }\n}\n\nexport function newVideo(\n assetId: string,\n x: number = 20,\n y: number = 20,\n width: number = 5,\n height: number = 5,\n z: number = 0,\n): Video {\n return { id: uuid.v4(), type: \"video\", assetId, x, y, width, height, z, locked: false }\n}\n\nexport const isBoardItemEvent = (a: AppEvent): a is BoardItemEvent =>\n a.action.startsWith(\"item.\") ||\n a.action.startsWith(\"connection.\") ||\n a.action === \"board.rename\" ||\n a.action === \"board.setAccessPolicy\"\n\nexport const isPersistableBoardItemEvent = (e: any): e is PersistableBoardItemEvent =>\n isBoardItemEvent(e) && ![\"item.lock\", \"item.unlock\"].includes(e.action)\n\nexport const isBoardHistoryEntry = (e: AppEvent): e is BoardHistoryEntry =>\n isPersistableBoardItemEvent(e) && !!(e as BoardHistoryEntry).user && !!(e as BoardHistoryEntry).timestamp\nexport const isLocalUIEvent = (e: AppEvent): e is LocalUIEvent => e.action.startsWith(\"ui.\")\nexport const isCursorMove = (e: AppEvent): e is CursorMove => e.action === \"cursor.move\"\nexport function isSameUser(a: EventUserInfo, b: EventUserInfo) {\n return a.userType == b.userType && a.nickname == b.nickname\n}\n\nexport function isColoredItem(i: Item): i is ColoredItem {\n return i.type === \"note\" || i.type === \"container\" || i.type === \"text\"\n}\n\nexport function isShapedItem(i: Item): i is ShapedItem {\n return i.type === \"note\"\n}\n\nexport function isTextItem(i: Item): i is TextItem {\n return i.type === \"note\" || i.type === \"text\" || i.type === \"container\"\n}\n\nexport function isNote(i: Item): i is Note {\n return i.type === \"note\"\n}\n\nexport function isContainer(i: Item): i is Container {\n return i.type === \"container\"\n}\n\nexport function isText(i: Item): i is Text {\n return i.type === \"text\"\n}\n\nexport function isItem(i: Item | Point | Connection): i is Item {\n return \"type\" in i\n}\n\nexport function getItemText(i: Item) {\n if (isTextItem(i)) return i.text\n return \"\"\n}\n\nexport function getItemBackground(i: Item) {\n if (isColoredItem(i)) {\n return i.color || \"white\" // Default for legacy containers\n }\n return \"none\"\n}\n\nexport function getItemShape(i: Item) {\n return i.type === \"note\" && i.shape ? i.shape : \"rect\"\n}\n\ntype NamespacedEvent = T extends { action: `${Namespace}.${string}` }\n ? T\n : never\n\nexport function actionNamespaceIs(\n ns: Namespace,\n a: AppEvent,\n): a is NamespacedEvent {\n return a.action.startsWith(ns + \".\")\n}\n\nexport function getItemIds(e: BoardHistoryEntry | PersistableBoardItemEvent): Id[] {\n switch (e.action) {\n case \"item.front\":\n case \"item.delete\":\n case \"item.font.decrease\":\n case \"item.font.increase\":\n return e.itemIds\n case \"item.move\":\n return e.items.map((i) => i.id)\n case \"item.update\":\n return e.items.map((i) => i.id)\n case \"item.add\":\n return e.items.map((i) => i.id)\n case \"item.bootstrap\":\n return Object.keys(e.items)\n case \"board.rename\":\n case \"board.setAccessPolicy\":\n case \"connection.add\":\n case \"connection.modify\":\n case \"connection.delete\":\n return []\n }\n}\n\nexport const getItem = (boardOrItems: Board | Record) => (id: Id) => {\n const item = findItem(boardOrItems)(id)\n if (!item) throw Error(\"Item not found: \" + id)\n return item\n}\n\nexport const getConnection = (b: Board) => (id: Id) => {\n const conn = b.connections.find((c) => c.id === id)\n if (!conn) throw Error(\"Connection not found: \" + id)\n return conn\n}\n\nexport const findItem = (boardOrItems: Board | Record) => (id: Id): Item | null => {\n const items = getItems(boardOrItems)\n const item = items[id]\n return item || null\n}\n\nexport const findConnection = (board: Board) => (id: Id) => {\n const conn = board.connections.find((c) => c.id === id)\n return conn || null\n}\n\nexport function findItemIdsRecursively(ids: Id[], board: Board): Set {\n const recursiveIds = new Set()\n const addIdRecursively = (id: Id) => {\n recursiveIds.add(id)\n Object.values(board.items).forEach((i) => i.containerId === id && addIdRecursively(i.id))\n }\n ids.forEach(addIdRecursively)\n return recursiveIds\n}\n\nexport function findItemsRecursively(ids: Id[], board: Board): Item[] {\n const recursiveIds = findItemIdsRecursively(ids, board)\n return [...recursiveIds].map(getItem(board))\n}\n\nexport const isContainedBy = (boardOrItems: Board | Record, parentCandidate: Item) => (\n i: Item,\n): boolean => {\n if (!i.containerId) return false\n if (i.containerId === parentCandidate!.id) return true\n const itemsOnBoard = getItems(boardOrItems)\n const parent = findItem(itemsOnBoard)(i.containerId)\n if (i.containerId === i.id) throw Error(\"Self-contained\")\n if (parent == i) throw Error(\"self parent\")\n if (!parent) return false // Don't fail here, because when folding create+move, the action is run in an incomplete board context\n return isContainedBy(boardOrItems, parentCandidate)(parent)\n}\n\nconst isBoard = (u: unknown): u is Board => typeof u === \"object\" && !!u && \"items\" in u\n\nconst getItems = (boardOrItems: Board | Record) =>\n isBoard(boardOrItems) ? boardOrItems.items : boardOrItems\n\nexport function isBoardEmpty(board: Board) {\n return board.connections.length === 0 && Object.values(board.items).length === 0\n}\n\nexport function getBoardAttributes(board: Board, userInfo?: EventUserInfo): BoardAttributes {\n const accessPolicy = board.accessPolicy\n ? userInfo && userInfo.userType === \"authenticated\"\n ? board.accessPolicy\n : { ...board.accessPolicy, allowList: [] } // Anonymize access policy for anonymous users\n : undefined\n return {\n id: board.id,\n name: board.name,\n width: board.width,\n height: board.height,\n accessPolicy,\n }\n}\n\nexport const BOARD_ITEM_BORDER_MARGIN = 0.5\n\nexport function checkBoardAccess(accessPolicy: BoardAccessPolicy | undefined, userInfo: SessionUserInfo): AccessLevel {\n if (!accessPolicy) return \"read-write\"\n let accessLevel: AccessLevel = accessPolicy.publicWrite\n ? \"read-write\"\n : accessPolicy.publicRead\n ? \"read-only\"\n : \"none\"\n if (userInfo.userType === \"unidentified\" || userInfo.userType === \"system\") {\n return accessLevel\n }\n const email = userInfo.email\n const domain = userInfo.domain\n\n const defaultAccess = \"read-write\"\n for (let entry of accessPolicy.allowList) {\n const nextLevel =\n \"email\" in entry && entry.email === email\n ? entry.access || defaultAccess\n : \"domain\" in entry && domain === entry.domain\n ? entry.access || defaultAccess\n : \"none\"\n accessLevel = combineAccessLevels(accessLevel, nextLevel)\n }\n return accessLevel\n}\n\nfunction combineAccessLevels(a: AccessLevel, b: AccessLevel): AccessLevel {\n if (a === \"admin\" || b === \"admin\") return \"admin\"\n if (a === \"read-write\" || b === \"read-write\") return \"read-write\"\n if (a === \"read-only\" || b === \"read-only\") return \"read-only\"\n return \"none\"\n}\n\nexport function canRead(a: AccessLevel) {\n return a !== \"none\"\n}\n\nexport function canWrite(a: AccessLevel) {\n return a === \"read-write\" || a === \"admin\"\n}\n\nexport type Align = \"TL\" | \"TC\" | \"TR\" | \"ML\" | \"MC\" | \"MR\" | \"BL\" | \"BC\" | \"BR\"\n\nexport function getAlign(item: TextItem) {\n return item.align ?? (isNote(item) ? \"MC\" : \"TL\")\n}\n\nexport type HorizontalAlign = \"left\" | \"center\" | \"right\"\n\nexport function getHorizontalAlign(align: Align): HorizontalAlign {\n switch (align) {\n case \"TL\":\n case \"ML\":\n case \"BL\":\n return \"left\"\n case \"TC\":\n case \"MC\":\n case \"BC\":\n return \"center\"\n case \"TR\":\n case \"MR\":\n case \"BR\":\n return \"right\"\n }\n console.log(\"Unknown align\", align)\n return \"center\"\n}\n\nexport type VerticalAlign = \"top\" | \"middle\" | \"bottom\"\n\nexport function getVerticalAlign(align: Align): VerticalAlign {\n switch (align) {\n case \"TL\":\n case \"TC\":\n case \"TR\":\n return \"top\"\n case \"ML\":\n case \"MC\":\n case \"MR\":\n return \"middle\"\n case \"BL\":\n case \"BC\":\n case \"BR\":\n return \"bottom\"\n }\n console.log(\"Unknown align\", align)\n return \"middle\"\n}\n\nexport function setHorizontalAlign(item: I, a: HorizontalAlign): ItemUpdate {\n const letter = a === \"left\" ? \"L\" : a === \"center\" ? \"C\" : \"R\"\n const align = `${getAlign(item)[0]}${letter}`\n return { id: item.id, align } as ItemUpdate\n}\n\nexport function setVerticalAlign(item: I, a: VerticalAlign): ItemUpdate {\n const letter = a === \"top\" ? \"T\" : a === \"middle\" ? \"M\" : \"B\"\n const align = `${letter}${getAlign(item)[1]}`\n return { id: item.id, align } as ItemUpdate\n}\n" }, { "path": "common/src/geometry.ts", "content": "import { Point } from \"./domain\"\nexport const origin = { x: 0, y: 0 }\nexport type Coordinates = { x: number; y: number }\nexport type Dimensions = { width: number; height: number }\nexport type Rect = { x: number; y: number; width: number; height: number }\nexport const ZERO_RECT = { x: 0, y: 0, height: 0, width: 0 }\nexport function add(a: Coordinates, b: Coordinates) {\n return { x: a.x + b.x, y: a.y + b.y }\n}\n\nexport function subtract(a: Coordinates, b: Coordinates) {\n return { x: a.x - b.x, y: a.y - b.y }\n}\n\nexport function negate(a: Coordinates) {\n return { x: -a.x, y: -a.y }\n}\n\nexport function multiply(a: Coordinates, factor: number) {\n return { x: a.x * factor, y: a.y * factor }\n}\n\nexport function overlaps(a: Rect, b: Rect) {\n if (b.x >= a.x + a.width) return false\n if (b.x + b.width <= a.x) return false\n if (b.y >= a.y + a.height) return false\n if (b.y + b.height <= a.y) return false\n return true\n}\n\nexport function equalRect(a: Rect, b: Rect) {\n return a.x == b.x && a.y == b.y && a.width == b.width && a.height == b.height\n}\n\nexport function distance(a: Coordinates, b: Coordinates) {\n return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))\n}\n\nexport function containedBy(a: Point, b: Rect): boolean\nexport function containedBy(a: Rect, b: Rect): boolean\nexport function containedBy(a: Rect | Point, b: Rect) {\n if (\"width\" in a) {\n return a.x > b.x && a.y > b.y && a.x + a.width < b.x + b.width && a.y + a.height < b.y + b.height\n } else {\n return a.x > b.x && a.y > b.y && a.x < b.x + b.width && a.y < b.y + b.height\n }\n}\n\nexport function rectFromPoints(a: Coordinates, b: Coordinates) {\n const x = Math.min(a.x, b.x)\n const y = Math.min(a.y, b.y)\n\n const width = Math.abs(a.x - b.x)\n const height = Math.abs(a.y - b.y)\n\n return { x, y, width, height }\n}\n\nexport function isRect(i: Point | Rect): i is Rect {\n return \"width\" in i\n}\n\nexport function centerPoint(i: Point | Rect) {\n if (isRect(i)) {\n return {\n x: i.x + i.width / 2,\n y: i.y + i.height / 2,\n }\n }\n return i\n}\n" }, { "path": "common/src/migration.test.ts", "content": "import { describe, expect, it } from \"vitest\"\nimport { arrayToRecordById } from \"./arrays\"\nimport {\n AddConnection,\n AddItem,\n Board,\n Connection,\n ConnectionEndPoint,\n DeleteConnection,\n DeleteItem,\n ModifyConnection,\n MoveItem,\n defaultBoardSize,\n exampleBoard,\n newISOTimeStamp,\n} from \"./domain\"\nimport { migrateBoard, migrateEvent } from \"./migration\"\n\ndescribe(\"Migration\", () => {\n describe(\"Migrate board\", () => {\n it(\"Migrates boards correctly\", () => {\n const containedNoteWithNoType = {\n id: \"a\",\n x: 1,\n y: 1,\n width: 1,\n height: 1,\n text: \"note a\",\n color: \"yellow\",\n }\n const containedNote2 = {\n type: \"note\",\n id: \"b\",\n x: 2,\n y: 2,\n width: 1,\n height: 1,\n text: \"note b\",\n color: \"yellow\",\n }\n const unContainedNoteWithNoDimensions = {\n type: \"note\",\n id: \"c\",\n x: 3,\n y: 3,\n text: \"note c\",\n color: \"yellow\",\n }\n const oldFormContainerWithItemsAndNoText = {\n type: \"container\",\n id: \"d\",\n x: 0,\n y: 0,\n width: 5,\n height: 5,\n items: [\"a\", \"b\"],\n }\n\n const legacyBoard: any = {\n id: \"foo\",\n name:\n \"board with no size, where containers have items property and items do not have containerId property\",\n items: [\n containedNoteWithNoType,\n containedNote2,\n unContainedNoteWithNoDimensions,\n oldFormContainerWithItemsAndNoText,\n ],\n }\n\n const board = migrateBoard(legacyBoard)\n\n expect(board).toEqual({\n ...legacyBoard,\n ...defaultBoardSize,\n connections: [],\n items: arrayToRecordById([\n { ...containedNoteWithNoType, type: \"note\", containerId: \"d\", z: 0, locked: false },\n { ...containedNote2, containerId: \"d\", z: 0, locked: false },\n { ...unContainedNoteWithNoDimensions, width: 5, height: 5, z: 0, locked: false },\n { type: \"container\", id: \"d\", x: 0, y: 0, width: 5, height: 5, z: 0, text: \"\", locked: false },\n ]),\n })\n })\n it(\"Removes broken connections\", () => {\n const borkenEndpoint: ConnectionEndPoint = { id: \"asdf\", side: \"bottom\" }\n\n const b: Board = {\n ...exampleBoard,\n connections: [\n {\n from: borkenEndpoint,\n to: borkenEndpoint,\n id: \"asfdoi\",\n controlPoints: [],\n fromStyle: \"none\",\n toStyle: \"none\",\n pointStyle: \"none\",\n action: \"connect\",\n locked: false,\n },\n ],\n }\n\n expect(migrateBoard(b)).toEqual(exampleBoard)\n })\n\n it(\"Sets connection end styles\", () => {\n const b: Board = {\n ...exampleBoard,\n connections: [{ from: { x: 0, y: 0 }, to: { x: 0, y: 0 }, id: \"asfdoi\", controlPoints: [] } as any],\n }\n\n expect(migrateBoard(b)).toEqual({\n ...exampleBoard,\n connections: [\n {\n from: { x: 0, y: 0 },\n to: { x: 0, y: 0 },\n id: \"asfdoi\",\n controlPoints: [],\n fromStyle: \"black-dot\",\n toStyle: \"arrow\",\n pointStyle: \"black-dot\",\n action: \"connect\",\n locked: false,\n } as Connection,\n ],\n })\n })\n })\n describe(\"Migrate event\", () => {\n const headers = {\n user: { userType: \"unidentified\", nickname: \"asdf\" },\n timestamp: newISOTimeStamp(),\n boardId: \"\",\n }\n it(\"connection.add\", () => {\n const connection = { from: \"a\", to: \"b\", controlPoints: [], id: \"c\" }\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.add\",\n connection,\n } as any) as AddConnection).connections,\n ).toEqual([connection])\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.add\",\n connection: [connection],\n } as any) as AddConnection).connections,\n ).toEqual([connection])\n })\n\n it(\"connection.modify\", () => {\n const connection = { from: \"a\", to: \"b\", controlPoints: [], id: \"c\" }\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.modify\",\n connection,\n } as any) as ModifyConnection).connections,\n ).toEqual([connection])\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.modify\",\n connection: [connection],\n } as any) as ModifyConnection).connections,\n ).toEqual([connection])\n })\n\n it(\"connection.delete\", () => {\n const connectionId = \"c\"\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.delete\",\n connectionId,\n } as any) as DeleteConnection).connectionIds,\n ).toEqual([connectionId])\n expect(\n (migrateEvent({\n ...headers,\n action: \"connection.delete\",\n connectionId: [connectionId],\n } as any) as DeleteConnection).connectionIds,\n ).toEqual([connectionId])\n })\n\n it(\"item.move\", () => {\n expect(\n (migrateEvent({\n ...headers,\n action: \"item.move\",\n items: [],\n } as any) as MoveItem).connections,\n ).toEqual([])\n })\n\n it(\"item.delete\", () => {\n expect(\n (migrateEvent({\n ...headers,\n action: \"item.delete\",\n itemIds: [],\n } as any) as DeleteItem).connectionIds,\n ).toEqual([])\n })\n\n it(\"item.add\", () => {\n expect(\n (migrateEvent({\n ...headers,\n action: \"item.add\",\n items: [],\n } as any) as AddItem).connections,\n ).toEqual([])\n })\n })\n})\n" }, { "path": "common/src/migration.ts", "content": "import { isArray } from \"lodash\"\nimport { arrayToRecordById, toArray } from \"./arrays\"\nimport { resolveEndpoint } from \"./connection-utils\"\nimport { Board, BoardHistoryEntry, Container, Connection, defaultBoardSize, Id, Item, Serial } from \"./domain\"\n\nexport function mkBootStrapEvent(boardId: Id, snapshot: Board, serial: Serial = 1) {\n return {\n action: \"item.bootstrap\",\n boardId,\n items: snapshot.items,\n connections: snapshot.connections,\n timestamp: new Date().toISOString(),\n user: { nickname: \"admin\", userType: \"system\" },\n serial,\n } as BoardHistoryEntry\n}\n\nexport function migrateBoard(origBoard: Board) {\n const board = { ...origBoard }\n const items: Item[] = []\n const width = Math.max(board.width || 0, defaultBoardSize.width)\n const height = Math.max(board.height || 0, defaultBoardSize.height)\n for (const item of Object.values(board.items)) {\n if (items.find((i) => i.id === item.id)) {\n console.warn(\"Duplicate item\", item, \"found on table\", board.name)\n } else {\n items.push(migrateItem(item, items, board.items))\n }\n }\n if (board.accessPolicy) {\n if (!board.accessPolicy.allowList.some((e) => e.access === \"admin\")) {\n console.log(`No board admin for board ${board.id} -> mapping all read-write users as admins`)\n board.accessPolicy.allowList = board.accessPolicy.allowList.map((e) => ({\n ...e,\n access: e.access === \"read-write\" ? \"admin\" : e.access,\n }))\n }\n }\n\n const connections = (board.connections ?? [])\n .filter((c) => {\n try {\n resolveEndpoint(c.from, board)\n resolveEndpoint(c.to, board)\n } catch (e) {\n console.error(`Error resolving connection ${JSON.stringify(c)}`)\n return false\n }\n return true\n })\n .map(migrateConnection)\n\n return { ...board, connections, width, height, items: arrayToRecordById(items) }\n}\n\nfunction migrateConnection(c: Connection): Connection {\n c =\n c.fromStyle && c.fromStyle !== (\"white-dot\" as any) && c.toStyle && c.pointStyle\n ? c\n : { ...c, fromStyle: \"black-dot\", toStyle: \"arrow\", pointStyle: \"black-dot\" }\n c = c.action !== undefined ? c : { ...c, action: \"connect\" }\n c = c.locked !== undefined ? c : { ...c, locked: false }\n return c\n}\n\nfunction migrateItem(item: Item, migratedItems: Item[], boardItems: Record): Item {\n const { width, height, z, type, locked, ...rest } = item\n\n // Force type, width and height for all items\n let fixedItem = {\n type: type || \"note\",\n width: width || 5,\n height: height || 5,\n z: z || 0,\n locked: locked || false,\n ...rest,\n } as Item\n if (fixedItem.type === \"text\") {\n fixedItem.color ??= \"none\"\n }\n if (fixedItem.type === \"container\") {\n let container = fixedItem as Container & { items?: string[] }\n // Force container to have text\n container.text = container.text || \"\"\n // If container had items property, migrate each corresponding item to have containerId of that container instead\n if (container.items) {\n const ids = container.items\n delete container.items\n ids.forEach((i) => {\n const containedItem = migratedItems.find((mi) => mi.id === i) || boardItems[i]\n containedItem && (containedItem.containerId = container.id)\n })\n }\n }\n\n return fixedItem\n}\n\nexport function migrateEvent(event: BoardHistoryEntry): BoardHistoryEntry {\n if (event.action === \"connection.add\") {\n if (!isArray(event.connections)) {\n return { ...event, connections: toArray((event as any).connection) }\n }\n } else if (event.action === \"connection.modify\") {\n if (!isArray(event.connections)) {\n return { ...event, connections: toArray((event as any).connection) }\n }\n } else if (event.action === \"connection.delete\") {\n if (!isArray(event.connectionIds)) {\n return { ...event, connectionIds: toArray((event as any).connectionId) }\n }\n } else if (event.action === \"item.move\") {\n if (!event.connections) {\n return { ...event, connections: [] }\n }\n } else if (event.action === \"item.delete\") {\n if (!event.connectionIds) {\n return { ...event, connectionIds: [] }\n }\n } else if (event.action === \"item.add\") {\n if (!event.connections) {\n return { ...event, connections: [] }\n }\n }\n return event\n}\n" }, { "path": "common/src/sets.ts", "content": "export function toggleInSet(item: T, set: Set) {\n if (set.has(item)) {\n return new Set([...set].filter((i) => i !== item))\n }\n return new Set([...set].concat(item))\n}\n\nexport function difference(setA: Set, setB: Set) {\n let _difference = new Set(setA)\n for (let elem of setB) {\n _difference.delete(elem)\n }\n return _difference\n}\n\nexport const emptySet = () => new Set()\n" }, { "path": "common/src/sleep.ts", "content": "export function sleep(ms: number): Promise {\n return new Promise((resolve) => setTimeout(() => resolve(undefined), ms))\n}\n" }, { "path": "common/src/vector2.ts", "content": "export type Vector2 = { x: number; y: number }\n\nexport function Vector2(x: number, y: number) {\n return { x, y }\n}\n\nexport function getAngleRad(v: Vector2) {\n const unit = withLength(v, 1)\n return Math.atan2(unit.y, unit.x)\n}\n\nexport function getAngleDeg(v: Vector2) {\n return radToDeg(getAngleRad(v))\n}\n\nexport function getLength(v: Vector2) {\n return Math.sqrt(v.x * v.x + v.y * v.y)\n}\n\nexport function withLength(v: Vector2, newLength: number) {\n return multiply(v, newLength / getLength(v))\n}\n\nexport function multiply(v: Vector2, multiplier: number) {\n return Vector2(v.x * multiplier, v.y * multiplier)\n}\n\nexport function add(v: Vector2, other: Vector2) {\n return Vector2(v.x + other.x, v.y + other.y)\n}\n\nexport function rotateRad(v: Vector2, radians: number) {\n var length = getLength(v)\n var currentRadians = getAngleRad(v)\n var resultRadians = radians + currentRadians\n var rotatedUnit = { x: Math.cos(resultRadians), y: Math.sin(resultRadians) }\n return withLength(rotatedUnit, length)\n}\n\nexport function rotateDeg(v: Vector2, degrees: number) {\n return rotateRad(v, degToRad(degrees))\n}\n\nexport function degToRad(degrees: number) {\n return (degrees * 2 * Math.PI) / 360\n}\n\nexport function radToDeg(rad: number) {\n return (rad * 360) / 2 / Math.PI\n}\n" }, { "path": "cypress.json", "content": "{\n \"pluginsFile\": false,\n \"supportFile\": false,\n \"fixturesFolder\": false,\n \"retries\": 2\n}\n" }, { "path": "docker-compose.yaml", "content": "version: \"3.1\"\n\nservices:\n db:\n image: postgres:12\n restart: always\n ports:\n - 13338:5432\n environment:\n POSTGRES_USER: r-board\n POSTGRES_PASSWORD: secret\n\n keycloak-db:\n image: postgres:12\n restart: always\n ports:\n - 13339:5432\n environment:\n POSTGRES_USER: keycloak\n POSTGRES_PASSWORD: secret\n volumes:\n - ./keycloak/keycloak-db.dump:/docker-entrypoint-initdb.d/keycloak-db.dump.sql\n keycloak:\n depends_on:\n - keycloak-db\n image: quay.io/keycloak/keycloak:22.0.5\n command: start-dev --db postgres --db-url jdbc:postgresql://keycloak-db/keycloak --db-username keycloak --db-password secret\n ports:\n - 8080:8080\n environment:\n - KEYCLOAK_ADMIN=admin\n - KEYCLOAK_ADMIN_PASSWORD=admin\n - DATABASE_URL=postgres://keycloak:secreto@keycloak-db:5432/keycloak\n" }, { "path": "frontend/.sassrc", "content": "{\n \"includePaths\": [\"node_modules\"]\n}" }, { "path": "frontend/esbuild.js", "content": "require(\"dotenv\").config()\n\nconst sass = require(\"sass\")\nconst path = require(\"path\")\nconst fs = require(\"fs\")\nconst esbuild = require(\"esbuild\")\nconst rimraf = require(\"rimraf\")\nconst chokidar = require(\"chokidar\")\n\nconst mode = process.argv[2]\n\nif (!mode) {\n throw Error(\"Specify 'build' or 'watch' as argument\")\n}\nconst stubImportsPlugin = (paths) => {\n return {\n name: \"stub-imports\",\n setup(build) {\n const regex = new RegExp(`^(${paths.join(\"|\")})\\$`)\n build.onResolve({ filter: regex }, (args) => ({\n path: args.path,\n namespace: \"stub-imports-namespace\",\n }))\n build.onLoad({ filter: /.*/, namespace: \"stub-imports-namespace\" }, () => ({\n contents: \"{}\",\n loader: \"json\",\n }))\n },\n }\n}\n\nconst sassPlugin = {\n name: \"sass\",\n setup(build) {\n build.onResolve({ filter: /(\\.svg|\\.png)$/ }, (args) => {\n return {\n path: path.resolve(CWD, \"src\", args.path),\n }\n })\n build.onResolve({ filter: /\\.scss$/ }, (args) => {\n return {\n path: path.resolve(args.resolveDir, args.path),\n namespace: \"sass\",\n }\n })\n build.onLoad({ filter: /.*/, namespace: \"sass\" }, (args) => {\n let compiled = sass.renderSync({ file: args.path })\n return {\n contents: compiled.css.toString(),\n loader: \"css\",\n }\n })\n },\n}\n\nconst CWD = process.cwd()\nconst DIST_FOLDER = path.resolve(CWD, \"dist\")\n\nconst envFallback = (envVar, fb = null) => (envVar ? `\"${envVar}\"` : `${fb}`)\n\nasync function build() {\n if (fs.existsSync(DIST_FOLDER)) rimraf.sync(DIST_FOLDER)\n const randomString = Math.random().toString(36).slice(2)\n const outfile = path.resolve(CWD, `dist/bundle.${randomString}.js`)\n const metafile = path.resolve(CWD, `dist/bundle.${randomString}.meta.json`)\n const now = Date.now()\n await esbuild.build({\n entryPoints: [path.resolve(CWD, \"src\", \"index.tsx\")],\n bundle: true,\n minify: mode !== \"watch\",\n outfile,\n metafile,\n sourcemap: true,\n platform: \"browser\",\n plugins: [sassPlugin, stubImportsPlugin([\"path\"])],\n loader: { \".png\": \"file\", \".svg\": \"file\" },\n define: {\n \"process.env.NODE_ENV\": envFallback(process.env.NODE_ENV, `\"development\"`),\n },\n })\n\n fs.writeFileSync(\n path.resolve(CWD, \"dist/index.html\"),\n fs\n .readFileSync(path.resolve(CWD, \"index.tmpl.html\"), \"utf8\")\n .replace(\"JAVASCRIPT_BUNDLE\", `/bundle.${randomString}.js`)\n .replace(\"CSS_BUNDLE\", `/bundle.${randomString}.css`),\n )\n console.log(`Frontend build done, took ${Date.now() - now} ms`)\n}\n\nif (mode === \"build\") {\n build().catch((e) => !console.error(e) && process.exit(1))\n} else if (mode === \"watch\") {\n build()\n .catch((e) => console.error(e))\n .then(() => {\n chokidar\n .watch([path.resolve(CWD, \"src\"), path.resolve(CWD, \"../common/src\")], { ignoreInitial: true })\n .on(\"all\", (...arg) => {\n build().catch((e) => console.error(e))\n })\n })\n} else {\n throw Error(\"Unknown mode: \" + mode)\n}\n" }, { "path": "frontend/index.tmpl.html", "content": "\n \n OurBoard\n \n \n \n \n \n \n \n \n\n \n
\n \n\n" }, { "path": "frontend/package.json", "content": "{\n \"name\": \"rboard-frontend\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@types/cookie\": \"^0.4.0\",\n \"@types/email-validator\": \"^1.0.6\",\n \"@types/js-cookie\": \"^3.0.6\",\n \"@types/lodash\": \"^4.14.161\",\n \"@types/md5\": \"^2.2.1\",\n \"@types/path-to-regexp\": \"^1.7.0\",\n \"@types/pretty-ms\": \"^5.0.1\",\n \"@types/quill\": \"^2.0.14\",\n \"@types/ramda\": \"^0.27.40\",\n \"@types/sanitize-html\": \"^1.27.1\",\n \"bezier-js\": \"^4.0.3\",\n \"binpackingjs\": \"^3.0.2\",\n \"cookie\": \"^0.4.1\",\n \"email-validator\": \"^2.0.4\",\n \"esbuild\": \"^0.8.57\",\n \"fp-ts\": \"^2.9.5\",\n \"harmaja\": \"^0.24\",\n \"harmaja-router\": \"^0.3.3\",\n \"io-ts\": \"^2.2.15\",\n \"js-cookie\": \"^3.0.5\",\n \"jsonwebtoken\": \"^8.5.1\",\n \"jwt-decode\": \"^3.1.2\",\n \"localforage\": \"^1.9.0\",\n \"lodash\": \"^4.17.20\",\n \"lonna\": \"^0.12.2\",\n \"md5\": \"^2.3.0\",\n \"path-to-regexp\": \"^6.2.0\",\n \"pretty-ms\": \"^7.0.1\",\n \"quill\": \"^1.3.7\",\n \"quill-cursors\": \"^4.0.2\",\n \"ramda\": \"^0.27.1\",\n \"rimraf\": \"^3.0.2\",\n \"sanitize-html\": \"^2.3.2\",\n \"sass\": \"^1.32.8\",\n \"uuid\": \"^8.3.0\",\n \"y-indexeddb\": \"^9.0.12\",\n \"y-quill\": \"^0.1.5\",\n \"y-websocket\": \"^1.5.3\",\n \"yjs\": \"^13.6.12\"\n },\n \"scripts\": {\n \"build\": \"node esbuild.js build\",\n \"watch\": \"node esbuild.js watch\",\n \"tsc:watch\": \"tsc --watch --noEmit\"\n },\n \"devDependencies\": {\n \"@types/jsonwebtoken\": \"^8.5.0\",\n \"@types/uuid\": \"^8.3.0\",\n \"chokidar\": \"^3.5.1\",\n \"core-js\": \"^3.8.3\",\n \"cssnano\": \"^4.1.10\",\n \"dotenv\": \"^8.2.0\",\n \"nodemon\": \"^2.0.4\",\n \"npm-run-all\": \"^4.1.5\",\n \"typescript\": \"^5.3\"\n },\n \"browserslist\": [\n \"since 2017-06\"\n ]\n}\n" }, { "path": "frontend/src/app.scss", "content": "@import \"style/variables.scss\";\n@import \"style/global.scss\";\n@import \"style/dashboard.scss\";\n@import \"style/utils.scss\";\n@import \"style/board.scss\";\n@import \"style/tool-layer.scss\";\n@import \"style/header.scss\";\n@import \"style/modal.scss\";\n@import \"style/sharing-modal.scss\";\n@import \"style/user-info-modal.scss\";\n" }, { "path": "frontend/src/board/BoardView.tsx", "content": "import * as H from \"harmaja\"\nimport { componentScope, h, ListView } from \"harmaja\"\nimport * as L from \"lonna\"\nimport {\n Board,\n canWrite,\n findConnection,\n findItem,\n getConnection,\n Id,\n Image,\n Item,\n newNote,\n Note,\n Video,\n} from \"../../../common/src/domain\"\nimport { isFirefox } from \"../components/browser\"\nimport { ModalContainer } from \"../components/ModalContainer\"\nimport { onClickOutside } from \"../components/onClickOutside\"\nimport { isEmbedded } from \"../embedding\"\nimport { AssetStore } from \"../store/asset-store\"\nimport { BoardState, BoardStore, Dispatch } from \"../store/board-store\"\nimport { CursorsStore } from \"../store/cursors-store\"\nimport { UserSessionState } from \"../store/user-session-store\"\nimport { boardCoordinateHelper } from \"./board-coordinates\"\nimport { boardDragHandler } from \"./board-drag\"\nimport {\n BoardFocus,\n getSelectedItemIds,\n getSelectedItem,\n getSelectedItems,\n noFocus,\n getSelectedConnectionIds,\n} from \"./board-focus\"\nimport { boardScrollAndZoomHandler } from \"./board-scroll-and-zoom\"\nimport { BoardToolLayer } from \"./toolbars/BoardToolLayer\"\nimport { ConnectionsView } from \"./ConnectionsView\"\nimport { ContextMenuView } from \"./contextmenu/ContextMenuView\"\nimport { CursorsView } from \"./CursorsView\"\nimport * as G from \"../../../common/src/geometry\"\nimport { imageUploadHandler, imageDropHandler } from \"./image-upload\"\nimport { ImageView } from \"./ImageView\"\nimport { itemCreateHandler } from \"./item-create\"\nimport { cutCopyPasteHandler } from \"./item-cut-copy-paste\"\nimport { itemDeleteHandler } from \"./item-delete\"\nimport { itemDuplicateHandler } from \"./item-duplicate\"\nimport { itemMoveWithArrowKeysHandler } from \"./item-move-with-arrow-keys\"\nimport { itemSelectAllHandler } from \"./item-select-all\"\nimport { withCurrentContainer } from \"./item-setcontainer\"\nimport { itemUndoHandler } from \"./item-undo-redo\"\nimport { ItemView } from \"./ItemView\"\nimport { installKeyboardShortcut, plainKey } from \"./keyboard-shortcuts\"\nimport { RectangularDragSelection } from \"./RectangularDragSelection\"\nimport { SelectionBorder } from \"./SelectionBorder\"\nimport { synchronizeFocusWithServer } from \"./synchronize-focus-with-server\"\nimport { ToolController } from \"./tool-selection\"\nimport { BoardViewHeader } from \"./header/BoardViewHeader\"\nimport { VideoView } from \"./VideoView\"\nimport { startConnecting } from \"./item-connect\"\nimport { emptySet } from \"../../../common/src/sets\"\nimport { installZoomKeyboardShortcuts } from \"./zoom-shortcuts\"\nimport { itemHideContentsHandler } from \"./item-hide-contents\"\n\nconst emptyNote = newNote(\"\")\n\nexport const BoardView = ({\n boardId,\n cursors,\n boardStore,\n sessionState,\n assets,\n dispatch,\n}: {\n boardId: string\n cursors: CursorsStore\n boardStore: BoardStore\n sessionState: L.Property\n assets: AssetStore\n dispatch: Dispatch\n}) => {\n const boardState = boardStore.state\n const board = boardState.pipe(\n L.map((s: BoardState) => s.board!),\n L.filter((b: Board) => !!b, componentScope()),\n )\n const accessLevel = L.view(boardState, \"accessLevel\")\n const locks = L.view(boardState, (s) => s.locks)\n const sessionId = L.view(sessionState, (s) => s.sessionId)\n const sessions = L.view(boardState, (s) => s.users)\n const zoom = L.atom({ zoom: 1, quickZoom: 1 })\n\n const containerElement = L.atom(null)\n const scrollElement = L.atom(null)\n const boardElement = L.atom(null)\n const latestNoteId = L.atom(null)\n const latestNote = L.view(latestNoteId, board, (id, b) => {\n const note = id ? findItem(b)(id) : null\n return (note as Note) || emptyNote\n })\n const latestConnectionId = L.atom(null)\n const latestConnection = L.view(latestConnectionId, board, (id, b) => {\n return id ? findConnection(b)(id) : null\n })\n const focus = synchronizeFocusWithServer(board, locks, sessionId, dispatch)\n const coordinateHelper = boardCoordinateHelper(containerElement, scrollElement, boardElement, zoom)\n const toolController = ToolController()\n const tool = toolController.tool\n\n let previousFocus: BoardFocus | null = null\n focus.forEach((f) => {\n const previousIDs = previousFocus && getSelectedItemIds(previousFocus)\n const itemIds = [...getSelectedItemIds(f)].filter((id) => !previousIDs || !previousIDs.has(id))\n previousFocus = f\n if (itemIds.length > 0) {\n dispatch({ action: \"item.front\", boardId: board.get().id, itemIds })\n const item = getSelectedItem(board.get())(f)\n if (item && item.type === \"note\") {\n latestNoteId.set(item.id)\n }\n }\n const connectionId = [...getSelectedConnectionIds(f)][0]\n if (connectionId && getConnection(board.get())(connectionId)?.action === \"connect\") {\n latestConnectionId.set(connectionId)\n }\n })\n\n tool.pipe(L.changes).forEach((tool) => {\n if (tool !== \"note\" && tool !== \"container\" && tool !== \"text\" && focus.get().status === \"adding\") {\n focus.set(noFocus)\n }\n })\n\n const doOnUnmount: Function[] = []\n\n const itemsList = L.view(L.view(board, \"items\"), Object.values)\n\n function onURL(assetId: string, url: string) {\n itemsList.get().forEach((i) => {\n if ((i.type === \"image\" || i.type === \"video\") && i.assetId === assetId && i.src != url) {\n dispatch({ action: \"item.update\", boardId, items: [{ id: i.id, src: url }] })\n }\n })\n }\n const uploadImageFile = imageUploadHandler(assets, coordinateHelper, onAdd, onURL)\n\n doOnUnmount.push(\n cutCopyPasteHandler(board, boardStore.crdtStore, focus, coordinateHelper, dispatch, uploadImageFile),\n )\n\n const zoomControls = boardScrollAndZoomHandler(\n board,\n boardElement,\n scrollElement,\n zoom,\n coordinateHelper,\n toolController,\n )\n const { viewRect } = zoomControls\n\n boardStore.eventsFromServer.forEach((e) => {\n if (e.action === \"user.bringAllToMe\") {\n console.log(`Following user ${e.nickname}`, e)\n viewRect.set(e.viewRect)\n }\n })\n\n imageDropHandler(boardElement, assets, focus, uploadImageFile)\n itemCreateHandler(board, focus, latestNote, boardElement, onAdd)\n itemDeleteHandler(boardId, dispatch, focus)\n itemDuplicateHandler(board, boardStore.crdtStore, dispatch, focus)\n itemHideContentsHandler(board, focus, dispatch)\n itemMoveWithArrowKeysHandler(board, dispatch, focus)\n itemUndoHandler(dispatch)\n itemSelectAllHandler(board, focus)\n installZoomKeyboardShortcuts(zoomControls)\n installKeyboardShortcut(\n (e) => e.key === \"Escape\",\n () => {\n toolController.useDefaultTool()\n focus.set(noFocus)\n },\n )\n installKeyboardShortcut(plainKey(\"c\"), () => toolController.tool.set(\"connect\"))\n installKeyboardShortcut(plainKey(\"l\"), () => toolController.tool.set(\"line\"))\n L.fromEvent(window, \"click\")\n .pipe(L.applyScope(componentScope()))\n .forEach((event) => {\n if (!boardElement.get()!.contains(event.target as Node)) {\n // Click outside => reset selection\n focus.set(noFocus)\n }\n })\n\n onClickOutside(boardElement, () => {\n focus.set(noFocus)\n })\n\n function onClick(e: JSX.UIEvent) {\n const f = focus.get()\n if (f.status === \"connection-adding\") {\n toolController.useDefaultTool()\n } else if (f.status === \"adding\") {\n onAdd(f.item)\n } else {\n if (e.target === boardElement.get()) {\n if (tool.get() === \"connect\") {\n startConnecting(\n board,\n coordinateHelper,\n latestConnection,\n dispatch,\n toolController,\n focus,\n coordinateHelper.currentBoardCoordinates.get(),\n )\n } else {\n focus.set(noFocus)\n }\n }\n }\n }\n\n function onAdd(item: Item) {\n toolController.useDefaultTool()\n const point = coordinateHelper.currentBoardCoordinates.get()\n const { x, y } = item.type !== \"container\" ? G.add(point, { x: -item.width / 2, y: -item.height / 2 }) : point\n item = withCurrentContainer({ ...item, x, y }, board.get())\n\n dispatch({ action: \"item.add\", boardId, items: [item], connections: [] })\n\n if (item.type === \"note\" || item.type === \"text\") {\n focus.set({ status: \"editing\", itemId: item.id })\n } else {\n focus.set({ status: \"selected\", itemIds: new Set([item.id]), connectionIds: emptySet() })\n }\n }\n\n coordinateHelper.currentBoardCoordinates.pipe(L.throttle(30)).forEach((position) => {\n dispatch({ action: \"cursor.move\", position, boardId })\n })\n\n const { selectionRect } = boardDragHandler({\n ...{\n board,\n boardElem: boardElement,\n coordinateHelper,\n latestConnection,\n focus,\n toolController,\n dispatch,\n },\n })\n\n H.onUnmount(() => {\n doOnUnmount.forEach((fn) => fn())\n })\n\n const boardAccessStatus = L.view(boardState, (s) => s.status)\n const quickZoom = L.view(zoom, \"quickZoom\")\n const mainZoom = L.view(zoom, \"zoom\")\n const borderContainerStyle = L.combineTemplate({\n width: L.view(board, quickZoom, (b) => b.width + \"em\"),\n height: L.view(board, quickZoom, (b) => b.height + \"em\"),\n fontSize: L.view(mainZoom, (z) => z + \"em\"),\n transform: L.view(quickZoom, (z) => {\n const percentTranslate = ((z - 1) / 2) * 100\n return `translate(${percentTranslate}%, ${percentTranslate}%) scale(${z})`\n }),\n \"will-change\": \"transform, fontSize\",\n })\n\n const className = L.view(\n boardAccessStatus,\n (status) => `board-container ${isEmbedded() ? \"embedded\" : \"\"} ${status}`,\n )\n\n const items = L.view(L.view(board, \"items\"), Object.values, (items) => items.filter((i) => !i.hidden))\n const selectedItems = L.view(board, focus, (b, f) => getSelectedItems(b)(f))\n const modalContent = L.atom(null)\n\n L.interval(100, null, componentScope()).forEach(() => {\n if (window.scrollY !== 0 || window.scrollX !== 0) {\n if (focus.get().status !== \"editing\") {\n // Reset scroll position when not editing. At least iOS seems to need this. It's vital that our scroll pos stays at origin.\n window.scrollTo(0, 0)\n }\n }\n })\n return (\n
\n \n s.status === \"online\"),\n crdtStore: boardStore.crdtStore,\n }}\n />\n
\n
\n
\n \"board \" + t)}\n draggable={isFirefox ? L.view(focus, (f) => f.status !== \"editing\") : true}\n ref={boardElement.set}\n onClick={onClick}\n onTouchEnd={onClick}\n >\n i.id} />\n\n {L.view(tool, (t) =>\n t === \"connect\" ? null : (\n i.id}\n />\n ),\n )}\n \n \n \n \n
\n
\n
\n \n
\n \n )\n\n function renderSelectionBorder(id: string, item: L.Property) {\n return \n }\n\n function renderItem(id: string, item: L.Property) {\n const isLocked = L.combineTemplate({ locks, sessionId }).pipe(\n L.map(({ locks, sessionId }) => !!locks[id] && locks[id] !== sessionId),\n )\n\n return L.view(L.view(item, \"type\"), (t) => {\n switch (t) {\n case \"container\":\n case \"text\":\n case \"note\":\n return (\n ,\n isLocked,\n focus,\n coordinateHelper,\n latestConnection,\n dispatch,\n toolController,\n accessLevel,\n boardStore,\n }}\n />\n )\n case \"image\":\n return (\n ,\n assets,\n board,\n isLocked,\n focus,\n toolController,\n coordinateHelper,\n latestConnection,\n dispatch,\n }}\n />\n )\n case \"video\":\n return (\n ,\n assets,\n board,\n isLocked,\n focus,\n toolController,\n coordinateHelper,\n latestConnection,\n dispatch,\n }}\n />\n )\n default:\n throw Error(\"Unsupported item: \" + t)\n }\n })\n }\n}\n" }, { "path": "frontend/src/board/BoardViewMessage.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { Board } from \"../../../common/src/domain\"\nimport { signIn } from \"../google-auth\"\nimport { BoardAccessStatus } from \"../store/board-store\"\nimport { UserSessionState } from \"../store/user-session-store\"\n\nexport const BoardViewMessage = ({\n boardAccessStatus,\n sessionState,\n board,\n}: {\n boardAccessStatus: L.Property\n sessionState: L.Property\n board: L.Property\n}) => {\n // TODO: login may be disabled due to Incognito mode or other reasons\n return L.combine(boardAccessStatus, L.view(sessionState, \"status\"), (s: BoardAccessStatus, sessionStatus) => {\n if (s === \"not-found\") {\n return (\n
\n
\n

Board not found. A typo, maybe?

\n
\n
\n )\n }\n if (s === \"denied-permanently\") {\n return (\n
\n
\n

\n Sorry, access denied. Click here to sign in with another account.\n

\n
\n
\n )\n }\n if (s === \"login-required\") {\n if (sessionStatus === \"login-failed\") {\n return (\n
\n
\n Something went wrong with logging in. Click here to try again.\n
\n
\n )\n }\n\n return (\n
\n
\n This board is for authorized users only. Click here to sign in.\n
\n
\n )\n }\n return null\n })\n}\n" }, { "path": "frontend/src/board/CollaborativeTextView.tsx", "content": "import { componentScope, h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport Quill from \"quill\"\nimport QuillCursors from \"quill-cursors\"\nimport { QuillBinding } from \"y-quill\"\nimport {\n AccessLevel,\n Board,\n LocalUIEvent,\n TextItem,\n canWrite,\n getAlign,\n getHorizontalAlign,\n getItemBackground,\n} from \"../../../common/src/domain\"\nimport { CRDTStore } from \"../store/crdt-store\"\nimport { getAlignItems } from \"./ItemView\"\nimport { BoardFocus } from \"./board-focus\"\nimport { contrastingColor } from \"./contrasting-color\"\nimport { preventDoubleClick } from \"./double-click\"\nimport PasteLinkOverText from \"./quillPasteLinkOverText\"\nimport ClickableLink from \"./quillClickableLink\"\n\nQuill.register(\"modules/cursors\", QuillCursors)\nQuill.register(\"modules/pasteLinkOverText\", PasteLinkOverText)\nQuill.register(ClickableLink)\n\ninterface CollaborativeTextViewProps {\n item: L.Property\n board: L.Property\n id: string\n accessLevel: L.Property\n focus: L.Atom\n itemFocus: L.Property<\"none\" | \"selected\" | \"dragging\" | \"editing\">\n crdtStore: CRDTStore\n isLocked: L.Property\n uiEvents: L.EventStream\n}\nexport function CollaborativeTextView({\n id,\n item,\n board,\n accessLevel,\n focus,\n itemFocus,\n isLocked,\n crdtStore,\n uiEvents,\n}: CollaborativeTextViewProps) {\n const fontSize = L.view(item, (i) => `${i.fontSize ? i.fontSize : 1}em`)\n const color = L.view(item, getItemBackground, contrastingColor)\n\n const quillEditor = L.atom(null)\n\n accessLevel.applyScope(componentScope()).forEach((al) => {\n quillEditor.get()?.enable(canWrite(al))\n })\n\n function initQuill(el: HTMLElement) {\n const quill = new Quill(el, {\n modules: {\n cursors: true,\n toolbar: false,\n pasteLinkOverText: true,\n history: {\n userOnly: true, // Local undo shouldn't undo changes from remote users\n },\n },\n theme: \"snow\",\n readOnly: !canWrite(accessLevel.get()),\n })\n const crdt = crdtStore.getBoardCrdt(board.get().id)\n const ytext = crdt.getField(id, \"text\")\n new QuillBinding(ytext, quill, crdt.awareness)\n quillEditor.set(quill)\n }\n\n const editingThis = L.view(itemFocus, (f) => f === \"editing\")\n\n editingThis.forEach((e) => {\n const q = quillEditor.get()\n if (q) {\n if (e) {\n const multipleLines =\n q\n .getText()\n .split(\"\\n\")\n .filter((x) => x).length > 1\n if (!multipleLines) {\n // For one-liners, select the whole text on double click\n q.setSelection(0, 1000000)\n }\n } else {\n // Clear text selecting when not editing\n q.setSelection(null as any)\n }\n }\n })\n\n function handleClick() {\n if (itemFocus.get() === \"selected\") {\n focus.set({ status: \"editing\", itemId: id })\n }\n }\n\n const pointerEvents = L.view(itemFocus, isLocked, (f, l) =>\n f === \"editing\" || f === \"selected\" || l ? \"auto\" : \"none\",\n )\n const hAlign = L.view(item, getAlign, getHorizontalAlign).applyScope(componentScope())\n hAlign.onChange((align) => {\n quillEditor.get()?.formatText(0, 10000000, \"align\", align === \"left\" ? \"\" : align)\n })\n\n uiEvents.applyScope(componentScope()).forEach((e) => {\n if (e.action === \"ui.text.format\" && e.itemIds.includes(id)) {\n const quill = quillEditor.get()\n const selection = quill?.getSelection()\n const format = selection && quill?.getFormat(selection)\n const newValue = !(format && format[e.format])\n quill?.format(e.format, newValue)\n }\n })\n\n let touchMoves = 0\n\n return (\n {\n e.stopPropagation()\n if (e.key === \"Escape\") {\n focus.set({ status: \"selected\", itemIds: new Set([id]), connectionIds: new Set() })\n }\n }}\n onKeyDown={(e) => {\n e.stopPropagation()\n }}\n onKeyPress={(e) => {\n e.stopPropagation()\n }}\n onDoubleClick={(e) => {\n e.stopPropagation()\n quillEditor.get()?.focus()\n }}\n onTouchStart={(e) => {\n preventDoubleClick(e)\n touchMoves = 0\n }}\n onTouchMove={() => touchMoves++}\n onTouchEnd={() => {\n if (touchMoves === 0) {\n // This is a way to detect a tap (vs swipe)\n quillEditor.get()?.focus()\n }\n }}\n onClick={handleClick}\n style={L.combineTemplate({ alignItems: L.view(item, getAlignItems) })}\n >\n \n \n )\n}\n" }, { "path": "frontend/src/board/ConnectionsView.tsx", "content": "import { Fragment, h, ListView } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { findAttachmentLocation, resolveItemEndpoint } from \"../../../common/src/connection-utils\"\nimport {\n AttachmentLocation,\n Board,\n ConnectionEndPoint,\n ConnectionEndStyle,\n isDirectedItemEndPoint,\n Item,\n Point,\n} from \"../../../common/src/domain\"\nimport { Dispatch } from \"../store/board-store\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { BoardFocus, getSelectedConnectionIds } from \"./board-focus\"\nimport { existingConnectionHandler } from \"./item-connect\"\nimport { Z_CONNECTIONS } from \"./zIndices\"\n\nexport const ConnectionsView = ({\n board,\n dispatch,\n zoom,\n coordinateHelper,\n focus,\n}: {\n board: L.Property\n dispatch: Dispatch\n zoom: L.Property\n coordinateHelper: BoardCoordinateHelper\n focus: L.Atom\n}) => {\n // Item position might change but connection doesn't -- need to rerender connections anyway\n // Connection objects normally only hold the ID to the \"from\" and \"to\" items\n // This populates the actual object in place of the ID\n\n function determineAttachmenLocation(\n e: ConnectionEndPoint,\n control: Point,\n is: Record,\n ): AttachmentLocation {\n if (isDirectedItemEndPoint(e)) {\n return findAttachmentLocation(resolveItemEndpoint(e, is), e.side)\n }\n const fromItem: Point = resolveEndpoint(e, is)\n // Support legacy routing (side not fixed)\n return findNearestAttachmentLocationForConnectionNode(fromItem, control)\n }\n const connectionsWithItemsPopulated = L.view(\n L.view(board, (b) => ({ is: b.items, cs: b.connections })),\n focus,\n L.view(zoom, \"zoom\"),\n ({ is, cs }, f, z) => {\n return cs\n .filter((c) => !c.hidden)\n .map((c) => {\n const fromItem: Point = resolveEndpoint(c.from, is)\n const toItemOrPoint = resolveEndpoint(c.to, is)\n const firstControlPoint = c.controlPoints[0] || fromItem\n const lastControlPoint = c.controlPoints[c.controlPoints.length - 1] || toItemOrPoint\n return {\n ...c,\n from: determineAttachmenLocation(c.from, firstControlPoint, is),\n to: determineAttachmenLocation(c.to, lastControlPoint, is),\n selected: getSelectedConnectionIds(f).has(c.id),\n }\n })\n },\n )\n\n // We want to render round draggable nodes at the end of edges (paths),\n // But SVG elements are not draggable by default, so get a flat list of\n // nodes and render them as regular HTML elements\n const connectionNodes = L.view(connectionsWithItemsPopulated, (cs) =>\n cs.flatMap((c) => [\n { id: c.id, type: \"from\" as const, node: c.from, selected: c.selected, style: c.fromStyle },\n { id: c.id, type: \"to\" as const, node: c.to, selected: c.selected, style: c.toStyle },\n ...c.controlPoints.map((cp) => ({\n id: c.id,\n type: \"control\" as const,\n node: { point: cp, side: \"none\" as const },\n selected: c.selected,\n style: c.pointStyle,\n })),\n ]),\n )\n\n const svgElementStyle = L.combineTemplate({\n width: L.view(board, (b) => b.width + \"em\"),\n height: L.view(board, (b) => b.height + \"em\"),\n position: \"absolute\",\n top: 0,\n left: 0,\n pointerEvents: \"none\",\n zIndex: Z_CONNECTIONS,\n })\n\n return (\n <>\n \n observable={connectionNodes}\n renderObservable={ConnectionNode}\n getKey={(c) => c.id + c.type}\n />\n \n {\n const curve = L.combine(\n L.view(conn, \"from\"),\n L.view(conn, \"to\"),\n L.view(conn, \"controlPoints\"),\n (from, to, cps) => {\n return quadraticCurveSVGPath(\n {\n x: coordinateHelper.emToBoardPx(from.point.x),\n y: coordinateHelper.emToBoardPx(from.point.y),\n },\n {\n x: coordinateHelper.emToBoardPx(to.point.x),\n y: coordinateHelper.emToBoardPx(to.point.y),\n },\n cps.map((cp) => ({\n x: coordinateHelper.emToBoardPx(cp.x),\n y: coordinateHelper.emToBoardPx(cp.y),\n })),\n )\n },\n )\n return (\n \n (c.selected ? \"connection selected\" : \"connection\"))}\n d={curve}\n >\n \n )\n }}\n getKey={(c) => c.id}\n />\n \n \n )\n\n type ConnectionNodeProps = {\n id: string\n node: AttachmentLocation\n type: \"to\" | \"from\" | \"control\"\n style: ConnectionEndStyle\n selected: boolean\n }\n function ConnectionNode(key: string, cNode: L.Property) {\n function onRef(el: HTMLDivElement) {\n const { id, type } = cNode.get()\n existingConnectionHandler(el, id, type, coordinateHelper, board, dispatch)\n }\n\n const id = L.view(cNode, (cn) => `connection-${cn.id}-${cn.type}`)\n\n const angle = L.view(cNode, (cn) => {\n if (cn.style !== \"arrow\" || cn.type === \"control\") return null\n const conn = connectionsWithItemsPopulated.get().find((c) => c.id === cn.id)\n if (!conn) {\n return null\n }\n const [thisEnd, otherEnd] = cn.type === \"from\" ? [conn.from, conn.to] : [conn.to, conn.from]\n const bez = bezierCurveFromPoints(\n otherEnd.point,\n getControlPoint(otherEnd.point, thisEnd.point, conn.controlPoints),\n thisEnd.point,\n )\n const derivative = bez.derivative(1) // tangent vector at the very end of the curve\n const angleInDegrees =\n ((Math.atan2(derivative.y, derivative.x) - Math.atan2(0, Math.abs(derivative.x))) * 180) / Math.PI\n return Math.round(angleInDegrees)\n })\n\n const wrapperStyle = L.view(cNode, (cn) => ({\n top: `${cn.node.point.y}em`,\n left: `${cn.node.point.x}em`,\n zIndex: Z_CONNECTIONS + 1,\n }))\n\n const nodeStyle = L.view(angle, (ang) => ({\n transform: ang !== null ? `rotate(${ang}deg)` : undefined,\n }))\n\n const selectThisConnection = (e: JSX.MouseEvent) => {\n const id = cNode.get().id\n const f = focus.get()\n if (e.shiftKey && f.status === \"selected\") {\n focus.set({ ...f, connectionIds: toggleInSet(id, f.connectionIds) })\n } else {\n focus.set({ status: \"selected\", connectionIds: new Set([id]), itemIds: emptySet() })\n }\n }\n\n return (\n \n {\n let cls = `connection-node ${cn.type}-node ${cn.style}-style `\n\n if (cn.selected) cls += \"highlight \"\n\n cls += cn.node.side === \"none\" ? \"unattached\" : \"attached\"\n\n return cls\n })}\n style={nodeStyle}\n >\n \n )\n }\n}\n\n// @ts-ignore\nimport { Bezier } from \"bezier-js\"\nimport { findNearestAttachmentLocationForConnectionNode, resolveEndpoint } from \"../../../common/src/connection-utils\"\nimport { emptySet, toggleInSet } from \"../../../common/src/sets\"\nimport { BoardZoom } from \"./board-scroll-and-zoom\"\n\nfunction quadraticCurveSVGPath(from: Point, to: Point, controlPoints: Point[]) {\n if (!controlPoints.length) {\n // fallback if no control points: straight line\n const midPoint = getControlPoint(from, to, controlPoints)\n return \"M\" + from.x + \" \" + from.y + \" Q \" + midPoint.x + \" \" + midPoint.y + \" \" + to.x + \" \" + to.y\n } else {\n const peakPointOfCurve = controlPoints[0]\n const bez = bezierCurveFromPoints(from, peakPointOfCurve, to)\n return bez\n .getLUT()\n .reduce(\n (acc: string, p: Point, i: number) =>\n i === 0 ? (acc += `M ${p.x} ${p.y}`) : (acc += `L ${p.x} ${p.y}`),\n \"\",\n )\n }\n}\n\nfunction getControlPoint(from: Point, to: Point, controlPoints: Point[]) {\n if (controlPoints.length > 0) return controlPoints[0]\n // fallback if no control points: midpoint\n return { x: (to.x + from.x) * 0.5, y: (to.y + from.y) * 0.5 }\n}\n\nfunction bezierCurveFromPoints(from: Point, middle: Point, to: Point): any {\n return Bezier.quadraticFromPoints(from, middle, to)\n}\n" }, { "path": "frontend/src/board/CursorsView.tsx", "content": "import { componentScope, h, ListView } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { UserCursorPosition, UserSessionInfo } from \"../../../common/src/domain\"\nimport { CursorsStore } from \"../store/cursors-store\"\nimport { BoardZoom } from \"./board-scroll-and-zoom\"\nimport { Rect } from \"../../../common/src/geometry\"\nimport _ from \"lodash\"\n\nexport const CursorsView = ({\n sessions,\n cursors,\n viewRect,\n}: {\n cursors: CursorsStore\n sessions: L.Property\n viewRect: L.Property\n}) => {\n const transitionFromCursorDelay = cursors.cursorDelay.pipe(\n L.changes,\n L.throttle(2000, componentScope()),\n L.map((d) => {\n const t = (Math.min(d, 1000) / 1000).toFixed(1)\n return `all ${t}s, top ${t}s`\n }),\n )\n const transitionFromZoom = viewRect.pipe(\n L.changes,\n L.map(() => \"none\"),\n )\n const transition = L.merge(transitionFromCursorDelay, transitionFromZoom).pipe(\n L.toProperty(\"none\", componentScope()),\n )\n\n const scope = componentScope()\n\n return (\n \n observable={cursors.cursors}\n renderObservable={(sessionId: string, pos_: L.Property) => {\n const pos = pos_.pipe(L.skipDuplicates(_.isEqual), L.applyScope(scope))\n const changes = pos.pipe(L.changes)\n const stale = L.merge(\n changes.pipe(\n L.debounce(1000),\n L.map(() => true),\n ),\n changes.pipe(L.map(() => false)),\n ).pipe(L.toProperty(false, scope))\n const className = L.view(stale, (s) => (s ? \"cursor stale\" : \"cursor\"))\n const style = L.view(pos, transition, viewRect, (p, t, vr) => {\n const x = _.clamp(p.x, vr.x, vr.x + vr.width - 1)\n const y = _.clamp(p.y, vr.y, vr.y + vr.height - 1)\n return {\n transition: t,\n left: x + \"em\",\n top: y + \"em\",\n }\n })\n const userInfo = L.view(sessions, (sessions) => {\n const session = sessions.find((s) => s.sessionId === sessionId)\n return {\n name: session ? session.nickname : null,\n picture: session && session.userType === \"authenticated\" ? : null,\n }\n })\n\n return (\n \n \n \n {L.view(userInfo, \"picture\")}\n {L.view(userInfo, \"name\")}\n \n \n )\n }}\n getKey={(c: UserCursorPosition) => c.sessionId}\n />\n )\n}\n" }, { "path": "frontend/src/board/DragBorder.tsx", "content": "import { h, Fragment } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { Board, Connection } from \"../../../common/src/domain\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { BoardFocus } from \"./board-focus\"\nimport { Dispatch } from \"../store/board-store\"\nimport { itemDragToMove } from \"./item-dragmove\"\nimport { Tool, ToolController } from \"./tool-selection\"\n\ntype Position = \"left\" | \"right\" | \"top\" | \"bottom\"\n\nexport const DragBorder = ({\n id,\n board,\n coordinateHelper,\n latestConnection,\n focus,\n toolController,\n dispatch,\n}: {\n id: string\n coordinateHelper: BoardCoordinateHelper\n latestConnection: L.Property\n focus: L.Atom\n board: L.Property\n toolController: ToolController\n dispatch: Dispatch\n}) => {\n return (\n <>\n \n \n \n \n \n )\n\n function DragHandle({ position }: { position: Position }) {\n const ref = (e: HTMLElement) =>\n itemDragToMove(id, board, focus, toolController, coordinateHelper, latestConnection, dispatch, false)(e)\n\n return \n }\n}\n" }, { "path": "frontend/src/board/ImageView.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { Board, Connection, Image } from \"../../../common/src/domain\"\nimport { AssetStore } from \"../store/asset-store\"\nimport { Dispatch } from \"../store/board-store\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { BoardFocus } from \"./board-focus\"\nimport { itemDragToMove } from \"./item-dragmove\"\nimport { itemSelectionHandler } from \"./item-selection\"\nimport { ToolController } from \"./tool-selection\"\nimport { itemZIndex } from \"./zIndices\"\n\nexport const ImageView = ({\n id,\n image,\n assets,\n board,\n isLocked,\n focus,\n toolController,\n coordinateHelper,\n latestConnection,\n dispatch,\n}: {\n board: L.Property\n id: string\n image: L.Property\n isLocked: L.Property\n focus: L.Atom\n toolController: ToolController\n coordinateHelper: BoardCoordinateHelper\n latestConnection: L.Property\n dispatch: Dispatch\n assets: AssetStore\n}) => {\n const { selected, onClick, onTouchStart } = itemSelectionHandler(\n id,\n \"image\",\n focus,\n toolController,\n board,\n coordinateHelper,\n latestConnection,\n dispatch,\n )\n const tool = toolController.tool\n return (\n \n ({\n top: 0,\n left: 0,\n transform: `translate(${p.x}em, ${p.y}em)`,\n height: p.height + \"em\",\n width: p.width + \"em\",\n zIndex: itemZIndex(p),\n position: \"absolute\",\n } as any),\n )}\n >\n assets.getAsset(i.assetId, i.src))} />\n {L.view(isLocked, (l) => l && 🔒)}\n \n )\n}\n" }, { "path": "frontend/src/board/ItemView.tsx", "content": "import { componentScope, h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport {\n AccessLevel,\n Board,\n Connection,\n getAlign,\n getHorizontalAlign,\n getItemBackground,\n getItemShape,\n getVerticalAlign,\n isContainer,\n isLocalUIEvent,\n isTextItem,\n Item,\n ItemType,\n TextItem,\n} from \"../../../common/src/domain\"\nimport { BoardStore, Dispatch } from \"../store/board-store\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { BoardFocus } from \"./board-focus\"\nimport { CollaborativeTextView } from \"./CollaborativeTextView\"\nimport { DragBorder } from \"./DragBorder\"\nimport { itemDragToMove } from \"./item-dragmove\"\nimport { itemSelectionHandler } from \"./item-selection\"\nimport { TextView } from \"./TextView\"\nimport { ToolController } from \"./tool-selection\"\nimport { itemZIndex } from \"./zIndices\"\nimport { VisibilityOffIcon } from \"../components/Icons\"\n\nexport const ItemView = ({\n board,\n accessLevel,\n id,\n type,\n item,\n isLocked,\n focus,\n coordinateHelper,\n latestConnection,\n dispatch,\n toolController,\n boardStore,\n}: {\n board: L.Property\n accessLevel: L.Property\n id: string\n type: ItemType\n item: L.Property\n isLocked: L.Property\n focus: L.Atom\n coordinateHelper: BoardCoordinateHelper\n latestConnection: L.Property\n dispatch: Dispatch\n toolController: ToolController\n boardStore: BoardStore\n}) => {\n const element = L.atom(null)\n\n const ref = (el: HTMLElement) => {\n itemDragToMove(\n id,\n board,\n focus,\n toolController,\n coordinateHelper,\n latestConnection,\n dispatch,\n type === \"container\",\n )(el)\n element.set(el)\n }\n\n const { itemFocus, selected, onClick, onTouchStart } = itemSelectionHandler(\n id,\n type,\n focus,\n toolController,\n board,\n coordinateHelper,\n latestConnection,\n dispatch,\n )\n\n function itemPadding(i: Item) {\n if (i.type != \"note\") return undefined\n\n const shape = getItemShape(i)\n return shape == \"diamond\"\n ? `${i.width / 4}em`\n : shape == \"round\"\n ? `${i.width / 8}em`\n : shape == \"square\" || shape == \"rect\"\n ? `${(i.fontSize || 1) / 3}em`\n : undefined\n }\n const shape = L.view(item, getItemShape)\n const itemNow = item.get()\n\n return (\n (l ? \"Item is selected by another user\" : \"\"))}\n ref={ref}\n data-itemid={id}\n draggable={L.view(itemFocus, (f) => f !== \"editing\")}\n onClick={onClick}\n onTouchStart={onTouchStart}\n className={L.view(\n selected,\n L.view(item, getItemBackground),\n isLocked,\n (s, b, l) =>\n `${type} ${\"color-\" + b.replace(\"#\", \"\").toLowerCase()} ${s ? \"selected\" : \"\"} ${\n l ? \"locked\" : \"\"\n }`,\n )}\n style={L.view(item, (i) => {\n return {\n top: 0,\n left: 0,\n height: i.height + \"em\",\n width: i.width + \"em\",\n transform: `translate(${i.x}em, ${i.y}em)`,\n zIndex: itemZIndex(i),\n position: \"absolute\",\n padding: itemPadding(i),\n justifyContent: getJustifyContent(i),\n alignItems: getAlignItems(i),\n textAlign: getTextAlign(i),\n }\n })}\n >\n \"shape \" + s)}\n style={L.view(item, (i) => {\n return {\n background: getItemBackground(i),\n }\n })}\n />\n\n {isTextItem(itemNow) && itemNow.crdt ? (\n }\n board={board}\n id={id}\n accessLevel={accessLevel}\n focus={focus}\n itemFocus={itemFocus}\n crdtStore={boardStore.crdtStore}\n isLocked={isLocked}\n uiEvents={boardStore.events.pipe(L.filter(isLocalUIEvent), L.applyScope(componentScope()))}\n />\n ) : (\n }\n dispatch={dispatch}\n board={board}\n toolController={toolController}\n accessLevel={accessLevel}\n focus={focus}\n itemFocus={itemFocus}\n coordinateHelper={coordinateHelper}\n element={element}\n />\n )}\n\n {L.view(\n item,\n (i) => isContainer(i) && i.contentsHidden,\n (hidden) =>\n (hidden && (\n
\n \n
\n )) ??\n null,\n )}\n\n {type === \"container\" && (\n \n )}\n \n )\n}\n\nexport function getJustifyContent(item: Item) {\n if (isTextItem(item)) {\n switch (getHorizontalAlign(getAlign(item))) {\n case \"left\":\n return \"flex-start\"\n case \"center\":\n return \"center\"\n case \"right\":\n return \"flex-end\"\n }\n }\n return null\n}\n\nexport function getAlignItems(item: Item) {\n if (isTextItem(item)) {\n switch (getVerticalAlign(getAlign(item))) {\n case \"top\":\n return \"flex-start\"\n case \"middle\":\n return \"center\"\n case \"bottom\":\n return \"flex-end\"\n }\n }\n return null\n}\n\nfunction getTextAlign(item: Item) {\n if (isTextItem(item)) {\n return getHorizontalAlign(getAlign(item))\n }\n return null\n}\n" }, { "path": "frontend/src/board/RectangularDragSelection.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { Rect } from \"../../../common/src/geometry\"\n\nexport const RectangularDragSelection = ({ rect }: { rect: L.Property }) => {\n return L.view(\n rect,\n (r) =>\n r && (\n \n ),\n )\n}\n" }, { "path": "frontend/src/board/SaveAsTemplate.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { Board } from \"../../../common/src/domain\"\n\nexport const SaveAsTemplate = ({ board }: { board: L.Property }) => {\n const currSavedBoard = L.atom(null)\n\n function handleLocalTemplateSave() {\n const b = board.get()\n if (!b) return\n const saved = localStorage.getItem(\"rboard_templates\")\n const templates = saved ? (JSON.parse(saved) as Record) : {}\n\n templates[b.name] = b\n localStorage.setItem(\"rboard_templates\", JSON.stringify(templates))\n currSavedBoard.set(b)\n }\n\n const changed = L.combineTemplate({\n curr: currSavedBoard,\n next: board,\n }).pipe(L.map((c) => c.curr !== c.next))\n return (\n (c ? \"\" : \"disabled\"))}\n data-test=\"palette-save-as-template\"\n onClick={() => handleLocalTemplateSave()}\n >\n Save as template\n \n )\n}\n" }, { "path": "frontend/src/board/SelectionBorder.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { Board, Container } from \"../../../common/src/domain\"\nimport { BoardFocus } from \"./board-focus\"\nimport { onBoardItemDrag } from \"./item-drag\"\nimport { Dispatch } from \"../store/board-store\"\nimport { canMove } from \"./board-permissions\"\n\ntype Horizontal = \"left\" | \"right\"\ntype Vertical = \"top\" | \"bottom\"\nconst borderOffset = 0.25\n\nexport const SelectionBorder = ({\n id,\n board,\n coordinateHelper,\n focus,\n dispatch,\n}: {\n id: string\n coordinateHelper: BoardCoordinateHelper\n focus: L.Atom\n board: L.Property\n dispatch: Dispatch\n}) => {\n const item = L.view(board, (b) => b.items[id])\n const style = L.view(item, (i) => {\n return {\n top: -borderOffset + \"rem\",\n left: -borderOffset + \"rem\",\n height: `calc(${i.height}em + 2 * ${borderOffset}rem)`,\n width: `calc(${i.width}em + 2 * ${borderOffset}rem)`,\n transform: `translate(${i.x}em, ${i.y}em)`,\n }\n })\n\n return L.view(\n item,\n (i) => !i.hidden && canMove(i),\n (m) =>\n m ? (\n \n \n \n \n \n \n \n ) : null,\n )\n\n function DragCorner({ vertical, horizontal }: { vertical: Vertical; horizontal: Horizontal }) {\n const ref = (e: HTMLElement) =>\n onBoardItemDrag(\n e,\n id,\n board,\n focus,\n coordinateHelper,\n false,\n (b, startPos, items, connections, xDiff, yDiff) => {\n const updatedItems = items.map(({ current, dragStartPosition }) => {\n const maintainAspectRatio =\n current.type === \"image\" || (current.type === \"note\" && current.shape !== \"rect\")\n if (maintainAspectRatio) {\n let minDiff = Math.min(Math.abs(xDiff), Math.abs(yDiff))\n if (minDiff < 0.1) {\n xDiff = 0\n yDiff = 0\n } else {\n const aspectRatio = dragStartPosition.width / dragStartPosition.height\n const invert =\n (horizontal == \"left\" && vertical == \"bottom\") ||\n (horizontal == \"right\" && vertical == \"top\")\n const factor = invert ? -1 : 1\n\n if (Math.abs(xDiff) == minDiff) {\n // x is the smaller adjustment, use that as basis\n yDiff = (minDiff / aspectRatio) * factor * sign(xDiff)\n } else {\n xDiff = minDiff * aspectRatio * factor * sign(yDiff)\n }\n }\n }\n\n const x = horizontal === \"left\" ? dragStartPosition.x + xDiff : dragStartPosition.x\n const y = vertical === \"top\" ? dragStartPosition.y + yDiff : dragStartPosition.y\n const width = Math.max(\n 0.5,\n horizontal === \"left\" ? dragStartPosition.width - xDiff : dragStartPosition.width + xDiff,\n )\n\n const height = Math.max(\n 0.5,\n vertical === \"top\" ? dragStartPosition.height - yDiff : dragStartPosition.height + yDiff,\n )\n const updatedItem = {\n id: current.id,\n x,\n y,\n width,\n height,\n }\n return updatedItem\n })\n\n dispatch({ action: \"item.update\", boardId: b.id, items: updatedItems })\n\n function sign(x: number) {\n return x / Math.abs(x)\n }\n },\n )\n\n return \n }\n}\n" }, { "path": "frontend/src/board/TextView.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { AccessLevel, Board, canWrite, getItemBackground, TextItem } from \"../../../common/src/domain\"\nimport { emptySet } from \"../../../common/src/sets\"\nimport { HTMLEditableSpan } from \"../components/HTMLEditableSpan\"\nimport { Dispatch } from \"../store/board-store\"\nimport { autoFontSize } from \"./autoFontSize\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { BoardFocus, getSelectedItemIds } from \"./board-focus\"\nimport { contrastingColor } from \"./contrasting-color\"\nimport { ToolController } from \"./tool-selection\"\n\ninterface TextViewProps {\n id: string\n item: L.Property\n dispatch: Dispatch\n board: L.Property\n toolController: ToolController\n accessLevel: L.Property\n focus: L.Atom\n itemFocus: L.Property<\"none\" | \"selected\" | \"dragging\" | \"editing\">\n coordinateHelper: BoardCoordinateHelper\n element: L.Property\n}\n\nexport function TextView({\n id,\n item,\n dispatch,\n board,\n toolController,\n focus,\n coordinateHelper,\n itemFocus,\n accessLevel,\n element,\n}: TextViewProps) {\n const textAtom = L.atom(L.view(item, \"text\"), (text) =>\n dispatch({ action: \"item.update\", boardId: board.get().id, items: [{ id, text }] }),\n )\n const showCoords = false\n const focused = L.view(focus, (f) => getSelectedItemIds(f).has(id))\n\n const setEditing = (e: boolean) => {\n if (toolController.tool.get() === \"connect\") return // Don't switch to editing in middle of connecting\n dispatch({ action: \"item.front\", boardId: board.get().id, itemIds: [id] })\n focus.set(\n e\n ? { status: \"editing\", itemId: id }\n : { status: \"selected\", itemIds: new Set([id]), connectionIds: emptySet() },\n )\n }\n const color = L.view(item, getItemBackground, contrastingColor)\n const fontSize = autoFontSize(\n item,\n L.view(item, (i) => (i.fontSize ? i.fontSize : 1)),\n L.view(item, \"text\"),\n focused,\n coordinateHelper,\n element,\n )\n return (\n e.stopPropagation()}\n style={L.combineTemplate({ fontSize, color })}\n >\n f === \"editing\"),\n setEditing,\n ),\n editable: L.view(accessLevel, canWrite),\n }}\n />\n {showCoords && {L.view(item, (p) => Math.floor(p.x) + \", \" + Math.floor(p.y))}}\n \n )\n}\n" }, { "path": "frontend/src/board/VideoView.tsx", "content": "import { h } from \"harmaja\"\nimport * as L from \"lonna\"\nimport { BoardCoordinateHelper } from \"./board-coordinates\"\nimport { Board, Connection, Image, Video } from \"../../../common/src/domain\"\nimport { BoardFocus } from \"./board-focus\"\nimport { AssetStore } from \"../store/asset-store\"\nimport { itemDragToMove } from \"./item-dragmove\"\nimport { itemSelectionHandler } from \"./item-selection\"\nimport { Dispatch } from \"../store/board-store\"\nimport { Tool, ToolController } from \"./tool-selection\"\nimport { DragBorder } from \"./DragBorder\"\nimport { itemZIndex } from \"./zIndices\"\n\nexport const VideoView = ({\n id,\n video,\n assets,\n board,\n isLocked,\n focus,\n toolController,\n coordinateHelper,\n latestConnection,\n dispatch,\n}: {\n board: L.Property\n id: string\n video: L.Property