プラグインを作成する方法

1. script-name.vueというファイルを作成します。

2. 下記のようにファイルにコンテンツを追加します：

<!--
PluginName: __SCRIPT_NAME__
PluginUrl: __URL_WHERE_OTHER_USERS_CAN_DOWNLOAD_THE_SCRIPT__
-->


<!-- Libraries (if need) -->
<script src="__URL_OF_LIBRARY_JS_FILE__"></script>


<!-- Main Script -->
<script>

// On Key Down
ioctopus.$on("keydown", e => {

	// Alt + Shift + N
	if (e.altKey && e.shiftKey && e.code === "KeyN") {

		// Get Selected Branches
		const selectedBranches = ioctopus.getSelectedBranches();

		// Each branches
		for (let branch of selectedBranches) {

			// Change the branch content
			let text = branch.getText();
			
			// Change the text as you want
			// (you can use html)...
			text = `<span class="my-style">${text}</span>`;

			branch.setText(text);
		}
	}
});
</script>


<!-- Styles -->
<style>
.my-style {
	color: green;
}
</style>

ioctopus - は思考マップの主要なオブジェクトです

主要なイベント

ioctopus.$on('EVENT_NAME', callback);

利用可能なイベント：

keydown
keypress
keyup
context-menu
branch-map-data （枝データ変更時）

コンテキストメニュー

// On Context Menu
ioctopus.$on('context-menu', contextMenu => {

	// Add to the Context Menu new Button
	contextMenu.add({
		label: "Button text", // Button Text
		icon: "fas fa-list-ul", // Button Icon
		keycode: "Alt+Shift+L", // Dysplayed prompt
		click: () => { // Button action
			// Code running on click
		},
		href: "https://...", // Button url (when no Button action)
		target: "_blank", // Open Button url in new window (tab)
	});
});

どこからアイコンを入手できますか？

Fontawesome.com から。
例えば、このページからこのコードをコピーします。

支店

ＩＤで支店を取得する：

const branch = ioctopus.getBranchById(ID);

選択した支店を取得する：

const selectedBranches = ioctopus.getSelectedBranches();

ブランチのテキストを取得する：ブランチにテキストを設定する：子ブランチを追加する：

branch.addChild({
	content: {
		text: "My new branch",
	}
});

"ロード中..."のブランチを表示/非表示

branch.loading();
branch.loadingStop();

ブランチにボタンを追加する：

branch.addButton('buttonName', {
	icon: 'fa-equals fas',
	title: 'Title on hover',
	label: 'Button label',
	click: () => {
		console.log('Button pressed')
	},
})

どこからアイコンを入手できますか？

fontawesome.comより。
このページから例えばこのコードをコピーします。

ボタンを削除する

branch.removeButton('buttonName')

ブランチのデータが変更された時に

ioctopus.$on('branch-map-data', ({ $branch, mapData }) => {
	// ...
});

セレクション

選択された要素の数:

ioctopus.selectedCount

選択された要素

let selectedElementsArray = ioctopus.getSelected();

要素の選択

ユーザーがブランチを選択できるようにするには次を使用してください：

選択モードを開始します：

ioctopus.startPicking($branch => {
	ioctopus.stopPicking();
	console.log('$branch', $branch);
});

選択を停止する：

ioctopus.stopPicking();

メニューバー

メニューバーにボタンを追加する方法:

// Menubar
ioctopus.addButtonToMenubar({
	to: 'tools',
	button: {
		label: 'Button label',
		icon: 'fas fa-calendar-alt', // Font Awesome
		click() {
			// ...
		},
	},
});

会話

会話を開く：

ioctopus.openDialog({
	header: 'Header of dialog',

	// Vue Component
	component: {
		template: `<p>Content</p>`,
	}

}).then(dialog => {
	//...
});

ダイアログを閉じる

dialog.close();

テキスト入力でショートコードを無効にする

入力後：

ioctopus.onFocus();

入力終了後：

ioctopus.onBlur();

例：

ioctopus.openDialog({
	header: 'Header of dialog',

	// Vue Component
	component: {
		methods: {
			
			onFocus() {
				ioctopus.onFocus();
			},


			onBlur() {
				ioctopus.onBlur();
			},
		},
		template: `<input @focus="onFocus" @blur="onBlur">`,
	}

});

ファイルを保存する

ioctopus.save();

もっと機能が欲しい？

info@ivvi.devにメールをお送りください。

コメントする

プラグインの作り方