forked from mbk-lab/rui_orig
2
0
Fork 0

Added SvgImageView

This commit is contained in:
Alexei Anoshenko 2023-01-24 17:06:36 -05:00
parent b99c39f947
commit 42b34ac4df
7 changed files with 227 additions and 8 deletions

View File

@ -1,11 +1,15 @@
# v.11.0 # v0.12.0
* Added SvgImageView
# v0.11.0
* Added "tabindex", "order", "column-fill", "column-span-all", "background-blend-mode", and "mix-blend-mode" properties * Added "tabindex", "order", "column-fill", "column-span-all", "background-blend-mode", and "mix-blend-mode" properties
* Added GetTabIndex, GetOrder, GetColumnFill, IsColumnSpanAll, GetBackgroundBlendMode, and GetMixBlendMode functions * Added GetTabIndex, GetOrder, GetColumnFill, IsColumnSpanAll, GetBackgroundBlendMode, and GetMixBlendMode functions
* ClientItem, SetClientItem, and RemoveAllClientItems method added to Session interface * ClientItem, SetClientItem, and RemoveAllClientItems method added to Session interface
* PropertyWithTag method of DataObject interface renamed to PropertyByTag * PropertyWithTag method of DataObject interface renamed to PropertyByTag
# v.10.0 # v0.10.0
* The Canvas.TextWidth method replaced by Canvas.TextMetrics * The Canvas.TextWidth method replaced by Canvas.TextMetrics
* Added support of WebAssembly * Added support of WebAssembly

View File

@ -2489,7 +2489,7 @@ ColumnLayout является контейнером, реализующим и
"column-count" равно 0 и устанавливает ширину колонки. "column-count" равно 0 и устанавливает ширину колонки.
ВАЖНО! В качестве значения "column-width" нельзя использовать проценты (т.е. если вы зададите ВАЖНО! В качестве значения "column-width" нельзя использовать проценты (т.е. если вы зададите
значение в процентах, то это проигнорируется системой) значение в процентах, то это будет проигнорировано системой)
Получить значение данного свойства можно с помощью функции Получить значение данного свойства можно с помощью функции
@ -2943,6 +2943,39 @@ NaturalSize() возвращает исходную ширину и высоту
func GetImageViewVerticalAlign(view View, subviewID ...string) int func GetImageViewVerticalAlign(view View, subviewID ...string) int
func GetImageViewHorizontalAlign(view View, subviewID ...string) int func GetImageViewHorizontalAlign(view View, subviewID ...string) int
## SvgImageView
Элемент SvgImageView расширяющий интерфейс View предназначен для вывода svg изображений.
Для создания SvgImageView используется функция:
func NewSvgImageView(session Session, params Params) ImageView
Выводимое изображение задается string Свойством "content" (константа Content).
В качестве значения данному свойству может присваиваться
* имя изображения в папке images ресурсов;
* url изображения;
* содержимое svg изображения.
Примеры
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
rui.Set(rootView, "iconView", rui.Content, `<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-499.08 -247.12)">
<path d="m508.08 249.12 14 14-14 14" fill="none" stroke="#0f0" stroke-linecap="round" stroke-width="1px"/>
</g>
</svg>`)
Независимо от того как вы определили свойство "content" на клиент всегда передается содержимое svg изображения. Например, если вы задали изображение следующим образом
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
то программа сначала загрузит в память содержимое файла "icon.svg",
а затем передаст клиенту это содержимое в качестве значения свойства "content".
Это позволяет включать svg изображения в ресурсы WebAssembly приложения.
## EditView ## EditView
Элемент EditView является редактором теста и расширяет интерфейс View. Элемент EditView является редактором теста и расширяет интерфейс View.

View File

@ -2914,6 +2914,39 @@ The following functions can be used to retrieve ImageView property values:
func GetImageViewVerticalAlign(view View, subviewID ...string) int func GetImageViewVerticalAlign(view View, subviewID ...string) int
func GetImageViewHorizontalAlign(view View, subviewID ...string) int func GetImageViewHorizontalAlign(view View, subviewID ...string) int
## SvgImageView
The SvgImageView element extending the View interface is designed to display svg images.
To create an SvgImageView function is used:
func NewSvgImageView(session Session, params Params) ImageView
The image to be displayed is specified by the string property "content" (constant Content).
The value of this property can be assigned
* the image file name in the images folder of the resources;
* image url;
* content of the svg image.
Examples
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
rui.Set(rootView, "iconView", rui.Content, `<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-499.08 -247.12)">
<path d="m508.08 249.12 14 14-14 14" fill="none" stroke="#0f0" stroke-linecap="round" stroke-width="1px"/>
</g>
</svg>`)
Regardless of how you determined the property of "Content" to the client is always transmitted the contents of the SVG image. For example, if you set the image as follows
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
then the program will first upload the contents of the "icon.svg" file to the memory,
and then transmit this contents to the client as the value of the "content" property.
This allows you to include SVG images in the resources of a WebAssembly application.
## EditView ## EditView
The EditView element is a test editor and extends the View interface. The EditView element is a test editor and extends the View interface.

View File

@ -115,13 +115,14 @@ ul:focus {
display: grid; display: grid;
} }
.ruiSvgImageView {
display: grid;
}
.ruiListView { .ruiListView {
overflow: auto; overflow: auto;
/*
display: flex;
align-content: stretch;
*/
} }
/* /*
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { body {

View File

@ -77,7 +77,7 @@ func getStartPage(buffer *strings.Builder, params AppParams, addScripts string)
</head> </head>
<body> <body>
<div class="ruiRoot" id="ruiRootView"></div> <div class="ruiRoot" id="ruiRootView"></div>
<div class="ruiPopupLayer" id="ruiPopupLayer" style="visibility: hidden;" onclick="clickOutsidePopup(event)"></div> <div class="ruiPopupLayer" id="ruiPopupLayer" style="visibility: hidden; isolation: isolate;" onclick="clickOutsidePopup(event)"></div>
<a id="ruiDownloader" download style="display: none;"></a> <a id="ruiDownloader" download style="display: none;"></a>
</body>`) </body>`)
} }

147
svgImageView.go Normal file
View File

@ -0,0 +1,147 @@
package rui
import (
"io"
"net/http"
"strings"
)
// SvgImageView - image View
type SvgImageView interface {
View
}
type svgImageViewData struct {
viewData
}
// NewSvgImageView create new SvgImageView object and return it
func NewSvgImageView(session Session, params Params) SvgImageView {
view := new(svgImageViewData)
view.init(session)
setInitParams(view, params)
return view
}
func newSvgImageView(session Session) View {
return NewSvgImageView(session, nil)
}
// Init initialize fields of imageView by default values
func (imageView *svgImageViewData) init(session Session) {
imageView.viewData.init(session)
imageView.tag = "SvgImageView"
imageView.systemClass = "ruiSvgImageView"
}
func (imageView *svgImageViewData) String() string {
return getViewString(imageView)
}
func (imageView *svgImageViewData) normalizeTag(tag string) string {
tag = strings.ToLower(tag)
switch tag {
case Source, "source":
tag = Content
case VerticalAlign:
tag = CellVerticalAlign
case HorizontalAlign:
tag = CellHorizontalAlign
}
return tag
}
func (imageView *svgImageViewData) Remove(tag string) {
imageView.remove(imageView.normalizeTag(tag))
}
func (imageView *svgImageViewData) remove(tag string) {
imageView.viewData.remove(tag)
if imageView.created {
switch tag {
case Content:
updateInnerHTML(imageView.htmlID(), imageView.session)
}
}
}
func (imageView *svgImageViewData) Set(tag string, value any) bool {
return imageView.set(imageView.normalizeTag(tag), value)
}
func (imageView *svgImageViewData) set(tag string, value any) bool {
if value == nil {
imageView.remove(tag)
return true
}
switch tag {
case Content:
if text, ok := value.(string); ok {
imageView.properties[Content] = text
if imageView.created {
updateInnerHTML(imageView.htmlID(), imageView.session)
}
imageView.propertyChangedEvent(Content)
return true
}
notCompatibleType(Source, value)
return false
default:
return imageView.viewData.set(tag, value)
}
}
func (imageView *svgImageViewData) Get(tag string) any {
return imageView.viewData.get(imageView.normalizeTag(tag))
}
func (imageView *svgImageViewData) htmlTag() string {
return "div"
}
func (imageView *svgImageViewData) htmlSubviews(self View, buffer *strings.Builder) {
if value := imageView.getRaw(Content); value != nil {
if content, ok := value.(string); ok && content != "" {
if image, ok := resources.images[content]; ok && image.fs != nil {
if data, err := image.fs.ReadFile(image.path); err == nil {
buffer.WriteString(string(data))
return
} else {
DebugLog(err.Error())
}
}
if strings.HasPrefix(content, "http://") || strings.HasPrefix(content, "https://") {
resp, err := http.Get(content)
if err == nil {
defer resp.Body.Close()
if body, err := io.ReadAll(resp.Body); err == nil {
buffer.WriteString(string(body))
return
}
}
DebugLog(err.Error())
}
buffer.WriteString(content)
}
}
}
// GetSvgImageViewVerticalAlign return the vertical align of an SvgImageView subview: TopAlign (0), BottomAlign (1), CenterAlign (2)
// If the second argument (subviewID) is not specified or it is "" then a left position of the first argument (view) is returned
func GetSvgImageViewVerticalAlign(view View, subviewID ...string) int {
return enumStyledProperty(view, subviewID, CellVerticalAlign, LeftAlign, false)
}
// GetSvgImageViewHorizontalAlign return the vertical align of an SvgImageView subview: LeftAlign (0), RightAlign (1), CenterAlign (2)
// If the second argument (subviewID) is not specified or it is "" then a left position of the first argument (view) is returned
func GetSvgImageViewHorizontalAlign(view View, subviewID ...string) int {
return enumStyledProperty(view, subviewID, CellHorizontalAlign, LeftAlign, false)
}

View File

@ -30,6 +30,7 @@ var viewCreators = map[string]func(Session) View{
"ListView": newListView, "ListView": newListView,
"CanvasView": newCanvasView, "CanvasView": newCanvasView,
"ImageView": newImageView, "ImageView": newImageView,
"SvgImageView": newSvgImageView,
"TableView": newTableView, "TableView": newTableView,
"AudioPlayer": newAudioPlayer, "AudioPlayer": newAudioPlayer,
"VideoPlayer": newVideoPlayer, "VideoPlayer": newVideoPlayer,