Coder Social home page Coder Social logo

nordeck / matrix-neoboard Goto Github PK

View Code? Open in Web Editor NEW
79.0 3.0 5.0 5.73 MB

A collaborative whiteboard widget for Matrix

License: Apache License 2.0

JavaScript 0.51% Dockerfile 0.02% Mustache 0.11% HTML 0.05% TypeScript 99.30%
element hacktoberfest matrix matrix-widget-api nordeck whiteboard

matrix-neoboard's People

Contributors

ahmadkadri avatar charlynguyen avatar dependabot[bot] avatar dhenneke avatar github-actions[bot] avatar harharlinks avatar maheichyk avatar mgcm avatar mtrnord avatar nordeck-ci avatar nordeck-os-publish-pipeline[bot] avatar nurjinjafar avatar weeman1337 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

matrix-neoboard's Issues

Demo site isn't working

If I try open https://nordeck.github.io/matrix-neoboard/ it shows me this:

Only runs as a widget

You need to register this URL as a widget, it's not possible to use it standalone. Run this command in the matrix room you want to register the widget in:

/addwidget https://nordeck.github.io/matrix-neoboard/

Widget crash when opening a NeoBoard for the first time

Describe the bug

Steps To Reproduce

Steps to reproduce the behavior:
0. I use Element Web on Firefox 122.

  1. Got an invitation to a room with a NeoBoard. (!pQsOZaCCFWWaVfIknH:nordeck.io)
  2. Opened NeoBoard via the toggle icon in the room header.

Expected behavior
NeoBoard opens without any issues.

Screenshots / Videos

NS@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:1136917
DG@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:1681454
ua@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:553097
qa@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:562664
Gu@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:606388
Is@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:592640
Os@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:592568
_s@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:592429
bs@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:589395
534/Yo/<@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:538889
3095/t.unstable_runWithPriority@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:649827
Ho@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:538666
Yo@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:538836
Ko@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:538769
hs@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:586772
Aa@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:558424
na/l</<@https://neoboard.widget.nordeck.io/static/js/main.58356e60.js:2:797932

JavaScript: Console export:
console-export-2024-2-15_18-1-9.txt

Environment:

  • OS: Manjaro Linux, based on the Arch Linux btw
  • Browser: Firefox 122.0

Additional context

  • On the second try of opening this widget, it loaded without an issue.
  • Sadly, I don't have a non-minimized version of the error's trace stack.
  • If the JS-Console output doesn't help, just close the ticket, I guess. ๐Ÿคท

how to make a custom widget collaborative

I am using a url for an inage editor and would like this to be collaborative. is there a matrix documentation on how to make a cystom widget collaborative with users inside that room.

or how we can adapt this repo to a custom url.

Simplify getting started (collection of ideas)

Discovery

URLs

ReadMe

  • Start with a summary and a good screenshot
    • Bonus: Show collaboration
    • Bonus: Take a screenshot that looks like actual use instead of a demo
  • Demo Link (that actually works)
  • Add a all-in-one docker run command (or docker compose) for an easy local trial
  • Tell people how they can add Neoboard to their Matrix

Within the demo

  • If not started through Element, start the standalone version
  • Startup modal
    • State that it's a demo instance and its limitations
    • Link pricing/contact of the hosted/supported version
    • Link GitHub repo as the "code and issue list"
    • Offer to import a template
  • Tell people how they can add Neoboard to their Matrix
  • Within NeoBoard, offer a few templates to import (e.g. template gallery in a startup modal)
    • Ideas:
      • Retro
      • Company Meetup (progress presentations)
      • Calendar (Month, Quarter, Year) (leave room to mark dates)

Docker image

  • If not started through Element, start the standalone version

After the setup, the widget registration has to be repaired

Describe the bug

When setting up a new NeoBoard, https://nordeck.github.io/matrix-neoboard/ provides an Element command that requires fixing NeoBoard afterwards.

Steps To Reproduce

  1. Go to https://github.com/nordeck/matrix-neoboard?tab=readme-ov-file#readme

  2. Click on Click here
    Screenshot 2024-03-06 at 18-27-09 NeoBoard

  3. In Element, open a Matrix room and paste /addwidget https://nordeck.github.io/matrix-neoboard/

  4. Open the widget
    Screenshot 2024-03-06 at 18-26-53 Nordeck 2 Empty room

  5. Click "Repair widget"

Expected behavior

In step 2, the website should have provided a working Element command.

Screenshots / Videos

Environment:

  • OS: Manjaro Linux
  • Browser: Firefox 123

Additional context

Cannot select colour of shape until it is created

I'd like to be able to select a colour before I create shapes and objects. The current behaviour is most jarring when trying to draw with the pen. Needing to create a stroke, then select the colour on the first stroke, and then continuing to draw in order to get the colour I wanted to use is confusing:

Screencast.from.2024-05-17.16-22-17.webm

"I want to draw in blue..."

This issue will be exacerbated by fixing #437, requiring switching to the pointer tool in order to select the stroke, and then select the colour.

A potential solution is to put a colour picker tool in the bottom toolbar, which would also help indicate the currently selected default colour for new objects. Something like the following:

image

Can't run in subpath

Describe the bug

Neoboard can't be run in a subpath proxied by nginx because the link to bundle.js seems to contain absolute path.

Steps To Reproduce

  1. Run Neoboard node /usr/bin/yarn start
  2. Proxy it with nginx:
location /neoboard/ {
        proxy_pass https://127.0.0.1:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

  1. Go to https://your-server/neoboard
  2. Get white screen and 404 as the index page tries to get to /bundle.js which should be /neoboard/bundle.js

Expected behavior

Widget warning showing up

Immediate editing of stroke after drawing with the pen makes multiple strokes difficult

Screencast.from.2024-05-17.16-11-45.webm

Currently trying to use the whiteboard with a graphics tablet and the pen tool is rather frustrating. Upon drawing a stroke, the editing pop-up is opened. This makes it impossible to draw in the area that the pop-up is covering.

In addition, when the pop-up is there, the stroke can seemingly be resized by dragging on the edges (even though there is no resize UI present).

My suggestion would be to hide this edit UI entirely unless the pointer tool is selected and the user clicks on a specific stroke.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.