Skip to content

Commit

Permalink
清除遺留代碼
Browse files Browse the repository at this point in the history 
增加版本號
  • Loading branch information
@cycsd
cycsd committed Jan 4, 2024
1 parent 64c43cd commit 96eb07a
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 189 deletions.
42 changes: 6 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,56 +4,26 @@

This tool integrates creating notes and inserting notes into visualized tools. It assists you in quickly building visualized notes on [Obsidian Canvas](https://obsidian.md/canvas)and the [obsidian-excalidraw-plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin) by "Drag and Drop".


> [!note]
> # 如果你對下方步驟熟悉且不會厭煩的話，你不需要使用此插件
> 1. 選擇想要整理的段落，並在編輯器上右鍵開啟工具菜單
> 2. 點選擷取目前內容至其他檔案
> 3. 在 [Obsidian Canvas](https://obsidian.md/canvas) 或 [obsidian-excalidraw-plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin)點選右鍵開啟工具菜單
> 4. 點選插入檔案，將剛剛創建的檔案插入至畫布中
> 5. 可以藉由拖曳連結取代 3~4 步驟，且藉由設定 Note Composer快速鍵取代右鍵操作
> [!note]
> # You don't need to use this plugin
> ## if you are comforable with flowing steps:
> ## if you are comfortable with flowing steps:
> 1. Right-click to open the tools menu in the editor
> 2. Use Obsidian Note Composer to extract your thoughts into a new note
> 3. Right-click to open the tools in [Obsidian Canvas](https://obsidian.md/canvas) or [obsidian-excalidraw-plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin)
> 4. insert markdown file to canvas.
> 4. Insert markdown file to canvas.
> 5. You can replace Right-click by setting Note Composer hotkey, and replace steps 3 ~ 4 by dragging link in editor.

# Example
## Obsidian Canvas
![ExampleCanvas](src/images/CardNoteCanvas.gif)
## Excalidraw
![ExampleExcalidraw](src/images/CardNoteExcalidraw.gif)

## First time developing plugins?

Quick starting guide for new plugin devs:

- 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.

## 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.

156 changes: 4 additions & 152 deletions dragUpdate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import { FileNameCheckModal } from "src/ui";
import { insertEmbeddableOnDrawing as insertEmbeddableNoteOnDrawing, isExcalidrawView } from "src/adapters/obsidian-excalidraw-plugin";
import { isObsidianCanvasView } from "src/adapters/obsidian";



type Selection = {
from: number,
to: number,
Expand Down Expand Up @@ -46,75 +44,15 @@ async function getUerRename(plugin: CardNote, defaultFile: FileInfo) {
function moveElement(elm: HTMLElement, x: number, y: number) {
elm.style.transform = `translate(${x}px,${y}px)`;
}
function findIframe(elm: HTMLElement | null | undefined) {
let el = elm?.win.frameElement
// let iframe: HTMLIFrameElement | undefined;
// while (el) {
// if (el instanceof HTMLIFrameElement) {
// iframe = el;
// console.log("iframe in while: ", iframe);
// }
// console.log("while parent", el.parentElement);
// el = el.parentElement
// }

return el;
}
function computeIframeOffect(iframe: Element) {
let enter = true;
const aroundFrame = (
pos: { x: number, y: number },
rect: DOMRect,
margin = 10) => {
console.log("compute around frame");
console.log("pos:", pos);
console.log("rectangle", rect);
return pos.x > rect.left - margin
&& pos.x < rect.right + margin
&& pos.y > rect.top - margin
&& pos.y < rect.bottom + margin
}
const inFrame = (
pos: { x: number, y: number },
rect: DOMRect) => {
console.log("in pos:", pos);
console.log("in rectangle", rect);
return pos.x >= 0
&& pos.x <= rect.width
&& pos.y >= 0
&& pos.y <= rect.height
}
return (e: DragEvent) => {
let pos = getPosition(e);
console.log("in offset", pos);
const rect = iframe.getBoundingClientRect();
const inframe = inFrame(pos, rect) && enter;
console.log("in iframe?", inframe);
enter = inframe || aroundFrame(pos, rect);
console.log("enter? ", enter);

pos = inframe
? { x: pos.x + rect.x, y: pos.y + rect.y }
: pos;
return pos;
}

}
function getPosition(e: DragEvent) {
console.log("get position", { x: e.clientX, y: e.clientY });
return { x: e.clientX, y: e.clientY };
}

export const dragExtension = (plugin: CardNote) => {
const addDragStartEvent = (dragSymbol: HTMLElement, view: EditorView) => {
const container = plugin.app.workspace.containerEl;
let needToAddLinkFlag = false;
let ghost: HTMLElement;
let dragoverBackground: HTMLElement;
let offset: (e: DragEvent) => {
x: number;
y: number;
} = getPosition;
let info: { content: string, lines: Selection[] };

const handleDrop = async (e: DragEvent) => {
Expand Down Expand Up @@ -147,54 +85,29 @@ export const dragExtension = (plugin: CardNote) => {
const locate = plugin.app.workspace.getDropLocation(e);
const target = locate.children.find(child => child.tabHeaderEl.className.contains("active"));
const drawView = target?.view;
console.log("locate", locate);
console.log("target", target);
console.log("canvas view", drawView);
if (isExcalidrawView(drawView)) {
//needToAddLinkFlag = true;
createFileAndDraw((file, fileLink) => {
insertEmbeddableNoteOnDrawing(e, drawView, fileLink, file, plugin);
});
//drawMethod = (fileLink, file, plugin) => insertEmbeddableNoteOnDrawing(drawView, fileLink, file, plugin,);
} else if (isObsidianCanvasView(drawView)) {
//needToAddLinkFlag = true;
const pos = drawView.canvas.posFromEvt(e);
console.log("position", pos);
createFileAndDraw((file, fileLink) => {
drawView.canvas.createFileNode({ file, pos });
})
// drawMethod = (fileLink, file, plugin) => {
// const returnValue = drawView.canvas.createFileNode({ file, pos });
// console.log("draw on obsidian canvas", returnValue);
// }
}
else {
needToAddLinkFlag = false;
//obsidian canvas is div wrap
//console.log("not in canvase", e.target);
}
};
const displayContentWhenDragging = (e: DragEvent) => {
if (ghost) {
console.log("dragging", e);
const pos = offset(e)
const pos = getPosition(e);
moveElement(ghost, pos.x, pos?.y);
if (!ghost.isShown()) {
ghost.show();
}
}
e.preventDefault();
};

//dragSymbol.addEventListener("drag", displayContentWhenDragging);
dragSymbol.addEventListener("dragstart", (e) => {
const iframe = findIframe(e.targetNode?.parentElement);
console.log("detect Iframe?", iframe);
// offset = iframe
// ? computeIframeOffect(iframe)
// : getPosition;
offset = getPosition;

const getSelection = (): { content: string, lines: Selection[] } => {
const selectLines = view.state.selection.ranges.map(range => ({
from: range.from,
Expand Down Expand Up @@ -222,24 +135,11 @@ export const dragExtension = (plugin: CardNote) => {
if (!ghost) {
const div = document.createElement("div");
//set position to absolute and append it to body to show custom element when dragging
div.style.position = "absolute";
div.addClass("ghost");
div.hide();
div.setCssStyles({
padding: "5px 25px",
borderStyle: "solid",
borderWidth: "3px",
borderRadius: "10px",
width: "300px",
minHeight: "200px",
})
moveElement(div, e.clientX, e.clientY);
const bg = document.createElement("div");
bg.setCssStyles({
opacity: '0',
width: '100%',
height: '100%',
position: 'fixed',
})
bg.addClass("dragbackground")
dragoverBackground = container.appendChild(bg);
ghost = container.appendChild(div);
}
Expand All @@ -254,37 +154,20 @@ export const dragExtension = (plugin: CardNote) => {
"",
plugin);
});

plugin.registerDomEvent(container, "drop", handleDrop);
plugin.registerDomEvent(container, "dragover", displayContentWhenDragging);
//(e.dataTransfer as any).effectAllowed = "all";
//e.dataTransfer?.setDragImage(
// ghost,
// 0,
// 0
// );
});

const reset = () => {
container.removeEventListener("drop", handleDrop);
container.removeEventListener("dragover", displayContentWhenDragging);
container.removeChild(ghost);
container.removeChild(dragoverBackground);
console.log("background: ", dragoverBackground);
ghost.replaceChildren();
offset = getPosition;
// const flagRest = () => {
// needToAddLinkFlag = false;
// };
// return needToAddLinkFlag
// ? { flagRest }
// : needToAddLinkFlag;
};

return {
reset,
// getInfo: () => info,
// insertLinkOnDrawing: (fileLink: string, file: TFile, plugin: CardNote) => drawMethod?.(fileLink, file, plugin),
}
}
const dragMarker = new (class extends GutterMarker {
Expand All @@ -299,39 +182,8 @@ export const dragExtension = (plugin: CardNote) => {

const { reset } = addDragStartEvent(dragSymbol, view);

dragSymbol.addEventListener("dragend", async (e) => {
dragSymbol.addEventListener("dragend", (e) => {
reset();
//const dropOnCanvas =
// if (dropOnCanvas) {
// dropOnCanvas.flagRest();
// const pluginApp = plugin.app;
// const info = getInfo();
// const defaultFile = await createDefaultFileName(plugin, info.content);
// const userCheckPath = await getUerRename(plugin, defaultFile);
// if (!isBreak(userCheckPath)) {
// //replace editor's select line or text with link
// const filePath = createFullPath(userCheckPath);
// console.log(filePath);
// pluginApp.vault.createFolder
// const file = await pluginApp.vault.create(filePath, info.content);
// const fileLink = `[[${pluginApp.metadataCache.fileToLinktext(
// file,
// file.path,
// file.extension === "md",
// )}]]`;
// const replaceTextWithLink = () => {
// const trans = view.state.update({
// changes: info.lines.map(line => {
// return { from: line.from, to: line.to, insert: fileLink }
// })
// })
// view.dispatch(trans);
// };
// replaceTextWithLink();
// insertLinkOnDrawing(fileLink, file, plugin);

// }
// }
});

return dragSymbol;
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "card-note-plugin",
"name": "CardNote",
"version": "1.0.0",
"version": "0.1.0",
"minAppVersion": "0.15.0",
"description": "Demonstrates some of the capabilities of the Obsidian API.",
"author": "cycsd",
Expand Down
21 changes: 21 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,24 @@ available in the app when your plugin is enabled.
If your plugin does not need CSS, delete this file.
*/

.ghost {
position: absolute;
padding: 5px 25px;
border: solid;
border-width: 3px;
border-radius: 10px;
width: 300px;
min-height: 200px;
}

.hidden {
display: none;
}

.dragbackground {
opacity: 0;
width: 100%;
height: 100%;
position: fixed;
}

0 comments on commit 96eb07a

Please sign in to comment.