mirror of https://github.com/anoshenko/rui.git
Updated Readme
This commit is contained in:
Alexei Anoshenko
parent
4f07435637
commit
ec2c5393f1
|
|
@ -1,3 +1,8 @@
|
|||
# v0.19.0
|
||||
|
||||
* Added support of drag-and-drop
|
||||
* Added LoadFile method to View interface
|
||||
|
||||
# v0.18.2
|
||||
|
||||
* fixed typo: GetShadowPropertys -> GetShadowProperty
|
||||
|
|
|
|||
188
README-ru.md
188
README-ru.md
|
|
@ -2287,6 +2287,194 @@ radius необходимо передать nil
|
|||
|
||||
которые прокручивают view, соответственно, в заданную позицию, начало и конец
|
||||
|
||||
### Drag and drop
|
||||
|
||||
#### Свойство "drag-data"
|
||||
|
||||
Для того чтобы сделать View перетаскиваемым ему неоходимо задать свойство "drag-data" (константа DragData).
|
||||
Данное свойство задает множество перетаскиваемых данных в виде ключ:значение и имеет тип:
|
||||
|
||||
map[string]string
|
||||
|
||||
В качестве ключей рекомендуется использовать mime-тип значения.
|
||||
Например, если в перетаскиваемыми данными асляется текст, то ключем должен быть "text/plain", если jpeg-изображение, то "image/jpg" и т.п.
|
||||
Но это только рекомендация, ключем может быть любой текст.
|
||||
|
||||
Пример
|
||||
|
||||
view.Set(rui.DragData, map[string]string {
|
||||
"text/plain": "Drag-and-drop text",
|
||||
"text/html" : "<b>Drag-and-drop<\b> text",
|
||||
"my-key" : "my-data",
|
||||
})
|
||||
|
||||
Получить значение данного свойства можно с помощью функции
|
||||
|
||||
GetDragData(view View, subviewID ...string) map[string]string
|
||||
|
||||
|
||||
#### Свойство "drag-image"
|
||||
|
||||
По умолчанию при перетаскивании перемещается весь View. Часто это бывает не удобно, например если View очень большой.
|
||||
|
||||
Свойство "drag-image" (константа DragImage) типа string позволяет задать картинку, которая будет отображаться вместо View при перетаскивании.
|
||||
В качестве значения "drag-image" задаеться:
|
||||
* Имя изображения в ресурсах приложения
|
||||
* Константа изображения
|
||||
* URL изображения
|
||||
|
||||
Пример
|
||||
|
||||
view.Set(rui.DragImage, "image.png")
|
||||
|
||||
Получить значение данного свойства можно с помощью функции
|
||||
|
||||
func GetDragImage(view View, subviewID ...string) string {
|
||||
|
||||
#### Свойства "drag-image-x-offset" и "drag-image-y-offset"
|
||||
|
||||
Свойства "drag-image-x-offset" и "drag-image-y-offset" (константы DragImageXOffset и DragImageXOffset) типа float задают смещение в пикселях перетаскиваемой картинки относительно курсора мыши.
|
||||
По умолчанию курсор мыши привязан к верхнему левому углу картинки. Данные свойства используются только если задано свойство "drag-image".
|
||||
|
||||
Пример
|
||||
|
||||
view.SetParams(rui.Params {
|
||||
rui.DragImage : "image.png",
|
||||
rui.DragImageXOffset: 10,
|
||||
rui.DragImageYOffset: -15,
|
||||
})
|
||||
|
||||
Получить значение данных свойств можно с помощью функций
|
||||
|
||||
func GetDragImageXOffset(view View, subviewID ...string) float64
|
||||
func GetDragImageYOffset(view View, subviewID ...string) float64
|
||||
|
||||
#### События
|
||||
|
||||
Слушатели событий drag-and-drop имеет следующий формат:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
где DragAndDropEvent расширяет MouseEvent и описана как
|
||||
|
||||
type DragAndDropEvent struct {
|
||||
MouseEvent
|
||||
Data map[string]string
|
||||
Files []FileInfo
|
||||
Target View
|
||||
EffectAllowed int
|
||||
DropEffect int
|
||||
}
|
||||
|
||||
Можно также использовать слушателей следующих форматов:
|
||||
|
||||
* func(DragAndDropEvent)
|
||||
* func(View)
|
||||
* func()
|
||||
|
||||
Поля структуры DragAndDropEvent содержат следующие данные
|
||||
|
||||
* Data - данные перетаскивания заданные свойством "drag-data" перетаскиваемого View и дополнительные данные заданные браузером (например, Chrome добавляет html-код элемента). Данное поле может быть пустым, если перетаскиваются файлы
|
||||
|
||||
* Files - список перетаскиваемых файлов. Используется только событием "drop-event" (для всех других событий этот список равен nil). Также если вы перетаскиваете View, то этот список будет равным nil.
|
||||
|
||||
* Target - принимающий View. Имеет значение отличное от nil, если перетаскиваемый объект находится над View который может принять перетаскиваемый элемент
|
||||
|
||||
* EffectAllowed - показывает список разрешенных эффектов перемещения для курсора мыши: DropEffectCopy, DropEffectMove, DropEffectLink, DropEffectCopyMove, DropEffectCopyLink, DropEffectLinkMove и DropEffectAll.
|
||||
|
||||
* DropEffect - используется только в событии "drag-end" и имеет значение DropEffectCopy, DropEffectMove или DropEffectLink если операция перетаскивания завершилась успешно и DropEffectNone в противоположном случае.
|
||||
|
||||
#### Событие "drop-event"
|
||||
|
||||
Для того чтобы View смог принимать перетаскиваемые данные (View или файлы) вы должны определить для него слушателя события "drop-event" (константа DropEvent). Как и все событий drag-and-drop он имеет следующий формат:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
Система сама ничего не делает с перетаскиваемыми данными. Вы должны добавить код выполняющий какие либо действия с перетаскиваемыми данными. Следующий пример добавляет картинку из ресурсов или из перетаскиваемого файла в ListLayout
|
||||
|
||||
listLayout.Set(rui.DropEvent, func(_ rui.View, event rui.DragAndDropEvent)) {
|
||||
if len(event.Files) > 0 {
|
||||
for _, file := range event.Files {
|
||||
switch file.MimeType {
|
||||
case "image/png", "image/jpeg", "image/gif", "image/svg+xml":
|
||||
listLayout.LoadFile(file, func(file rui.FileInfo, data []byte) {
|
||||
if data != nil {
|
||||
listLayout.Append(rui.NewImageView(session, rui.Params{
|
||||
rui.Source: rui.InlineFileFromData(data, file.MimeType),
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for _, mime := range []string {"image/png", "image/jpeg", "image/gif", "image/svg+xml"} {
|
||||
if src, ok := event.Data[mime]; ok {
|
||||
list.Append(rui.NewImageView(session, rui.Params{
|
||||
rui.Source: src,
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Получить список слушателей данного события можно с помощью функции:
|
||||
|
||||
func GetDropEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
#### События "drag-start-event" и "drag-end-event"
|
||||
|
||||
События "drag-start-event" и "drag-end-event" генерируются только для перетаскиваемого View.
|
||||
Событие "drag-start-event" при старте перетаскивания, а "drag-end-event" по окончании перетаскивания.
|
||||
|
||||
Слушатели данных событий как и всех событий drag-and-drop имеют следующий формат:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
Для данных событий поле Target структуры DragAndDropEvent, всегда равно nil.
|
||||
|
||||
Для события "drag-end-event" используется поле DropEffect структуры DragAndDropEvent.
|
||||
Оно будет иметь значение DropEffectCopy, DropEffectMove или DropEffectLink если операция перетаскивания завершилась успешно и DropEffectNone в противоположном случае.
|
||||
|
||||
Получить список слушателей данных событий можно с помощью функции:
|
||||
|
||||
func GetDragStartEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragEndEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
#### События "drag-enter-event", "drag-leave-event" и "drag-over-event"
|
||||
|
||||
События "drag-enter-event", "drag-leave-event" и "drag-over-event" генерируются только для View приемника перетескиваемого объекта.
|
||||
|
||||
Событие "drag-enter-event" генерируется когда перетаскиваемый оъект входит в область View приемника.
|
||||
|
||||
Событие "drag-leave-event" генерируется когда перетаскиваемый оъект покидает область View приемника.
|
||||
|
||||
Событие "drag-over-event" генерируется c определенным интервалом (несколько раз в секунду) пока перетаскиваемый оъект находится область View приемника.
|
||||
|
||||
Пример, меняем цвет рамки с серой на красную когда перетаскиваемый оъект находится над областью приемника
|
||||
|
||||
view.SetParams(rui.Params{
|
||||
rui.DragEnterEvent: func(view rui.View, event rui.DragAndDropEvent)) {
|
||||
view.Set(rui.Border, rui.NewBorder(rui.Params{
|
||||
rui.Style: rui.SolidLine,
|
||||
rui.ColorTag: rui.Red,
|
||||
rui.Width: rui.Px(1),
|
||||
}))
|
||||
},
|
||||
rui.DragLeaveEvent: func(view rui.View, event rui.DragAndDropEvent)) {
|
||||
view.Set(rui.Border, rui.NewBorder(rui.Params{
|
||||
rui.Style: rui.SolidLine,
|
||||
rui.ColorTag: rui.Gray,
|
||||
rui.Width: rui.Px(1),
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
Получить список слушателей данных событий можно с помощью функции:
|
||||
|
||||
func GetDragEnterEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragLeaveEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragOverEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
## ViewsContainer
|
||||
|
||||
Интерфейс ViewsContainer, реализующий View, описывает контейнер содержащий несколько
|
||||
|
|
|
|||
191
README.md
191
README.md
|
|
@ -2265,6 +2265,197 @@ The following global functions can be used for manual scrolling
|
|||
|
||||
which scroll the view, respectively, to the given position, start and end
|
||||
|
||||
### Drag and drop
|
||||
|
||||
#### "drag-data" property
|
||||
|
||||
To make a View draggable, it is necessary to set the "drag-data" property (DragData constant).
|
||||
This property specifies a set of draggable data in the form of key:value and has the type:
|
||||
|
||||
map[string]string
|
||||
|
||||
It is recommended to use the mime type of the value as keys.
|
||||
For example, if the dragged data contains text, the key should be "text/plain", if it is a jpeg image, then "image/jpg", etc.
|
||||
But this is only a recommendation, the key can be any text.
|
||||
|
||||
Example
|
||||
|
||||
view.Set(rui.DragData, map[string]string {
|
||||
"text/plain": "Drag-and-drop text",
|
||||
"text/html" : "<b>Drag-and-drop<\b> text",
|
||||
"my-key" : "my-data",
|
||||
})
|
||||
|
||||
You can get the value of this property using the function
|
||||
|
||||
GetDragData(view View, subviewID ...string) map[string]string
|
||||
|
||||
|
||||
#### "drag-image" property
|
||||
|
||||
By default, the entire View is moved when dragging. This is often inconvenient, for example if the View is very large.
|
||||
|
||||
The "drag-image" string property (DragImage constant) allows to specify an image that will be displayed instead of the View when dragging.
|
||||
The "drag-image" value is set to:
|
||||
* Image name in the application resources
|
||||
* Image constant
|
||||
* Image URL
|
||||
|
||||
Example
|
||||
|
||||
view.Set(rui.DragImage, "image.png")
|
||||
|
||||
You can get the value of this property using the function
|
||||
|
||||
func GetDragImage(view View, subviewID ...string) string {
|
||||
|
||||
#### The "drag-image-x-offset" and "drag-image-y-offset" properties
|
||||
|
||||
The "drag-image-x-offset" and "drag-image-y-offset" float properties (the DragImageXOffset and DragImageXOffset constants) specify the offset in pixels of the dragged image relative to the mouse cursor.
|
||||
|
||||
By default, the mouse cursor is anchored to the upper left corner of the image. These properties are used only if the "drag-image" property is set.
|
||||
|
||||
Example
|
||||
|
||||
view.SetParams(rui.Params {
|
||||
rui.DragImage : "image.png",
|
||||
rui.DragImageXOffset: 10,
|
||||
rui.DragImageYOffset: -15,
|
||||
})
|
||||
|
||||
You can get the value of these properties using functions
|
||||
|
||||
func GetDragImageXOffset(view View, subviewID ...string) float64
|
||||
func GetDragImageYOffset(view View, subviewID ...string) float64
|
||||
|
||||
#### Events
|
||||
|
||||
Drag-and-drop event listeners have the following format:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
where DragAndDropEvent extends MouseEvent and is declared as
|
||||
|
||||
type DragAndDropEvent struct {
|
||||
MouseEvent
|
||||
Data map[string]string
|
||||
Files []FileInfo
|
||||
Target View
|
||||
EffectAllowed int
|
||||
DropEffect int
|
||||
}
|
||||
|
||||
You can also use listeners of the following formats:
|
||||
|
||||
* func(DragAndDropEvent)
|
||||
* func(View)
|
||||
* func()
|
||||
|
||||
The fields of the DragAndDropEvent structure contain the following data
|
||||
|
||||
* Data - drag data specified by the "drag-data" property of the dragged View and additional data specified by the browser (for example, Chrome adds the html code of the element). This field can be empty if files are dragged
|
||||
|
||||
* Files - a list of files to drag. Used only by the "drop-event" event (for all other events, this list is nil). Also, if you drag a View, this list will be nil.
|
||||
|
||||
* Target - the receiving View. Has a value different from nil if the dragged object is above a View that can accept the dragged element
|
||||
|
||||
* EffectAllowed - shows a list of allowed mouse cursor move effects: DropEffectCopy, DropEffectMove, DropEffectLink, DropEffectCopyMove, DropEffectCopyLink, DropEffectLinkMove and DropEffectAll.
|
||||
|
||||
* DropEffect - used only in the "drag-end" event and has a value of DropEffectCopy, DropEffectMove or DropEffectLink if the drag operation was successful and DropEffectNone otherwise.
|
||||
|
||||
#### The "drop-event" event
|
||||
|
||||
In order for the View to accept dragged data (Views or files), you must define a "drop-event" (DropEvent constant) event listener for it.
|
||||
Like all drag-and-drop events, it has the following format:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
The system itself does nothing with the dragged data. You must add code that performs some actions with the dragged data.
|
||||
The following example adds an image from resources or from a dragged file to the ListLayout
|
||||
|
||||
listLayout.Set(rui.DropEvent, func(_ rui.View, event rui.DragAndDropEvent)) {
|
||||
if len(event.Files) > 0 {
|
||||
for _, file := range event.Files {
|
||||
switch file.MimeType {
|
||||
case "image/png", "image/jpeg", "image/gif", "image/svg+xml":
|
||||
listLayout.LoadFile(file, func(file rui.FileInfo, data []byte) {
|
||||
if data != nil {
|
||||
listLayout.Append(rui.NewImageView(session, rui.Params{
|
||||
rui.Source: rui.InlineFileFromData(data, file.MimeType),
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for _, mime := range []string {"image/png", "image/jpeg", "image/gif", "image/svg+xml"} {
|
||||
if src, ok := event.Data[mime]; ok {
|
||||
list.Append(rui.NewImageView(session, rui.Params{
|
||||
rui.Source: src,
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
You can get a list of listeners for a given event using the function:
|
||||
|
||||
func GetDropEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
#### Events "drag-start-event" and "drag-end-event"
|
||||
|
||||
Events "drag-start-event" and "drag-end-event" are generated only for the dragged View.
|
||||
Event "drag-start-event" when dragging starts, and "drag-end-event" when dragging ends.
|
||||
|
||||
Listeners for these events, like all drag-and-drop events, have the following format:
|
||||
|
||||
func(View, DragAndDropEvent)
|
||||
|
||||
For these events, the Target field of the DragAndDropEvent structure is always nil.
|
||||
|
||||
For the "drag-end-event" event, the DropEffect field of the DragAndDropEvent structure is used.
|
||||
It will have the value DropEffectCopy, DropEffectMove or DropEffectLink if the drag operation was successful and DropEffectNone otherwise.
|
||||
|
||||
You can get a list of listeners for these events using the function:
|
||||
|
||||
func GetDragStartEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragEndEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
#### Events "drag-enter-event", "drag-leave-event" and "drag-over-event"
|
||||
|
||||
Events "drag-enter-event", "drag-leave-event" and "drag-over-event" are generated only for the receiver View of the dragged object.
|
||||
|
||||
Event "drag-enter-event" is generated when the dragged object enters the receiver View area.
|
||||
|
||||
Event "drag-leave-event" is generated when the dragged object leaves the receiver View area.
|
||||
|
||||
Event "drag-over-event" is generated at a certain interval (several times per second) while the dragged object is in the receiver View area.
|
||||
|
||||
Example, changing the border color from gray to red when the dragged object is over the receiver area
|
||||
|
||||
view.SetParams(rui.Params{
|
||||
rui.DragEnterEvent: func(view rui.View, event rui.DragAndDropEvent)) {
|
||||
view.Set(rui.Border, rui.NewBorder(rui.Params{
|
||||
rui.Style: rui.SolidLine,
|
||||
rui.ColorTag: rui.Red,
|
||||
rui.Width: rui.Px(1),
|
||||
}))
|
||||
},
|
||||
rui.DragLeaveEvent: func(view rui.View, event rui.DragAndDropEvent)) {
|
||||
view.Set(rui.Border, rui.NewBorder(rui.Params{
|
||||
rui.Style: rui.SolidLine,
|
||||
rui.ColorTag: rui.Gray,
|
||||
rui.Width: rui.Px(1),
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
You can get a list of listeners for these events using the function:
|
||||
|
||||
func GetDragEnterEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragLeaveEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
func GetDragOverEventListeners(view View, subviewID ...string) []func(View, DragAndDropEvent)
|
||||
|
||||
## ViewsContainer
|
||||
|
||||
The ViewsContainer interface, which implements View, describes a container that contains
|
||||
|
|
|
|||
|
|
@ -400,20 +400,10 @@ func dragAndDropHtml(view View, buffer *strings.Builder) {
|
|||
viewEventsHtml[DragAndDropEvent](view, []PropertyName{DragEndEvent, DragEnterEvent, DragLeaveEvent}, buffer)
|
||||
}
|
||||
|
||||
session := view.Session()
|
||||
if img, ok := stringProperty(view, DragImage, session); ok && img != "" {
|
||||
img = strings.Trim(img, " \t")
|
||||
if img[0] == '@' {
|
||||
if img, ok = session.ImageConstant(img[1:]); ok {
|
||||
buffer.WriteString(` data-drag-image="`)
|
||||
buffer.WriteString(img)
|
||||
buffer.WriteString(`" `)
|
||||
}
|
||||
} else {
|
||||
buffer.WriteString(` data-drag-image="`)
|
||||
buffer.WriteString(img)
|
||||
buffer.WriteString(`" `)
|
||||
}
|
||||
if img := GetDragImage(view); img != "" {
|
||||
buffer.WriteString(` data-drag-image="`)
|
||||
buffer.WriteString(img)
|
||||
buffer.WriteString(`" `)
|
||||
}
|
||||
|
||||
if f := GetDragImageXOffset(view); f != 0 {
|
||||
|
|
@ -492,13 +482,38 @@ func GetDragData(view View, subviewID ...string) map[string]string {
|
|||
return result
|
||||
}
|
||||
|
||||
// GetDragImageXOffset returns the horizontal offset in pixels within the drag feedback image..
|
||||
// GetDragImage returns the drag feedback image.
|
||||
// If the second argument (subviewID) is not specified or it is "" then a value from the first argument (view) is returned.
|
||||
func GetDragImage(view View, subviewID ...string) string {
|
||||
if view = getSubview(view, subviewID); view != nil {
|
||||
value := view.getRaw(DragImage)
|
||||
if value == nil {
|
||||
value = valueFromStyle(view, DragImage)
|
||||
}
|
||||
|
||||
if value != nil {
|
||||
if img, ok := value.(string); ok {
|
||||
img = strings.Trim(img, " \t")
|
||||
if img != "" && img[0] == '@' {
|
||||
if img, ok = view.Session().ImageConstant(img[1:]); ok {
|
||||
return img
|
||||
}
|
||||
} else {
|
||||
return img
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
// GetDragImageXOffset returns the horizontal offset in pixels within the drag feedback image.
|
||||
// If the second argument (subviewID) is not specified or it is "" then a value from the first argument (view) is returned.
|
||||
func GetDragImageXOffset(view View, subviewID ...string) float64 {
|
||||
return floatStyledProperty(view, subviewID, DragImageXOffset, 0)
|
||||
}
|
||||
|
||||
// GetDragImageYOffset returns the vertical offset in pixels within the drag feedback image..
|
||||
// GetDragImageYOffset returns the vertical offset in pixels within the drag feedback image.
|
||||
// If the second argument (subviewID) is not specified or it is "" then a value from the first argument (view) is returned.
|
||||
func GetDragImageYOffset(view View, subviewID ...string) float64 {
|
||||
return floatStyledProperty(view, subviewID, DragImageYOffset, 0)
|
||||
|
|
|
|||
Loading…
Reference in New Issue