update readme

.gitignore

@@ -1,22 +1,23 @@
-# vscode
-.vscode 
-
-# Intellij
-*.iml
-.idea
-
-# npm
-node_modules
-
-# Don't include the compiled main.js file in the repo.
-# They should be uploaded to GitHub releases instead.
-main.js
-
-# Exclude sourcemaps
-*.map
-
-# obsidian
-data.json
-
-# Exclude macOS Finder (System Explorer) View States
-.DS_Store
+# vscode
+.vscode 
+
+# Intellij
+*.iml
+.idea
+
+# npm
+node_modules
+
+# Don't include the compiled main.js file in the repo.
+# They should be uploaded to GitHub releases instead.
+main.js
+
+# Exclude sourcemaps
+*.map
+
+# obsidian
+data.json
+
+# Exclude macOS Finder (System Explorer) View States
+.DS_Store
+package-lock.json

README.md

@@ -1,96 +1,50 @@
-# Obsidian Sample Plugin
+# Obsidian Slide Note
 
-This is a sample plugin for Obsidian (https://obsidian.md).
+This repository maintains an Obsidian plugin that can help you take notes for your classes easier.
 
-This project uses Typescript to provide type checking and documentation.
-The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
+With this plugin you can write plaintext notes, and:
 
-**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
+- keep binding with the related information
+- render the slide and your annotations together
+- make your notes decouple with the heavy tools
 
-This sample plugin demonstrates some of the basic functionality the plugin API can do.
-- Changes the default font color to red using `styles.css`.
-- Adds a ribbon icon, which shows a Notice when clicked.
-- Adds a command "Open Sample Modal" which opens a Modal.
-- Adds a plugin setting tab to the settings page.
-- Registers a global click event and output 'click' to the console.
-- Registers a global interval which logs 'setInterval' to the console.
+This plugin is inspired by the [better-pdf](https://github.com/MSzturc/obsidian-better-pdf-plugin), but beyond rendering PDF pages.
+Slide Note provides several new features, including:
 
-## First time developing plugins?
+- better pdf hover preview
+- graphic annotation support
+- per-file frontmatter configuration
+- performance optimization for huge pages
+- automatic rerender when the pdf file has been modified
 
-Quick starting guide for new plugin devs:
+## Grammar
 
-- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with.
-- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
-- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
-- Install NodeJS, then run `npm i` in the command line under your repo folder.
-- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
-- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
-- Reload Obsidian to load the new version of your plugin.
-- Enable plugin in settings window.
-- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
+You can involve this plugin by writing a code block with the `slide-note` type.
 
-## Releasing new releases
-
-- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
-- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
-- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
-- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.
-- Publish the release.
-
-> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`.
-> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json`
-
-## Adding your plugin to the community plugin list
-
-- Check https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md
-- Publish an initial version.
-- Make sure you have a `README.md` file in the root of your repo.
-- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
-
-## How to use
-
-- Clone this repo.
-- `npm i` or `yarn` to install dependencies
-- `npm run dev` to start compilation in watch mode.
-
-## Manually installing the plugin
-
-- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
-
-## Improve code quality with eslint (optional)
-- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. 
-- To use eslint with this project, make sure to install eslint from terminal:
-  - `npm install -g eslint`
-- To use eslint to analyze this project use this command:
-  - `eslint main.ts`
-  - eslint will then create a report with suggestions for code improvement by file and line number.
-- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
-  - `eslint .\src\`
-
-## Funding URL
-
-You can include funding URLs where people who use your plugin can financially support it.
+`````markdown
+```slide-note
+file: example.pdf      # file path 
+page: 2, 4-5, 8       # render page, default is all pages
+scale: 0.2        # page scaling, default `1.0`
+link: true        # page hover preview, default `false`
+rotat: 90         # page rotation, default `0`
+rect: [0, 0, 100, 100]     # display area, default is full page
+```
+`````
 
-The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file:
+![basic usage](doc/basic.png)
 
-```json
-{
-    "fundingUrl": "https://buymeacoffee.com"
-}
-```
+Besides these basic uses, you can also append more statements in the block to annotate the PDF.
+A string starting with @ is a graphic annotation.
+Since the PDF pages are rendered as HTML canvas elements, you can use js/ts codes to append content to the page.
 
-If you have multiple URLs, you can also do:
+You should also notice that when your mouse over the pages, there is a position coordinate on your status bar.
+Clicking the page will copy the corresponding coordinate into your clipboard.
 
-```json
-{
-    "fundingUrl": {
-        "Buy Me a Coffee": "https://buymeacoffee.com",
-        "GitHub Sponsor": "https://github.com/sponsors",
-        "Patreon": "https://www.patreon.com/"
-    }
-}
-```
+> Note: This feature is still under development, in the future Slide Note will provide a No-Code interface.
 
-## API Documentation
+And all the other statements will be treated as your notes, this makes sure that all your notes bind with the page in one block.
+Therefore, when you link them in other places, you can get them all.
 
-See https://github.com/obsidianmd/obsidian-api
+In the end, your notes should look like the following:
+![advance usage](doc/advance.png)

src/pdfblock/renderer.ts

@@ -128,7 +128,7 @@ export class PDFBlockRenderer extends MarkdownRenderChild {
 					canvas.addEventListener("mouseleave", (event)=> {
 						app.workspace.trigger("slidenote:mouseleave");
 					});
-					MarkdownPreviewView.renderMarkdown(this.params.note, this.el, this.sourcePath, this)
+
 					await page.render(renderContext).promise.then(
 						() => {
 							if (this.params.annot != "" && this.settings.allow_annotations) {
@@ -158,6 +158,7 @@ export class PDFBlockRenderer extends MarkdownRenderChild {
 					)
 
 				}
+				MarkdownPreviewView.renderMarkdown(this.params.note, this.el, this.sourcePath, this);
 			} catch (error) {
 				const p = this.el.createEl("p", {text: "[SlideNote] Render Error: " + error});
 				p.style.color = "red";