Browse Source

Pull request #2219: CHART-15510 标签和提示中插入BI的富文本编辑器

Merge in DESIGN/design from ~QINGHUI.LIU/design:release/10.0 to release/10.0

* commit '49d74a8b156a16894441ff7f8a6828bf916c49fc':
  修改参数
  CHART-15510 toJSON
  CHART-15510 完善内容样式界面交互
  CHART-15510 标签和提示中插入BI的富文本编辑器
feature/big-screen
Qinghui.Liu 4 years ago
parent
commit
889f833b53
  1. 130
      designer-chart/src/main/java/com/fr/van/chart/designer/component/VanChartRichEditorPane.java
  2. 248
      designer-chart/src/main/java/com/fr/van/chart/designer/component/VanChartTooltipContentPane.java
  3. 57
      designer-chart/src/main/java/com/fr/van/chart/designer/component/format/VanChartFormatPaneWithCheckBox.java

130
designer-chart/src/main/java/com/fr/van/chart/designer/component/VanChartRichEditorPane.java

@ -0,0 +1,130 @@
package com.fr.van.chart.designer.component;
import com.fr.design.ui.ModernUIPane;
import com.fr.plugin.chart.base.AttrTooltipRichText;
import com.fr.stable.StringUtils;
import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.JSValue;
import com.teamdev.jxbrowser.chromium.events.ScriptContextAdapter;
import com.teamdev.jxbrowser.chromium.events.ScriptContextEvent;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class VanChartRichEditorPane {
private static final String namespace = "Pool";
private static final String variable = "data";
private static final String richEditorPath = "/com/fr/design/editor/rich_editor.html";
private static final String expression = "dispatch()";
private static ModernUIPane<RichEditorModel> richEditorPane;
private static Browser browser;
public static ModernUIPane<RichEditorModel> createRichEditorPane(AttrTooltipRichText richEditor) {
RichEditorModel model = getRichEditorModel(richEditor);
if (richEditorPane == null) {
richEditorPane = initPane(model);
} else if (browser != null) {
updatePane(browser, model);
}
return richEditorPane;
}
public static ModernUIPane<RichEditorModel> initPane(RichEditorModel model) {
return new ModernUIPane.Builder<RichEditorModel>()
.prepare(new ScriptContextAdapter() {
public void onScriptContextCreated(ScriptContextEvent event) {
browser = event.getBrowser();
JSValue ns = browser.executeJavaScriptAndReturnValue("window." + namespace);
ns.asObject().setProperty(variable, model);
}
})
.withEMB(richEditorPath)
.namespace(namespace).build();
}
public static void updatePane(Browser browser, RichEditorModel model) {
JSValue ns = browser.executeJavaScriptAndReturnValue("window." + namespace);
ns.asObject().setProperty(variable, model);
browser.executeJavaScript("window." + namespace + "." + expression);
}
public static RichEditorModel getRichEditorModel(AttrTooltipRichText richText) {
Map<String, String> paramsMap = richText.getParams();
StringBuilder paramsStr = new StringBuilder(StringUtils.EMPTY);
if (paramsMap != null) {
for (Map.Entry<String, String> entry : paramsMap.entrySet()) {
paramsStr.append(entry.getKey()).append(":").append(entry.getValue());
paramsStr.append("-");
}
}
int len = paramsStr.length();
if (len > 0) {
paramsStr.deleteCharAt(len - 1);
}
return new RichEditorModel(richText.getContent(), richText.isAuto(), paramsStr.toString());
}
public static List<String> richParamsParser(String content, Map<String, String> paramsMap) {
if (content == null || paramsMap == null) {
return null;
}
List<String> result = new ArrayList<>();
for (Map.Entry<String, String> entry : paramsMap.entrySet()) {
String param = entry.getValue();
if (content.contains(URLEncoder.encode(param))) {
result.add(param);
}
}
return result;
}
public static class RichEditorModel {
private String content;
private boolean auto;
private String params;
public RichEditorModel(String content, boolean auto, String params) {
this.content = content;
this.auto = auto;
this.params = params;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public boolean isAuto() {
return auto;
}
public void setAuto(boolean auto) {
this.auto = auto;
}
public String getParams() {
return params;
}
public void setParams(String params) {
this.params = params;
}
}
}

248
designer-chart/src/main/java/com/fr/van/chart/designer/component/VanChartTooltipContentPane.java

@ -1,12 +1,19 @@
package com.fr.van.chart.designer.component;
import com.fr.design.beans.BasicBeanPane;
import com.fr.design.dialog.BasicDialog;
import com.fr.design.dialog.DialogActionAdapter;
import com.fr.design.gui.ibutton.UIButton;
import com.fr.design.gui.ibutton.UIButtonGroup;
import com.fr.design.gui.ilable.UILabel;
import com.fr.design.i18n.Toolkit;
import com.fr.design.layout.TableLayout;
import com.fr.design.layout.TableLayoutHelper;
import com.fr.design.ui.ModernUIPane;
import com.fr.general.ComparatorUtils;
import com.fr.plugin.chart.base.AttrTooltipContent;
import com.fr.plugin.chart.base.AttrTooltipRichText;
import com.fr.plugin.chart.base.format.AttrTooltipFormat;
import com.fr.van.chart.designer.TableLayout4VanChartHelper;
import com.fr.van.chart.designer.component.format.CategoryNameFormatPaneWithCheckBox;
import com.fr.van.chart.designer.component.format.ChangedPercentFormatPaneWithCheckBox;
@ -14,15 +21,22 @@ import com.fr.van.chart.designer.component.format.ChangedValueFormatPaneWithChec
import com.fr.van.chart.designer.component.format.PercentFormatPaneWithCheckBox;
import com.fr.van.chart.designer.component.format.SeriesNameFormatPaneWithCheckBox;
import com.fr.van.chart.designer.component.format.ValueFormatPaneWithCheckBox;
import com.fr.van.chart.designer.component.format.VanChartFormatPaneWithCheckBox;
import com.fr.van.chart.designer.style.VanChartStylePane;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.List;
/**
* 内容界面 数据点提示
@ -43,22 +57,28 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
private JPanel centerPane;
private JPanel commonPanel;
private JPanel editorPane;
private VanChartHtmlLabelPane htmlLabelPane;
private VanChartStylePane parent;
private JPanel showOnPane;
private AttrTooltipRichText richText;
public VanChartTooltipContentPane(VanChartStylePane parent, JPanel showOnPane){
this.parent = parent;
this.showOnPane = showOnPane;
this.richText = new AttrTooltipRichText();
this.setLayout(new BorderLayout());
this.add(createLabelContentPane(),BorderLayout.CENTER);
}
private JPanel createLabelContentPane() {
content = new UIButtonGroup<Integer>(new String[]{com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Common"),
com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Custom")});
content = new UIButtonGroup<>(new String[]{
Toolkit.i18nText("Fine-Design_Chart_Common"),
Toolkit.i18nText("Fine-Design_Chart_Custom")
});
initFormatPane(parent, showOnPane);
@ -80,8 +100,8 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
}
}
};
centerPane.add(htmlLabelPane, com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Custom"));
centerPane.add(commonPanel,com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Common"));
centerPane.add(htmlLabelPane, Toolkit.i18nText("Fine-Design_Chart_Custom"));
centerPane.add(commonPanel, Toolkit.i18nText("Fine-Design_Chart_Common"));
double[] column = {f, e};
double[] row = {p,p,p};
@ -90,17 +110,28 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
new Component[]{new UILabel(getLabelContentTitle()),content},
new Component[]{null,centerPane},
};
initContentListener();
JPanel contentPane = TableLayout4VanChartHelper.createGapTableLayoutPane(components, row, column);
return getLabelContentPane(contentPane);
// editorPane = createRichEditorPanel();
JPanel panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.add(contentPane, BorderLayout.CENTER);
// panel.add(editorPane, BorderLayout.SOUTH);
initContentListener();
return getLabelContentPane(panel);
}
protected String getLabelContentTitle () {
return com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Text");
return Toolkit.i18nText("Fine-Design_Report_Text");
}
protected JPanel getLabelContentPane(JPanel contentPane) {
return createTableLayoutPaneWithTitle(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Content"), contentPane);
return createTableLayoutPaneWithTitle(Toolkit.i18nText("Fine-Design_Chart_Content"), contentPane);
}
protected VanChartHtmlLabelPane createHtmlLabelPane() {
@ -117,6 +148,65 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
return TableLayoutHelper.createTableLayoutPane(getPaneComponents(), rowSize, columnSize);
}
private JPanel createRichEditorPanel() {
double p = TableLayout.PREFERRED;
double f = TableLayout.FILL;
double e = TableLayout4VanChartHelper.EDIT_AREA_WIDTH;
double[] columnSize = {f, e};
double[] rowSize = {p, p};
Component[][] components = new Component[][]{
new Component[]{null, null},
new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Chart_Content_Style")), createContentStylePane()}
};
return TableLayoutHelper.createTableLayoutPane(components, rowSize, columnSize);
}
private JComponent createContentStylePane() {
UIButton contentTextArea = new UIButton(Toolkit.i18nText("Fine-Design_Report_RichTextEditor"));
contentTextArea.addMouseListener(new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
fireRichEditor();
}
});
return contentTextArea;
}
private void fireRichEditor() {
final ModernUIPane<VanChartRichEditorPane.RichEditorModel> pane = VanChartRichEditorPane.createRichEditorPane(richText);
BasicDialog dialog = pane.showWindow(new JFrame());
pane.populate(VanChartRichEditorPane.getRichEditorModel(richText));
dialog.addDialogActionListener(new DialogActionAdapter() {
public void doOk() {
VanChartRichEditorPane.RichEditorModel model = pane.update();
String content = model.getContent();
List<String> params = VanChartRichEditorPane.richParamsParser(content, richText.getParams());
populateFormatParams(params);
updateLocalRichText(content, model.isAuto());
SwingUtilities.getWindowAncestor(pane).setVisible(false);
}
public void doCancel() {
SwingUtilities.getWindowAncestor(pane).setVisible(false);
}
});
dialog.setVisible(true);
if (parent != null) {
parent.attributeChanged();
}
}
protected void initFormatPane(VanChartStylePane parent, JPanel showOnPane){
categoryNameFormatPane = new CategoryNameFormatPaneWithCheckBox(parent, showOnPane);
seriesNameFormatPane = new SeriesNameFormatPaneWithCheckBox(parent, showOnPane);
@ -154,13 +244,17 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
private void checkCardPane() {
CardLayout cardLayout = (CardLayout) centerPane.getLayout();
if (content.getSelectedIndex() == 1) {
cardLayout.show(centerPane,com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Custom"));
cardLayout.show(centerPane, Toolkit.i18nText("Fine-Design_Chart_Custom"));
if(isDirty()){
setCustomFormatterText();
setDirty(false);
}
} else {
cardLayout.show(centerPane, com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Common"));
cardLayout.show(centerPane, Toolkit.i18nText("Fine-Design_Chart_Common"));
}
if (editorPane != null) {
editorPane.setVisible(content.getSelectedIndex() == 0);
}
}
@ -187,6 +281,59 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
}
}
protected VanChartFormatPaneWithCheckBox[] getFormatPaneGroup() {
return new VanChartFormatPaneWithCheckBox[]{
categoryNameFormatPane, seriesNameFormatPane,
valueFormatPane, percentFormatPane,
changedValueFormatPane, changedPercentFormatPane
};
}
protected VanChartFormatPaneWithCheckBox getTargetFormatPane(Object param) {
VanChartFormatPaneWithCheckBox[] formatPaneGroup = getFormatPaneGroup();
Object[] params = richText.getParams().values().toArray();
for (int i = 0, len = Math.min(params.length, formatPaneGroup.length); i < len; i++) {
if (ComparatorUtils.equals(params[i], param) && formatPaneGroup[i] != null) {
return formatPaneGroup[i];
}
}
return null;
}
private String getParamsRichText() {
VanChartFormatPaneWithCheckBox[] formatPaneGroup = getFormatPaneGroup();
// todo 获取参数对应的富文本字符串,正确的流程是:
// 在BI的富文本组件中,先清空content,然后addParam,最后读取最新的content,
// 但是当前接口还没开出来,暂时先在本地写死,模拟类似的效果
String[] richTextGroup = new String[]{
"<img alt=\"%24%7BCATEGORY%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:86.095703125px;height: 16px; max-width:86.095703125px;max-height: 16px; min-width:86.095703125px;min-height: 16px\" name=\"%24%7BCATEGORY%7D\" />",
"<img alt=\"%24%7BSERIES%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:63.8828125px;height: 16px; max-width:63.8828125px;max-height: 16px; min-width:63.8828125px;min-height: 16px\" name=\"%24%7BSERIES%7D\" />",
"<img alt=\"%24%7BVALUE%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:61.849609375px;height: 16px; max-width:61.849609375px;max-height: 16px; min-width:61.849609375px;min-height: 16px\" name=\"%24%7BVALUE%7D\" />",
"<img alt=\"%24%7BPERCENT%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:77.39453125px;height: 16px; max-width:77.39453125px;max-height: 16px; min-width:77.39453125px;min-height: 16px\" name=\"%24%7BPERCENT%7D\" />",
"<img alt=\"%24%7BCHANGEDVALUE%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:122.119140625px;height: 16px; max-width:122.119140625px;max-height: 16px; min-width:122.119140625px;min-height: 16px\" name=\"%24%7BCHANGEDVALUE%7D\" />",
"<img alt=\"%24%7BCHANGEDPERCENT%7D\" class=\"rich-editor-param\" style=\"background-color: rgba(54, 133, 242, 0.1);vertical-align: middle; margin: 0 1px; width:137.6640625px;height: 16px; max-width:137.6640625px;max-height: 16px; min-width:137.6640625px;min-height: 16px\" name=\"%24%7BCHANGEDPERCENT%7D\" />"
};
StringBuilder result = new StringBuilder("<p>");
for (int i = 0, len = formatPaneGroup.length; i < len; i++) {
VanChartFormatPaneWithCheckBox formatPane = formatPaneGroup[i];
String paramRichText = richTextGroup[i];
if (formatPane != null && formatPane.isSelected()) {
result.append(paramRichText);
}
}
result.append("</p>");
return result.toString();
}
@Override
protected String title4PopupWindow() {
return "";
@ -211,26 +358,72 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
}
protected void populateFormatPane(AttrTooltipContent attrTooltipContent) {
categoryNameFormatPane.populate(attrTooltipContent.getCategoryFormat());
seriesNameFormatPane.populate(attrTooltipContent.getSeriesFormat());
valueFormatPane.populate(attrTooltipContent.getValueFormat());
percentFormatPane.populate(attrTooltipContent.getPercentFormat());
VanChartFormatPaneWithCheckBox[] formatPaneGroup = getFormatPaneGroup();
AttrTooltipFormat[] formatGroup = new AttrTooltipFormat[]{
attrTooltipContent.getCategoryFormat(),
attrTooltipContent.getSeriesFormat(),
attrTooltipContent.getValueFormat(),
attrTooltipContent.getPercentFormat(),
attrTooltipContent.getChangedValueFormat(),
attrTooltipContent.getChangedPercentFormat()
};
if (changedValueFormatPane != null) {
changedValueFormatPane.populate(attrTooltipContent.getChangedValueFormat());
for (int i = 0, len = formatPaneGroup.length; i < len; i++) {
VanChartFormatPaneWithCheckBox formatPane = formatPaneGroup[i];
AttrTooltipFormat format = formatGroup[i];
if (formatPane != null && format != null) {
formatPane.populate(format);
// 填充面板时,更新富文本编辑器参数
formatPane.updateFormatParams(richText.getParams(), format.getJs());
}
}
if (changedPercentFormatPane != null) {
changedPercentFormatPane.populate(attrTooltipContent.getChangedPercentFormat());
AttrTooltipRichText tooltipRichText = attrTooltipContent.getRichText();
if (tooltipRichText != null) {
updateLocalRichText(tooltipRichText.getContent(), tooltipRichText.isAuto());
setDirty(false);
}
}
private void populateFormatParams(List<String> params) {
if (params == null) {
return;
}
VanChartFormatPaneWithCheckBox[] formatPaneGroup = getFormatPaneGroup();
for (VanChartFormatPaneWithCheckBox formatPane : formatPaneGroup) {
if (formatPane != null) {
formatPane.setSelected(false);
}
}
for (String param : params) {
VanChartFormatPaneWithCheckBox formatPane = getTargetFormatPane(param);
if (formatPane != null) {
formatPane.setSelected(true);
}
}
}
public AttrTooltipContent updateBean() {
AttrTooltipContent attrTooltipContent = createAttrTooltip();
attrTooltipContent.setCommon(content.getSelectedIndex() == 0);
boolean isCommon = content.getSelectedIndex() == 0;
updateFormatPane(attrTooltipContent);
attrTooltipContent.setCommon(isCommon);
if (isDirty() && isCommon) {
updateLocalRichText(getParamsRichText(), false);
setDirty(false);
}
updateFormatPane(attrTooltipContent);
updateTooltipRichText(attrTooltipContent);
updateFormatsWithPaneWidth(attrTooltipContent);
htmlLabelPane.update(attrTooltipContent.getHtmlLabel());
@ -256,6 +449,19 @@ public class VanChartTooltipContentPane extends BasicBeanPane<AttrTooltipContent
}
}
private void updateLocalRichText(String content, boolean isAuto) {
richText.setContent(content);
richText.setAuto(isAuto);
}
private void updateTooltipRichText(AttrTooltipContent attrTooltipContent) {
if (attrTooltipContent != null) {
AttrTooltipRichText tooltipRichText = attrTooltipContent.getRichText();
tooltipRichText.setContent(richText.getContent());
tooltipRichText.setAuto(richText.isAuto());
}
}
/**
* CHART-1295
* 通过格式的面板宽度来判断在自定义js代码中是否显示this.seriesName字符串

57
designer-chart/src/main/java/com/fr/van/chart/designer/component/format/VanChartFormatPaneWithCheckBox.java

@ -6,7 +6,7 @@ import com.fr.design.gui.frpane.UIBubbleFloatPane;
import com.fr.design.gui.ibutton.UIButton;
import com.fr.design.gui.icheckbox.UICheckBox;
import com.fr.design.gui.style.FormatPane;
import com.fr.design.i18n.Toolkit;
import com.fr.plugin.chart.base.format.AttrTooltipFormat;
import com.fr.stable.Constants;
@ -15,8 +15,8 @@ import java.awt.BorderLayout;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.text.Format;
import java.util.Map;
/**
* Created by Mitisky on 16/2/23.
@ -37,41 +37,22 @@ public abstract class VanChartFormatPaneWithCheckBox extends JPanel{
public VanChartFormatPaneWithCheckBox(AbstractAttrNoScrollPane parent, JPanel showOnPane) {
this.parent = parent;
this.showOnPane = showOnPane;
this.isDirty = true;
this.isDirty = false;
this.setLayout(new BorderLayout());
isSelectedBox = new UICheckBox(getCheckBoxText());
formatButton = new UIButton(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Chart_Use_Format"));
this.add(isSelectedBox, BorderLayout.CENTER);
this.add(formatButton, BorderLayout.EAST);
initFormatListener();
isSelectedBox.addMouseListener(new MouseListener() {
@Override
public void mouseClicked(MouseEvent e) {
isSelectedBox = new UICheckBox(getCheckBoxText()) {
protected void attributeChange() {
isDirty = true;
super.attributeChange();
}
};
@Override
public void mousePressed(MouseEvent e) {
}
@Override
public void mouseReleased(MouseEvent e) {
}
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
formatButton = new UIButton(Toolkit.i18nText("Fine-Design_Chart_Use_Format"));
this.add(isSelectedBox, BorderLayout.CENTER);
this.add(formatButton, BorderLayout.EAST);
}
});
initFormatListener();
}
protected abstract String getCheckBoxText();
@ -126,6 +107,14 @@ public abstract class VanChartFormatPaneWithCheckBox extends JPanel{
this.isDirty = isDirty;
}
public boolean isSelected() {
return this.isSelectedBox.isSelected();
}
public void setSelected(boolean isSelected) {
this.isSelectedBox.setSelected(isSelected);
}
public void populate(AttrTooltipFormat tooltipFormat) {
this.isSelectedBox.setSelected(tooltipFormat.isEnable());
this.format = tooltipFormat.getFormat();
@ -135,4 +124,12 @@ public abstract class VanChartFormatPaneWithCheckBox extends JPanel{
tooltipFormat.setFormat(format);
tooltipFormat.setEnable(isSelectedBox.isSelected());
}
public void updateFormatParams(Map<String, String> paramMap, String value) {
String key = this.getCheckBoxText();
if (paramMap != null && !paramMap.containsKey(key)) {
paramMap.put(key, value);
}
}
}

Loading…
Cancel
Save