うしブログ

うしブログ

趣味で運営する、GeoGebraの専門ブログ。

(作業メモ)StartPoint要検証(2行の場合;テキスト変更時未定義問題)

(要修復)ToggleButton・RollPolygonWithoutSlipping・貯金時計・直感力トレーニング

グローバルJavaScript入力欄をAceエディタ化 & jQueryライクにオブジェクトスタイルを編集 [geoEditor-1-4]

下記記事で紹介したスクリプトの改良版です(v.4)。

usidesu.hatenablog.com


 v.3からの改善点

  • GeoGebraオブジェクトを、jQueryライクにセレクトして、スタイル情報を参照・変更できるようになりました(後述)。

機能紹介

グローバルJavaScript入力欄を綺麗なエディターにする

スクリプトを導入すると、下図のように、グローバルJavaScript入力欄が、綺麗なエディター(Aceエディター)になる。

f:id:usiblog:20210902010214p:plain

コードの色分け、自動補完、構文エラー警告、自動整形(エディタをダブルクリック)などの機能があるので、サクサク入力できる。

f:id:usiblog:20210902010641g:plain

GeoGebraオブジェクトをjQueryライクにセレクトする

g$(セレクタ)

で、GeoGebraオブジェクトをjQueryライクに選択できる。

たとえば、

g$('#A') → Aという名前のオブジェクト

g$('.point') → すべての点

g$('@:not(#A)') → A以外の全てのオブジェクト

というように使う。

g$の使い方は、後日詳細に解説したいと考えているが、さしあたり、下記記事を参照。

usidesu.hatenablog.com

g$を利用すれば、セレクトしたGeoGebraオブジェクトのスタイル変更が、容易に可能である。

たとえば、

g$('.point').attrs({
    show: {
        object: false,
        label: true
    }
});

で、全ての点を非表示にできる。

f:id:usiblog:20210902012818g:plain

さらに、

g$('objColor[r="0"][g="0"][b="255"]').of('.point').attrs({
    objColor: { r: 255, g: 0, b: 0 },
    show: { object: true, label: false },
    javascript: { val: 'alert("this used to be blue.");' }
});

で、すべての青色の点を対象に、「色を赤くし、ラベルを非表示にし、on click スクリプトをセットする」という操作を実行できる。

f:id:usiblog:20210902014803g:plain

下記に示されているXML属性は、基本的にすべて編集可能である(オブジェクトタイプによって、そもそも使用できない属性は、もちろん除く)。

https://wiki.geogebra.org/en/Reference:Common_XML_tags_and_types#Element:_element

導入方法

グローバルJavaScript記述欄に、本記事末尾のスクリプトをコピペする。

f:id:usiblog:20210902005120g:plain

エディター導入前に、すでにグローバルJavaScript欄にスクリプトを記述している場合は、そのスクリプトを一旦メモ帳などにコピーしておき、エディター導入後に、再びペーストしてください。

アプレットを保存し、ブラウザを更新することで、アプレットを再読み込みすれば、グローバルJavaScript記述欄がJSエディタ化する。

入力後、アプレットを保存して再読み込みすれば、記述したスクリプトが使えるようになる。

デフォルトでは、エラー行番号とエディタ上の行番号が一致しません。

一致させたい場合は、下記スクリプト中「// firstLineNumber: ...」をコメントインしてください。

無効化の方法

これまでエディタに記述したスクリプトを、エディタ無効化後も利用する場合は、無効化する前に、エディタ化に入力したスクリプトをメモ帳などにコピーしておき、無効化後に再びペーストしてください。

①エディタの任意の箇所に「// disable_usiusi」とコメントする(カギカッコ不要) 。

f:id:usiblog:20210902004747p:plain

アプレットを保存する。

アプレットを再読込して、グローバルJS入力欄が元に戻っていることを確認する。

④グローバルJS入力欄に書かれたスクリプトを全て削除する。これまでエディタに記述したスクリプトを引き続き使用したい場合は、それをグローバルJS入力欄にコピペする。そして、アプレットを保存する。

再導入したい場合

上記ステップ③まで実行した段階で、エディタを再導入したい場合は、グローバルJS入力欄のコメント「// disable_usiusi」を削除して、アプレットを再読み込みしてください。

ステップ④まで実行した段階で、エディタを再導入したい場合は、本記事上述「導入方法」に従って再導入してください。

スクリプト

See the Pen geoEditor-1-4 by うし (@usi_desu) on CodePen.