私は基本的に、私が試している RAPPID 環境で JointJS 形状の色を変更したいと考えています。
私がこれまでに達成したことと達成したいことについての背景を 次に示します。基本的に、この ChristmasTree オブジェクトを構築する svg 文字列は、ツリーのパス (svg パス要素) であり、複数の装飾 (4 つの svg 円/楕円には、ID と色の変更に使用できると想定されるクラスがあります) です。
svg 文字列内の style attr を介して装飾の初期値を設定しました。これを左側の RAPPID メニューに配置すると、ユーザーはその 1 つのクリスマス ツリーに赤いボールをドラッグできます。 質問 ###1: しかし、緑色のボールを持つ別のメイン オブジェクトを作成せずに、左側のメニューに 2 つ目の ChristmasTree シェイプを配置したいのですが、どうすればこれを実現できますか? 以下のコードでは、christmas_tree_style_2は .ornament クラスを 'fill': "#00ff00"でオーバーライドする必要がありますが、そうではありません (左側のメニューではまだ赤です)? 実際、christmas_tree_style_1も、青いボール'fill': "#0000ff"でオーバーライドしようとしましたが、まだ赤です。シェイプの左ナビゲーション オーバーライドを実現するにはどうすればよいですか?
質問 ###2: 以前の問題を解決するのを手伝ってくれたふりをしてください。左側のメニュー ナビゲーションからメインの RAPPID コンテンツ エリアに 2 つの複数色の ChristmasTree をドラッグ アンド ドロップできます。インスペクターを使用して色を動的に変更したいと思います。すべての要素の RAPPID 右ナビゲーション メニューに表示されるカラー インスペクターを追加しました。 index: 2 } しかし、オーナメントの色を動的に変更するイベントを作成する方法がわかりません。何か案が？ありがとう！
以下は、コードの重要な部分です。
また、ここに実際の作業例があります（ただし、左ナビゲーションの初期オーバーライドと右ナビゲーションのインスペクターのカラーオーバーライドは機能しないため、2つの質問があります）： http ://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html （申し訳ありませんJSFiddle に追加する rappid.js の CDN が見つからなかったため、フォルダーをサイトにアップロードする方が簡単でした)。私の質問に該当するファイルは app.js と rappid-custom-shapes.js です。
#//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({
markup: ChristmasTreeSVGstr,
defaults: joint.util.deepSupplement({
type: "basic",
name: 'Initial Christmas Tree label text',
size: {
width: 20,
height: 20
},
attrs: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
width: 10,
height: 15
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
}, joint.dia.Element.prototype.defaults)
});
//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#0000ff",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'blue',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "yellow",
'stroke': "yellow",
'stroke-width': '5px',
'fill-opacity': 1
}
}
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');
//add it to the inspector
function createInspector(cellView) {
if (!inspector || inspector.options.cellView !== cellView) {
if (inspector) {
// Set unsaved changes to the model and clean up the old inspector if there was one.
inspector.updateCell();
inspector.remove();
}
//if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
//how to determine different shapes?
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
'ornament_fill': { label: 'Color of christmas-tree-ornaments fill', type: 'color', group: 'generalinfo', index: 2 },
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
$('.inspector-container').html(inspector.render().el);
}
}