Skip to content
This repository has been archived by the owner on Nov 10, 2022. It is now read-only.

Milestone 1.3.0 #53

Draft
wants to merge 45 commits into
base: master
Choose a base branch
from
Draft

Milestone 1.3.0 #53

wants to merge 45 commits into from

Conversation

severo
Copy link
Collaborator

@severo severo commented Jan 9, 2020

severo added 8 commits January 8, 2020 22:06
This means that the URL always contains the query argument "imageSrc".

When the user selects another background image, the URL is changed, and
the app adapts to the new URL.

Done with vue-router and vuex-router-sync.
For large uploaded images, putting the base64 representation (which is
the 'src' argument of the image) as a query argument value generates an
URL which length is not manageable by browsers.

Instead, these locally uploaded images are assigned an UUID identifier.

Obviously, sharing such an URL does not carry the image itself anymore,
and another solution will be needed to store the image before sharing.
See LyonDataViz#52.
It allows to directly import a new image changing the imageSrc argument
in the query string of the URL
It allows to get rid of two typescript errors in src/view/Home.vue,
and to get aligned with the rest of the code.
The URL query parameter for locally updated images were:

  local:[some uuid]

whereas the ImageSrc localId property were:

  [some uuid]

Now: no more conversion, both are:

  local:[some uuid]
@vercel
Copy link

vercel bot commented Jan 9, 2020

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/lyondataviz/occupapp/7t47d6shd
✅ Preview: https://occupapp-git-fork-severo-milestone-130.lyondataviz.now.sh

Beware: it's WIP, because the URL is parsed everytime a query argument
is updated, for example on every drag event when moving a point. It
slows down the application and the canvas flickers.
Instead of updating (and then parsing) the URL on every point update
during a drag action, wait for the drag to end to update the URL. Note
that the Vuex store keeps being updated on every move.

Thanks @romsson for the suggestion.
If a new image is added through the URL parameter ?imageSrc=...,
add it to the gallery if it's valid.
Note that the domain is restricted to [0, 100], that's why the
restriction is fixed to 2 decimals. Be careful if the domain changes.
with $router.replace, the URL was modified, but not the browser history.
The UX is somewhat better if the user is allowed to cancel their last
move going one step back.
The goal is to avoid calling this.$router from a lot of vues.
- remove redundancy in the state (see below)
- cut the parsing and routing processes into smallest pieces (src/utils/...)
- fix a bug that broke the selection of an uploaded image
- reduce a bit the size of the query parameters (imageSrc -> img, etc.).
But since the UUID of all the objects are still in the URL, it's not
that useful for now.

---

The Vuex state is managed as follows.

The URL query parameters are the source of trust, and define the current
composition. Note that if the URL doesn't contain any query parameters, or if
they are insufficient to recreate a complete composition, the application will
be routed to a new URL, with missing parameters filled with default values,
possibly several times, until converging to a valid URL.

Once the URL has been parsed successfully, the current composition is stored in
store/compositions, that contains the compositions associated to all the images
(the default ones, and any other updated or linked image). Note that these
compositions are not persisted in the URL, except the current one.

The Vuex state also contains other data that is not persisted in the URL:

- derived data: (such as store/current/backgroundImage.ts). They don't contain
  any data by their own, but react to current composition change by updating
  their cached getters. They also provide helpers to update the current
  composition (ie. to route to a new URL). They have access to the router.
- temporary data, such as the points selection used to delete various points at
  once (it's cleared every time a composition is changed)
- cached data: store/current/backgroundImage.ts contains the background image,
  and store/current/pointMetrics contains the points metrics that are computed
  from the current composition
- general data, such as the color vs black and white switch for background image
This way, if a user closes its tab, it will disappear from the list of
guests (obviously: no user in the world would take the time to disconnect
from the room, clicking on the switch, before closing the tab)
also: a message in case there are no other guests
Uses the server version
LyonDataViz/socket-server@95bef62
deployed on
https://git.heroku.com/immense-coast-15741.git

Note: there is a resonance bug in some cases, the composition doesn't
stabilize and oscillate between two versions.
Also: a "unchaught exception: Object" exception.
instead of sending again the whole state. Requires "new" version of
socket-server.
That way the galleryImages just provides getters. There was no real
need for an abstraction between Gallery and compositions.
That way, current/backgroundImage is just responsible for caching the
background image.
A mutation should be only to set the value of a mutable variable,
meanwhile the actions may carry some logic.
The URL is no more updated at every state modification.
It is parsed and a composition can be passed through the URL.
There is way currently to share an URL
The compositions have an id, and it's the basis to select the current
composition.
A composition is no more indexed by its background image. Various
compositions can use the same background image.
Locally uploaded images can be shared through URL, with a very reduced
size so that the base64 representation doesn't pass the max URL length
(~2000 is the common accepted limit for URLs). Note that nothing ensures
that the URL will be under 2000 characters.
A lot of code has changed, but mainly:
- the source of truth is store/modules/compositions
- it can be modified by the URL at mount and by the socket.io server when
collaboration is activated
- a micro-image is created and encoded in base64 in the URL for the
uploaded images
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant