fix the flickering by delaying and throwing

Explanation coming on my blog, math2001.github.io, something like
"lessons learned from re writing MarkdownLivePreview"
This commit is contained in:
Mathieu PATUREL
2019-11-15 16:10:50 +11:00
parent 0dea8afba4
commit c14c28b56b
4 changed files with 19 additions and 10 deletions

View File

@ -10,7 +10,7 @@ from .utils import *
MARKDOWN_VIEW_INFOS = "markdown_view_infos" MARKDOWN_VIEW_INFOS = "markdown_view_infos"
PREVIEW_VIEW_INFOS = "preview_view_infos" PREVIEW_VIEW_INFOS = "preview_view_infos"
# FIXME: put this as a setting for the user to choose? # FIXME: put this as a setting for the user to choose?
DELAY = 500 # ms DELAY = 100 # ms
def get_resource(resource): def get_resource(resource):
path = 'Packages/MarkdownLivePreview/resources/' + resource path = 'Packages/MarkdownLivePreview/resources/' + resource
@ -102,6 +102,7 @@ class OpenMarkdownPreviewCommand(sublime_plugin.TextCommand):
# FIXME: is this the best way there is to check if the current syntax is markdown? # FIXME: is this the best way there is to check if the current syntax is markdown?
# should we only support default markdown? # should we only support default markdown?
# what about "md"? # what about "md"?
# FIXME: what about other languages, where markdown preview roughly works?
return 'markdown' in self.view.settings().get('syntax').lower() return 'markdown' in self.view.settings().get('syntax').lower()
class MarkdownLivePreviewListener(sublime_plugin.EventListener): class MarkdownLivePreviewListener(sublime_plugin.EventListener):
@ -110,6 +111,10 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
# markdown_view.id(): phantom set # markdown_view.id(): phantom set
} }
# we schedule an update for every key stroke, with a delay of DELAY
# then, we update only if now() - last_update > DELAY
last_update = 0
# FIXME: maybe we shouldn't restore the file in the original window... # FIXME: maybe we shouldn't restore the file in the original window...
def on_pre_close(self, markdown_view): def on_pre_close(self, markdown_view):
@ -124,7 +129,6 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
self.file_name = markdown_view.file_name() self.file_name = markdown_view.file_name()
if self.file_name is None: if self.file_name is None:
# FIXME: this is duplicated code. How should it be generalized?
total_region = sublime.Region(0, markdown_view.size()) total_region = sublime.Region(0, markdown_view.size())
self.content = markdown_view.substr(total_region) self.content = markdown_view.substr(total_region)
markdown_view.erase(edit, total_region) markdown_view.erase(edit, total_region)
@ -180,22 +184,26 @@ class MarkdownLivePreviewListener(sublime_plugin.EventListener):
# @min_time_between_call(.5) # @min_time_between_call(.5)
def on_modified_async(self, markdown_view): def on_modified_async(self, markdown_view):
# FIXME: it keeps on flickering, it's really annoying
infos = markdown_view.settings().get(MARKDOWN_VIEW_INFOS) infos = markdown_view.settings().get(MARKDOWN_VIEW_INFOS)
if not infos: if not infos:
return return
self._update_preview(markdown_view) # we schedule an update, which won't run if an
sublime.set_timeout(partial(self._update_preview, markdown_view), DELAY)
def _update_preview(self, markdown_view): def _update_preview(self, markdown_view):
# if the buffer id is 0, that means that the markdown_view has been closed # if the buffer id is 0, that means that the markdown_view has been closed
# This check is needed since a this function is used as a callback for when images # This check is needed since a this function is used as a callback for when images
# are loaded from the internet (ie. it could finish loading *after* the user # are loaded from the internet (ie. it could finish loading *after* the user
# closes the markdown_view) # closes the markdown_view)
if time.time() - self.last_update < DELAY / 1000:
return
if markdown_view.buffer_id() == 0: if markdown_view.buffer_id() == 0:
return return
self.last_update = time.time()
total_region = sublime.Region(0, markdown_view.size()) total_region = sublime.Region(0, markdown_view.size())
markdown = markdown_view.substr(total_region) markdown = markdown_view.substr(total_region)

View File

@ -1,5 +1,7 @@
I'm not sure that it **actually** going to work, but it seems nicer than the [previous version][prev] I'm not sure that it **actually** going to work, but it seems nicer than the [previous version][prev]
this is a test, hello world
This is the first image from the local file system (absolute path, sorry, it's not going This is the first image from the local file system (absolute path, sorry, it's not going
to work on your system unless your username is math2001): to work on your system unless your username is math2001):

View File

@ -13,6 +13,4 @@ if input("answer yes") != 'yes':
this flickering is really annoying... this flickering is really annoying...
this
It looks like it's gone... Oh wait nah, it's still here... It looks like it's gone... Oh wait nah, it's still here...

View File

@ -5,6 +5,7 @@ html {
body { body {
font-family: "Ubuntu", "DejaVu Sans", "Open Sans", sans-serif; font-family: "Ubuntu", "DejaVu Sans", "Open Sans", sans-serif;
font-size: 15px;
} }
blockquote { blockquote {