#gojs
#gojs
Вопрос:
я играю с gojs именно в планировщике этажей, как на этом изображении : 
Мой вопрос заключается в том, как добавить новую пользовательскую форму в раздел палитры слева, чтобы я мог использовать ее как круглый стол с двумя или четырьмя стульями, после проверки кода я нашел часть, которая отвечает за их рисование следующим образом:
// Node Data Array for Furniture Palette
FURNITURE_NODE_DATA_ARRAY = [
{
category: "MultiPurposeNode",
key: "MultiPurposeNode",
caption: "Multi Purpose Node",
color: "#ffffff",
stroke: '#000000',
name: "Writable Node",
type: "Writable Node",
shape: "Rectangle",
text: "Write here",
width: 60,
height: 60,
notes: ""
},
{
key: "roundTable",
color: "#ffffff",
stroke: '#000000',
caption: "Round Table",
type: "Round Table",
shape: "Ellipse",
width: 61,
height: 61,
notes: ""
},
{
key: "armChair",
color: "#ffffff",
stroke: '#000000',
caption: "Arm Chair",
type: "Arm Chair",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30",
width: 45,
height: 45,
notes: ""
},
{
key: "sofaMedium",
color: "#ffffff",
stroke: "#000000",
caption: "Sofa",
type: "Sofa",
geo: "F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35",
height: 45,
width: 90,
notes: ""
},
{
key: "sink",
color: "#ffffff",
stroke: '#000000',
caption: "Sink",
type: "Sink",
geo: "F1 M0 0 L40 0 40 40 0 40 0 0z M5 7.5 L18.5 7.5 M 21.5 7.5 L35 7.5 35 35 5 35 5 7.5 M 15 21.25 A 5 5 180 1 0 15 21.24 M23 3.75 A 3 3 180 1 1 23 3.74 M21.5 6.25 L 21.5 12.5 18.5 12.5 18.5 6.25 M15 3.75 A 1 1 180 1 1 15 3.74 M 10 4.25 L 10 3.25 13 3.25 M 13 4.25 L 10 4.25 M27 3.75 A 1 1 180 1 1 27 3.74 M 26.85 3.25 L 30 3.25 30 4.25 M 26.85 4.25 L 30 4.25",
width: 27,
height: 27,
notes: ""
},
{
key: "doubleSink",
color: "#ffffff",
stroke: '#000000',
caption: "Double Sink",
type: "Double Sink",
geo: "F1 M0 0 L75 0 75 40 0 40 0 0 M5 7.5 L35 7.5 35 35 5 35 5 7.5 M44 7.5 L70 7.5 70 35 40 35 40 9 M15 21.25 A5 5 180 1 0 15 21.24 M50 21.25 A 5 5 180 1 0 50 21.24 M40.5 3.75 A3 3 180 1 1 40.5 3.74 M40.5 3.75 L50.5 13.75 47.5 16.5 37.5 6.75 M32.5 3.75 A 1 1 180 1 1 32.5 3.74 M 27.5 4.25 L 27.5 3.25 30.5 3.25 M 30.5 4.25 L 27.5 4.25 M44.5 3.75 A 1 1 180 1 1 44.5 3.74 M 44.35 3.25 L 47.5 3.25 47.5 4.25 M 44.35 4.25 L 47.5 4.25",
height: 27,
width: 52,
notes: ""
},
{
key: "toilet",
color: "#ffffff",
stroke: '#000000',
caption: "Toilet",
type: "Toilet",
geo: "F1 M0 0 L25 0 25 10 0 10 0 0 M20 10 L20 15 5 15 5 10 20 10 M5 15 Q0 15 0 25 Q0 40 12.5 40 Q25 40 25 25 Q25 15 20 15",
width: 25,
height: 35,
notes: ""
},
{
key: "shower",
color: "#ffffff",
stroke: '#000000',
caption: "Shower/Tub",
type: "Shower/Tub",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M35 15 L35 55 5 55 5 15 Q5 5 20 5 Q35 5 35 15 M22.5 20 A2.5 2.5 180 1 1 22.5 19.99",
width: 45,
height: 75,
notes: ""
},
{
key: "bed",
color: "#ffffff",
stroke: '#000000',
caption: "Bed",
type: "Bed",
geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M 7.5 2.5 L32.5 2.5 32.5 17.5 7.5 17.5 7.5 2.5 M0 20 L40 20 M0 25 L40 25",
width: 76.2,
height: 101.6,
notes: ""
},
{
key: "staircase",
color: "#ffffff",
stroke: '#000000',
caption: "Staircase",
type: "Staircase",
geo: "F1 M0 0 L 0 100 250 100 250 0 0 0 M25 100 L 25 0 M 50 100 L 50 0 M 75 100 L 75 0 M 100 100 L 100 0 M 125 100 L 125 0 M 150 100 L 150 0 M 175 100 L 175 0 M 200 100 L 200 0 M 225 100 L 225 0",
width: 125,
height: 50,
notes: ""
},
{
key: "stove",
color: "#ffffff",
stroke: '#000000',
caption: "Stove",
type: "Stove",
geo: "F1 M 0 0 L 0 100 100 100 100 0 0 0 M 30 15 A 15 15 180 1 0 30.01 15 M 70 15 A 15 15 180 1 0 70.01 15"
"M 30 55 A 15 15 180 1 0 30.01 55 M 70 55 A 15 15 180 1 0 70.01 55",
width: 75,
height: 75,
notes: ""
},
{
key: "diningTable",
color: "#ffffff",
stroke: '#000000',
caption: "Dining Table",
type: "Dining Table",
geo: "F1 M 0 0 L 0 100 200 100 200 0 0 0 M 25 0 L 25 -10 75 -10 75 0 M 125 0 L 125 -10 175 -10 175 0 M 200 25 L 210 25 210 75 200 75 M 125 100 L 125 110 L 175 110 L 175 100 M 25 100 L 25 110 75 110 75 100 M 0 75 -10 75 -10 25 0 25",
width: 125,
height: 62.5,
notes: ""
}
];
я много искал «гео», но ничего не нашел, так как нарисовать новую, есть ли какие-нибудь видео или учебные пособия для этого?
Еще один вопрос, как я могу удалить текст по умолчанию в левом верхнем углу: 
Заранее спасибо
Ответ №1:
Я разработчик, который создал этот образец.
Во-первых, вас может заинтересовать Floorplanner версии 2, который можно найти здесь
Если вы хотите создать свои собственные фигуры для узлов мебели, вам нужно будет добавить новую запись в nodeDataArray палитры furniturePalette и соответствующим образом указать свойство «geo». Свойство «geo» — это настраиваемое свойство данных, которое привязано к свойству «geometryString» узлов мебели. Это форматированная строка геометрии, о которой вы можете узнать больше здесь: https://gojs.net/latest/intro/geometry.html
Если вы не понимаете привязки данных, вам следует прочитать о них здесь: https://gojs.net/latest/intro/dataBinding.html
Удаление или изменение текста дескриптора окна палитры так же просто, как изменение содержимого HTML-файла.
Комментарии:
1. Привет, Райан.. Я хотел бы поблагодарить вас за ваш ответ, я обнаружил, что пути в свойстве «geo» — это просто пути svg, поэтому это не имеет большого значения, но я хотел бы спросить вас, возможно ли сделать стулья на каждом столе динамическими, как это изображение в нашей старой системе ( imgur.com/sY8BHus )количество стульев увеличивается при нажатии на плюс и наоборот. В этом примере мы использовали Fabricjs, но столкнулись с множеством проблем, если это невозможно в gojs, знаете ли вы, какие-либо другие библиотеки могут помочь нам в этом вопросе.. Заранее спасибо
2. Я полагаю, что это возможно с помощью GoJS, хотя это потребует некоторой работы, а также некоторых решений относительно того, как добавляются «стулья», где они добавляются, что происходит, когда на «столе» больше нет места и так далее. Не вдаваясь в подробности, вы могли бы иметь кнопку как часть selectionAdornmentTemplate для узла, которая при нажатии добавляет «стул» к узлу (возможно, это может быть просто go. Элемент формы в nodeTemplate). Конечно, если вы хотите, чтобы это сохранялось, вам нужно сохранить его в model data . gojs.net/latest/samples/adornmentButtons.html
3. Кажется, что в нашем случае это не сработает, но я хочу задать вам последний вопрос: когда я пытаюсь добавить новую фигуру в палитру, она выглядит как без фона и не может изменить ее цвет или обработать ее, вы можете ясно увидеть проблему в этом видео ( loom.com/share/95bd404e747b4b03adef8812fbb59660 )это произошло, когда я использую svg или даже геометрический путь для изображения, кажется, что в моем коде чего-то не хватает, и я не могу этого понять, можете ли вы помочь мне с правильным способом включения нового изображения в палитру, потому что ссылка, которую вы указали выше, неясна, и еще раз спасибо