This repository has been archived by the owner on Nov 10, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Milestone 1.3.0 #53
Draft
severo
wants to merge
45
commits into
LyonDataViz:master
Choose a base branch
from
severo:milestone-1.3.0
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Milestone 1.3.0 #53
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
severo
commented
Jan 9, 2020
•
edited
Loading
edited
- share the selected image in the URL - the URL is now the source of trust for the selected image, and it's possible to navigate with history buttons
- this allows to add a new image to the gallery by editing the imageSrc query parameter, for example: https://occupapp-p8oynl442.now.sh/#/?imageSrc=https://visionscarto.net/local/cache-vignettes/L1171xH776/image5jpg-1f1f76-a51cf.jpg
- if the imageSrc is incorrect (no image could be loaded), the previous image keeps used, or if it's incorrect on start, load the default image (currently: 'petanque')
- locally updated images are not shareable - in that case, the URL query parameter starts with 'local:', eg https://occupapp-p8oynl442.now.sh/#/?imageSrc=local%3A55188aa7-cf93-47ed-a083-56b627e835c4, and if shared, the page is redirected to the default image (currently: 'petanque')
It was removed in LyonDataViz@e19055c
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]
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/lyondataviz/occupapp/7t47d6shd |
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
TODO: use an environment variable to choose the server Also: remove a console.log
Also: use nanoid(5) to provide nicer default names
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.