nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

921147_ja-JP

liliconcom

ドラッグ＆ドロップスクリプトの作成

こんにちは。私は、(JMP Pro) SEM および信頼性ブロック図で使用されるドラッグアンドドロップインターフェイスのようなものを作成しようと苦労しています。

画面の左側に「ボックス」のパレットを表示するというアイデアです。ボックスの1つを掴んで画面中央にドラッグし、ドロップした後、別のボックスを掴んでドラッグ＆ドロップする、といった操作をしたいと考えています。

ハンドルやネズミ捕りなど、色々な方法を試してみましたが、ある程度はできるものの、完全にはできませんでした。

以下に、Mousetrap を使った最新のコードを示します。GraphBox の左上にあるボックスを掴んで画面上をドラッグし、好きな場所にドロップできます。（ドロップすると黒くなります。）しかし、別のボックスを掴むことができません。ドロップしたボックスを移動することしかできず、別のボックスを追加することはできません。

現在、これをアプリケーションとして構築していますが、役立つ場合は変更しても構いません。

以下のスクリプトは、アプリケーションビルダーでコーディングした内容を示しています。添付ファイルにはアプリケーション全体が含まれています。

MousetrapとGraphBoxes、そしてAdd Graphics Scriptsについて、どうしても理解できない部分があるようです。どなたか教えていただけませんか？

// This script is executed when a new module instance is
// created.  The pre-defined object "thisModuleInstance" refers
// to the instance object, but other objects such as boxes and
// scripts have not yet been created.  Variables declared here are
// scoped to the ModuleInstance namespace.

// This special function will receive parameters passed to CreateInstance()
OnModuleLoad({},
);

thisModuleInstance << Create Objects;

// After this point your module instance objects have been created
// and can be referred to by name (for example, "Button1").



x0=5;
y0=95;
	
	
winref = (this module instance << Get Box);
// set graph box scales
winref[framebox(1)] << xaxis(0,100);
winref[framebox(1)] << yaxis(0,100);

// draw box in upper left corner.
pen color("Green");
winref[framebox(1)] << add graphics script(
							pen color("Green");
							Line({0,90}, {10,90},{10,100}, {0,100},{0,90}));



winref[framebox(1)] << Add Graphics Script(

						Mousetrap( 

							// drag script (mouse down)
							(
								// if mouse location is within box in upper left corner, then OK to drag.
									if(
										and(
											x>=x0-5,
											y>=y0-5,
											x<=x0+5,
											y<=y0+5
											),
										(	
											// set x0 and y0 if that were true
											x0 = x;
											y0 = y;
											// redraw the box at current mouse location while mouse button is down
											winref[framebox(1)] << add graphics script(
												"Front",
												pen color("Green");
												Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5}));
										)
									);
							),

							(
							// mouse up script
								// draw a polygon centered at the current mouse location
								winref[framebox(1)] << add graphics script(
									polygon({x0-5,y0-5},{x0+5,y0-5},{x0+5,y0+5},{x0-5,y0+5},{x0-5,y0-5})
									);
								// at this point I want to manually reposition the mouse over the original box in the
								// upper left, and grab another box.
								// Instead, all I can do is grab the box I just created and drag it somewhere else.
							)

						);


);

自動化とスクリプト

Re: ドラッグ＆ドロップスクリプトの作成

おそらく、新しいグラフィックスクリプトを常に追加し続けることは望ましくないでしょう。そうすると、If() が上書きされ、フレームボックスが「あふれ」てしまうからです。

これをもっと良い方法で構築することもできますが、以下はあなたができることの一例です

Names Default To Here(1);

rects = {};
x0 = 5;
y0 = 95;
x = .;
y = .;

nw = New Window("Example",
	
	Graph Box(
		Frame Size(200, 200),
		Mousetrap(
			x0 = x;
			y0 = y;
		,
		p = EvalExpr(Polygon(
			{Expr(x0+5), Expr(y0-5)},
			{Expr(x0+5), Expr(y0+5)},
			{Expr(x0-5), Expr(y0+5)},
			{Expr(x0-5), Expr(y0-5)}
		));
		Insert Into(rects, Name Expr(p));
		);
		Pen color("Green");
		Line({0,90}, {10,90},{10,100}, {0,100},{0,90});
		
		If(x >= x0 - 5 & y >= y0 - 5 & x <= x0 + 5 & y <= y0 + 5,
			Pen color("Green");
			Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5});
		);
		
		For(i = 1, i <= N Items(rects), i++,
			Pen Color("Black");
			Eval(rects[i]);
		);
	);
);

</CODE> <img src="https://us.v-cdn.net/6038925/uploads/images/89563i0F98FCB07A4441BC/jthi_1-1766523967638.png" role="button" title="jthi_1-1766523967638.png" alt="jthi_1-1766523967638.png" /> 編集: xとyの初期化を追加しました </LINGO-BODY> <LINGO-SUB id="lingo-sub-921160" slang="en-US" mode="UPDATE" translate="no">Re: ドラッグ＆ドロップスクリプトの作成</LINGO-SUB> <LINGO-BODY id="lingo-body-921160" slang="en-US" mode="UPDATE"> 私は次のように得ます: ディスプレイボックス[EvalContextBox] 名前未解決: 'x' のアクセスまたは評価で x が見つかりました、x/*###*/ 26行目 x&y はネズミ捕りの外でも持続しますか? <img src="https://us.v-cdn.net/6038925/uploads/images/89564iE967B41113B5D41E/hogi_0-1766525524905.png" role="button" title="hogi_0-1766525524905.png" alt="hogi_0-1766525524905.png" /> 編集： 彼らは「ネズミ捕りの外に留まる」 - ただし、永久に保持されるわけではありません。マウスボタンを離すとリセットされるようです。 <A href="https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/m-p/921213/highlight/true#M107999" target="_blank">https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/mp/921213/highlight/true#M107999</A> いいですね、緑の長方形で、「ドラッグ」の錯覚が非常に説得力があります ; ) 緑の四角形がなければ、マウスをクリックするたびに黒い四角形が追加されるような感じになります。 <iframe src="https://players.brightcove.net/6058004218001/default_default/index.html?videoId=6386912122112" width="280" height="280" allowfullscreen allow="encrypted-media"></iframe> </LINGO-BODY> <LINGO-SUB id="lingo-sub-921187" slang="en-US" mode="CREATE" translate="no">Re: ドラッグ＆ドロップスクリプトの作成</LINGO-SUB> <LINGO-BODY id="lingo-body-921187" slang="en-US" mode="CREATE"> おそらくxとyがメモリ内で初期化されていたため、動作しませんでした。スクリプトを更新してxとyを初期化したところ、新しいJMPセッションで動作するようになりました。 </LINGO-BODY> <LINGO-SUB id="lingo-sub-921211" slang="en-US" mode="CREATE" translate="no">Re: ドラッグ＆ドロップスクリプトの作成</LINGO-SUB> <LINGO-BODY id="lingo-body-921211" slang="en-US" mode="CREATE"> <A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/14366" target="_blank">@jthiさん</A>（そして貢献してくださった<A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/26800" target="_blank">@hogiさん</A>）ありがとうございます！このコードを自分の用途に合わせてアレンジできると思います。その過程で、Mousetrap、Add Graphics Script、Name Exprについても学ぶことができました。 JMPコミュニティの対応力と知識の豊富さにはいつも驚かされます。本当に感謝しています！ </LINGO-BODY> <LINGO-SUB id="lingo-sub-921219" slang="en-US" mode="UPDATE" translate="no">Re: ドラッグ＆ドロップスクリプトの作成</LINGO-SUB> <LINGO-BODY id="lingo-body-921219" slang="en-US" mode="UPDATE"> これは<A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/14366" target="_blank">@jthi</A>のスクリプトの高度なバージョンです: - 既存のボックスをドラッグできます。 - ユーザーがボックスのない領域をクリックしても、ボックスは作成または移動されません。 - 上部の最初のボックスは、ボックスの無限の貯蔵庫として機能します。 <iframe src="https://players.brightcove.net/6058004218001/default_default/index.html?videoId=6386914707112" width="276" height="280" allowfullscreen allow="encrypted-media"></iframe> <PRE><CODE class=" language-jsl">Names Default To Here( 1 ); squares = {{5, 95}}; x = .; y = .; mouseDown = 1; foundOne = 0; nw = New Window( "Example", Graph Box( Frame Size( 200, 200 ), Mousetrap( // find a neighboring square If( mouseDown, x0 = x; y0 = y; If( N Items( squares ), kt = KDTable( Matrix( squares ) ); {row, dist} = kt << K nearest rows( {1, 10}, Matrix( {x0, y0} ) ); If( N Items( row ) & dist[1] < 10, If( row > 1, // keep the one at the top corner Remove From( squares, row[1] ) ); foundOne = 1; ); ); ); mouseDown = 0;, // mouse relesed -> save the square If( foundOne, Insert Into( squares, Eval List( {Eval List( {x, y} )} ) ) ); //reset mouseDown = 1; foundOne = 0; ); Pen Color( "Green" ); Line( {0, 90}, {10, 90}, {10, 100}, {0, 100}, {0, 90} ); // 1st square to start with // dragged square If( Not( Is Missing( x ) ) & foundOne, Line( {x - 5, y - 5}, {x + 5, y - 5}, {x + 5, y + 5}, {x - 5, y + 5}, {x - 5, y - 5} ) ); For( i = 1, i <= N Items( squares ), i++, Pen Color( "Black" ); Eval( {x0, y0} = squares[i]; Polygon( {x0 + 5, y0 - 5}, {x0 + 5, y0 + 5}, {x0 - 5, y0 + 5}, {x0 - 5, y0 - 5} ); ); ); ) );

Comments

There are no comments yet